/* ==========================================================================
   codlab-spazi.css — UN SOLO livello di spaziatura verticale (05.10.2026)

   Prima: lo spazio fra due sezioni era la somma di due livelli — il padding di section.wrapper (base.html,
   clamp 56–96 px) più il padding del .container figlio (classi py-, pt-, pb- dei template, 60–160 px per lato,
   e su mobile la regola `section .container { padding: 2.5rem !important }` di codlab-dark.css). Risultato:
   fino a ~600 px vuoti fra due sezioni su desktop, 20 viste su 24 oltre le soglie tarate su tre siti di
   riferimento (banco «spazi», verifica_spazi.py).

   Ora: la SEZIONE possiede il ritmo verticale, il .container figlio non aggiunge nulla. I valori vivono solo
   qui, come token; le sezioni col padding proprio (hero, svc-pillar, sector-section, wow-cta-final, …) usano
   gli stessi token nei loro <style>. Il rem del sito vale 20 px: i token sono in px.
   ========================================================================== */
:root {
  /* mobile (< 768 px) */
  --spazio-sezione: 48px;   /* padding verticale di ogni sezione: fra due sezioni ~96 px */
  --spazio-hero-su: 40px;   /* hero: dalla testata al primo testo */
  --spazio-hero-giu: 48px;  /* hero: dall'ultimo elemento al bordo */
}
@media (min-width: 768px) {
  :root { --spazio-sezione: 60px; --spazio-hero-su: 64px; --spazio-hero-giu: 56px; }
}
@media (min-width: 1200px) {
  :root { --spazio-sezione: 72px; --spazio-hero-su: 88px; --spazio-hero-giu: 64px; }
}

/* 1. la sezione possiede il ritmo (sostituisce la regola di base.html «Section vertical rhythm») */
section.wrapper { padding-block: var(--spazio-sezione); }
section.wrapper.hero-dark { padding-block: var(--spazio-hero-su) var(--spazio-hero-giu); }

/* 2. il .container figlio di una sezione non aggiunge padding verticale. Le classi py-, pt-, pb- sono state
      tolte dai template (strumenti/un_livello.py); questa regola tiene fermo il principio anche per quelle che
      tornassero senza «!» (utility Tailwind non importanti e «restore layer» di codlab-dark.css). */
section > .container { padding-top: 0; padding-bottom: 0; }

/* 3. sezioni oblique del tema (.angled): lo smusso, 4rem, è disegnato FUORI dalla sezione e SOPRA le sezioni vicine
      (pseudo-elementi ::before/::after posizionati, dipinti sopra il loro contenuto). Il lato che lo smusso tocca tiene
      lo spazio dello smusso più un respiro, altrimenti col solo token lo smusso morde l'ultima riga della sezione
      precedente e la prima della successiva. Sotto 768 px lo smusso è tagliato da `section { overflow-x: hidden }`
      di codlab-dark.css e la regola non serve. */
@media (min-width: 768px) {
  section.wrapper:has(+ section.angled) { padding-bottom: calc(4rem + 24px); }
  section.angled + section.wrapper { padding-top: calc(4rem + 24px); }
}