/* ==========================================================================
   LAYOUT — griglia a due colonne, ritmo delle pagine interne, sezioni chiare
   (prototipo: style.css righe 85-86, 743-746, 771-785, 866-868)
   Le regole .sb-light dei singoli componenti stanno nel file del componente.
   ========================================================================== */

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

.sb-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(56px, 7vw, 104px); }
.sb-split > div > p:not(.sb-lead) { color: var(--sb-muted); max-width: 52ch; margin-top: 1.25em; }

/* Pagine interne: meno spazio tra le sezioni che in home */
.sb-page { --sb-section: clamp(64px, 7vw, 108px); }
.sb-page .sb-split { margin-bottom: clamp(36px, 4.5vw, 64px); }

/* Sezioni chiare per i contenuti più densi */
.sb-light { background: var(--sb-paper) !important; color: var(--sb-ink); --sb-line: var(--sb-ink-line); }
.sb-light .sb-kicker { color: var(--sb-gold-dk); }
.sb-light .sb-lead { color: var(--sb-ink); }
.sb-light .sb-split > div > p:not(.sb-lead) { color: var(--sb-ink-muted); }

@media (max-width: 860px) {
  .sb-split { grid-template-columns: 1fr; align-items: start; }
}