/*
 * Tema `chplus` — CH+ architecture partners.
 *
 * L'impaginazione e' quella di bergmeisterwolf.it, riprodotta dai valori del suo
 * foglio di stile e non a occhio: container 1330px, corpo 1.125rem/1.625rem in
 * #b2b2b2, sezioni a 50px, fondo grigio #f7f8f8, transizione
 * cubic-bezier(.19,1,.22,1) mezzo secondo.
 *
 * ⚠️ I caratteri si nominano per RUOLO ( --font-light / --font-book / --font-medium ),
 * mai col nome del font: la sostituzione di Berthold Imago sta tutta in `fonts.css`,
 * e questo file non deve sapere quale carattere sia arrivato.
 *
 * ⚠️ Niente Bootstrap. Il riferimento lo usa, ma qui servono sei classi di griglia
 * su dodici colonne: portarsi 120 KB per quelle e' peso che il visitatore paga.
 */

:root {
    --font-light:  'chplus-light',  system-ui, sans-serif;
    --font-book:   'chplus-book',   system-ui, sans-serif;
    --font-medium: 'chplus-medium', system-ui, sans-serif;

    /* i grigi del riferimento, contati sul suo foglio: #b2b2b2 e' il piu' usato */
    --ink:        #b2b2b2;   /* il testo: grigio, non nero */
    --ink-strong: #000000;   /* solo al passaggio del mouse e sulla voce attiva */
    --ink-soft:   #808080;
    --ink-faint:  #b9b9b9;   /* i contatti in fondo */
    --heading:    #666666;   /* i titoli: piu' scuri del testo, che resta #b2b2b2 */
    --rule:       #b9b9b9;
    --paper:      #ffffff;
    --paper-alt:  #f7f8f8;   /* la fascia dei riconoscimenti */

    /* ⚠️ 81x32 e' la misura a cui il marchio si vede su ch-plus.com ( `.logo-holder` e'
       90px, e i glifi occupano l'89,9% di quel PNG ), e i 32 in altezza sono anche
       l'area di contenuto della testata del riferimento: le due misure combaciano.
       E' l'unica misura del logo, l'altezza la calcola il rapporto. */
    --logo-width: 81px;

    --container:  1330px;
    --gutter:     15px;

    /* la stessa curva del riferimento, su ogni transizione */
    --ease: cubic-bezier( 0.19, 1, 0.22, 1 );
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var( --paper );
    color: var( --ink );
    font-family: var( --font-book );
    font-size: 1.125rem;
    line-height: 1.625rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var( --font-medium );
    font-weight: 400;
    margin-top: 0;
    color: var( --heading );
}

p { line-height: 1.725rem; margin-bottom: 15px; font-size: inherit; }

a {
    color: var( --ink );
    text-decoration: none;
    line-height: inherit;
    transition: all 0.5s var( --ease ) 0s;
}
a:hover, a:focus { color: var( --ink-strong ); }

img { max-width: 100%; height: auto; border: 0; }

/* ⚠️ Il browser da' a `figure` un margine suo — `1em 40px` — e quei 40px spostavano le
   fotografie di una scheda progetto a destra del menu, restringendole di 80. Nella lista
   non si vedeva perche' li' `.project-item figure` lo azzerava gia'. Qui una volta per
   tutte: una figura e' un contenitore, non un blocco rientrato. */
figure { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }


/* ─── griglia ───────────────────────────────────────────────────────────────
   Dodici colonne come il riferimento, ma in flex invece che in float.
   ⚠️ I margini negativi sulla riga e il padding sulle colonne devono restare
   pari: e' cio' che tiene le immagini allineate al bordo del container. */

.container {
    width: 100%;
    max-width: var( --container );
    margin: 0 auto;
    padding: 0 var( --gutter );
}

/* ⚠️ Sotto i 1400px il riferimento STRINGE il container a 1180px: e' da li' che
   viene il margine laterale largo su un portatile. Senza questa riga il contenuto
   resta a 1330 e su uno schermo da 1366 tocca quasi il bordo. Il --gutter NON
   cambia: i margini negativi della riga devono restare pari al padding delle
   colonne, o le immagini si scollano dal bordo del container. */
@media ( max-width: 1399px ) {
    :root { --container: 1180px; }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc( var( --gutter ) * -1 );
    margin-right: calc( var( --gutter ) * -1 );
}

.row > [class*="col-"] {
    position: relative;
    width: 100%;
    padding-left: var( --gutter );
    padding-right: var( --gutter );
}

.col-3  { flex: 0 0 25%;      max-width: 25%; }
.col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-6  { flex: 0 0 50%;      max-width: 50%; }
.col-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9  { flex: 0 0 75%;      max-width: 75%; }
.col-12 { flex: 0 0 100%;     max-width: 100%; }

.offset-4 { margin-left: 33.3333%; }

.section-row { padding: 50px 0; }
.gray-bg     { background-color: var( --paper-alt ); }


/* ─── testata ───────────────────────────────────────────────────────────── */

/* ⚠️ 50 + 32 + 40 = i 122px di testata del riferimento, e i 32 del mezzo sono
   esattamente l'altezza del marchio ( --logo-width ). L'altezza NON e' fissata a
   122px come li': sotto i 991 il menu va a capo su tre righe, e una misura fissa lo
   taglierebbe. */
.site-header {
    padding: 50px 0 40px;
    background: var( --paper );
}

/*
 * ⚠️ IL MENU PARTE DA UN TERZO, non dal centro: e' la verticale su cui comincia la
 * colonna delle immagini, e nel riferimento le due cose combaciano al pixel — la
 * prima voce del menu e la prima fotografia stanno tutte e due a 686,3 su una
 * finestra da 1786. Li' l'allineamento viene dalla griglia ( logo in `col-4`, menu e
 * segni in `col-8` ); qui la fascia del marchio prende lo stesso terzo, e il menu
 * comincia subito dopo. Centrato — com'era prima — non si appoggiava a niente.
 *
 * ⚠️ Allineati in alto, il menu galleggiava sopra il piede del logo, che e' piu' alto di
 * una riga di testo: la riga poggia sul suo bordo inferiore.
 */
.site-header .row {
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 0;
}

.site-header .header-side {
    flex: 0 0 33.3333%;
    min-width: 0;
    padding: 0 var( --gutter );
    display: flex;
    align-items: flex-end;
}
/* i segni prendono lo spazio che avanza e si appoggiano al bordo destro */
.site-header .header-side-end { flex: 1 1 auto; justify-content: flex-end; }
.site-header .main-nav { flex: 0 0 auto; padding: 0 var( --gutter ); }

/* ⚠️ `display: flex` e non un div qualunque: con il link `inline-block` il marchio sta
   dentro una RIGA DI TESTO, e sotto di lui resta lo spazio del descender — 6,5px che
   facevano una testata di 128,5px dove il riferimento ne misura 122. Un contenitore
   flex non ha line-box, quindi l'altezza e' quella del marchio e basta. */
.logo {
    display: flex;
    color: var( --ink-strong );
}
.logo a { display: block; color: inherit; }

/*
 * ⚠️ IL MARCHIO E' UNA MASCHERA, NON UN'IMMAGINE. Il logo di ch-plus.com e' bianco su un
 * rettangolo NERO PIENO ( alpha 255 su tutti i pixel ): messo com'e' su carta bianca
 * sarebbe una macchia nera. Il file e' stato riscritto con l'alpha ricavato dalla
 * luminanza, e qui porta la SOLA forma — il colore lo mette il tema, quindi un tema
 * scuro cambia una variabile invece di chiedere un secondo file.
 *
 * ⚠️ Una misura sola: la seconda la da' `aspect-ratio`, che e' quello dei glifi
 * ( 1491x589 ). Scriverle tutte e due significa che un giorno divergono e il logo si
 * schiaccia.
 */
.logo .brand-mark {
    display: block;
    width: var( --logo-width );
    aspect-ratio: 1491 / 589;
    background-color: currentColor;
    -webkit-mask: url( '../images/logo.webp' ) no-repeat center / contain;
            mask: url( '../images/logo.webp' ) no-repeat center / contain;
}

.main-nav ul { display: flex; gap: 34px; }

/* ⚠️ Le tre barre sono un SVG nel markup, disegnate col tratto come i segni social:
   stesso peso di linea, quindi accanto a loro non stonano.
   Si mostra solo sotto i 767 e solo con `has-menu-panel`, cioe' col JS acceso. */
.menu-btn {
    display: none;
    margin-left: 16px;
    padding: 4px;
    border: 0;
    background: none;
    color: var( --ink );
    cursor: pointer;
    transition: color 0.5s var( --ease ) 0s;
}
.menu-btn svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
}
.menu-btn:hover,
.nav-active .menu-btn { color: var( --ink-strong ); }

/* ⚠️ Il minuscolo e' una scelta di STILE, quindi sta qui: le etichette nel documento
   restano "Home", "Studio", e nell'albero dell'editor si leggono come si e' scritto. */
.main-nav li { font-size: 1rem; text-transform: lowercase; }
.main-nav a  { color: var( --ink ); }
.main-nav .active > a,
.main-nav a:hover { color: var( --ink-strong ); }

/*
 * ⚠️ I segni sono CONTORNATI, non pieni: a 18px una "f" piena dentro un quadrato impasta,
 * e un contorno sottile sta accanto a un menu leggero senza pesare. Il tratto e' l'unica
 * cosa colorata — `fill: none` sta sull'elemento, e la spia di Instagram lo rovescia.
 */
.social-links { display: flex; align-items: center; gap: 14px; padding: 4px; }

.social-link { display: block; color: var( --ink ); }
.social-link:hover { color: var( --ink-strong ); }

.social-link svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.social-link svg .filled { fill: currentColor; stroke: none; }


/* ─── fascia di apertura ────────────────────────────────────────────────── */

.section-banner-row  { padding: 0; }
.section-banner-img img { width: 100%; height: auto; display: block; }

/* Il testo grande d'apertura: rientrato di un terzo, come nel riferimento. */
.text-bigger,
.text-bigger p,
.text-bigger .text-block {
    font-family: var( --font-light );
    font-size: 32px;
    line-height: 1.4;
}


/* ─── elenco dei progetti ───────────────────────────────────────────────── */

.projects { margin-bottom: 40px; }

/* la colonna di sinistra: le categorie, testo semplice e nient'altro */
.side-nav { padding-right: 40px; }
.side-nav .side-nav-group { margin-bottom: 35px; }
/* ⚠️ 26px di interlinea, non 20: nel riferimento il passo fra due categorie e' di 41px
   ( 26 + 15 di margine ), MISURATO — la regola dice solo `font-size: 15px` e
   l'interlinea la eredita. Con i 20px che il valore scritto lasciava intendere, la
   colonna risultava piu' fitta di 6px a voce. */
.side-nav li {
    margin-bottom: 15px;
    color: var( --ink );
    font-size: 15px;
    line-height: 1.625rem;
}
.side-nav li a          { color: var( --ink ); }
.side-nav li a:hover    { color: var( --ink-soft ); }
.side-nav li.active a,
.side-nav li.active     { color: var( --ink-strong ); }

/* ⚠️ Sticky e non fixed: la colonna deve fermarsi in fondo alla lista, non
   galleggiare sopra il footer.
   ⚠️ `max-height` + `overflow` sono la rete di sicurezza: una colonna piu' alta
   della finestra non si aggancia piu' e scorre via insieme alla pagina. Con gli
   anni raggruppati le voci sono quattordici e ci stanno, ma una tipologia in piu'
   non deve far tornare il difetto. */
.side-nav-inner {
    position: sticky;
    top: 30px;
    max-height: calc( 100vh - 60px );
    overflow-y: auto;
    /* la barra di scorrimento non deve comparire finche' non serve davvero */
    scrollbar-width: thin;
}

/* ─── il gruppo degli anni ───────────────────────────────────────────────
   <details> nativo: si apre da tastiera e funziona senza JavaScript. Va pero'
   spogliato del suo aspetto di sistema, che con questa tipografia stona. */

.side-nav-years summary {
    margin-bottom: 15px;
    color: var( --ink );
    font-size: 15px;
    line-height: 1.625rem;   /* lo stesso passo delle voci */
    cursor: pointer;
    list-style: none;          /* via il triangolo standard… */
    position: relative;
    padding-right: 16px;
    transition: color 0.5s var( --ease ) 0s;
}
.side-nav-years summary::-webkit-details-marker { display: none; }   /* …anche su Safari */

.side-nav-years summary:hover { color: var( --ink-soft ); }

/* un segno discreto al posto del triangolo: due lati di un quadrato ruotati */
.side-nav-years summary::after {
    content: "";
    position: absolute;
    right: 2px;
    top: 0.45em;
    width: 6px;
    height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate( 45deg );
    transition: transform 0.3s var( --ease ) 0s;
}
.side-nav-years[open] summary::after { transform: rotate( -135deg ); top: 0.7em; }

/* aperto, il gruppo si stacca appena da cio' che lo precede */
.side-nav-years[open] summary { color: var( --ink-strong ); }
.side-nav-years ul { padding-left: 0; }

.project-stream .project-item { margin-bottom: 70px; }

.project-item figure { margin: 0; background: var( --paper ); position: relative; z-index: 1; }
/* ⚠️ Il velo al 2% non e' decorazione: e' cio' che impedisce a una foto con i bordi
   chiari di sparire dentro il bianco della pagina. Sta anche nel riferimento. */
.project-item figure::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.02;
    z-index: -1;
}
/* ⚠️ L'ALTEZZA E' FISSA e la larghezza la decide la forma della fotografia: e' il modo
   di NON espandere una verticale. A piena larghezza una 2000x2666 andava tagliata a
   una fetta centrale, e sembrava ingrandita; cosi' resta stretta e intera, e le
   copertine si allineano fra loro sul bordo alto invece che sulla larghezza.
   ⚠️ E' un TETTO, non una misura imposta, e la differenza e' misurata sulle 56
   copertine vere: la colonna e' larga 857, quindi a 50vh ( 634 su una finestra da
   1267 ) ci sta intera solo una fotografia piu' stretta di 1,35 — e 48 su 56 sono piu'
   larghe di cosi'. Con l'altezza IMPOSTA, una panoramica 2000x772 lasciava 303px di
   bianco sotto di se' prima della didascalia. Col tetto ognuna arriva dove puo':
   le verticali si fermano a 634 e restano strette, le orizzontali riempiono la
   colonna.
   ⚠️ `fit-content` sul `figure` e' cio' che tiene il velo al 2% dietro la sola
   fotografia: largo quanto la colonna, si vedrebbe come un rettangolo grigio accanto
   alle verticali. */
.project-item figure { width: fit-content; }
.project-item img {
    display: block;
    height: auto;
    width: auto;
    max-height: 50vh;
    max-width: 100%;
}

/* la didascalia: la parola-concetto in medium, il nome del progetto in book */
.details { padding-top: 10px; position: relative; }
/* ⚠️ `:is(h1,h2,h3)` e non il solo `h3`: il livello dell'intestazione lo decide ora la
   pagina ( `headingLevel` su `banner` ), e su Contatti la didascalia della fascia e' un
   `h1`. Legata al TAG, quella pagina perdeva corpo, interlinea e colore tutti insieme.
   La specificita' non cambia: `:is()` prende quella del suo argomento piu' alto, che qui
   e' un selettore di tipo. */
.details :is( h1, h2, h3 ) {
    font-size: 1.12rem;
    line-height: 1.25rem;
    color: var( --heading );
    margin-bottom: 0;
}
.details :is( h1, h2, h3 ) a { color: inherit; }
/* ⛔ PER CLASSE, NON PER TAG. La regola di prima era `.details .title span`, e nell'elenco
   dei progetti il concetto era testo NUDO mentre il nome stava in uno span: vestiva quindi
   il nome invece del concetto, cioe' l'esatto contrario. Negli altri template erano due
   span, e prendeva tutti e due. Ora ognuno porta il suo ruolo scritto addosso.

   ⚠️ `.details-title` accanto a `.details`: la scheda di un progetto ha l'intestazione in un
   `h1.details-title` che NON sta dentro un `.details`, quindi con il solo discendente di
   `.details` la sua didascalia restava fuori dalla regola.

   ⚠️ Lo stacco fra concetto e nome lo mette il CSS e non uno spazio nel markup: cosi' con il
   concetto vuoto non resta uno spazio davanti al nome. */
:is( .details, .details-title ) .title       { font-family: var( --font-medium ); }
:is( .details, .details-title ) .title .name { font-family: var( --font-book ); }
:is( .details, .details-title ) .title .concept:not( :empty ) { margin-right: 0.35em; }
.details .meta-info { font-size: 0.875rem; line-height: 1.5rem; }


/* ─── scheda di un progetto ─────────────────────────────────────────────── */

/* quattro colonne di testo a sinistra, otto di immagini a destra */
.content-box   { max-width: 369px; width: 100%; margin-bottom: 80px; }

/* ⚠️ Il nome del progetto e' un `h1` ( e' il titolo della pagina ), ma si vede come si
   vedeva da `h3`: 1.17em e un margine di 1em erano i valori che il BROWSER dava all'h3,
   e da h1 diventerebbero 2em e 0.67em — il titolo raddoppiava. Scritti qui una volta,
   il tag torna a essere una questione di struttura e non di misura. */
.details-title { font-size: 1.17em; margin: 0 0 1em; }

/* ⚠️ « tutti i progetti » e' l'`h1` dell'elenco, ma resta una voce di menu: `font: inherit`
   riporta corpo, famiglia, peso e interlinea a quelli della riga, che da `h1` sarebbero
   2em in grassetto. Il colore lo mette l'`a` dentro, come su tutte le altre voci. */
.list-title    { font: inherit; margin: 0; }

/* IL TESTO LUNGO DI UN MODULO — scheda progetto, `text-section`, `intro-text`.
   ⚠️ E' UN blocco, non un `<p>` per paragrafo: la property e' una stringa e gli a capo li
   disegna `nl2br`. Le misure sono quelle che i `<p>` avevano, cosi' la pagina non cambia
   aspetto.
   ⛔ Ed e' un `div` per una seconda ragione, pagata il 2026-08-26: cio' che si scrive con la
   barra di formattazione puo' essere un BLOCCO — il giustificato di Chrome salva un
   `<div style="text-align">`, una lista un `<ul>` — e un blocco dentro un `<p>` CHIUDE il
   `<p>` nel parser. Il testo finiva fuori dall'elemento con `data-prop-name`: si vedeva, e
   non si poteva piu' modificare. Un nome solo per tutti e tre i moduli, cosi' la prossima
   volta non si sbaglia in uno dei tre. */
.text-block    { line-height: 1.725rem; margin-bottom: 15px; }
.content-info  { margin-top: 65px; }

.content-info h4 {
    font-family: var( --font-book );
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: var( --ink );
    margin: 0;
}
.content-info p { font-size: 0.875rem; line-height: 1.5rem; margin: 0 0 5px; }
.content-info .info-group { margin-bottom: 25px; }
.content-info .info-label { font-family: var( --font-medium ); }

/* ⚠️ I crediti sono UN testo, e i titoletti sono il grassetto che ci si scrive dentro: la
   regola da' al `<b>` l'aspetto che aveva `.info-label`, cosi' la pagina non cambia faccia
   pur avendo perso l'elenco di coppie che il template spezzava. */
.content-info .project-details { font-size: 0.875rem; line-height: 1.5rem; }
.content-info .project-details b { font-family: var( --font-medium ); font-weight: normal; }

.project-img-box { margin-bottom: 70px; }
.project-img-box img { width: 100%; height: auto; display: block; }


/* ─── una fotografia a tutto schermo ────────────────────────────────────────
   ⚠️ La velatura la crea il JS quando serve e la toglie chiudendo: un div sempre
   presente e nascosto e' `position: fixed` a tutto schermo con `z-index` altissimo, e
   il giorno che una classe non viene tolta e' un velo invisibile che intercetta ogni
   click. E' un incidente gia' pagato, e non lascia traccia: la pagina si vede e non
   risponde. */

.project-img-box img { cursor: zoom-in; }

.full-screen-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba( 0, 0, 0, 0.92 );
    cursor: zoom-out;
}

/* ⚠️ `max-*` e non `width: 100%`: una fotografia non si INGRANDISCE oltre la sua misura
   vera, si mostra al massimo che lo schermo consente senza sbordare. */
.full-screen-overlay img {
    max-width: 92vw;
    max-height: 86vh;
    width: auto;
    height: auto;
    display: block;
}

/* le frecce: la stessa forma di quelle dello slideshow di pagina, in grande */
.full-screen-prev,
.full-screen-next {
    position: absolute;
    top: 50%;
    transform: translateY( -50% );
    width: 48px;
    height: 48px;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.5s var( --ease ) 0s;
}
.full-screen-prev:hover,
.full-screen-next:hover { opacity: 1; }

.full-screen-prev::before,
.full-screen-next::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border-top: 1px solid var( --paper );
    border-right: 1px solid var( --paper );
}
.full-screen-prev { left: 20px; }
.full-screen-next { right: 20px; }
.full-screen-prev::before { transform: rotate( -135deg ); }
.full-screen-next::before { transform: rotate( 45deg ); }

/* dove si e' nella serie: due numeri, non ventitre pallini */
.full-screen-counter {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    color: var( --paper );
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    opacity: 0.7;
    pointer-events: none;
}

@media ( max-width: 767px ) {
    .full-screen-prev { left: 6px; }
    .full-screen-next { right: 6px; }
    .full-screen-overlay img { max-width: 96vw; }
}


/* ─── le persone dello studio ─────────────────────────────────────────────
   Il ritratto riempie la colonna e nome e ruolo stanno sotto, con lo stesso
   `.details` delle didascalie: e' la stessa relazione — un'immagine e cio' che
   la nomina — quindi porta lo stesso segno.

   ⚠️ Il margine sotto serve a schermo STRETTO: sotto i 991 le colonne vanno una
   sull'altra, e senza, il ruolo di uno tocca il ritratto del successivo. */

.person-item { margin-bottom: 40px; }
.person-photo img { display: block; width: 100%; height: auto; }


/* ─── schede ──────────────────────────────────────────────────────────────
   Come le persone: la fotografia riempie la colonna, e sotto la didascalia.
   ⚠️ Il RAPPORTO E' FISSO: tre fotografie affiancate con proporzioni diverse
   ( 2000x1124 e 2000x1062 ) mettevano i titoli su tre altezze diverse. */

.card-item { margin-bottom: 40px; }
.card-item > a { display: block; }
.card-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card-item .details { margin-bottom: 10px; }
/* il titolo della scheda in grassetto: il medium, come i `<b>` delle schede progetto.
   ⚠️ Non `font-weight: bold`: il tema non ha un file bold, e il browser lo finge. */
.card-item .title .name { font-family: var( --font-medium ); }

/* la fila che scorre: tre schede in vista, le altre oltre il bordo.
   ⚠️ La barra di scorrimento RESTA, sottile, al contrario dello slideshow: qui non ci
   sono frecce ne' avanzamento automatico, e senza barra con il mouse non si scorre. */
.card-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.card-strip > .card-item { scroll-snap-align: start; }
.card-strip:focus-visible { outline: 1px solid var( --ink ); outline-offset: 3px; }


/* ─── riconoscimenti ────────────────────────────────────────────────────── */

.awards-row { padding: 150px 0; }
.awards-img { margin: 15px 0; text-align: center; }
.awards-img img { max-width: 100%; width: auto; height: auto; }


/* ─── piede ─────────────────────────────────────────────────────────────── */

/* ─── banner dei cookie ─────────────────────────────────────────────────────
   Una fascia in basso, con i colori del sito: un'etichetta, non un avviso.
   ⚠️ `:not([hidden])` sul `display`: scritto sul solo tag, `flex` vincerebbe
   sull'attributo `hidden` e il banner comparirebbe anche a chi ha gia' scelto. */

cookie-consent:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    /* ⚠️ La fascia e' larga quanto la finestra, il contenuto quanto il container: sui
       bordi dello schermo testo e bottoni stavano fuori dalla griglia del sito */
    padding: 18px max( var( --gutter ), calc( ( 100% - var( --container ) ) / 2 + var( --gutter ) ) );
    background: var( --paper );
    border-top: 1px solid var( --rule );
    color: var( --ink-soft );
    font-size: 0.875rem;
    line-height: 1.5rem;
}
.cookie-consent-text a { color: var( --ink-strong ); text-decoration: underline; }
.cookie-consent-buttons { display: flex; gap: 10px; flex: 0 0 auto; }

/* ⚠️ I due bottoni sono IDENTICI: un « Rifiuta » meno visibile non e' una scelta libera */
.cookie-consent-buttons button {
    font: inherit;
    font-family: var( --font-medium );
    color: var( --ink-strong );
    background: none;
    border: 1px solid var( --ink-strong );
    padding: 6px 18px;
    cursor: pointer;
    transition: all 0.5s var( --ease ) 0s;
}
.cookie-consent-buttons button:hover { background: var( --ink-strong ); color: var( --paper ); }

@media ( max-width: 767px ) {
    cookie-consent:not([hidden]) { flex-direction: column; align-items: stretch; padding: 16px 20px; }
    .cookie-consent-buttons button { flex: 1; }
}

.site-footer { padding: 50px 0 30px; }

.site-footer .footer-nav li {
    font-family: var( --font-medium );
    font-size: 0.875rem;
    line-height: 1.5rem;
    margin-bottom: 15px;
    text-transform: lowercase;   /* le stesse voci della testata, stessa forma */
}

/* Il piede porta gli stessi segni, sotto le voci */
.site-footer .social-links { margin-top: 25px; }

.site-footer .contact-info address {
    font-style: normal;
    margin-bottom: 10px;
    padding-bottom: 10px;
    position: relative;
}
/* il trattino di 10px sotto ogni indirizzo, come nel riferimento */
.site-footer .contact-info address::after {
    content: "";
    display: block;
    width: 10px;
    height: 1px;
    background-color: var( --rule );
    position: absolute;
    left: 0;
    bottom: 0;
}
/* ⚠️ `p, address > div`: le due righe modificabili di una sede sono `div` e non `<p>`, perche'
   un blocco salvato dalla barra di formattazione chiuderebbe il `<p>`. La regola vale per
   tutte e due le forme, cosi' il telefono e la posta — che `<p>` restano — non cambiano. */
.site-footer .contact-info :is( p, address > div ) {
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: var( --ink-faint );
    margin: 0;
}
.site-footer .contact-info a { text-decoration: underline; }

.site-footer .copyright,
.site-footer .legal-links {
    font-size: 0.875rem;
    line-height: 0.875rem;
    color: var( --ink );
    margin: 0;
}
.legal-links { text-align: right; }
.legal-links a + a { margin-left: 12px; }


/* ─── in modifica ───────────────────────────────────────────────────────── */

/*
 * ⚠️ Qui sta SOLO cio' che dipende dal markup di QUESTO tema. Selezione, testi
 * modificabili e indicatori di rilascio arrivano da `res/css/inline-edit.css`, che
 * `page-composer.php` inietta da se' con `?edit=1`: erano copiati in ogni tema, e il
 * tema che se li dimenticava aveva un editor che sembrava rotto.
 */

/* ⚠️ Con l'insegna sopra lo slideshow la didascalia di una slide e' nascosta ( vedi piu'
   su ): in modifica pero' quel testo deve essere raggiungibile, altrimenti si puo'
   cambiare la foto e non cio' che ci sta scritto sotto. */
.editing .slideshow.has-overlay .slideshow-slide .details {
    display: block;
    opacity: 0.55;
}


/* ─── schermi stretti ─────────────────────────────────────────────────────
   ⚠️ I quattro scalini sono quelli del riferimento ( 1023 / 991 / 767 / 567 ) e
   vanno in quest'ordine: sono tutti `max-width`, quindi il piu' stretto deve stare
   PIU' IN BASSO o non vince. I 991 sono nostri — il riferimento li' usa la griglia
   di Bootstrap, che collassa a 992 — e restano il punto in cui le colonne si
   impilano. */

@media ( max-width: 1023px ) {
    .text-bigger, .text-bigger p, .text-bigger .text-block { font-size: 28px; }
    .awards-row { padding: 100px 0; }
}

@media ( max-width: 991px ) {
    .col-3, .col-4, .col-6, .col-8, .col-9 { flex: 0 0 100%; max-width: 100%; }
    .offset-4 { margin-left: 0; }

    /* ⚠️ Nella fila le schede NON si impilano: restano affiancate, e la successiva
       spunta dal bordo per dire che si scorre. */
    .card-strip > .card-item { flex: 0 0 80%; max-width: 80%; }

    /* Le tre fasce della testata vanno una sotto l'altra, tutte centrate */
    .site-header .row { flex-wrap: wrap; justify-content: center; }
    .site-header .header-side { flex: 0 0 100%; justify-content: center; }
    .site-header .main-nav ul { flex-wrap: wrap; justify-content: center; }

    /* ⚠️ Su mobile la colonna delle categorie va SOPRA i progetti e torna
       orizzontale: sticky su uno schermo alto 700px mangerebbe mezza pagina. */
    .side-nav { padding-right: 0; margin-bottom: 30px; }
    .side-nav-inner { position: static; }
    .side-nav ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
    .side-nav li { margin-bottom: 10px; }

    .content-box { max-width: none; margin-bottom: 40px; }
    .content-info { margin-top: 35px; }
    .project-img-box { margin-bottom: 30px; }
    .legal-links { text-align: left; margin-top: 20px; }
}

@media ( max-width: 767px ) {
    /* sul telefono il riferimento allarga il solo padding del container, non il gutter */
    .container { padding: 0 20px; }

    /* la testata del riferimento passa da 122px a 72px: 30 + 22 di contenuto + 20 */
    .site-header { padding: 30px 0 20px; }
    .main-nav ul { gap: 20px; }
    .project-stream .project-item { margin-bottom: 40px; }
    .section-row { padding: 30px 0; }
    .awards-row { padding: 50px 0; }
    .text-bigger, .text-bigger p, .text-bigger .text-block { font-size: 24px; }
}

@media ( max-width: 567px ) {
    .text-bigger, .text-bigger p, .text-bigger .text-block { font-size: 20px; }
    .awards-row { padding: 30px 0; }
    .content-info { margin-top: 30px; }
    .project-img-box { margin-bottom: 20px; }
}


/* ─── il menu di lato, sul telefono ─────────────────────────────────────────
   Sotto i 767 la navigazione esce dalla testata e diventa un pannello che entra da
   destra, mentre la pagina slitta a sinistra: le misure e i colori sono quelli del
   riferimento ( 275px, grigio, voci bianche, la sua curva ).

   ⚠️ TUTTO STA DIETRO `has-menu-panel`, che mette il JS. Senza — JavaScript spento,
   file non arrivato — queste regole non si applicano e il menu resta impilato nella
   testata: raggiungibile. Scritte senza guardia, un browser senza JS avrebbe il menu
   parcheggiato fuori schermo e un bottone che non lo riporta indietro.

   ⚠️ IL PANNELLO SI APRE SOPRA LA PAGINA, che resta ferma. Prima la spingeva di lato
   ( come fa il riferimento con `#container` ): tre elementi che si muovono insieme
   animando `left` vogliono un ricalcolo del layout a ogni fotogramma, e sul telefono
   il movimento si impuntava. Ora si muove il solo pannello, e con `transform`, che
   il browser sposta senza rifare il layout. */

@media ( max-width: 767px ) {

    .has-menu-panel .menu-btn { display: block; }

    /* ⚠️ Col pannello acceso la testata torna su UNA riga — marchio a sinistra, segni e
       "menu" a destra, come nel riferimento: le tre fasce impilate dei 991 servivano a
       far stare il menu, che ora non e' piu' li'. Senza JS il menu resta nella riga, e
       queste regole non si applicano: e' il motivo della guardia anche qui. */
    .has-menu-panel .site-header .row { flex-wrap: nowrap; }
    .has-menu-panel .site-header .header-side { flex: 1 1 auto; justify-content: flex-start; }
    .has-menu-panel .site-header .header-side-end { justify-content: flex-end; }

    /* ⚠️ LA TESTATA APRE IL SUO CONTESTO DI IMPILAMENTO, e non e' un dettaglio: il
       pannello sta DENTRO di lei, quindi finche' la testata non e' posizionata il
       pannello si difende da solo, un elemento per volta — e basta che qualcosa piu' in
       basso nella pagina apra un contesto proprio ( un `transform`, un `position` con
       z-index ) perche' gli passi davanti. Posizionata la testata, sale tutto insieme:
       il pannello non puo' piu' finire sotto niente di cio' che sta nella pagina.
       ⚠️ Sotto la velatura della fotografia a tutto schermo ( 9999 ), che deve coprire
       anche la testata. */
    .has-menu-panel .site-header { position: relative; z-index: 9000; }

    .has-menu-panel .site-header .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 275px;
        height: 100%;
        overflow-y: auto;
        padding: 25px 40px;
        background: var( --ink );
        z-index: 1000;

        /* ⛔ `translate3d` e non `translateX`, e `backface-visibility: hidden` accanto: e' il
           rimedio collaudato al LAMPO A FINE ANIMAZIONE su WebKit — il pannello sembra
           cambiare opacita' nell'ultimo fotogramma. Misurato che non e' una transizione
           nostra: aprendo il menu ne partono DUE sole, `transform` sul pannello e `color`
           sul bottone, e nel tema il pannello non ha nessuna `opacity`. E' il renderer che
           chiude lo strato grafico; con una trasformazione 3D lo strato e' suo dall'inizio
           e non c'e' niente da chiudere. */
        transform: translate3d( 100%, 0, 0 );
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;

        /* ⛔ LO STRATO GRAFICO GLIELO TENIAMO NOI, e non e' micro-ottimizzazione: mentre
           trasla, il browser promuove il pannello a strato suo e lo ridisegna quando la
           corsa finisce. Quel ridisegno si VEDE — un balzo di opacita' a fine animazione,
           che sembra un difetto della transizione e invece e' il passaggio di consegne fra
           il compositore e la pagina. Dichiarandolo qui lo strato esiste da fermo, aperto e
           chiuso: non c'e' piu' nessun passaggio da fare a fine corsa.
           ⚠️ Sta sulla regola BASE e non sullo stato aperto: promosso solo da aperto, il
           passaggio si sposterebbe all'inizio invece di sparire. */
        will-change: transform;
    }

    /* ⚠️ LA TRANSIZIONE STA QUI, sullo stato aperto, e non sulla regola di sopra: si
       anima secondo cio' che l'elemento dichiara DOPO il cambio, quindi entrando trova
       mezzo secondo di scorrimento e uscendo torna alla regola base, che non ne ha —
       il pannello sparisce e basta. Scritta sulla regola base, animerebbe tutte e due
       le direzioni. */
    .has-menu-panel .nav-active .main-nav {
        transform: translate3d( 0, 0, 0 );
        transition: transform 0.5s var( --ease ) 0s;
    }

    .has-menu-panel .main-nav ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .has-menu-panel .main-nav li { margin: 0; font-size: 16px; }
    .has-menu-panel .main-nav a,
    .has-menu-panel .main-nav span { color: var( --paper ); }
    .has-menu-panel .main-nav a:hover,
    .has-menu-panel .main-nav .active > a { color: var( --ink-strong ); }

    /* ⚠️ `overflow-x` sempre, non solo da aperto: il pannello sta appoggiato al bordo
       destro e chiuso e' tradotto FUORI, quindi senza questa riga la pagina avrebbe una
       barra di scorrimento orizzontale che porta sul nulla. Da aperto si ferma anche lo
       scorrimento verticale, cosi' la pagina dietro non scivola sotto il dito. */
    .has-menu-panel body { overflow-x: hidden; }
    .has-menu-panel body.nav-active { overflow: hidden; }
}


/* ─── slideshow ─────────────────────────────────────────────────────────────
   ⚠️ Prima di tutto e' una striscia che scorre, e funziona COSI' anche senza
   JavaScript: `scroll-snap` da' lo scatto, il dito e il trackpad fanno il resto.
   Il JS aggiunge frecce, pallini e avanzamento — se non parte non si perde
   niente di leggibile. Uno slideshow costruito al contrario ( slide nascoste,
   la prima mostrata dallo script ) senza script non mostra NULLA. */

/* ⚠️ Il riferimento per l'insegna e per le frecce e' il CONTENITORE, non il blocco
   esterno: con `position: relative` sul solo `.slideshow`, la velatura si stendeva per
   tutta la larghezza della pagina e ai lati dell'immagine restavano due macchie grigie
   sul bianco. */
.slideshow > .container { position: relative; }

.slideshow {
    position: relative;
    margin-bottom: 40px;
    /* ⚠️ L'altezza e' quella dell'apertura del riferimento, MISURATA: li' la fascia e'
       un'immagine sola 1280x853 con `height: auto` dentro il container, cioe' 3:2 sulla
       larghezza del container. Qui le slide sono sei e vanno da 1.33 a 1.88 di
       proporzione, quindi un'altezza UNIFORME e `object-fit` restano obbligatorie —
       senza, la pagina sobbalza a ogni cambio.
       Container 1330 ( 1180 sotto i 1400 ) meno i due gutter, diviso 3:2.
       ⚠️ `100vw` comprende la barra di scorrimento: sono ~10px su 866 di altezza, e
       `cover` se li mangia. */
    --slide-height: calc(
        min( 100vw - var( --gutter ) * 2, var( --container ) - var( --gutter ) * 2 ) / 1.5 );
}

.slideshow-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* la barra sotto le fotografie e' rumore: lo scorrimento si vede dalle immagini */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.slideshow-track::-webkit-scrollbar { display: none; }
.slideshow-track:focus-visible { outline: 1px solid var( --ink ); outline-offset: 3px; }

.slideshow-slide {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
    scroll-snap-align: start;
    position: relative;
    background: var( --paper );
}
.slideshow-slide img {
    width: 100%;
    height: auto;
    display: block;
    /* ⚠️ `object-fit: cover` e non `contain`: contain lascerebbe bande vuote sopra
       e sotto le immagini piu' larghe, cover taglia un po' ai bordi. Su fotografie
       di architettura il taglio si perdona, le bande no. */
    height: var( --slide-height );
    object-fit: cover;
}

/* l'insegna sopra l'immagine — usata dall'apertura della home */
.slideshow-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var( --gutter );
    right: var( --gutter );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 var( --gutter );
    pointer-events: none;   /* il click deve arrivare alla slide sotto… */
    overflow: hidden;       /* la velatura non deve uscire dall'immagine */
}

/*
 * ⚠️ Una velatura MORBIDA dietro il solo testo, non un velo su tutta la fotografia:
 * su un cielo chiaro il bianco spariva ( il sottotitolo e il bottone erano
 * illeggibili sulla seconda slide ), ma scurire l'intera immagine per salvare tre
 * righe rovina proprio cio' che si e' venuti a guardare. Il gradiente e' centrato sul
 * testo e ai bordi non c'e' piu'.
 */
.slideshow-overlay::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY( -50% );
    height: 62%;
    background: radial-gradient( ellipse at center,
                                 rgba( 0, 0, 0, 0.42 ) 0%,
                                 rgba( 0, 0, 0, 0.22 ) 45%,
                                 rgba( 0, 0, 0, 0 ) 72% );
    pointer-events: none;
}
.slideshow-overlay > * { position: relative; }

/* l'insegna sfuma quando la striscia si muove, e torna sulla prima immagine */
.slideshow-overlay { transition: opacity 0.5s var( --ease ) 0s; }
.slideshow.overlay-hidden .slideshow-overlay { opacity: 0; pointer-events: none; }
.slideshow-overlay a { pointer-events: auto; }   /* …tranne sul bottone */

.slideshow-overlay h1 {
    font-family: var( --font-medium );
    font-size: clamp( 1.4rem, 3.2vw, 2.6rem );
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: var( --paper );
    margin: 0 0 10px;
    /* ⚠️ Un'ombra larghissima e appena percettibile, non un velo scuro sopra la
       foto: il testo bianco su una fotografia chiara sparisce, e scurire l'intera
       immagine per salvare due righe rovina proprio cio' che si vuole mostrare. */
    text-shadow: 0 1px 18px rgba( 0, 0, 0, 0.5 );
}
.slideshow-subtitle {
    font-family: var( --font-light );
    font-size: clamp( 0.8rem, 1.3vw, 1rem );
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var( --paper );
    margin: 0;
    text-shadow: 0 1px 16px rgba( 0, 0, 0, 0.5 );
}
/* ⚠️ Con l'insegna sopra, la didascalia sotto NON si mostra: la stessa immagine
   porterebbe due testi che si contraddicono. La regola sta qui e non nel template
   perche' una slide non puo' sapere cosa ha scritto sopra di lei. */
.slideshow.has-overlay .slideshow-slide .details { display: none; }

.slideshow-cta {
    margin-top: 26px;
    padding: 9px 20px;
    border: 1px solid rgba( 255, 255, 255, 0.85 );
    color: var( --paper );
    font-size: 0.875rem;
    backdrop-filter: blur( 2px );
}
.slideshow-cta:hover { background: var( --paper ); color: var( --ink-strong ); }

/* a tutta finestra: spenta di default, esiste per chi la chiede.
   90px erano l'altezza della vecchia testata; ora sono i 122 del riferimento. */
.slideshow-full { --slide-height: calc( 100vh - 122px ); }

/* le frecce */
.slideshow-controls button {
    position: absolute;
    /* a meta' dell'IMMAGINE, non del blocco: sotto ci sono i pallini, e con il 50%
       del blocco le frecce scendevano sotto il bordo della fotografia */
    top: calc( var( --slide-height ) / 2 );
    transform: translateY( -50% );
    width: 34px;
    height: 34px;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0;
    opacity: 0.55;
    transition: opacity 0.5s var( --ease ) 0s;
}
.slideshow-controls button:hover { opacity: 1; }
.slideshow-controls button::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    border-top: 1px solid var( --paper );
    border-right: 1px solid var( --paper );
}
/* ⚠️ Anche le frecce si misurano dal container: sul `.slideshow` finivano ai bordi
   della finestra, lontanissime dall'immagine su cui dovrebbero agire. */
.slideshow-prev { left: calc( var( --gutter ) + 10px ); }
.slideshow-next { right: calc( var( --gutter ) + 10px ); }
.slideshow-prev::before { transform: rotate( -135deg ); }
.slideshow-next::before { transform: rotate( 45deg ); }

/* i pallini */
.slideshow-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}
.slideshow-dot {
    width: 22px;
    height: 2px;
    padding: 0;
    border: 0;
    background: var( --ink-faint );
    cursor: pointer;
    transition: background 0.5s var( --ease ) 0s;
}
.slideshow-dot.active { background: var( --ink-strong ); }

/* ⚠️ Chi ha chiesto meno movimento non deve vedere lo scatto dello scorrimento:
   l'avanzamento automatico lo spegne gia' il JS, questo toglie l'animazione. */
@media ( prefers-reduced-motion: reduce ) {
    .slideshow-track { scroll-behavior: auto; }
    .slideshow-controls button,
    .slideshow-dot { transition: none; }
}

@media ( max-width: 767px ) {
    /* ⚠️ Qui si LASCIA il riferimento, e per un motivo: sul telefono la sua fascia 3:2
       sarebbe alta 230px, e sopra la nostra ci sta l'insegna con il nome dello studio,
       che li' non c'e'. Una frazione di finestra la tiene leggibile. */
    .slideshow { --slide-height: 46vh; }
    .slideshow-full { --slide-height: 60vh; }
    .slideshow-overlay h1 { font-size: 1.3rem; }
}

@media ( max-width: 567px ) {
    /* le frecce si stringono al bordo, come nel riferimento */
    .slideshow-prev { left: 15px; }
    .slideshow-next { right: 15px; }
    .slideshow-dots { margin-top: 10px; }
}