/* ==========================================================================
   CHI SONO  (sezioni/cs.css)
   ==========================================================================
   Il capitolo piu' quieto. Momento: il testo arriva come le sue righe.
   Ogni paragrafo entra come righe di scheletro alle posizioni vere del suo
   testo (misurate da cs.js con Range.getClientRects), dentro le fasce che
   l'ispettore stende su un blocco (contenuto, padding, margine); poi le
   righe si dipingono da sinistra a destra e la struttura si ritira.
   Le parole in grassetto sono le prime a dipingersi.

   Senza JS, con movimento ridotto: il testo e' pieno e fermo. La pittura e'
   una maschera scritta da cs.js sul paragrafo: non c'e' nessuno stato
   nascosto nel foglio di stile.
   ========================================================================== */

/* Progresso della pittura: 0 = scheletro, 1 = dipinto. Registrate perche'
   la transizione le interpoli (senza @property saltano da 0 a 1). */
@property --cs-k { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --cs-s { syntax: '<number>'; inherits: true; initial-value: 0; }

.cs { --strato: var(--bm-contenuto); }

/* ---------- Titolo ---------- */
.cs .cs-testa { margin-block-end: var(--s-7); }

/* ---------- Impianto: testo a sinistra, pannello e ritratto a destra ---------- */
.cs .cs-corpo { row-gap: var(--s-8); align-items: start; }
.cs .cs-testo {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.cs .cs-lato {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--s-6);
  align-items: start;
}
@media (min-width: 720px) {
  .cs .cs-lato { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--s-7); }
}
@media (min-width: 1080px) {
  .cs .cs-testo { grid-column: 1 / span 7; }
  .cs .cs-lato { grid-column: 9 / span 4; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); justify-self: end; inline-size: min(100%, 21rem); }
}
/* Il lato resta sotto gli occhi mentre si legge, ma solo dove c'e' altezza */
@media (min-width: 1080px) and (min-height: 820px) {
  .cs .cs-lato { position: sticky; top: var(--s-9); }
}

/* ---------- Paragrafi ---------- */
.cs .cs-p {
  position: relative;
  font-size: var(--t-2);
  line-height: var(--lh-testo);
  color: var(--c-ink);
}
.cs .cs-lead {
  font-size: var(--t-3);
  line-height: 1.45;
  color: var(--c-ink-2);
}
.cs .cs-p strong { color: var(--c-ink); }

/* ---------- Lo scheletro (scritto da cs.js, nessun testo) ---------- */
.cs .cs-sk { position: absolute; inset: 0; pointer-events: none; }

/* Le fasce dell'ispettore attorno al blocco: la scatola e' il paragrafo
   (contenuto), 6 px di padding dentro, 8 di margine fuori. Come
   .t-ispeziona, che qui e' sempre acceso e si spegne mentre il testo si dipinge. */
.cs .cs-fascia {
  position: absolute;
  --ispeziona: 1;
  --bm-m: 8px;
  --bm-p: 6px;
  border-radius: var(--r-1);
  opacity: calc(1 - clamp(0, var(--cs-k) * 1.7 - 0.35, 1));
}

/* Una riga di testo, come barra velata; si consuma da sinistra mentre la
   stessa riga di testo vero compare. --a e --m (inizio e rapidita') li
   scrive cs.js insieme alla maschera, cosi' i due bordi coincidono. */
.cs .cs-barra {
  position: absolute;
  border-radius: 4px;
  background: color-mix(in srgb, var(--bm-contenuto) 62%, transparent);
  clip-path: inset(0 0 0 calc(100% * clamp(0, (var(--cs-k) - var(--a)) * var(--m), 1)));
}

/* Le transizioni esistono solo con il movimento armato (html.mo-pronto):
   con movimento ridotto la classe non c'e' e cs.js non arma niente. Prima le
   parole in grassetto (--cs-s), tre passi dopo le righe (--cs-k).
   --cs-j mette in fila i paragrafi che entrano insieme. */
.mo-pronto .cs .cs-p,
.mo-pronto .cs .cs-sk {
  transition:
    --cs-s var(--d-500) var(--e-uscita) calc(var(--cs-j, 0) * 250ms),
    --cs-k 1500ms var(--e-scambio) calc(var(--cs-j, 0) * 250ms + 375ms);
}
.cs .cs-p.cs-dentro,
.cs .cs-sk.cs-dentro { --cs-k: 1; --cs-s: 1; }

/* Modalita' leggera: scheletro e pittura, senza cascata */
.mo-pronto body.leggero .cs .cs-p,
.mo-pronto body.leggero .cs .cs-sk,
html[data-prestazioni="ridotte"].mo-pronto .cs .cs-p,
html[data-prestazioni="ridotte"].mo-pronto .cs .cs-sk {
  transition: --cs-s var(--d-250) linear, --cs-k var(--d-500) linear;
}

/* Le colonne della griglia, come le disegna l'ispettore, finche' il primo
   paragrafo non comincia a dipingersi */
.cs .cs-corpo.cs-guida { --vista: 1; }

/* ---------- La cornice del ritratto: il box model ---------- */
/* Il diagramma dell'ispettore, rettangoli annidati nei quattro veli, e al
   centro il contenuto. Quando arriva ritratto.jpg (il commento nel
   markup) la foto riempie la cella del contenuto e il diagramma resta come
   fascia attorno: la colonna non si sposta. */
.cs .cs-cornice {
  position: relative;
  container-type: inline-size;
  inline-size: min(100%, 17rem);
  aspect-ratio: 560 / 700;
}
@media (min-width: 720px) { .cs .cs-cornice { inline-size: 100%; } }
.cs .cs-bm { position: absolute; display: block; }
.cs .cs-bm-m { inset: 0;               border-radius: var(--r-3); background: var(--bm-margine); }
.cs .cs-bm-b { inset: 12px;            border-radius: var(--r-2); background: var(--bm-bordo); }
.cs .cs-bm-p { inset: 16px;            border-radius: var(--r-2); background: var(--bm-padding); }
.cs .cs-bm-c { inset: 28px;            border-radius: var(--r-1); background: var(--bm-contenuto); }
@supports (width: 1cqw) {
  .cs .cs-bm-b { inset: 11cqw; }
  .cs .cs-bm-p { inset: 14cqw; }
  .cs .cs-bm-c { inset: 25cqw; }
}
.cs .cs-bm-c img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border: 0;
  border-radius: inherit;
  filter: none;
}

/* Il diagramma si costruisce da dentro verso fuori: contenuto, padding,
   bordo, margine, un passo ciascuno */
.mo-pronto .cs .cs-cornice .cs-bm {
  transition: opacity var(--d-500) var(--e-uscita), transform var(--d-500) var(--e-uscita);
}
.mo-pronto .cs .cs-cornice:not(.cs-dentro) .cs-bm { opacity: 0; transform: scale(0.86); }
.mo-pronto .cs .cs-cornice .cs-bm-p { transition-delay: var(--d-125); }
.mo-pronto .cs .cs-cornice .cs-bm-b { transition-delay: var(--d-250); }
.mo-pronto .cs .cs-cornice .cs-bm-m { transition-delay: 375ms; }
html[data-prestazioni="ridotte"].mo-pronto .cs .cs-cornice .cs-bm,
.mo-pronto body.leggero .cs .cs-cornice .cs-bm { transition-delay: 0ms; transition-duration: var(--d-250); }

/* ---------- Il pannello di proprieta' ---------- */
/* Come gli stili calcolati dell'ispettore: nome della proprieta' a sinistra,
   valore a destra, righe separate da un filo. */
.cs .cs-dati { padding: var(--s-2) var(--s-5); }
.cs .cs-riga {
  display: grid;
  grid-template-columns: minmax(5.75rem, 0.42fr) minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-4);
}
.cs .cs-riga + .cs-riga { border-block-start: 1px solid var(--c-filo); }
.cs .cs-riga dd {
  font-size: var(--t-1);
  font-weight: 560;
  line-height: 1.45;
  color: var(--c-ink);
}