/* ===============================
   HOME — GALLERIA A SCROLL VERTICALE
   =============================== */

.home-stage {
    display: flex;
    flex-direction: column;
}

.home-slide {
    display: flex;
    flex-direction: column;
    /* Linea divisoria tra un progetto e il successivo (si schiarisce in
       hover, come le righe dell'Archive — vedi .project-row in style.css). */
    border-bottom: 1px solid rgba(224, 224, 224, 0.5);
    /* Comparsa allo scroll: parte trasparente (classe .pre-reveal aggiunta
       da JS) e si anima in opacità, senza spostamento verticale. */
    transition: opacity 1s ease, border-color 0.45s ease;
}
.home-slide:hover {
    border-color: #e0e0e0;
}
.home-slide.pre-reveal {
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    .home-slide { transition: none; }
    .home-slide.pre-reveal { opacity: 1; }
}

/* --- Riquadro immagine: proporzione aurea nel taglio (orizzontale o
       verticale a seconda dell'immagine, rilevato da JS), posizione
       orizzontale a caso e dimensione a caso tra 3 taglie (grande/media/
       piccola) per un'impaginazione più editoriale e meno ripetitiva. --- */
.home-frame {
    display: flex;
    align-items: center;
    /* Margine minimo tra immagine e titolo (era 5%). */
    gap: 2%;
    /* Vecchio valore 3vh: sopra raddoppiato (6vh), sotto diviso per 3 (1vh) */
    padding: 1vh 6vw 1vh 6vw;
    box-sizing: border-box;
    /* Non è più un link: si clicca solo l'immagine (.home-media) o il
       testo, non lo spazio/padding attorno. */
    opacity: 0.85;
    background-color: transparent;
    /* Dissolvenza lenta e morbida (stessa curva "svizzera" del resto del
       sito), invece di uno scatto rapido. */
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}
/* L'immagine sta da un lato (sx o dx, deciso a caso in JS), il titolo
   occupa lo spazio bianco accanto restando vicino all'immagine (i due si
   accostano insieme al bordo, lo spazio inutilizzato resta dall'altra
   parte) — funziona anche senza titolo, con la sola immagine. */
.home-frame.pos-left {
    justify-content: flex-start;
}
.home-frame.pos-right {
    justify-content: flex-end;
}
.home-frame.pos-left .home-media { order: 0; }
.home-frame.pos-left .home-panel { order: 1; text-align: left; }
.home-frame.pos-right .home-media { order: 1; }
.home-frame.pos-right .home-panel { order: 0; text-align: right; }

.home-media {
    position: relative; /* ancora per l'immagine in posizione assoluta */
    overflow: hidden;
    display: block;
    cursor: pointer;
    /* Leggerissimo movimento orizzontale SOLO alla comparsa (mentre la
       slide è ancora .pre-reveal), sulla cornice e non sull'<img>: il
       parallasse allo scroll imposta il transform dell'<img> via JS,
       quindi va tenuto separato per non entrare in conflitto. In hover
       agisce solo l'opacità, qui non cambia nulla. */
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.home-slide.pre-reveal .home-media.pos-left {
    transform: translateX(-5px); /* parte leggermente a sx, scivola verso dx */
}
.home-slide.pre-reveal .home-media.pos-right {
    transform: translateX(5px); /* parte leggermente a dx, scivola verso sx */
}
@media (prefers-reduced-motion: reduce) {
    .home-media { transition: none; }
    .home-slide.pre-reveal .home-media.pos-left,
    .home-slide.pre-reveal .home-media.pos-right {
        transform: none;
    }
}

/* Immagine orizzontale: cornice orizzontale, rapporto aureo 1.618:1 */
.home-frame.landscape.size-l .home-media { --fw: 1020px; }
.home-frame.landscape.size-m .home-media { --fw: 870px; }
.home-frame.landscape.size-s .home-media { --fw: 630px; }
.home-frame.landscape .home-media {
    width: var(--fw);
    max-width: 100%;
    flex: 0 0 auto;
    aspect-ratio: 1.618 / 1;
}

/* Immagine verticale: cornice verticale, rapporto aureo 1:1.618 */
.home-frame.portrait.size-l .home-media { --fw: 420px; }
.home-frame.portrait.size-m .home-media { --fw: 360px; }
.home-frame.portrait.size-s .home-media { --fw: 260px; }
.home-frame.portrait .home-media {
    width: var(--fw);
    max-width: 100%;
    flex: 0 0 auto;
    aspect-ratio: 1 / 1.618;
}

/* --- Finestre strette e tablet (da 1001px in su) ------------------------
   Le larghezze --fw sono pensate per il desktop pieno: sotto i ~1500px
   l'immagine si mangiava quasi tutta la riga e al pannello restavano
   pochi pixel (a 1250px era già a zero), col testo spezzato o spinto
   fuori. Qui l'immagine non supera mai una quota proporzionale alla
   finestra, così al testo resta sempre una colonna leggibile.
   La formula vale 1020px a 1600px di finestra — cioè il valore attuale,
   quindi sul desktop pieno non cambia nulla — e cala con continuità fino
   a ~460px a 1000px: nessun salto passando da una misura all'altra.
   Le taglie più piccole e le immagini verticali restano intatte finché
   il limite non scende sotto la loro larghezza. */
@media (min-width: 1001px) {
    /* Selettore con la stessa specificità delle regole delle taglie qui
       sopra (.home-frame.landscape .home-media), altrimenti perderebbe. */
    .home-frame.landscape .home-media,
    .home-frame.portrait .home-media {
        width: min(var(--fw), calc(93.3vw - 473px));
    }
}

/* Esattamente quanto la cornice: nessun ingrandimento oltre il necessario.
   Prima era alta il 110% con top:-5%, il margine che serviva al parallasse
   per muoversi senza scoprire i bordi; tolto il movimento, quel margine
   diventerebbe solo zoom in più. Con object-fit:cover resta il solo taglio
   dovuto alla differenza di proporzione tra cornice (aurea) e foto. */
.home-media img,
.home-media video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* riempie il riquadro, il lato corto viene tagliato */
    display: block;
    mix-blend-mode: multiply; /* stesso effetto delle altre immagini del sito */
}

/* --- Pannello informativo: impaginato nello spazio bianco accanto
       all'immagine (numero progressivo, titolo, sottotitolo, data/luogo,
       estratto e link). L'altezza è quella dell'immagine accanto
       (align-self: stretch, la riga è un flex row): il contenuto in
       eccesso viene ritagliato con overflow:hidden invece di allungare la
       riga. Visibile solo da 1000px in su (sotto, vedi .home-caption). --- */
.home-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-self: stretch;
    /* Senza questo un elemento flex non scende mai sotto la larghezza della
       sua parola più lunga: invece di restringersi spingeva fuori la riga. */
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    margin: 50px;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.45s ease;
}
/* Il margine di 50px resta solo sul lato vicino all'immagine: sul lato
   lontano va a 0. */
.home-frame.pos-left .home-panel {
    margin-left: 50px;
    margin-right: 0;
}
.home-frame.pos-right .home-panel {
    margin-left: 0;
    margin-right: 50px;
}
.home-slide:hover .home-panel {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .home-panel { transition: none; }
}

/* Vuoto: il numero progressivo è stato tolto, ma questo spazio resta per
   mantenere la stessa spaziatura sopra il titolo (altezza di riga a
   15px/1.4, come prima). */
.home-panel .hp-index {
    display: block;
    font-size: 15px;
    line-height: 1.4;
}
.home-panel .hp-heading {
    display: block;
    margin-top: 0.5em;
    /* Linea che separa il titolo dalla riga di data/luogo sotto: stessa
       distanza testo-linea usata per la linea sotto (vedi .hp-meta e
       .hp-links più sotto — sempre 1em). */
    padding-bottom: 1em;
    border-bottom: 1px solid rgba(224, 224, 224, 0.5);
}
/* Stesso colore del titolo (#2f2f2f) per tutto il pannello, tranne
   "Read curator's text" (.hp-links) che resta grigio. */
.home-panel .hp-title {
    display: block;
    font-family: 'Mono', sans-serif;
    font-weight: 600 !important;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #2f2f2f;
}
.home-panel .hp-subtitle {
    display: block;
    font-family: 'Mono-light', sans-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 1.25;
    color: #2f2f2f;
    margin-top: 0.2em;
}
.home-panel .hp-meta {
    margin-top: 1em;
}
.home-panel .hp-date,
.home-panel .hp-venue {
    display: block;
    font-family: 'Mono-light', sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 1.3;
    color: #2f2f2f;
}
.home-panel .hp-desc {
    margin: 1.6em 0 0;
    max-width: 34em;
    font-family: 'Mono-light', sans-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 1.45;
    color: #2f2f2f;
}
.home-frame.pos-right .home-panel .hp-desc {
    margin-left: auto;
}
/* Linea che separa il luogo da "Read curator's text" sotto: stessa
   distanza testo-linea di 1em usata sopra per titolo/data. */
.home-panel .hp-links {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid rgba(224, 224, 224, 0.5);
    font-family: 'Mono-light', sans-serif;
    font-size: 12px;
    color: #707070;
}
.home-panel .hp-link {
    color: inherit;
    transition: color 0.3s ease;
}
.home-panel .hp-link:hover {
    color: #000;
}
/* --- Didascalia: agganciata alla slide, scorre insieme all'immagine.
       Impaginata come la riga dell'Archive (vedi .bar-main in style.css):
       titolo a sinistra, data e luogo a destra, sulla stessa riga (mai a
       capo, troncati con "…" se troppo lunghi). Sostituisce il pannello
       ricco solo sotto i 1000px (vedi media query più sotto): su desktop
       resta nascosta, le stesse informazioni sono già nel pannello. --- */
.home-caption {
    display: none;
    flex: 0 0 auto;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 9px 30px;
    /* Solo la linea sopra (separa la riga dall'immagine): quella sotto è
       già la linea divisoria tra progetti di .home-slide, subito dopo. */
    border-top: 1px solid rgba(224, 224, 224, 0.5);
    font-size: 14px;
    font-weight: 100;
    cursor: pointer;
    opacity: 0.7;
    background-color: transparent;
    transition: opacity 0.45s ease, border-color 0.45s ease, background-color 0.3s ease;
}
/* I due gruppi (titolo / meta) restano su una riga sola: quello che non
   ci sta viene troncato con "…" invece di andare a capo o spingere
   l'altro gruppo fuori dalla tab. */
.home-caption .c-title,
.home-caption .c-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.home-caption .c-title {
    flex: 1 1 auto;
}
.home-caption .c-meta {
    flex: 0 1 auto;
}

/* Passando sopra l'immagine o il testo, entrambi arrivano a piena
   opacità insieme, come fossero un'unica riga (l'hover su un discendente
   fa scattare anche :hover sull'antenato .home-slide). Niente sfondo
   grigio: resta tutto bianco, il feedback dell'hover è solo l'opacità
   (già 85%→100% sull'immagine, 70%→100% sul testo). */
.home-slide:hover .home-frame,
.home-slide:hover .home-caption {
    opacity: 1;
}
.home-slide:hover .home-caption {
    border-color: #e0e0e0;
}

/* Spazio espositivo in nero */
.home-caption .c-venue {
    font-family: 'Mono', sans-serif;
    color: #000;
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
}
/* Titolo, anno, luogo e separatore in grigio (un filo più scuro del vecchio #707070) */
.home-caption .c-title,
.home-caption .c-year,
.home-caption .c-place,
.home-caption .c-sep {
    font-family: 'Mono-light', sans-serif;
    color: #707070;
    transition: color 0.3s ease;
}

/* --- Mobile --- */
@media (max-width: 1000px) {
    /* Sotto questa soglia l'immagine occupa già tutta la larghezza
       disponibile: niente spazio bianco accanto per il pannello, che
       lascia il posto alla riga compatta sotto l'immagine. */
    .home-panel {
        display: none;
    }
    .home-caption {
        display: flex;
        gap: 16px;
        padding: 7px 20px;
    }
}

/* --- Mobile: sotto l'immagine resta il solo titolo ---
   Data e luogo vengono nascosti: su schermo stretto la riga andava
   stretta fra due testi e il titolo finiva troncato. Restano visibili
   nella pagina dell'opera. */
@media (max-width: 1000px) {
    .home-caption .c-meta {
        display: none;
    }
}

/* --- Mobile: immagini tutte uguali, a tutta larghezza -------------------
   Sotto i 1000px il pannello del testo non c'è più, quindi le larghezze
   variabili (le tre taglie) e le due proporzioni (orizzontale/verticale)
   non servono più a impaginare: producevano solo immagini di misure
   diverse, con le verticali strette e circondate di bianco.
   Qui ogni immagine occupa tutta la riga, senza margini laterali, e
   condivide la stessa proporzione aurea: la sequenza diventa una colonna
   regolare. Le foto verticali vengono ritagliate più delle altre — è il
   prezzo dell'uniformità richiesta. */
@media (max-width: 1000px) {
    /* Il margine laterale della cornice (6vw) resta quello di sempre: le
       immagini non toccano i bordi dello schermo. Cambia solo che ora
       riempiono tutta la larghezza disponibile dentro quel margine. */
    .home-frame.landscape .home-media,
    .home-frame.portrait .home-media {
        width: 100%;
        aspect-ratio: 1.618 / 1;
    }
    /* Niente scivolamento laterale alla comparsa: con l'immagine a filo
       dei bordi quei 5px scoprirebbero una striscia bianca di lato.
       Resta la dissolvenza. */
    .home-slide.pre-reveal .home-media.pos-left,
    .home-slide.pre-reveal .home-media.pos-right {
        transform: none;
    }
}

/* --- Mobile: titolo sotto l'immagine ----------------------------------
   Stesso grigio dei titoli negli elenchi dell'archivio (#707070 con la
   stessa opacita' 0.85 di .bar-main), cosi' le due sezioni si leggono allo
   stesso modo. Resta pero' tolto il velo di opacita' 0.7 che copriva
   l'intera riga e la sbiadiva ulteriormente: su schermo touch non esiste
   il passaggio del mouse che la portava a piena intensita', quindi lo
   stato di riposo e' l'unico che si vede. */
@media (max-width: 1000px) {
    .home-caption {
        opacity: 0.85;
    }
    .home-caption .c-title {
        color: #707070;
    }
}