/* Le nostre storie — foglio della rubrica
 *
 * Si aggancia alla classe .storia-page sul body, che va AGGIUNTA a
 * news-content-page e non sostituita (STILE.md §7).
 *
 * PRINCIPIO: la pagina deve funzionare nuda, con il solo titolo, il sommario e
 * il testo. Fotografia e citazioni sono blocchi ordinari nel flusso: quando non
 * ci sono, non esiste nessuna regola che lasci uno spazio riservato.
 *
 * Base rem del sito = 18px (app.css:16733). Ogni rem qui va letto su 18.
 */

/* ---------------------------------------------------------------- Lora --- */
/* Auto-ospitata come Open Sans, stessa forma di dichiarazione del sito
 * (app.css:14634-14654): src per primo, poi famiglia, peso, stile, display.
 *
 * Due pesi soli: 400 per il corpo, 600 per titolo, sommario e nomi, che e' il
 * peso con cui il tema compone i titoli (app.css:151-156).
 *
 * Due differenze rispetto al sito, entrambe volute:
 * - niente .woff di scorta: il sito lo porta per browser che non incontriamo
 *   piu', e sarebbero 42 KB in piu' da caricare per nessuno;
 * - font-display: swap invece di auto. Su una pagina di sola lettura il
 *   fallimento accettabile e' un cambio di carattere, non tre secondi di
 *   testo invisibile. */

@font-face {
  src: url("/assets/le-nostre-storie/fonts/lora-latin-400-normal.woff2") format("woff2");
  font-family: "Lora";
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  src: url("/assets/le-nostre-storie/fonts/lora-latin-600-normal.woff2") format("woff2");
  font-family: "Lora";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- Tema ---- */

.storia-page {
  --storia-serif: "Lora", Georgia, "Times New Roman", serif;
  --storia-avorio: #FAF7F1;
  --storia-primary: #003B77;   /* 10,38:1 su avorio */
  --storia-brown: #494949;     /* 8,42:1 su avorio */
  --storia-gray: #54595E;      /* 6,62:1 su avorio */
  --storia-filo: rgba(0, 59, 119, 0.16);

  background-color: var(--storia-avorio);
}

/* Lo stacco dal bianco del resto del sito e' 1,07:1: la fascia di rubrica, che
 * ha lo stesso fondo, si fonde con la pagina senza bisogno di stirarla. */

/* ------------------------------------------------------ Fascia rubrica --- */

.storia-page .fascia-rubrica {
  display: block;
  width: 100%;
  max-width: 980px;   /* il nativo: oltre si impasta */
  height: auto;
  margin: 0 auto;
}

/* ------------------------------------------------- Colonna di lettura ---- */
/* 35.8rem = 644px. Misurato con Lora caricata: 67 caratteri per riga di media
 * a 1440 e a 768. A 612px si stava a 63,7, sotto la banda, perche' Lora e' piu'
 * larga di Georgia: il valore era stato tarato sul ripiego.
 * Piu' stretta di col-lg-8 del sito (760px), che sta sui 115-120. */

.storia-page .colonna-storia {
  max-width: 35.8rem;
  margin-inline: auto;
}

/* ------------------------------------------------- Titolo e sommario ----- */

.storia-page .titolo-storia {
  font-family: var(--storia-serif);
  color: var(--storia-primary);
  margin-bottom: 0.75rem;
}

/* Nel caso nudo il sommario e' l'unico elemento visivo della pagina: deve
 * reggere da solo, quindi corpo piu' grande del testo e colore del titolo. */

.storia-page .sommario {
  font-family: var(--storia-serif);
  font-size: 1.4rem;          /* 25,2px */
  line-height: 1.5;
  color: var(--storia-primary);
  margin-bottom: 0;
}

/* ---------------------------------------------------------- Il testo ----- */

.storia-page .testo-storia {
  font-family: var(--storia-serif);
  color: var(--storia-brown);
}

.storia-page .testo-storia p {
  font-size: 1.06rem;         /* 19,1px */
  line-height: 1.75;
  margin-bottom: 1.5rem;      /* 27px: paragrafi ben distanziati */
}

.storia-page .testo-storia p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------- Capolettera ----- */

/* Tre righe di corpo, ritarato su Lora caricata.
 *
 * Misurato: l'altezza della maiuscola di Lora e' 0,70em esatti. Corpo 19,08px,
 * interlinea 33,39px, tre interlinee 100,2px.
 *
 * font-size 7em  -> 133,6px, maiuscola alta 93,5px, il 93% di tre righe
 * line-height 0,70 -> riquadro flottante 93,5px
 *
 * La regola generale, se un giorno si cambia carattere: **line-height uguale
 * al rapporto di altezza maiuscola del font**. Cosi' il riquadro flottante
 * coincide al pixel con la maiuscola, e la lettera siede sulla terza linea di
 * base senza scarti. Sopra le tre interlinee piene (100px) il browser arrotonda
 * a quattro righe e il testo scava una rientranza evidente: e' successo con il
 * ripiego su Georgia, che a 7,6em ne occupava quattro. */

.storia-page .capolettera::first-letter {
  float: left;
  font-family: var(--storia-serif);
  font-size: 7em;
  line-height: 0.70;
  color: var(--storia-primary);
  padding-right: 0.06em;
}

/* Se il paragrafo apre con una virgoletta, la virgoletta va a sbalzo fuori
 * dalla colonna e il capolettera resta sulla lettera (CLAUDE.md). */

.storia-page .virgoletta-sbalzo {
  display: inline-block;
  margin-left: -0.42em;
}

/* --------------------------------------------------------- Citazione ----- */
/* I selettori dei blocchi sono qualificati con `.testo-storia p` perche'
 * altrimenti la regola del paragrafo, piu' specifica, li scavalca e la
 * citazione esce a corpo di testo. E' successo. */
/* Blocco ordinario nel flusso: spezza il testo quando c'e', e quando non c'e'
 * non lascia margini orfani. Nessuna cornice, nessuna virgoletta decorativa:
 * il rilievo lo danno corpo, colore e respiro. */

.storia-page .testo-storia p.citazione {
  font-family: var(--storia-serif);
  font-size: 1.5rem;          /* 27px: il 42% piu' del testo. Sotto questo
                                 scarto una citazione breve non si stacca e
                                 sembra un paragrafo colorato. */
  line-height: 1.45;
  color: var(--storia-primary);
  margin: 2.5rem 0;
}

/* ------------------------------------------------------- Fotografia ------ */
/* Nel flusso, fra due paragrafi, a piena larghezza di colonna. Nessuna
 * colonna laterale riservata: se la fotografia manca, non manca niente. */

.storia-page .foto-storia {
  margin: 2.5rem 0;
}

/* width:auto invece di 100%. Il file non viene mai ingrandito oltre il nativo,
 * ma con width:100% era il foglio a rifarlo: la fotografia di Giovanna, 303px,
 * veniva stirata ai 644px della colonna e usciva molle — proprio il difetto che
 * la regola del nativo esiste per evitare.
 * Cosi' una fotografia piccola si mostra alla sua misura, allineata al margine
 * del testo insieme alla didascalia, e una grande riempie la colonna. */

.storia-page .foto-storia img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 9px;         /* .rounded-5 del sito vale 0,5rem = 9px */
}

.storia-page .foto-storia figcaption {
  font-size: 0.8rem;          /* 14,4px */
  line-height: 1.45;
  color: var(--storia-gray);
  margin-top: 0.6rem;
}

/* ------------------------------------------- Chiusura della redazione ---- */
/* Nelle quattro storie iniziali il saluto della redazione resta nel testo.
 * Non compete con la chiusura dell'ospite: corpo minore e colore secondario. */

.storia-page .testo-storia p.chiusura-redazione {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--storia-gray);
  margin-top: 2rem;
}

/* ---------------------------------------------------- Breadcrumb lungo --- */
/* Le storie stanno a sei livelli di profondita' e il breadcrumb non entra su
 * una riga sotto i 1200px. Il tema non prevede nulla: `.breadcrumb` e'
 * Bootstrap nudo con flex-wrap: wrap (app.css:5827-5836), quindi andava a capo.
 *
 * Misurato prima: 4 righe e 117px a 390, 2 righe e 77px a 768.
 * Dopo: 1 riga e 56px a entrambe. A 1440 non c'e' traboccamento e non cambia
 * nulla.
 *
 * Nessuna voce viene tolta, troncata o nascosta: la riga scorre.
 * Provate e scartate due strade di solo CSS:
 * - `justify-content: flex-end` mette la coda in vista ma spinge le prime voci
 *   a -569px e le rende IRRAGGIUNGIBILI (lo scorrimento massimo crolla a 14px);
 * - `direction: rtl` con `flex-direction: row-reverse` non sposta l'origine
 *   dello scorrimento: si comporta come LTR.
 * Per portare la riga in fondo serve una riga di script, che sta nei template.
 * Se non gira, la riga resta scorribile dall'inizio e non si perde nulla. */

.storia-page [stripe-breadcrumb] .breadcrumb {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;   /* una barra sotto una riga di 13px e' piu' ingombro
                              che aiuto; il bordo tagliato segnala lo scorrimento
                              e i link restano raggiungibili da tastiera */
}

.storia-page [stripe-breadcrumb] .breadcrumb::-webkit-scrollbar {
  display: none;
}

.storia-page [stripe-breadcrumb] .breadcrumb-item {
  white-space: nowrap;
}

/* ------------------------------------------------- Colonna larga --------- */
/* 52rem = 936px, contro i 35,8rem della colonna di lettura. La usano i due
 * posti che portano schede affiancate: la griglia dell'indice e il blocco di
 * navigazione in fondo alla storia.
 *
 * Sulla misura di lettura quelle schede stavano in 205px di testo e i sommari
 * uscivano su otto o nove righe di tre parole: con un serif e' una lettura a
 * singhiozzo. Qui il blocco e' anche piu' largo del testo che lo precede, e
 * chiude la pagina invece di lasciarla sfilacciare.
 *
 * Il testo introduttivo dell'indice ha la stessa larghezza. */

.storia-page .colonna-larga {
  max-width: 52rem;
  margin-inline: auto;
}

/* Il testo introduttivo non si limita a ereditare da .testo-storia: famiglia,
 * colore e allineamento sono dichiarati qui, sull'introduzione e sui suoi
 * paragrafi. Cosi' resta serif e a sinistra anche se il campo contenuto viene
 * riscritto dall'editor visuale del manager, che a volte incarta il testo in
 * markup suo.
 *
 * Corpo 1,25rem: e' il valore che il tema usa per .lead e per h5
 * (app.css:560, :194). Sta fra il testo della storia (1,06rem) e il sommario
 * (1,4rem), e soprattutto e' il 36% piu' del sommario delle schede (0,92rem):
 * abbastanza per leggersi come introduzione e non come didascalia.
 * Interlinea 1,5, quella del corpo del sito. Nessun valore nuovo. */

.storia-page .intro-rubrica,
.storia-page .intro-rubrica p {
  font-family: var(--storia-serif);
  color: var(--storia-brown);
  text-align: left;
}

/* Larga quanto la griglia, non quanto la colonna di lettura. Sulla misura di
 * lettura stava su quattro righe con "Una storia al mese" sola in fondo; alla
 * larghezza della griglia ne bastano tre piene.
 *
 * Cosi' esce dai 65-70 caratteri per riga che valgono per il corpo delle
 * storie, ed e' voluto: sono tre righe, non un testo lungo, e l'allineamento
 * con le schede conta di piu' della misura di riga. */

.storia-page .intro-rubrica {
  margin-bottom: 3rem;     /* 54px, il *-5 della scala: era 2,5rem, fuori scala */
}

.storia-page .intro-rubrica p {
  font-size: 1.25rem;
  line-height: 1.5;
}

.storia-page .intro-rubrica p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------- Navigazione ---- */
/* Nome e sommario bastano. La fotografia in piccolo e' un di piu': quando
 * manca non lascia un riquadro vuoto ne' un segnaposto. */

.storia-page .nav-storie {
  border-top: 1px solid var(--storia-filo);
  padding-top: 2rem;
}

/* Il blocco e' costruito da due chiamate MODX indipendenti, che quando non
 * trovano un fratello non rendono nulla. Se non ne trovano nessuno — una sola
 * storia pubblicata nella rubrica, oppure tutte ancora da pubblicare — resterebbe
 * il solo filo orizzontale, sospeso. Qui sparisce.
 * :has() non e' usata altrove nel tema. Dove non e' supportata il ripiego e'
 * un filo di troppo: cosmetico, e solo in quel caso limite. */

.storia-page .nav-storie:not(:has(.nav-storia)) {
  display: none;
}

.storia-page .nav-storia {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  text-decoration: none;
  height: 100%;
}

.storia-page .nav-storia .nav-etichetta {
  display: block;
  font-family: var(--storia-serif);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--storia-gray);
  margin-bottom: 0.35rem;
}

.storia-page .nav-storia .nav-nome {
  display: block;
  font-family: var(--storia-serif);
  font-size: 1.22rem;
  line-height: 1.3;
  color: var(--storia-primary);
  margin-bottom: 0.3rem;
}

.storia-page .nav-storia .nav-sommario {
  display: block;
  font-family: var(--storia-serif);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--storia-brown);
}

.storia-page .nav-storia .nav-foto {
  flex: 0 0 auto;
  width: 72px;
  height: 90px;
  object-fit: cover;
  border-radius: 9px;
}

.storia-page .nav-storia:hover .nav-nome {
  text-decoration: underline;
}

/* ------------------------------------------------- Condivisione ---------- */
/* Il sito monta la striscia con <img> nudi e handler jQuery su .facebook-share
 * e simili: da tastiera non si raggiungono e non si attivano, e senza testo
 * alternativo utile un lettore di schermo annuncia solo "immagine".
 *
 * Qui la classe sta su un <button>, che jQuery aggancia sul click esattamente
 * come prima, ma che in piu' e' nell'ordine di tabulazione e risponde a Invio e
 * alla barra spaziatrice senza una riga di script nuova. Il nome accessibile lo
 * porta aria-label sul bottone; l'immagine dentro ha alt vuoto, altrimenti
 * verrebbe annunciata due volte.
 *
 * min-width/min-height a 24px: l'icona e' larga 21px e il bersaglio da dito
 * sarebbe sotto il minimo. */

.storia-page [stripe-share] .condividi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ------------------------------------------------------------- Focus ----- */
/* Il sito non definisce :focus-visible (STILE.md, contraddizione 1):
 * lo stile di focus va progettato, non ereditato. */

.storia-page a:focus-visible,
.storia-page [stripe-share] .condividi:focus-visible {
  outline: 3px solid var(--storia-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------ Schermi corti ---- */

@media (max-width: 575.98px) {
  .storia-page .sommario {
    font-size: 1.25rem;
  }

  .storia-page .testo-storia p.citazione {
    font-size: 1.3rem;
    margin: 2rem 0;
  }

  .storia-page .capolettera::first-letter {
    font-size: 6em;
  }
}