/* ============================================================
   DILLO, landing. Layout full-bleed e griglia 12 colonne.
   Nessun max-width globale: le sezioni occupano tutta la pagina,
   solo i blocchi di testo lungo sono limitati in misura di lettura.
   ============================================================ */

.section {
  position: relative;
  width: 100%;
  padding: var(--pad-y) var(--pad-x);
}

/* la barra di navigazione resta in alto: le ancore si fermano più in basso */
[id] { scroll-margin-top: 90px; }

.section--tight { padding-block: clamp(3rem, 7vh, 6rem); }

.section--ink {
  background: var(--ink);
  color: var(--on-ink);
}
.section--ink h1,
.section--ink h2,
.section--ink h3 { color: var(--on-ink); }

.section--surface { background: var(--surface); }
.section--tint { background: var(--accent-tint); }

/* griglia 12 colonne, span irregolari */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap-grid);
  width: 100%;
  align-items: start;
}

.col-full { grid-column: 1 / -1; }
.col-1-5 { grid-column: 1 / span 5; }
.col-1-6 { grid-column: 1 / span 6; }
.col-1-7 { grid-column: 1 / span 7; }
.col-1-8 { grid-column: 1 / span 8; }
.col-1-9 { grid-column: 1 / span 9; }
.col-6-7 { grid-column: 6 / span 7; }
.col-7-6 { grid-column: 7 / span 6; }
.col-8-5 { grid-column: 8 / span 5; }
.col-9-4 { grid-column: 9 / span 4; }

/* intestazione di sezione ricorrente */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.measure { max-width: 60ch; }
.measure-sm { max-width: 46ch; }

/* riga di regole orizzontali sottili */
.rule {
  height: 1px;
  width: 100%;
  background: var(--line);
  border: 0;
  margin: 0;
}
.rule--on-ink { background: var(--line-on-ink); }

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(6, 1fr); }
  .col-1-5, .col-1-6, .col-1-7, .col-1-8, .col-1-9,
  .col-6-7, .col-7-6, .col-8-5, .col-9-4 { grid-column: 1 / -1; }
}