/* ── Critical layout (non-Tailwind fallback) ──────────────────────────────── */

/* Studio inserts this banner on preview/staging URLs only (not on the live
   site or local dev). It's position:static and pushes #topNav's sibling
   <main> down by its own height, leaving a blank gap below the fixed nav
   since the banner itself ends up hidden behind our page content anyway.
   Take it out of flow so it can't affect our layout, without hiding it. */
#studio-companion-notice {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
}

/* Niente sillabazione automatica sui titoli: le parole vanno a capo intere
   invece di spezzarsi con un trattino (es. "dell'evento", "Spolverini"). */
h2[lang="it"] {
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
}

#topNav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    z-index: 50;
    background: #fdf8f8;
    border-bottom: 1px solid #D0CEC9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 48px;
}

main {
    padding-top: 48px;
}

.lm-section {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 48px;
    gap: 48px;
}

.lm-section + .lm-section {
    margin-top: 120px;
}

@media (min-width: 768px) {
    .lm-section {
        flex-direction: row;
    }
}

footer {
    width: 100%;
    border-top: 1px solid #D0CEC9;
    /* Padding verticale piu' generoso del minimo estetico: la sezione di
       chiusura ha bisogno che ci sia sempre abbastanza spazio scrollabile
       DOPO di essa perche' l'animazione delle rose possa completarsi (la
       pagina non puo' scrollare oltre la propria altezza totale). */
    padding: 48px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: #fdf8f8;
}

@media (min-width: 768px) {
    footer { flex-direction: row; }
}

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background-color: #fdf8f8;
    color: #1c1b1b;
    overflow-x: hidden;
}

body.lm-portfolio-body {
    background-color: #fdf8f8;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ── Portrait fallback ────────────────────────────────────────────────────── */
.lm-portrait-fallback { display: flex; }
.lm-portrait-img:not([src=""]) + .lm-portrait-fallback { display: none; }
.lm-portrait-img[src=""] { display: none; }

/* ── Thumbnails strip ─────────────────────────────────────────────────────── */
.lm-thumbs-strip {
    scrollbar-width: thin;
    scrollbar-color: #D0CEC9 transparent;
}
.lm-thumbs-strip::-webkit-scrollbar { height: 4px; }
.lm-thumbs-strip::-webkit-scrollbar-track { background: transparent; }
.lm-thumbs-strip::-webkit-scrollbar-thumb { background: #D0CEC9; }

.lm-thumb--active img { opacity: 1 !important; }

/* ── Admin bar offset ─────────────────────────────────────────────────────── */
.admin-bar #topNav { top: 32px; }
.admin-bar #opere-carousel { top: 80px; }
@media (max-width: 782px) {
    .admin-bar #topNav { top: 46px; }
    .admin-bar main    { padding-top: calc(48px + 46px); }
    .admin-bar #opere-carousel { top: 94px; }
    .admin-bar .lm-hero-curtain .lm-hero-wrap,
    .admin-bar .lm-hero-bio-behind { top: 94px; height: calc(100vh - 94px); }
    .admin-bar .lm-hero-bio-behind { margin-top: calc(-1 * (100vh - 94px)); }
    .admin-bar .lm-outro-curtain .lm-outro-wrap { top: 94px; height: calc(100vh - 94px); }
}
@media (min-width: 783px) {
    .admin-bar main { padding-top: 80px; }
    .admin-bar .lm-hero-curtain .lm-hero-wrap,
    .admin-bar .lm-hero-bio-behind { top: 80px; height: calc(100vh - 80px); }
    .admin-bar .lm-hero-bio-behind { margin-top: calc(-1 * (100vh - 80px)); }
    .admin-bar .lm-outro-curtain .lm-outro-wrap { top: 80px; height: calc(100vh - 80px); }
}

/* ── Scroll-to-top cursor ────────────────────────────────────────────────── */
.lm-scroll-top { cursor: pointer; }

/* ── Opere carousel (sticky) ─────────────────────────────────────────────── */
#opere-carousel {
    width: 100%;
    height: 48px;
    border-top: 1px solid #D0CEC9;
    border-bottom: 1px solid #D0CEC9;
    background-color: #fdf8f8;
    display: flex;
    align-items: center;
    position: sticky;
    top: 48px;
    z-index: 40;
}
.lm-carousel-track {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 48px;
    white-space: nowrap;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
    gap: 0;
}
.lm-carousel-track::-webkit-scrollbar {
    display: none;
}
.lm-carousel-item {
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.05em;
    font-weight: 500;
    text-transform: uppercase;
    color: #444748;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 12px;
    transition: color 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.lm-carousel-item:hover {
    color: #000000;
}
.lm-carousel-item.active {
    color: #000000;
    font-weight: 700;
}
.lm-carousel-sep {
    color: #D0CEC9;
    padding: 0 4px;
    pointer-events: none;
    user-select: none;
    flex-shrink: 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
}

/* ── Opera image container ──────────────────────────────────────────────── */
.lm-opera-img-container {
    max-height: 65vh;
}
.lm-opera-img-container img {
    max-height: 65vh;
    object-fit: contain;
}

/* ── Bio content (Gutenberg output) ─────────────────────────────────────── */
.lm-bio-content p {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    line-height: 32px;
    color: #1c1b1b;
    max-width: 65ch;
    margin: 0;
}
.lm-bio-content strong em,
.lm-bio-content em strong {
    font-style: italic;
    font-weight: 700;
}
.lm-bio-content p + p { margin-top: 1rem; }

/* Nascosti temporaneamente su tutti i breakpoint: solo la poesia resta visibile, centrata */
.lm-bio-pdf,
.lm-bio-meta {
    display: none !important;
}

.lm-hero-bio-inner {
    text-align: center;
}

/* ── Prevent WP block theme default styles from bleeding in ──────────────── */
.wp-site-blocks { padding: 0 !important; }
.wp-block-shortcode { display: contents; }

/* ── Hero section (sezione 1) ────────────────────────────────────────────── */
.lm-section-hero {
    padding: 0 !important;
    gap: 0 !important;
    flex-direction: column !important;
    min-height: auto !important;
    height: auto !important;
}

.lm-hero-wrap {
    position: relative;
    width: 100%;
    height: calc(100vh - 48px);
    overflow: hidden;
    display: flex;
    z-index: 2;
    pointer-events: none;
}

.lm-hero-curtain {
    position: relative;
    width: 100%;
}

.lm-hero-bio-behind {
    display: none;
}

.lm-hero-curtain-spacer {
    display: none;
}

.lm-hero-panel {
    width: 50%;
    height: 100%;
    position: relative;
    overflow: hidden;
    will-change: transform;
}

.lm-hero-wrap .lm-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lm-hero-img-top { object-position: center 15%; }

.lm-hero-img-flipped {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center center;
}

.lm-hero-panel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 20, 35, 0.28);
}

.lm-hero-panel-left::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: rgba(253, 248, 248, 0.25);
    z-index: 2;
}

.lm-hero-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    width: 42%;
    pointer-events: none;
}

.lm-hero-eyebrow {
    color: #fdf8f8;
    display: block;
    opacity: 0.75;
    margin-bottom: 16px;
}

.lm-hero-title {
    color: #fdf8f8;
    display: block;
    margin-bottom: 12px;
}

.lm-hero-subtitle {
    color: #fdf8f8;
    display: block;
    opacity: 0.85;
}

.lm-hero-dates {
    color: #fdf8f8;
    display: block;
    opacity: 0.6;
    margin-top: 10px;
}

.lm-bio-panel {
    padding: 48px;
    border: 1px solid #D0CEC9;
    margin: 48px;
    position: relative;
    z-index: 10;
}

/* ── Desktop hero curtain ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .lm-hero-curtain-spacer {
        display: block;
        height: 40vh;
    }

    .lm-hero-curtain .lm-hero-wrap {
        position: sticky;
        top: 48px;
        z-index: 5;
        overflow: hidden;
    }

    .lm-hero-bio-behind {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: sticky;
        top: 48px;
        height: calc(100vh - 48px);
        margin-top: calc(-1 * (100vh - 48px));
        z-index: 1;
        background-color: #fdf8f8;
        padding: 48px;
        overflow-y: auto;
    }

    .lm-hero-bio-inner {
        max-width: 60ch;
        padding-top: 0;
    }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    #topNav      { padding: 0 16px; }
    #nav-counter { display: none; }

    .lm-section {
        padding: 16px;
        padding-bottom: 64px;
        gap: 24px;
    }

    .lm-section + .lm-section {
        margin-top: 60px;
    }

    #opere-carousel  { margin-top: 0; }
    .lm-carousel-track { padding: 0 16px; }

    .lm-section-bar  {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .lm-bio-content p { font-size: 16px; line-height: 26px; }

    /* Immagine opera edge-to-edge in larghezza; l'altezza segue le proporzioni
       reali di ciascuna opera (niente crop, niente bande vuote forzate). */
    .lm-opera-image-block {
        margin: 0 -16px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }
    .lm-opera-img-container {
        aspect-ratio: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        border: none !important;
    }
    .lm-opera-img-container img {
        width: 100%;
        height: auto !important;
        max-height: none;
        object-fit: contain;
    }

    /* Titolo e descrizione: stessa larghezza a tutto schermo dell'immagine.
       Font fluido (invece di una taglia fissa) per non "esplodere" su titoli
       lunghi come "Il Ballo del Giudizio", che a 88px occupavano 4 righe. */
    .lm-opera-title {
        margin: 0 -16px 8px !important;
        padding: 0 20px !important;
        font-size: clamp(36px, 11vw, 64px) !important;
        line-height: 0.95 !important;
    }

    .lm-opera-info-block {
        margin: 0 -16px !important;
        padding: 32px 20px 64px !important;
        border: none !important;
        background: transparent !important;
    }
    .lm-opera-info-block .font-label-xs { font-size: 15px !important; }
    .lm-opera-info-block .font-body-sm {
        font-size: 21px !important;
        line-height: 32px !important;
    }

    .lm-hero-wrap { flex-direction: column; height: calc(100vh - 48px); overflow: hidden; }

    .lm-hero-curtain .lm-hero-wrap {
        position: sticky;
        top: 48px;
        z-index: 5;
    }

    .lm-hero-curtain-spacer {
        display: block;
        height: 80vh;
    }

    .lm-hero-bio-behind {
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 48px;
        height: calc(100vh - 48px);
        margin-top: calc(-1 * (100vh - 48px));
        z-index: 1;
        background-color: #fdf8f8;
        padding: 48px 24px;
        overflow-y: auto;
    }

    .lm-hero-bio-inner {
        max-width: 100%;
        padding-top: 0;
    }

    .lm-hero-panel {
        width: 100%;
        height: 50%;
    }

    .lm-hero-panel-left::after {
        top: auto;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 1px;
    }

    .lm-hero-overlay {
        width: 80%;
    }

    .lm-bio-panel {
        margin: 16px;
        padding: 24px 16px;
    }

    footer {
        padding: 48px 16px !important;
    }
}

/* ── Poem overlay ─────────────────────────────────────────────────────────── */
.lm-poem-trigger { cursor: pointer; font-size: 16px; line-height: 1; }
.lm-poem-overlay {
    z-index: 10;
    transition: opacity 0.7s ease !important;
    cursor: pointer;
}

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.lm-opera-img-container { cursor: zoom-in; }
.lm-poem-trigger { cursor: pointer; }

.lm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(28, 27, 27, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    cursor: zoom-out;
}
.lm-lightbox.is-open {
    opacity: 1;
    pointer-events: all;
}
.lm-lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    transform: scale(0.94);
    transition: transform 0.3s ease;
    cursor: default;
    display: block;
}
.lm-lightbox.is-open .lm-lightbox-img {
    transform: scale(1);
}
.lm-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: #fdf8f8;
    cursor: pointer;
    padding: 8px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.lm-lightbox-close:hover { opacity: 1; }
.lm-lightbox-close .material-symbols-outlined { font-size: 28px; }

.lm-lightbox-prev,
.lm-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fdf8f8;
    cursor: pointer;
    padding: 12px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
    z-index: 1;
}
.lm-lightbox-prev:hover,
.lm-lightbox-next:hover { opacity: 1; }
.lm-lightbox-prev { left: 8px; }
.lm-lightbox-next { right: 8px; }
.lm-lightbox-prev .material-symbols-outlined,
.lm-lightbox-next .material-symbols-outlined { font-size: 26px; }

.lm-lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fdf8f8;
    opacity: 0.75;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .lm-lightbox-prev { left: 0; }
    .lm-lightbox-next { right: 0; }
}

/* ── Desktop curtain animation ────────────────────────────────────────────── */
@media (min-width: 768px) {

    .lm-hero-curtain .lm-hero-wrap {
        position: sticky;
        top: 48px;
        z-index: 5;
        overflow: visible;
    }

    .lm-hero-curtain-spacer {
        display: block;
        height: 40vh;
    }

    .lm-hero-bio-behind {
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 48px;
        height: calc(100vh - 48px);
        margin-top: calc(-1 * (100vh - 48px));
        z-index: 1;
        background-color: #fdf8f8;
        padding: 64px 80px;
        overflow-y: auto;
    }

    .lm-hero-bio-inner {
        max-width: 65ch;
    }
}

/* ── Sezione critica/relatrice: si adatta al contenuto, niente altezza forzata ── */
.lm-section-relatrice {
    min-height: auto !important;
    flex-direction: column !important;
}

/* ── Sezione proemio: si adatta al contenuto, niente altezza forzata ─────── */
.lm-section-proemio {
    min-height: auto !important;
    flex-direction: column !important;
}

/* ── Fix allineamento: dentro un flex container verticale, un box con margini
   automatici (mx-auto) non si allarga fino al max-width finché non lo forziamo:
   resta stretto sul contenuto (quindi centrato) finché il testo è corto (es.
   titolo + pulsante a sezione chiusa), poi "salta" a piena larghezza quando il
   contenuto si allunga (es. testo aperto). Larghezza fissa = niente salto. ── */
.lm-section-relatrice > .max-w-3xl,
.lm-section-proemio > .max-w-3xl {
    width: 100%;
}

/* ── Outro section (chiusura: il sipario "Grazie" si apre sulla rosa) ────── */
.lm-section-outro {
    padding: 0 !important;
    gap: 0 !important;
    flex-direction: column !important;
    min-height: auto !important;
    height: auto !important;
}

.lm-outro-curtain {
    position: relative;
    width: 100%;
}

.lm-outro-curtain-spacer {
    display: none;
}

.lm-outro-wrap {
    position: relative;
    width: 100%;
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
    overflow: hidden;
    display: flex;
    z-index: 2;
    pointer-events: none;
    background-color: #fdf8f8;
}

/* Pannelli del sipario: ciascuno mostra una rosa, e si CHIUDONO scorrendo
   (partono aperti/separati, si uniscono al centro). */
.lm-outro-panel {
    width: 50%;
    height: 100%;
    position: relative;
    z-index: 2;
    overflow: hidden;
    background-color: #fdf8f8;
    will-change: transform;
}

.lm-outro-panel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center center;
}

.lm-outro-panel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 20, 35, 0.28);
}

.lm-outro-panel-left::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: rgba(253, 248, 248, 0.25);
    z-index: 2;
}

/* Dedica centrata: visibile mentre i pannelli sono aperti, sparisce mentre
   le rose si chiudono (vedi updateOutro() in portfolio.js). */
.lm-outro-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    width: 56%;
    pointer-events: none;
}

.lm-outro-dedica {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(14px, 3.6vw, 20px) !important;
    line-height: 1.5 !important;
    color: #1c1b1b;
    max-width: 56ch;
    margin: 0 auto;
    white-space: pre-line;
}

/* Grazie: stessa posizione centrale della dedica, ma opacita' guidata in senso
   opposto (0 finche' i pannelli sono aperti, 1 a rose chiuse — vedi
   updateOutro() in portfolio.js). Nasce sempre a opacita' 0 cosi' non compare
   con un flash prima che il JS prenda il controllo. */
.lm-outro-thanks {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    width: 42%;
    pointer-events: none;
    opacity: 0;
}

.lm-outro-thanks-text {
    font-family: "Cormorant", serif !important;
    font-size: 40px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    color: #fdf8f8;
    max-width: 44ch;
    margin: 0 auto;
}

/* ── Desktop outro curtain ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .lm-outro-curtain-spacer {
        display: block;
        height: 40vh;
    }

    .lm-outro-curtain .lm-outro-wrap {
        position: sticky;
        top: 48px;
        z-index: 5;
    }
}

/* ── Mobile outro curtain ────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .lm-outro-wrap {
        flex-direction: column;
        height: calc(100vh - 48px);
        height: calc(100dvh - 48px);
        overflow: hidden;
    }

    .lm-outro-curtain .lm-outro-wrap {
        position: sticky;
        top: 48px;
        z-index: 5;
    }

    .lm-outro-curtain-spacer {
        display: block;
        height: 80vh;
        height: 80dvh;
    }

    .lm-outro-panel {
        width: 100%;
        height: 50%;
    }

    .lm-outro-overlay {
        width: 88%;
    }
}

/* ── "Perché Madri" closing signature line ──────────────────────────────── */
.lm-section-statement .space-y-4 p:last-of-type {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #c4c7c7;
    font-style: italic;
    font-weight: 700;
    color: #1c1b1b;
    text-align: right;
}