/* ==================================================
   STRUTTURA / LAYOUT DI BASE
   ================================================== */

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

/* V3.7 — impedisce ai browser mobile di ingrandire automaticamente il
   testo quando lo schermo viene ruotato in landscape ("text autosizing":
   Safari/Chrome mobile stimano una dimensione "leggibile" e la applicano
   in modo imprevedibile, indipendente dai clamp()/calc(--vw) del sito).
   100% = nessuna inflazione automatica, i font restano esattamente quelli
   calcolati dal CSS in ogni orientamento. NON disabilita lo zoom
   dell'utente (pinch-to-zoom) ne' l'accessibilita': quella e' controllata
   dal <meta name="viewport"> (user-scalable, invariato), una proprieta'
   completamente diversa da text-size-adjust. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  /* "clip" invece di "hidden": impedisce lo scroll orizzontale senza
     trasformare html/body in un contenitore di scroll a se' stante, che
     altrimenti romperebbe qualunque position:sticky nella pagina (usato
     dalla hero scroll-driven e dal comportamento "logo fisso in alto"). */
  overflow-x: clip;
}

body.no-scroll {
  overflow: hidden;
  height: 100%;
}

/* ==================================================
   V3.7 — MOBILE SHELL UNIVERSALE (qualunque larghezza)
   Dalla V3.7 questa regola NON e' piu' agganciata a min-width:768px:
   esiste UNA sola geometria orizzontale per qualunque dispositivo
   (smartphone portrait, smartphone landscape, tablet, desktop):
   larghezza app = min(100% del device, 430px). Il motivo del cambio:
   un telefono ruotato in landscape (es. 844x390) e' largo 844px ma ALTO
   solo 390px — restava sotto la soglia min-width:768px della V3.6 pur
   essendo molto piu' largo della composizione mobile pensata per 390px
   di larghezza, quindi la shell V3.6 non si attivava affatto in
   landscape. Da qui in poi .mobile-shell e' SEMPRE una colonna larga al
   massimo 430px, centrata, su qualunque device — la STESSA esperienza
   mobile, mai una composizione alternativa (niente scale()/zoom, vera
   colonna CSS).
   container-type:inline-size rende .mobile-shell SEMPRE un "container
   query container" (prima lo era solo da 768px in su): permette a
   calc(N * var(--vw)) (vedi variables.css, dove --vw e' ora SEMPRE
   1cqw) di risolversi sulla larghezza REALE della shell in QUALUNQUE
   contesto — telefono portrait stretto, telefono landscape, tablet,
   monitor — cosi' le immagini/i raggi/le proporzioni delle card restano
   sempre proporzionati esattamente come su un telefono reale della
   stessa larghezza della shell.
   IMPORTANTE — NON e' stato aggiunto contain:layout qui: pur essendo il
   modo "da manuale" per rendere un antenato la containing block dei
   discendenti position:fixed (necessario per centrare header/menu
   fullscreen sulla colonna invece che sull'intero monitor), .mobile-
   shell avvolge TUTTO il contenuto scrollabile della pagina (non e' un
   riquadro alto quanto il viewport): renderlo containing block dei
   fixed li farebbe scorrere via insieme alla pagina invece di restare
   fissi sullo schermo (verificato: bug reale, scoperto e corretto in
   V3.6, tuttora valido). Il centraggio di header/menu e' quindi risolto
   diversamente, direttamente su ciascun elemento position:fixed (vedi
   .site-header/.site-nav in css/components.css: stesso max-width:430px
   + margin-inline:auto, ora anch'esso universale, ma SENZA toccarne la
   containing block — restano fissi rispetto al vero viewport,
   esattamente come su mobile).
   Lo scroll resta quello naturale del documento (niente
   overflow-y:auto qui: nessuna finestra "telefono finta" con scroll
   annidato) — sticky/IntersectionObserver/scroll-driven continuano a
   funzionare esattamente come su mobile, perche' e' lo stesso identico
   meccanismo, solo dentro un contenitore piu' stretto e centrato.
   vh/dvh NON vengono toccate qui: rispondono ancora alla vera altezza
   del browser (per iOS2/iOS2.1 sticky e' voluto — vedi
   variables.css/--ps-portrait-stage per le card NON sticky). */
body {
  background: var(--background-secondary);
}

.mobile-shell {
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  position: relative;
  container-type: inline-size;
  background: var(--background);
  box-shadow: 0 0 0 1px rgba(41, 36, 31, 0.06);
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

ul {
  list-style: none;
}

/* focus visibile per navigazione da tastiera */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--text);
  color: var(--background);
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  z-index: 100;
}

.skip-link:focus {
  position: fixed;
  left: var(--space-sm);
  top: calc(var(--space-sm) + var(--safe-top));
}

.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container-wide {
  width: 100%;
  max-width: var(--wide-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* SEZIONI — il ritmo verticale della pagina */
.section {
  position: relative;
  padding-block: var(--space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section--hero {
  min-height: 100svh;
  padding-top: calc(var(--space-xl) + var(--safe-top));
}

.section--tight {
  padding-block: var(--space-xl);
}

.section--quote {
  min-height: 70svh;
  align-items: center;
  text-align: center;
}

.section--center {
  align-items: center;
  text-align: center;
}

/* V3.5 — usata SOLO da #scene-08 (unico punto del sito, vedi
   index.html): riduce di circa meta' lo spazio vuoto verso la scheda
   precedente (iOS 11), su richiesta esplicita — non tocca .section--hero
   generico, ne' il min-height ereditato. */
.section--final {
  padding-top: calc(2rem + var(--safe-top));
}

/* SPLIT SECTION — testo + media, mai una card */
.split-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.split-section__media {
  width: 100%;
}