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

/* 1. Testata: titolo serif a sinistra, breve spiegazione sul margine destro. */
.design-modulo5 .dg-inner { padding: var(--design-padding-top, 54px) 6.75% var(--design-padding-bottom, 52px); padding-inline: clamp(24px, 6.75cqw, 108px); }
.design-modulo5 .dg-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.design-modulo5 .dg-eyebrow { color: var(--design-eyebrow); font-size: 8px; font-weight: 700; line-height: 1.5; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 20px; }
.design-modulo5 .dg-headline { margin: 0; font-size: var(--design-heading-size, 36px); font-weight: 700; line-height: 1.1; letter-spacing: -.035em; }
.design-modulo5 .dg-intro { color: var(--design-body); flex: 0 1 240px; font-size: calc(var(--design-body-size, 10px) + 1px); line-height: 1.65; }

/* 2. Quattro fasi: linee sottili e numerazione derivata dall'ordine salvato. */
.design-modulo5 .dg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; margin-top: 38px; }
.design-modulo5 .dg-step { min-width: 0; padding-top: 22px; border-top: 1px solid var(--design-line); }
.design-modulo5 .dg-phase { color: var(--design-phase); font-size: 7px; font-weight: 500; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 16px; }
.design-modulo5 .dg-step-title { color: var(--design-step-title); font-family: var(--design-display-font, Georgia, serif); font-size: var(--design-step-size, 18px); font-weight: 400; line-height: 1.3; letter-spacing: -.02em; margin: 0 0 10px; }
.design-modulo5 .dg-description { color: var(--design-body); font-size: var(--design-body-size, 10px); line-height: 1.7; }

/* 3. Nota editoriale: testo indipendente dal numero delle fasi. */
.design-modulo5 .dg-note { color: var(--design-note); font-size: 8px; line-height: 1.6; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--design-note-line); }

/* 4. Tablet: due fasi per riga e testo più leggibile. */
@container modulo5 (max-width: 1050px) {
  .design-modulo5 .dg-top { align-items: flex-start; flex-direction: column; gap: 24px; }
  .design-modulo5 .dg-intro { flex: none; max-width: 550px; font-size: 14px; }
  .design-modulo5 .dg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 30px; }
  .design-modulo5 .dg-description { font-size: max(var(--design-body-size, 10px), 14px); }
  .design-modulo5 .dg-phase { font-size: 10px; }
  .design-modulo5 .dg-note { font-size: 11px; }
}
/* 5. Mobile: una fase per riga; altezza libera con tutti i contenuti visibili. */
@container modulo5 (max-width: 560px) {
  .design-modulo5 .dg-inner { padding-inline: 24px; }
  .design-modulo5 .dg-headline { font-size: min(var(--design-heading-size, 36px), 34px); }
  .design-modulo5 .dg-eyebrow { font-size: 9px; }
  .design-modulo5 .dg-grid { grid-template-columns: minmax(0, 1fr); }
  .design-modulo5 .dg-step-title { font-size: max(var(--design-step-size, 18px), 21px); }
}
/* Fallback per browser senza container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 1000px) { .design-modulo5 .dg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .design-modulo5 .dg-top { flex-direction: column; align-items: flex-start; } .design-modulo5 .dg-intro { flex: none; font-size: 14px; } }
  @media (max-width: 560px) { .design-modulo5 .dg-grid { grid-template-columns: minmax(0, 1fr); } .design-modulo5 .dg-description { font-size: 14px; } }
}