/*
 * Modulo4 — foglio autonomo. Nessuna dipendenza da altri moduli o da Bootstrap.
 * Ogni selettore è limitato a .design-modulo4.
 * Colori, font, dimensioni e spazi sono variabili del tab Aspetto, per istanza.
 * Per un override singolo usare #modulo4-module-ID oppure un'ancora unica.
 * Le regole responsive seguono anche la larghezza della posizione Helix.
 */
.design-modulo4 {
  width: 100%; margin: 0; padding: 0;
  font-family: var(--design-text-font, Arial, Helvetica, sans-serif);
  font-size: 16px; line-height: 1.5;
  color: var(--design-body, #20261f); background: var(--design-background, #fbfaf6);
  scroll-margin-top: 100px;
}
.design-modulo4, .design-modulo4 * { box-sizing: border-box; }
.design-modulo4 [hidden] { display: none !important; }
.design-modulo4 .dg-wrap { width: 100%; max-width: var(--design-max-width, 1600px); margin: 0 auto; container: modulo4 / inline-size; }
.design-modulo4 p { margin: 0; }
.design-modulo4 :is(a, button):focus-visible { outline: 3px solid var(--design-accent, currentColor); outline-offset: 4px; }
.design-modulo4 .dg-inner { min-width: 0; overflow-wrap: anywhere; }
.design-modulo4 .dg-headline { font-family: var(--design-display-font, Georgia, serif); color: var(--design-title, #20261f); }
.design-modulo4 .dg-headline :is(em, i) { color: var(--design-accent, #912535); font-style: italic; }

/* 1. Tre colonne senza riquadri: numeri, titoli e descrizioni seguono il JPG. */
.design-modulo4 .dg-inner { padding: var(--design-padding-top, 40px) 3.625% var(--design-padding-bottom, 45px); padding-inline: clamp(24px, 3.625cqw, 58px); }
.design-modulo4 .dg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 72px; }
.design-modulo4 .dg-item { min-width: 0; }
.design-modulo4 .dg-number { color: var(--design-number); font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: .12em; margin-bottom: 22px; }
.design-modulo4 .dg-item-title { color: var(--design-title); font-family: var(--design-text-font, Arial, sans-serif); font-size: var(--design-heading-size, 24px); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; margin: 0 0 20px; }
.design-modulo4 .dg-description { color: var(--design-body); font-size: var(--design-body-size, 20px); font-weight: 400; line-height: 1.55; }

/* 2. La lista può crescere: le nuove voci occupano la riga successiva. */
@container modulo4 (max-width: 1050px) {
  .design-modulo4 .dg-grid { gap: 28px 32px; }
  .design-modulo4 .dg-item-title { font-size: min(var(--design-heading-size, 24px), 22px); }
  .design-modulo4 .dg-description { font-size: min(var(--design-body-size, 20px), 17px); }
}
/* 3. Su mobile una colonna evita testo stretto e conserva l'ordine del backend. */
@container modulo4 (max-width: 700px) {
  .design-modulo4 .dg-inner { padding-inline: 24px; }
  .design-modulo4 .dg-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .design-modulo4 .dg-number { margin-bottom: 12px; }
  .design-modulo4 .dg-item-title { margin-bottom: 12px; }
}
/* Fallback per browser senza container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 700px) { .design-modulo4 .dg-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
}