/* =========================================================================
   Personalizzazioni nostre, caricate DOPO il tema.
   Il CSS del tema (theme.css) non si modifica: le differenze stanno qui.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Disposizione dell'apertura.
   Il tema mette la foto a sinistra (40%) e i contenuti a destra (60%).
   Queste classi, applicate dal pannello, ne cambiano la disposizione.
   ------------------------------------------------------------------------- */

.cavani_tm_mainpart--foto-destra .author_image { left: auto; right: 0; }
.cavani_tm_mainpart--foto-destra .main_content { right: auto; left: 0; }

.cavani_tm_mainpart--foto-nascosta .author_image { display: none; }
.cavani_tm_mainpart--foto-nascosta .main_content { width: 100%; left: 0; right: 0; }

/* Sotto i 1040px il tema nasconde comunque la foto e allarga i contenuti:
   la si lascia fare, queste regole non devono interferire. */
@media (max-width: 1040px) {
    .cavani_tm_mainpart--foto-destra .main_content,
    .cavani_tm_mainpart--foto-nascosta .main_content { width: 100%; left: 0; right: 0; }
}

/* Con la foto a destra il testo dell'apertura resta incollato al bordo
   sinistro: il tema prevede solo il rientro interno verso la foto. */
.cavani_tm_mainpart--foto-destra .cavani_tm_home .content { padding-left: 60px; padding-right: 40px; }
@media (max-width: 1040px) {
    .cavani_tm_mainpart--foto-destra .cavani_tm_home .content { padding: 0 20px; }
}

/* La sezione "Chi sono" mostra solo la biografia: il testo occupa tutta la
   larghezza (nel tema era una colonna al 40% affiancata alla tabella dati). */
.cavani_tm_about .biography .left { width: 100%; margin-bottom: 0; }
/* Spazio fra i paragrafi della biografia, per separarli visivamente. */
.cavani_tm_about .biography .left p { margin-bottom: 22px; }
.cavani_tm_about .biography .left p:last-child { margin-bottom: 0; }

/* Menu di navigazione sempre leggibile. Il tema colora di bianco la voce
   "attiva" e quella in hover, contando su una barretta scura scorrevole (.ccc)
   che in questo contesto non si posiziona: "Home" restava bianca su bianco.
   Disattiviamo la barretta e teniamo il testo scuro, con hover attenuato. */
.cavani_tm_header .menu .ccc { display: none; }
.cavani_tm_header .menu ul li a,
.cavani_tm_header .menu ul li.active a { color: #333; }
.cavani_tm_header .menu ul li a:hover { color: #7d7789; }

/* Sezione "Cineteca": riusa lo stile della biografia per il testo introduttivo;
   il pulsante che apre l'archivio va staccato dal testo. */
#cineteca .cavani_tm_button { margin-top: 10px; }

/* Copertina del libro nel popup della bibliografia: formato verticale (libro),
   flottante a sinistra del testo. Il tema la mostrerebbe come banner largo. */
.cavani_tm_modalbox .news_popup_informations .image {
    width: 170px; height: 250px; float: left; margin: 4px 26px 14px 0;
    position: relative; border-radius: 6px; overflow: hidden;
    box-shadow: 0 6px 22px rgba(15,27,45,.14);
}
.cavani_tm_modalbox .news_popup_informations .image > img { display: none; }
.cavani_tm_modalbox .news_popup_informations .image .main {
    position: absolute; inset: 0;
    background-repeat: no-repeat; background-position: center; background-size: cover;
}
.cavani_tm_modalbox .news_popup_informations .details { overflow: hidden; }

/* =========================================================================
   Bibliografia — slide-over da destra (al posto della modale del tema).
   Copertina in alto, poi metadati, titolo e testo. Vedi lo script in index.php.
   ========================================================================= */
.biblio-overlay {
    position: fixed; inset: 0; background: rgba(18, 34, 62, .45);
    opacity: 0; visibility: hidden; z-index: 100000;
    transition: opacity .28s ease, visibility 0s linear .28s;
}
.biblio-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .28s ease; }

.biblio-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 430px; max-width: 92vw; background: #fff; z-index: 100001;
    box-shadow: -14px 0 44px rgba(15, 27, 45, .20);
    transform: translateX(100%); transition: transform .34s cubic-bezier(.4, 0, .2, 1);
    display: flex; flex-direction: column; overflow-y: auto;
}
.biblio-panel.is-open { transform: translateX(0); }

.biblio-panel__close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 38px; height: 38px; border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: #12223e;
    font-size: 1.7rem; line-height: 1; cursor: pointer;
    display: grid; place-items: center; box-shadow: 0 2px 12px rgba(0, 0, 0, .16);
    transition: background .15s, transform .15s;
}
.biblio-panel__close:hover { background: #fff; transform: rotate(90deg); }

.biblio-panel__cover {
    background: linear-gradient(135deg, #12223e, #1c3558);
    padding: 30px; display: flex; justify-content: center; flex-shrink: 0;
}
.biblio-panel__cover-img {
    width: 100%; height: auto; aspect-ratio: 19 / 27;
    border-radius: 6px; background-color: #eef1f6;
    background-repeat: no-repeat; background-position: center; background-size: cover;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .38);
}

.biblio-panel__body { padding: 26px 30px 42px; }
.biblio-panel__meta ul {
    list-style: none; margin: 0 0 14px; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.biblio-panel__meta li span {
    display: inline-block; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: #5b6779;
    background: #f1f3f7; padding: 5px 11px; border-radius: 20px;
}
.biblio-panel__title {
    font-family: "Poppins", sans-serif; font-weight: 800; font-size: 1.4rem;
    color: #12223e; line-height: 1.25; margin: 0 0 16px;
}
.biblio-panel__text { color: #4a5568; font-size: .95rem; line-height: 1.72; }
.biblio-panel__text p { margin: 0 0 14px; }
.biblio-panel__text p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
    .biblio-panel { width: 100%; max-width: 100%; }
    .biblio-panel__cover { padding: 30px; }
    .biblio-panel__body { padding: 22px 22px 36px; }
}

/* =========================================================================
   Homepage su mobile/piccoli schermi: le due colonne del desktop
   (foto | contenuti) diventano IMPILATE — foto in alto (2/3) e contenuti
   sotto (1/3). Solo sulla home (body.page-home): le altre pagine (es. la
   Cineteca, che ha bisogno di tutta l'altezza per l'archivio) restano col
   comportamento del tema. Sotto i 1040px il tema impilerebbe nascondendo la
   foto: qui invece la mostriamo sopra. Il ritaglio "nascosta" resta rispettato.
   ========================================================================= */
@media (max-width: 1040px) {
    body.page-home.is-home-section .cavani_tm_mainpart:not(.cavani_tm_mainpart--foto-nascosta) .author_image {
        display: block !important;
        top: 0; left: 0; right: 0; bottom: auto;
        width: 100%; height: 66%;
    }
    body.page-home.is-home-section .cavani_tm_mainpart:not(.cavani_tm_mainpart--foto-nascosta) .main_content {
        top: auto; left: 0; right: 0; bottom: 0;
        width: 100%; height: 34%;
    }
    /* La foto inquadra il volto (in alto), non il centro geometrico. */
    body.page-home.is-home-section .cavani_tm_mainpart .author_image .main { background-position: center top; }
    /* Nel terzo inferiore lo spazio è poco: meno padding in cima alla sezione. */
    body.page-home.is-home-section .cavani_tm_section .section_inner { padding-top: 26px; }
}

/* =========================================================================
   Transizione di pagina soft. La pagina ENTRA in dissolvenza; quando si passa
   fra la SPA e l'archivio Cineteca (e per i reload dell'archivio) ESCE in
   dissolvenza prima di navigare (classe .is-leaving da page-fx.js). Così i
   due passaggi sembrano un cambio-sezione e non un reload bianco.
   ========================================================================= */
.cavani_tm_all_wrap { animation: em-page-in .32s ease both; }
.cavani_tm_all_wrap.is-leaving { animation: none; opacity: 0; transition: opacity .28s ease; }
@keyframes em-page-in { from { opacity: 0; } }

/* Cursore magico (solo desktop): parte fuori schermo invece di un puntino a
   (0,0) finché non si muove il mouse — identico su tutte le pagine. */
.mouse-cursor { transform: translate(-100px, -100px); }

/* =========================================================================
   Menu mobile (la sidebar che appare da destra sotto i 1040px): a TUTTO
   SCHERMO, con font grandi per la leggibilità, e SOPRA la foto (che nello
   split mobile della home ha z-index 15 come il menu del tema, quindi lo
   copriva). La topbar con la "X" resta sopra il menu per poterlo chiudere.
   ========================================================================= */
@media (max-width: 1040px) {
    .cavani_tm_topbar { z-index: 9999; }

    .cavani_tm_mobile_menu {
        top: 50px; left: 0; right: 0; width: 100%; height: calc(100vh - 50px);
        z-index: 9000;
        transform: translateX(100%);
        transition: transform .3s ease;
    }
    .cavani_tm_mobile_menu.opened { right: 0; transform: translateX(0); }

    .cavani_tm_mobile_menu .inner {
        display: flex; flex-direction: column; justify-content: center;
        text-align: center; padding: 40px 24px;
    }
    .cavani_tm_mobile_menu .avatar { float: none; margin: 0 auto 34px; width: 96px; height: 96px; }
    .cavani_tm_mobile_menu .menu_list { float: none; margin-bottom: 34px; }
    .cavani_tm_mobile_menu .menu_list ul li { margin: 0 0 18px; }
    .cavani_tm_mobile_menu .menu_list ul li a { font-size: 1.7rem; font-weight: 600; }
    .cavani_tm_mobile_menu .social { float: none; margin-bottom: 18px; }
    .cavani_tm_mobile_menu .social ul { text-align: center; }
    .cavani_tm_mobile_menu .social ul li { margin: 0 10px; }
    .cavani_tm_mobile_menu .social ul li a svg { width: 24px; height: 24px; }
    .cavani_tm_mobile_menu .copyright { float: none; }
    .cavani_tm_mobile_menu .copyright p { font-size: 0.9rem; }
}