/* ==========================================================================
   Layout: contenitori, sezioni, griglie
   ========================================================================== */

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

.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(3.5rem, 8vw, var(--sp-9)); }
.section--tight { padding-block: clamp(2.5rem, 5vw, var(--sp-7)); }

.section--sand { background: var(--sand-100); }
.section--dark {
  background: var(--ink-900);
  color: var(--text-on-dark);
}
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }

/* Intestazione di sezione con numero e filetto oro ----------------------- */
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  color: var(--gold-600);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.section-head--center .eyebrow { justify-content: center; }
.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
.section--dark .eyebrow { color: var(--gold-400); }

.section-head p {
  margin-top: 1.1rem;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
}
.section--dark .section-head p { color: var(--text-on-dark-muted); }

/* Griglie ---------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split--reverse > :first-child { order: 2; }
}