/* ANAD — griglia e ritmo delle sezioni.
   Impianto svizzero: una griglia a 12 colonne, sempre la stessa, e filetti
   che la rendono visibile. Le sezioni si distinguono per posizione nella
   griglia, non per fondini colorati. */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Il contenitore stretto serve a tenere la riga leggibile, non a centrare:
   resta allineato a sinistra come il resto della griglia. Da 1024px parte
   dalla quinta colonna, dove stanno i contenuti nelle altre pagine. */
.shell--narrow > * { max-width: 52rem; }

@media (min-width: 1024px) {
  .shell--narrow > * {
    margin-left: calc((100% - var(--grid-gap) * 11) / 12 * 4 + var(--grid-gap) * 4);
  }
}

/* La griglia */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-6);
}

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .grid > .col-auto-2,
  .grid > .col-auto-3 { grid-column: auto / span 4; }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); }
}

/* Impostazione mobile-first: ogni blocco occupa la riga intera. Le campate
   qui sotto entrano in gioco solo da 1024px. Senza questa regola un figlio
   senza classe finirebbe in una cella da 1/4 di schermo. */
.grid > * { grid-column: 1 / -1; }

/* Campate ricorrenti */
.col-full { grid-column: 1 / -1; }

@media (min-width: 1024px) {
  .grid > .col-auto-2 { grid-column: auto / span 2; }
  .grid > .col-auto-3 { grid-column: auto / span 3; }
  .col-1-4 { grid-column: 1 / span 3; }
  .col-1-5 { grid-column: 1 / span 4; }
  .col-1-7 { grid-column: 1 / span 6; }
  .col-1-9 { grid-column: 1 / span 8; }
  .col-5-13 { grid-column: 5 / -1; }
  .col-6-13 { grid-column: 6 / -1; }
  .col-7-13 { grid-column: 7 / -1; }
  .col-8-13 { grid-column: 8 / -1; }
}

/* Sezioni */
.section {
  position: relative;
  padding-block: var(--space-section);
}

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

/* Il filetto superiore è il segno di divisione: niente fondini a blocchi. */
.section--ruled { border-top: 1px solid var(--color-border); }

.section--navy {
  background: var(--anad-navy);
  color: var(--on-navy);
}

.section--navy a:not(.btn) { color: var(--on-navy); }
.section--paper { background: var(--anad-mist-2); }

.hero + .section,
.page-head + .section { padding-top: var(--space-7); }

/* Intestazione di sezione: etichetta a sinistra, contenuto a destra.
   È la struttura di un documento, non di una pagina promozionale. */
.section-head {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

@media (min-width: 1024px) {
  .section-head {
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
  }

  .section-head__label { grid-column: 1 / span 3; }
  .section-head__body { grid-column: 5 / -1; }
  .section-head__aside { grid-column: 1 / -1; }
}

.section-head h2 { margin: 0; }
.section-head p { margin-top: var(--space-3); }

/* Etichetta: il segno del marchio e poche parole in maiuscolo */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-soft);
}

.section--navy .eyebrow { color: var(--on-navy-soft); }

.stack > * + * { margin-top: var(--space-4); }
.stack--lg > * + * { margin-top: var(--space-6); }

/* Elenco di dati: termine a sinistra, valore a destra, filetto fra le righe.
   Serve a leggere recapiti, quote e coordinate come si legge un prospetto. */
.record {
  margin: 0;
  border-top: 1px solid var(--color-border);
}

.record > div {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 640px) {
  .record > div {
    grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
    column-gap: var(--grid-gap);
    align-items: baseline;
  }
}

.record dt {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-soft);
}

.record dd { margin: 0; }

.section--navy .record,
.section--navy .record > div { border-color: var(--on-navy-line); }
.section--navy .record dt { color: var(--on-navy-soft); }