/* Separatore.

   I valori non sono scelti: sono i token di spaziatura del file, quelli che i moduli usano
   già fra loro — `spacing/gap-xl` 32, `gap-2xl` 48, `gap-3xl` 64 — più `section/padding-l`
   (100 → 30) per l'aria di una sezione intera. Offrire un campo numerico libero avrebbe dato
   un modulo che si allinea a tutto e non combacia con niente. */
.sep {
  --sep-navy: var(--color-primary, #004278);
  --sep-azzurro: var(--color-secondary, #467fbd);
  /* `gray 60` nel tema non c'è ancora: la variabile resta puntata, l'esadecimale copre.
     Il giorno che il tema la acquisisce il modulo la segue da solo, senza modifiche. */
  --sep-grigio: var(--color-gray-60, #c4c4c0);
  --sep-bianco: var(--color-white, #ffffff);

  --sep-max: 1600px;
  --sep-gutter: clamp(24px, 8.889vw - 10.67px, 160px);
  /* I tre `spacing/*` sono numeri fissi: il file non dà loro una Mode mobile, a differenza
     dei `section/padding-*`. Non li si interpola per simmetria — sarebbe inventare. */
  --sep-xl: 32px;
  --sep-2xl: 48px;
  --sep-3xl: 64px;
  --sep-sezione: clamp(30px, 12.16px + 4.575vw, 100px);

  --sep-su: var(--sep-2xl);
  --sep-giu: var(--sep-2xl);

  box-sizing: border-box;
  padding: var(--sep-su) 0 var(--sep-giu);
}
.sep, .sep *, .sep *::before, .sep *::after { box-sizing: border-box; }

.sep--su-nessuno  { --sep-su: 0px; }
.sep--su-piccolo  { --sep-su: var(--sep-xl); }
.sep--su-medio    { --sep-su: var(--sep-2xl); }
.sep--su-grande   { --sep-su: var(--sep-3xl); }
.sep--su-sezione  { --sep-su: var(--sep-sezione); }

.sep--giu-nessuno { --sep-giu: 0px; }
.sep--giu-piccolo { --sep-giu: var(--sep-xl); }
.sep--giu-medio   { --sep-giu: var(--sep-2xl); }
.sep--giu-grande  { --sep-giu: var(--sep-3xl); }
.sep--giu-sezione { --sep-giu: var(--sep-sezione); }

.sep--fondo { background: var(--sep-bg); }
/* `--sep-bg-tema` c'e' solo quando il campo colore e' vuoto (segue il navy del tema): vedi
   module.html. Col colore scelto a mano resta `--sep-bg`, grazie al secondo argomento. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .sep--fondo { background: var(--sep-bg-tema, var(--sep-bg)); }
}

/* **Il reset dell'`<hr>` è obbligatorio, non igiene.** I browser gli danno un bordo a
   rilievo e margini verticali propri, e il tema di produzione dichiara le sue regole sugli
   elementi, non sulle classi: senza azzerare `border` e `margin` la linea arriva doppia e
   con un'aria che non abbiamo deciso noi, sommata a quella del modulo. */
.sep__line {
  border: 0;
  margin: 0;
  height: 1px;
  background: var(--sep-navy);
}

/* In gabbia: larga quanto il contenuto, dentro il gutter. Il `max-width` comprende i due
   gutter, come su tutti gli altri moduli, così il contenuto resta a 1600 esatti. */
.sep--gabbia .sep__line {
  max-width: var(--sep-max);
  margin: 0 auto;
  width: calc(100% - 2 * var(--sep-gutter));
}

.sep__line--navy    { background: var(--sep-navy); }
.sep__line--azzurro { background: var(--sep-azzurro); }
.sep__line--grigio  { background: var(--sep-grigio); }
.sep__line--bianco  { background: var(--sep-bianco); }