/* ==========================================================================
   Utilities — helper di layout (zero opinione, solo composizione)
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--sp-16);
}
@media (min-width: 960px) {
  .section { padding-block: var(--sp-24); }
}
.section--lg { padding-block: var(--sp-24); }
@media (min-width: 960px) {
  .section--lg { padding-block: var(--sp-32); }
}

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

.text-center { text-align: center; }
.text-mid    { color: var(--ink-mid); }
.text-soft   { color: var(--ink-soft); }

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 60ch;
  line-height: var(--lh-relaxed);
}

/* Stack semplice */
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-8); }

/* Grid responsive a colonne uguali */
.grid {
  display: grid;
  gap: var(--sp-8);
}
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.split {
  display: grid;
  gap: var(--sp-12);
  align-items: center;
}
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
  .split--narrow-left { grid-template-columns: 5fr 7fr; }
  .split--narrow-right { grid-template-columns: 7fr 5fr; }
}

/* Mono inline (per email/tel) */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--ink-soft);
}

/* Visually hidden (per accessibility) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Spacer */
.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--sp-4); }
.mt-8  { margin-top: var(--sp-8); }
.mt-12 { margin-top: var(--sp-12); }
.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-8  { margin-bottom: var(--sp-8); }
.mb-12 { margin-bottom: var(--sp-12); }