/* ========================================================
   SINGOLO ALBUM — Figma node 1:670, 1440px
   Valori da tokens.css. Header e footer in homepage.css.
   ======================================================== */

.album-single {
    margin-top: var(--header-height-inner);
    padding-top: 90px;
}

/* Intro (29/10, Figma node 269:498, elastico 769px → desktop):
   categoria e titolo in alto a 120px dal bordo; sotto, foto principale | testo.
   Il testo parte in linea con la 3ª foto della galleria (4 colonne, margini 80, spazi 27):
   x = metà pagina + 13,5px (a 1440: 733,5). Giustezza 479px, almeno 80px dal bordo dx. */
.album-intro {
    display: grid;
    grid-template-columns: calc(50% + 13.5px) minmax(0, min(479px, calc(50% - 93.5px)));
    align-items: start;
}

/* Categoria, titolo e foto diventano celle della griglia */
.album-intro-main {
    display: contents;
}

.album-category,
.album-title {
    grid-column: 1 / -1;
    max-width: 641px; /* larghezza del titolo prima del 29/10 */
    margin-left: var(--page-margin);
}

.album-category {
    justify-self: start;
    display: block;
    margin-bottom: 16px;
    font-family: var(--font-primary);
    font-size: var(--text-12);
    line-height: var(--line-height-16);
    letter-spacing: var(--tracking-wide-4_8);
    text-transform: uppercase;
    color: var(--color-text);
    text-decoration: none;
}

/* Link all'Archivio filtrato: sottolineato al passaggio del mouse (non nel Figma) */
.album-category:hover {
    color: var(--color-text); /* resta nero: niente giallo dei link generici */
    text-decoration: underline;
    text-underline-offset: 3px;
}

.album-title {
    font-family: var(--font-display);
    font-size: var(--text-64);
    font-weight: 400;
    line-height: var(--line-height-56);
    color: var(--color-text);
}

/* Foto principale 438px, 90px sotto il titolo, centrata tra il bordo sx della pagina e il testo
   (stesso margine ai due lati: a 1440 147,75px) */
.album-cover {
    grid-column: 1;
    justify-self: center;
    width: 438px;
    max-width: calc(100% - 2 * var(--page-margin-wide));
    margin-top: 90px;
}

.album-cover img {
    width: 100%;
    height: auto;
}

/* Testo con il bordo alto allineato a quello della foto */
.album-intro-text {
    grid-column: 2;
    margin-top: 90px;
    font-family: var(--font-secondary);
    font-size: var(--text-body);
    line-height: var(--line-height-body);
    color: var(--color-accent);
}

.album-quote {
    margin: 26px 0 0;
}

/* La prima riga (credits o citazione) parte sempre dal bordo alto del blocco */
.album-intro-text > :first-child {
    margin-top: 0;
}

/* Credits e citazione dal mini-editor: paragrafi senza spazio extra, una riga vuota tra uno e l'altro
   (come prima con le righe vuote nel campo di testo) */
.album-credits p,
.album-quote-text p {
    margin: 0;
}

.album-credits p + p,
.album-quote-text p + p {
    margin-top: var(--line-height-body);
}

.album-quote cite {
    display: block;
    font-size: 15px;
    font-style: italic;
    line-height: var(--line-height-26);
}

/* Galleria: 4 colonne da x 80 a x 1360, 120px sotto la foto principale o sotto il testo
   (quello che finisce più in basso) */
.album-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 27px;
    margin-top: 120px;
    padding: 0 var(--page-margin-wide);
}

.album-gallery-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    aspect-ratio: 1 / 1;
}

/* Foto intera dentro il quadrato, mai ritagliata: le verticali prendono tutta l'altezza
   (vuoto ai lati), quadrate e orizzontali tutta la larghezza (vuoto sopra e sotto).
   Il contenitore ha le proporzioni della foto, così il codice giallo sta sul suo angolo. */
.album-gallery-photo {
    position: relative;
    display: block;
}

.album-gallery-photo--vertical {
    height: 100%;
}

.album-gallery-photo--horizontal {
    width: 100%;
}

.album-gallery-photo img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Codice foto (01, 02…): quadrato giallo nell'angolo in alto a sx della foto, visibile al passaggio del mouse.
   È il codice che l'utente riporta nel form Contatti. Sopra il velo anti-trascinamento. */
.album-gallery-code {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--color-secondary);
    color: var(--color-accent);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.album-gallery-item:hover .album-gallery-code {
    opacity: 1;
}

/* Telefoni e tablet (niente mouse): codice sempre visibile; toccando la foto scompare
   (03/11, js/album-gallery-code.js), un altro tocco lo fa ricomparire */
@media (hover: none) {
    .album-gallery-code {
        opacity: 1;
    }
    .album-gallery-item.is-code-hidden .album-gallery-code {
        opacity: 0;
    }
}

/* Layer foto (da 769px, desktop e tablet; js/album-lightbox.js): velo bianco 95% a tutto schermo,
   foto cliccata alta 600px al centro (le quadrate 400 → 150%), X in alto a destra.
   Cliccando ovunque si chiude. */
@media (min-width: 769px) {
    .album-gallery-item {
        cursor: zoom-in;
    }
}

.album-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    cursor: zoom-out;
}

.album-lightbox[hidden] {
    display: none;
}

/* X bianca su quadrato #222 da 32px (icona del menu mobile in negativo) */
.album-lightbox-close {
    position: absolute;
    top: 40px;
    right: var(--page-margin-wide);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    outline: none;
    background: #222;
    cursor: pointer;
}

.album-lightbox-close img {
    width: 12px;
    height: 12px;
    filter: invert(1);
}

/* Frecce ‹ › per sfogliare (30/10): virgolette singole di Karla 200 (come X e codice giallo; provato 300), 68px,
   #222 come il fondo della X, ai lati dello schermo */
.album-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    border: 0;
    outline: none;
    background: none;
    font-family: var(--font-primary);
    font-size: 68px;
    font-weight: 200;
    line-height: 1;
    color: #222;
    cursor: pointer;
}

.album-lightbox-prev {
    left: var(--page-margin-wide);
}

.album-lightbox-next {
    right: var(--page-margin-wide);
}

.album-lightbox-nav[hidden] {
    display: none;
}

.album-lightbox-photo {
    display: block;
}

/* Sempre 600px di altezza; su schermi bassi si riduce per restare intera.
   30/10: mai più larga dello spazio tra le frecce (margine 80 + freccia e respiro 70 per lato):
   su tablet le orizzontali si rimpiccioliscono, intere (contain), senza coprire le frecce.
   A 1440 nessun cambiamento (spazio 1140px). */
.album-lightbox-photo img {
    display: block;
    width: auto;
    height: 600px;
    max-height: calc(100vh - 160px);
    max-width: calc(100vw - 2 * (var(--page-margin-wide) + 70px));
    object-fit: contain;
}

html.has-lightbox {
    overflow: hidden;
}

/* CTA "Se ti interessano queste foto" (y 3728 → 4442): stile in homepage.css (.cta-box),
   qui solo le spaziature di questo frame */
.cta-box--album {
    --cta-icon-gap: 59px;
    --cta-text-gap: 61px;
    --cta-btn-gap: 70px;
    margin-top: 160px;
    padding-bottom: 89px;
}

/* ECCEZIONE Source (30/10): testo largo 620px (Figma 576), così "…alle preview del sito." sta su una riga */
.cta-box--album .cta-box-text {
    max-width: 620px;
}

/* Vedi altri album: 2 foto 270×270 distanziate 160px, centrate */
.album-related {
    padding: 91px var(--page-margin) 118px;
    text-align: center;
}

/* Domaine Display Regular (30/10, era Source Serif 500): il Display esiste solo in 400 e 700 */
.album-related-title {
    font-family: var(--font-display);
    font-size: 26px; /* 04/11, era 24 */
    font-weight: 400;
    line-height: var(--line-height-26); /* uguale alla misura: è su una riga sola */
    color: var(--color-text-gray);
}

.album-related-grid {
    display: flex;
    justify-content: center;
    gap: 160px;
    margin-top: 61px;
}

.album-related-item {
    width: 270px;
    text-align: left;
}

.album-related-media {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--color-primary);
}

.album-related-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-related-name {
    display: block;
    margin-top: 20px;
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 600;
    line-height: var(--line-height-24);
    color: var(--color-text);
}

.album-related-item:hover .album-related-name {
    color: var(--color-secondary);
}

/* Se non c'è la CTA, la galleria resta a 160px dalla sezione successiva */
.album-gallery + .album-related {
    margin-top: 70px;
}

/* ========================================================
   RESPONSIVE — tablet (769–1200px) = stesse regole del desktop (29/10)
   ======================================================== */

/* Header mobile fisso fino a 900px: lo spazio lo dà già il body (homepage.css) */
@media (max-width: 900px) {
    .album-single {
        margin-top: 0;
    }
}

/* Album mobile: Figma "archivio-page", frame "album - mobile" (node 51:100).
   Dal Figma solo grafica e spazi; contenuti (testi, foto principale, galleria) come nel desktop.
   Testi a 33px dai bordi come le altre pagine. */
@media (max-width: 768px) {
    .album-single {
        padding-top: 40px;
    }

    /* Tutto in colonna, nell'ordine: categoria, titolo, foto, testo */
    .album-intro {
        display: block;
        padding: 0 33px;
    }

    .album-category,
    .album-title {
        max-width: none;
        margin-left: 0;
    }

    .album-title {
        font-size: var(--text-48);
        line-height: 42px;
    }

    /* Foto principale 405px a sx, 40px sotto il titolo */
    .album-cover {
        width: 405px;
        max-width: 100%;
        margin-top: 40px;
    }

    /* Testo 40px sotto il titolo (o sotto la foto principale) */
    .album-intro-text {
        margin-top: 40px;
    }

    /* Galleria in colonna: foto 281px centrate, 28px tra una e l'altra, 60px sotto il testo */
    .album-gallery {
        grid-template-columns: minmax(0, 281px);
        justify-content: center;
        gap: 28px;
        margin-top: 60px;
        padding: 0;
    }

    /* Riquadro grigio: 120px sotto la galleria, 60px tra gli elementi, titolo 36/36 */
    .cta-box--album {
        --cta-icon-gap: 60px;
        --cta-text-gap: 60px;
        --cta-btn-gap: 40px;
        margin-top: 120px;
        padding: 60px 33px;
    }

    .cta-box--album .cta-box-title {
        font-size: 36px;
        line-height: 36px;
    }

    /* Vedi altri album: foto 200×200 in colonna, 40px tra un album e l'altro */
    .album-related {
        padding: 60px 33px;
    }

    .album-related-grid {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        margin-top: 40px;
    }

    .album-related-item {
        width: 200px;
    }

    .album-gallery + .album-related {
        margin-top: 60px;
    }

    /* Footer: sopra è tutto bianco, quindi filetto a tutta larghezza (senza margini), logo 40px sotto
       (come tutte le pagine) */
    body:not(.home) .site-footer {
        padding-top: 40px;
        border-top: var(--border-width) solid var(--color-accent);
    }

    body:not(.home) .footer-content {
        padding-top: 0;
        border-top: 0;
    }
}