/* =====================================================================
   SEZIONI DI PAGINA — parti comuni a Home e pagine interne.
   Ogni sezione = Gruppo <section> allineato "ampio" con classe mm-section (+ classe del componente).
   Misure dalla schermata Stitch "Home" a 1280px. Vedi design/DESIGN.md › Layout e Components.
   ===================================================================== */
/* Spazio verticale = padding della sezione (48px come Stitch), non il blockGap di WordPress */
.wp-block-group.mm-section { margin-block: 0; padding-block: 48px; }
/* Twenty Twenty-Five mette "text-wrap: pretty" a titoli e paragrafi: qui servono gli stessi a capo di Stitch */
.mm-section :is(h1, h2, h3, h4, p, li, summary) { text-wrap: wrap; }

/* --- Pagine interne (schermate Stitch interne): solo spazio SOTTO ogni sezione = token section (128px, 72px su mobile) --- */
.wp-block-group.mm-section.mm-section--interna { padding-block: 0 var(--wp--preset--spacing--section); }
/* la CTA finale (pattern) segue l'ultima sezione: niente spazio doppio sopra */
.mm-section--interna + .wp-block-group.mm-section.mm-cta { padding-top: 0; }

/* --- Testata pagine interne: eyebrow a pillola + H1 + testo introduttivo (max 720px) ---
   64px sopra come Stitch (+8px di stacco dall'header, come l'hero della Home), 48px sotto. */
.wp-block-group.mm-section.mm-intro { padding-block: 72px 48px; }
.wp-block-group.mm-intro > * { max-width: 720px; margin: 0; }
.mm-intro > .mm-eyebrow--chip { margin-bottom: 8px; padding-block: 10px; } /* pillola alta 32px come Stitch */
.mm-intro > .mm-intro__title { margin-bottom: 16px; }
.mm-intro > .mm-intro__text { line-height: 1.625; }

/* --- Eyebrow: "● ETICHETTA" (label-caps). Variante a pillola Ghiaccio: mm-eyebrow--chip --- */
.mm-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--wp--preset--color--primary-bright);
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: var(--wp--preset--font-size--label-caps);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mm-eyebrow::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}
.mm-eyebrow--chip {
  width: fit-content;
  padding: 4px 12px;
  border-radius: 9999px;
  background-color: var(--wp--preset--color--surface-blue);
  color: var(--wp--preset--color--primary);
}

/* --- Titolo di sezione (H2 con dimensione headline-md): peso 800 come Stitch --- */
.mm-title {
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: wrap; /* TT5 usa "pretty": qui servono gli stessi a capo di Stitch */
}

/* --- Testata di sezione: eyebrow + titolo a sinistra, testo o link a destra --- */
.wp-block-group.mm-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.wp-block-group.mm-head > * { margin: 0; }
.wp-block-group.mm-head__titles { display: flex; flex-direction: column; gap: 8px; }
.wp-block-group.mm-head__titles > * { margin: 0; }
.wp-block-group.mm-head > .mm-head__text { max-width: 384px; }
@media (min-width: 768px) {
  .wp-block-group.mm-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

/* --- Link testuale con freccia (la freccia e' ::before spostata dopo il testo, cosi' ::after resta libero) --- */
.mm-link-arrow { display: flex; } /* il link non si appoggia sulla riga di testo del paragrafo (sarebbe 3px piu' in basso) */
.mm-link-arrow a {
  display: inline-flex;
  align-items: center;
  gap: var(--mm-link-gap, 6px);
  color: var(--wp--preset--color--primary-bright);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
  transition: color .2s;
}
.mm-link-arrow a::before {
  content: "";
  order: 1;
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--mm-ico-arrow) center / contain no-repeat;
  mask: var(--mm-ico-arrow) center / contain no-repeat;
  transition: transform .2s var(--mm-ease, ease);
}
.mm-link-arrow a:hover { color: var(--wp--preset--color--primary); }
.mm-link-arrow a:hover::before,
.mm-card-link:hover a::before { transform: translateX(4px); }

/* --- Card interamente cliccabile: il link del blocco si estende su tutta la card (che e' position: relative) --- */
.mm-card-link a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* --- Bottoni piccoli (14px bold, 48px di altezza) e bottone bianco su fondo chiaro --- */
.wp-block-button.mm-btn-sm { --mm-ico-size: 16px; --mm-ico-gap: 8px; }
.wp-block-button.mm-btn-sm > .wp-block-button__link {
  padding: 14px 24px;
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.wp-block-button.mm-btn-white > .wp-block-button__link {
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--primary);
}
.wp-block-button.mm-btn-white > .wp-block-button__link:hover,
.wp-block-button.mm-btn-white > .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--surface-blue);
  color: var(--wp--preset--color--primary);
}