/* ============================================================
   La homepage — mockup/A-rivista-home.html

   Sta in un foglio suo e non in 30-componenti.css perché è l'unica pagina
   del sito che usa questi pezzi: apertura a due colonne, spalla, elenco
   news scarno, riquadro «Partecipa», fascia della missione. Le card e la
   loro griglia invece NON sono qui: sono componenti, e stanno dov'erano
   (30-componenti.css) — la home ne usa solo le varianti a colonne fisse.
   ============================================================ */

/* ---------------- apertura ---------------- */
.apertura{
  padding-block:38px 44px;
  border-bottom:1px solid var(--line);
}
.apertura .wrap{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:44px;
}

/* ── Il pezzo grande: locandina a sinistra, testo a destra (s33) ──────────
   Il cliente manda copertine A4. Dentro la colonna 7fr il foglio sta in
   piedi a sinistra (300px, alto 424, proporzione A4) e accanto occhiello,
   titolo, sottotitolo e «Continua a leggere» subito sotto. Scelta di
   Andrea fra tre prove (`confronto-s33-a4.jpeg`, A1): la cornice larga con
   il foglio contenuto lasciava due terzi di carta vuota, le tre colonne
   toglievano peso al titolo.

   ⚠️ Una forma sola, e la foto **alle sue dimensioni naturali**: larga
   quanto la colonna (300px), alta quanto viene — una locandina A4 fa 424,
   il logo orizzontale 212. Niente cornice fissa, niente carta intorno,
   niente ritaglio. È l'unico posto del sito dove la figura non ha un
   riquadro: qui la foto è il pezzo, non una miniatura. Le due versioni
   precedenti — disposizione che cambiava secondo la proporzione del file,
   poi cornice A4 con la foto contenuta su carta — Andrea le ha bocciate
   lo stesso giorno: «la foto alle sue dimensioni naturali, capito?». */
.apertura__principale{
  display:grid;
  grid-template-columns:300px 1fr;
  column-gap:32px;
  align-content:start;
  /* Non si stira all'altezza della spalla: l'altezza la fa la foto o il
     testo, chi dei due è più lungo. */
  align-self:start;
}
.apertura__principale > *{ grid-column:2 }
.apertura__figura{
  grid-column:1; grid-row:1 / span 4;
  margin:0; align-self:start;
}
.apertura__figura img{ display:block; width:100%; height:auto }
/* Accanto a un foglio da 300px il titolo ha 300px di colonna: la scala
   piena del mockup (44px) farebbe sei righe. Con i titoli lunghi (fino a
   186 caratteri nel DB) un gradino sotto, stessa regola della scheda,
   `sdc_classe_titolo()`. */
.apertura__principale h1{
  font-size:clamp(24px, 2.6vw, 32px);
  line-height:1.16;
  letter-spacing:-.01em;
  margin-top:10px;
}
.apertura__principale h1.titolo--lungo{ font-size:clamp(21px, 2.1vw, 26px) }
/* «Continua a leggere» subito sotto il testo (Andrea), non in fondo alla foto. */
.apertura__principale .oltre{ justify-self:start }
.apertura__principale h1 a:hover{ color:var(--accent-deep) }
.apertura .standfirst{
  margin-top:14px;
  font-size:var(--fs-lg);
  line-height:1.5;
  color:var(--ink-2);
  max-width:56ch;
}

/* «Continua a leggere», e i tre link della fascia missione */
.oltre{
  display:inline-block;
  margin-top:var(--sp-4);
  font-family:var(--sans); font-size:13.5px;
  letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  color:var(--accent-text);
  border-bottom:1px solid var(--line-strong);
  padding-bottom:2px;
}
.oltre:hover{ color:var(--accent-deep); border-bottom-color:var(--accent-deep) }

/* ---------------- spalla «In primo piano» ---------------- */
.spalla h2{
  font-family:var(--sans); font-size:var(--fs-2xs);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
  padding-bottom:var(--sp-3);
  border-bottom:2px solid var(--ink);
}
.spalla__voce{
  display:grid; grid-template-columns:1fr 96px; gap:var(--sp-4);
  padding-block:18px;
  border-bottom:1px solid var(--line);
}
.spalla__voce:last-child{ border-bottom:0 }
.spalla__voce h3{
  font-size:18.5px; line-height:1.28; font-weight:600;
  margin-top:6px; text-wrap:pretty;
}
.spalla__voce h3 a:hover{ color:var(--accent-deep) }
.spalla__voce .occhiello{ margin:0 }
.spalla__meta{
  margin-top:var(--sp-2);
  font-family:var(--sans); font-size:var(--fs-2xs); color:var(--muted);
}
/* Fotina A4 (s33, 2026-09-16: il cliente manda copertine A4, e tutto il
   flusso news prende quella cornice; era 16:10 dalla mattina stessa). In
   piedi, 96×136: una locandina si riconosce, un francobollo panoramico ne
   mostrava la testata. Le orizzontali vecchie ci stanno dentro intere, su
   carta con filetto (`--contieni`, deciso in `sdc_immagine_locandina()`). */
.spalla__figura{ background:var(--paper-2); align-self:start; width:96px; aspect-ratio:1/1.414; overflow:hidden }
.spalla__figura img{ width:100%; height:100%; object-fit:cover; object-position:top center }
.spalla__figura--contieni{ display:grid; place-items:center; border:1px solid var(--line) }
.spalla__figura--contieni img{ object-fit:contain; object-position:center }

/* ---------------- sezioni a griglia ---------------- */
.sezione-home{ padding-block:44px 0 }
.sezione-home .sezione-testa{ padding-top:0 }
.sezione-home .griglia-card{ padding-block:26px 38px }

/* ── I cubetti nelle sezioni (T10, s24) ────────────────────────────────────
   Le card di Biblioteca e Attività sono le pagine delle raccolte e delle
   sezioni: lo stesso `cubetto.php` di /biblioteca/ e /attivita/, con lo
   stesso testo in quattro gradini. Lì la card è orizzontale (immagine a
   sinistra, due per riga); qui, in una cella di quattro o di tre,
   l'immagine torna sopra, 4:3 come le card dei post che stavano al suo
   posto. A due per riga (la coda di Attività) la cella è larga come su
   /biblioteca/ e il cubetto resta orizzontale. */
.sezione-home .griglia-card--4 .cubetto a,
.sezione-home .griglia-card--3 .cubetto a{ display:block }
.sezione-home .griglia-card--4 .cubetto .card__figura,
.sezione-home .griglia-card--3 .cubetto .card__figura{ margin-bottom:14px }

/* ── Tutte le raccolte: prima riga col riquadro, le altre sotto ───────────
   Andrea, s24: «dobbiamo mostrare tutto». Prima riga a tre colonne col
   riquadro (Rivista, Premio) e due cubetti; il resto in una seconda griglia
   (`--coda`): tre colonne in Biblioteca, due in Attività. Con i numeri di
   oggi (8 raccolte, 4 sezioni) ogni riga è piena: 2+3+3 e 2+2.

   Il **riquadro doppio** qui sotto (`card-riquadro--doppio`: largo due
   celle, due colonne interne con le aree di griglia — testo e figura per la
   Rivista, numerale e titolo per il Premio) è stato costruito e bocciato da
   Andrea lo stesso giorno: «i box sono troppo grandi». Le regole restano
   per chi lo riattiva (`'doppio' => true` in sezione.php); oggi nessun
   riquadro ha la classe. */
.sezione-home .griglia-card--coda{ padding-top:0 }
.griglia-card--2{ grid-template-columns:repeat(2, 1fr) }
.card-riquadro--doppio{ grid-column:span 2 }

.card-rivista.card-riquadro--doppio{
  display:grid;
  grid-template-columns:1fr minmax(0, 40%);
  grid-template-rows:auto auto auto 1fr auto;
  grid-template-areas:
    "occhiello  figura"
    "titolo     figura"
    "serie      figura"
    "standfirst figura"
    "azione     figura";
  column-gap:var(--sp-5);
}
.card-rivista.card-riquadro--doppio .occhiello{ grid-area:occhiello }
.card-rivista.card-riquadro--doppio .card-riquadro__titolo{ grid-area:titolo }
.card-rivista.card-riquadro--doppio .card-rivista__serie{ grid-area:serie }
.card-rivista.card-riquadro--doppio .card-rivista__standfirst{ grid-area:standfirst; margin-bottom:0 }
.card-rivista.card-riquadro--doppio .card-riquadro__azione{ grid-area:azione; justify-self:start; align-self:end }
.card-riquadro__figura{
  grid-area:figura; align-self:center;
  display:block; aspect-ratio:1;
  background:var(--paper); border:1px solid var(--line);
  overflow:hidden;
}
.card-riquadro__figura img{ width:100%; height:100%; object-fit:cover; display:block }

.card-bando.card-riquadro--doppio{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto auto 1fr auto;
  grid-template-areas:
    "occhiello occhiello"
    "cifra     titolo"
    "cifra     riassunto"
    "cifra     meta"
    "cifra     azione";
  column-gap:var(--sp-5);
}
.card-bando.card-riquadro--doppio .occhiello{ grid-area:occhiello }
.card-bando.card-riquadro--doppio .card-riquadro__cifra{ grid-area:cifra; font-size:104px; margin:12px 0 0; align-self:start }
.card-bando.card-riquadro--doppio .card-riquadro__titolo{ grid-area:titolo; margin-top:18px }
.card-bando__riassunto{ grid-area:riassunto; margin-top:10px; font-size:var(--fs-md); line-height:1.5; color:var(--ink-2) }
.card-bando.card-riquadro--doppio .card__meta{ grid-area:meta; margin-top:12px; padding-top:0 }
.card-bando.card-riquadro--doppio .card-riquadro__azione{ grid-area:azione; justify-self:start; align-self:end }

/* ── i due riquadri in evidenza ────────────────────────────────────────────
   Prima cella della riga Attività (il bando del Premio Guidoni) e prima
   cella della riga Biblioteca (la Rivista). Non sono card: fondo pieno,
   cornice, e al posto dell'immagine un contenuto di testo. Le card che
   stanno loro accanto hanno la figura 4:3; qui l'altezza la fa il contenuto
   e il pulsante si appoggia in fondo, così la riga resta allineata sotto.

   ⚠️ La cornice è chiara (`--paper-2`), non terracotta: due campiture
   terracotta nella stessa schermata farebbero a gara invece di gerarchia.
   Del terracotta pieno, in home, resta il solo numerale del bando — il
   cartiglio della testata, campito fino alla s25, dalla s26 è tipografico.

   ⚠️ Il numerale grande ce l'ha **solo** il bando. Sul riquadro della Rivista
   è stato provato e scartato guardandolo (`confronto-s15-rivista.jpeg`): il
   perché sta in testa a template-parts/home/rivista.php. `.card-riquadro__cifra`
   resta qui perché è del guscio condiviso, ma oggi la usa un riquadro solo. */
/* s30: il guscio del riquadro (.card-riquadro, __titolo, __azione…) è in 30-componenti.css,
   perché dalla s30 lo usa anche l'elenco di Altre attività (box Documentari). */

/* I due pezzi che ha solo il riquadro della Rivista, e che stanno al posto
   del numerale: la serie in corso — un occhiello, non una cifra — e la riga
   che dice che cos'è la rivista. Il bando non ne ha bisogno: il titolo di un
   bando dice già tutto quello che serve sapere per decidere se aprirlo. */
.card-rivista .card-riquadro__titolo{ margin-top:18px }
.card-rivista__serie{
  margin-top:8px;
  font-family:var(--sans); font-size:var(--fs-2xs);
  letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color:var(--accent-text);
}
.card-rivista__standfirst{
  margin-top:12px; margin-bottom:auto;
  font-size:var(--fs-md); line-height:1.5; color:var(--ink-2);
}

/* ---------------- news + partecipa ---------------- */
.home-split{
  display:grid; grid-template-columns:8fr 4fr; gap:44px;
  padding-block:26px 44px;
}
.elenco-news{ list-style:none }
.elenco-news li{
  display:grid; grid-template-columns:96px 1fr; gap:18px;
  align-items:baseline;
  padding-block:15px;
  border-bottom:1px solid var(--line);
}
.elenco-news time{
  font-family:var(--mono); font-size:var(--fs-2xs); color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.elenco-news h3{ font-size:18.5px; line-height:1.3; font-weight:600; text-wrap:pretty }
.elenco-news h3 a:hover{ color:var(--accent-deep) }
.elenco-news .tag{
  font-family:var(--sans); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-text); font-weight:600;
  margin-right:var(--sp-2);
}

.partecipa{
  border:2px solid var(--ink);
  background:var(--paper-2);
  padding:28px 26px;
  height:fit-content;
}
.ornamento{ font-size:22px; color:var(--accent); margin-bottom:10px; line-height:1 }
.partecipa h3{ font-size:22px; line-height:var(--lh-titolo); margin-bottom:6px }
.partecipa > p{ font-size:var(--fs-md); color:var(--ink-2) }
.partecipa__azioni{
  list-style:none;
  margin-top:var(--sp-4);
  border-top:1px solid var(--line-strong);
}
.partecipa__azioni li{ border-bottom:1px solid var(--line) }
.partecipa__azioni a{ display:block; padding-block:var(--sp-3) }
.partecipa__azioni a b{
  display:block;
  font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--ink);
}
.partecipa__azioni a .d{
  display:block;
  font-family:var(--sans); font-size:var(--fs-2xs); color:var(--muted);
  margin-top:2px;
}
.partecipa__azioni a:hover b{ color:var(--accent-deep) }

/* ---------------- Associazione: il box con le nove pagine (s24) ----------------
   Andrea: «un box che abbia tutti i contenuti». La cornice è quella di
   «Partecipa» (due filetti, fondo carta), a tutta larghezza: dentro, la
   frase di missione — in corsivo, a sinistra, non centrata: qui apre un
   elenco, non chiude la pagina — poi un filetto e le pagine
   dell'associazione in tre colonne, titolo in sans e riga di riassunto,
   come le voci di «Partecipa». Sette pagine su nove non hanno immagine:
   per questo un elenco e non nove cubetti. */
/* Sta prima delle News (s24): sotto il box lo stesso respiro che le griglie
   lasciano alla sezione seguente (38 + 44 della testa successiva). */
.sezione-associazione{ padding-bottom:38px }
.box-associazione{
  margin-top:26px;
  border:2px solid var(--ink);
  background:var(--paper-2);
  padding:32px 34px 30px;
}
.box-associazione .ornamento{ font-size:24px; margin-bottom:12px }
.box-associazione blockquote{
  font-size:clamp(18px, 2vw, 22px);
  line-height:1.45;
  font-style:italic;
  color:var(--ink-2);
  max-width:40em;
  text-wrap:pretty;
  padding-bottom:22px;
  border-bottom:1px solid var(--line-strong);
}
.box-associazione__voci{
  list-style:none;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:4px 36px;
  margin-top:6px;
}
.box-associazione__voci li{ border-bottom:1px solid var(--line) }
.box-associazione__voci li:nth-last-child(-n+3){ border-bottom:0 }
.box-associazione__voci a{ display:block; padding-block:14px }
.box-associazione__voci a b{
  display:block;
  font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink);
}
.box-associazione__voci a .d{
  display:block;
  font-family:var(--sans); font-size:var(--fs-2xs); color:var(--muted);
  margin-top:3px; line-height:1.4;
}
.box-associazione__voci a:hover b{ color:var(--accent-deep) }

/* ---------------- fascia missione (ripiego senza la pagina Associazione) ---------------- */
.missione{
  border-top:1px solid var(--line);
  text-align:center;
  padding-block:52px 56px;
}
.missione .ornamento{ font-size:26px; margin-bottom:var(--sp-4) }
.missione blockquote{
  font-size:clamp(20px, 2.6vw, 27px);
  line-height:1.4;
  font-style:italic;
  color:var(--ink-2);
  max-width:34em;
  margin-inline:auto;
  text-wrap:pretty;
}
.missione__link{
  margin-top:22px;
  display:flex; gap:28px; justify-content:center; flex-wrap:wrap;
}

/* ---------------- adattamento ---------------- */
@media (max-width:940px){
  .apertura .wrap{ grid-template-columns:1fr }
  .griglia-card--4{ grid-template-columns:1fr 1fr }
  .griglia-card--3{ grid-template-columns:1fr 1fr }
  .home-split{ grid-template-columns:1fr }
  .box-associazione__voci{ grid-template-columns:1fr 1fr }
  .box-associazione__voci li:nth-last-child(-n+3){ border-bottom:1px solid var(--line) }
  .box-associazione__voci li:nth-last-child(-n+2){ border-bottom:0 }
}
@media (max-width:600px){
  .griglia-card--4,
  .griglia-card--3,
  .griglia-card--2{ grid-template-columns:1fr }
  .box-associazione{ padding:24px 20px }
  .box-associazione__voci{ grid-template-columns:1fr }
  .box-associazione__voci li:nth-last-child(-n+2){ border-bottom:1px solid var(--line) }
  .box-associazione__voci li:last-child{ border-bottom:0 }
  /* Una colonna sola: il riquadro doppio torna a una cella, ma dentro resta
     su due colonne (testo e figura, numerale e titolo): a 390px ci stanno. */
  .card-riquadro--doppio{ grid-column:auto }
  /* La data sopra il titolo invece che accanto: 96px di colonna su uno
     schermo da 360 lascerebbero al titolo meno di trenta battute per riga. */
  .elenco-news li{ grid-template-columns:1fr; gap:var(--sp-1) }
  .spalla__voce{ gap:var(--sp-3) }
  /* Il foglio sopra il titolo, largo poco più di metà schermo (212px su
     342): a fianco del testo lascerebbe al titolo venti battute per riga. */
  .apertura__principale{ grid-template-columns:1fr; grid-template-rows:none }
  .apertura__principale > *{ grid-column:1 }
  .apertura__figura{ grid-column:1; grid-row:auto; width:62%; margin-block:14px 18px }
}

/* s30 — proposta del cliente (nota HOME): la sezione senza figure, tutti i
   cubetti come il riquadro della Rivista. Accesa dal front-page.php. */
.sezione-home--senza-figure .cubetto .card__figura{ display:none }
/* Stesso guscio del riquadro della Rivista (stessi bordi, stesso padding),
   ma trasparente: il riquadro pieno resta uno solo, gli altri si allineano. */
.sezione-home--senza-figure .cubetto{ display:flex }
.sezione-home--senza-figure .cubetto a{
  grid-template-columns:1fr; align-content:start; flex:1;
  border:1px solid var(--line-strong); padding:26px 24px; background:transparent;
}
.sezione-home--senza-figure .cubetto .card__titolo{ font-size:21px; margin-top:6px }
.sezione-home--senza-figure .cubetto .cubetto__riga{ font-size:var(--fs-base) }