/*
 * mod_design_09_vers_1.0 — design 09 (Invito al contatto).
 * Foglio autonomo, senza Bootstrap o dipendenze dal template.
 * Ogni selettore è limitato a .design-09: gli altri design sono indipendenti.
 * Colori e larghezza: variabili impostate dal tab Aspetto della singola istanza.
 * Per una sola istanza usare l'ID design-09-module-ID oppure un'ancora unica.
 */

/* 1. Contenitore e variabili. La larghezza riguarda solo il contenuto interno. */
.design-09 {
  --design-ink: #153b3f;
  --design-accent: #b74620;
  --design-lime: #e5f0c7;
  --design-border: #d8e3df;
  --design-width: 1200px;
  box-sizing: border-box;
  color: var(--design-ink);
  background: #fff;
  font-family: var(--design-font, Arial, Helvetica, sans-serif);
  font-size: 17px;
  line-height: 1.65;
  padding: 76px 24px;
  scroll-margin-top: 100px;
}
.design-09 * { box-sizing: border-box; }
.design-09 .dg-wrap { width: 100%; max-width: var(--design-width); margin: 0 auto; }
.design-09 p { margin: 0 0 1em; }
.design-09 a { color: inherit; }
.design-09 img { max-width: 100%; height: auto; display: block; }

/* 2. Tipografia: il livello semantico del titolo si sceglie in Aspetto. */
.design-09 h1, .design-09 h2, .design-09 h3 {
  color: inherit;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.13;
  margin: 0 0 .6em;
}
.design-09 h3 { font-size: 23px; letter-spacing: -.02em; }
.design-09 .dg-title { font-size: clamp(32px, 3.4vw, 50px); max-width: 850px; }
.design-09 .dg-eyebrow {
  color: var(--design-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.4;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.design-09 .dg-note { font-size: 14px; margin: 25px 0 0; }

/* 3. Pulsanti e link. Le destinazioni vengono inserite manualmente nel modulo. */
.design-09 .dg-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 28px; }
.design-09 .dg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 20px;
  border: 1px solid var(--design-accent);
  border-radius: 6px;
  background: var(--design-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.design-09 .dg-button:hover { background: var(--design-ink); border-color: var(--design-ink); color: #fff; }
.design-09 .dg-button:active { transform: translateY(1px); }
.design-09 .dg-link { display: inline-block; font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.design-09 .dg-link:hover { color: var(--design-accent); }
.design-09 :is(a, button, summary):focus-visible { outline: 3px solid var(--design-accent); outline-offset: 4px; }

/* 4. Varianti di sfondo della singola istanza. */
.design-09.dg-tone-soft { background: #f4f7f3; }
.design-09.dg-tone-lime { background: var(--design-lime); }
.design-09.dg-tone-dark { background: var(--design-ink); color: #fff; }
.design-09.dg-tone-dark .dg-eyebrow { color: var(--design-lime); }
.design-09.dg-tone-dark .dg-button { background: var(--design-lime); color: var(--design-ink); border-color: var(--design-lime); }
.design-09.dg-tone-dark .dg-button:hover { background: #fff; border-color: #fff; }
.design-09.dg-tone-dark .dg-link:hover { color: var(--design-lime); }

/* 5. Struttura specifica di questo design. */
.design-09 .dg-callout { display: grid; grid-template-columns: 1.5fr .7fr; gap: 50px; align-items: center; }
.design-09 .dg-callout .dg-title { font-size: clamp(30px, 3vw, 42px); }
.design-09 .dg-callout > div:nth-child(2) .dg-actions { margin-top: 0; }

/* 6. Tablet: riduzione delle colonne, senza larghezze fisse. */
@media (max-width: 1024px) {
  .design-09 .dg-feature-grid { gap: 35px; }
  .design-09 .dg-card-grid, .design-09 .dg-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .design-09 .dg-network-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .design-09 .dg-network-strip > div:first-child { grid-column: 1 / -1; }
  .design-09 .dg-faq-grid { gap: 40px; }
  .design-09 .dg-section-head { gap: 35px; }
}

/* 7. Smartphone: una colonna e spazi proporzionati. */
@media (max-width: 700px) {
  .design-09 { padding: 48px 20px; font-size: 16px; }
  .design-09 .dg-feature-grid, .design-09 .dg-section-head,
  .design-09 .dg-card-grid, .design-09 .dg-step-grid,
  .design-09 .dg-callout, .design-09 .dg-faq-grid { grid-template-columns: 1fr; gap: 30px; }
  .design-09 .dg-feature-visual img { aspect-ratio: 1.35; max-height: 340px; }
  .design-09 .dg-feature-copy { order: 1; }
  .design-09 .dg-feature-visual { order: 2; }
  .design-09 .dg-actions { gap: 16px; }
}

/* 8. Accessibilità: rispetto della preferenza di movimento ridotto. */
@media (prefers-reduced-motion: reduce) {
  .design-09 .dg-button { transition: none; }
}