/* =====================================================================
   PAGINA SERVIZI — dalla schermata Stitch "Servizi" (misure a 1280px). Header, footer e CTA finale: quelli del sito.
   Card dinamiche: Query Loop sui servizi (tipo di contenuto ACF "servizio"), filtri = blocco "Filtri servizi"
   (inc/servizi.php: pulsanti radio, una regola CSS per categoria, nessun JavaScript).
   Spazi come Stitch: testata 48px sopra (+8 di stacco dall'header) e 32 sotto; filtri e griglia 48px piu' sotto;
   fascia "Come lavoriamo" con 64px di margine e 64 di padding; FAQ 32px sopra, 96px fino alla CTA.
   Vedi design/DESIGN.md › Components › Pagina Servizi.
   ===================================================================== */

/* --- 1. TESTATA: pillola alta 20px (pallino 8px che pulsa), H1 headline-lg 700, 16px tra gli elementi --- */
.wp-block-group.mm-section.mm-intro.mm-servizi-intro { padding-block: 56px 32px; }
.wp-block-group.mm-servizi-intro > .mm-eyebrow--chip { gap: 8px; margin-bottom: 16px; padding-block: 4px; letter-spacing: .12em; }
.mm-servizi-intro > .mm-eyebrow--chip::before { width: 8px; height: 8px; }
.wp-block-group.mm-servizi-intro > .mm-intro__title { font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.wp-block-group.mm-servizi-intro > .mm-intro__text { line-height: 1.65; }
@media (prefers-reduced-motion: no-preference) {
  .mm-servizi-intro > .mm-eyebrow--chip::before { animation: mm-pulse 2s ease-in-out infinite; }
}

/* --- 2. FILTRI + CARD DEI SERVIZI --- */
.wp-block-group.mm-section.mm-servizi-lista { padding-block: 16px 32px; }
.wp-block-group.mm-servizi-lista > .mm-filtri { margin-bottom: 48px; }

/* Pillole: il pulsante radio (trasparente) copre tutta la pillola; selezionata = Blu MM */
.mm-filtri { display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.mm-filtri__chip { position: relative; display: block; }
.mm-filtri__chip > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.mm-filtri__chip > span {
  display: block;
  padding: 10px 20px;
  border-radius: 9999px;
  background-color: var(--wp--preset--color--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  color: var(--wp--preset--color--on-surface-variant);
  font-family: var(--wp--preset--font-family--inter);
  font-size: var(--wp--preset--font-size--body-md);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.mm-filtri__chip:hover > span { background-color: var(--wp--preset--color--surface-blue); color: var(--wp--preset--color--primary); }
.mm-filtri__chip > input:checked + span { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--surface); }
.mm-filtri__chip > input:focus-visible + span { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }

/* Griglia: 1 / 2 / 3 colonne, gap 16px; le card di una riga hanno la stessa altezza */
.wp-block-post-template.mm-servizi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wp-block-post-template.mm-servizi-grid > li { display: flex; margin: 0; scroll-margin-top: 160px; } /* sotto l'header fisso */
/* card raggiunta da un link dell'elenco servizi (footer): bordo nel colore d'accento */
.mm-servizi-grid > li:target > .wp-block-group.mm-servizio { box-shadow: 0 0 0 2px var(--mm-servizio-accent), 0 12px 32px rgba(6, 51, 107, .08); }
@media (min-width: 768px) { .wp-block-post-template.mm-servizi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .wp-block-post-template.mm-servizi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Card che compaiono (caricamento e cambio filtro): dissolvenza. Solo opacita': uno spostamento falserebbe
   la posizione delle card raggiunte con un link del footer (#servizio-...) */
@media (prefers-reduced-motion: no-preference) {
  .wp-block-post-template.mm-servizi-grid > li { transition: opacity .4s var(--mm-ease); }
  @starting-style {
    .wp-block-post-template.mm-servizi-grid > li { opacity: 0; }
  }
}

/* Card: colore d'accento in variabili (icona, categoria, spunte, link) */
.wp-block-group.mm-servizio {
  --mm-servizio-accent: var(--wp--preset--color--primary);
  --mm-servizio-accent-hover: var(--wp--preset--color--primary-bright);
  --mm-servizio-tile: var(--wp--preset--color--surface-blue);
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(6, 51, 107, .04);
  transition: box-shadow .3s;
}
.wp-block-group.mm-servizio > * { margin: 0; }
.wp-block-group.mm-servizio:hover { box-shadow: 0 12px 32px rgba(6, 51, 107, .08); }
/* Categoria "Assistenza 24/7" = pronto intervento: accenti in Rosso Emergenza (come Stitch; eccezione in DESIGN.md) */
.categoria-servizio-assistenza-24-7 > .wp-block-group.mm-servizio {
  --mm-servizio-accent: var(--wp--preset--color--emergency);
  --mm-servizio-accent-hover: var(--wp--preset--color--emergency-deep);
  --mm-servizio-tile: var(--wp--preset--color--emergency-soft);
}

/* icona Font Awesome scelta nel campo ACF, in un riquadro 56px */
.mm-servizio > .mm-servizio__icona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background-color: var(--mm-servizio-tile);
  color: var(--mm-servizio-accent);
  font-size: 26px;
  line-height: 1;
}
.mm-servizio > .mm-servizio__icona:empty { display: none; }
/* Editor: i blocchi collegati ai campi ACF mostrano il nome della sorgente ("Custom Fields") -> riquadro vuoto;
   la categoria resta testo semplice come nel sito (nell'editor il blocco Termini mostra ancora il link) */
.mm-servizio > .mm-servizio__icona:not(:has(i)) { font-size: 0; }
.mm-servizio__cat a { color: inherit; text-decoration: none; pointer-events: none; }
.mm-servizio > .mm-servizio__cat {
  margin-top: 20px;
  color: var(--mm-servizio-accent);
  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: .05em;
  text-transform: uppercase;
}
.mm-servizio > .mm-servizio__title {
  margin-top: 8px;
  color: var(--wp--preset--color--on-surface);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.mm-servizio > .mm-servizio__text { margin-top: 8px; line-height: 1.6; }
.mm-servizio__text > * { margin: 0; }
.mm-servizio__text > * + * { margin-top: 8px; }

/* tre check: spunta 18px, righe vuote nascoste */
.mm-servizio > .mm-servizio__checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding: 8px 0 0;
  list-style: none;
  color: var(--wp--preset--color--on-surface);
  font-size: var(--wp--preset--font-size--body-sm);
  line-height: 1.55;
}
.mm-servizio > .mm-servizio__checks:not(:has(> li:not(:empty))) { display: none; }
.mm-servizio__checks > li { display: flex; align-items: center; gap: 10px; margin: 0; }
.mm-servizio__checks > li:empty { display: none; }
.mm-servizio__checks > li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: var(--mm-servizio-accent);
  -webkit-mask: var(--mm-ico-check) center / contain no-repeat;
  mask: var(--mm-ico-check) center / contain no-repeat;
}

/* Link in fondo alla card: 48px sopra come Stitch (+3: in Stitch il link alto 18px sta in una riga di 24px).
   "Vedi i progetti" in tutte le card; in "Assistenza 24/7" al suo posto "Contatta l'emergenza" (apre il pop-up) */
.mm-servizio > .mm-servizio__link { display: flex; margin-top: auto; padding-block: 51px 3px; }
/* (selettori senza ">": nell'editor il blocco HTML del link di emergenza ha un contenitore in piu') */
.mm-servizio .mm-servizio__link--emergenza,
.categoria-servizio-assistenza-24-7 .mm-servizio .mm-servizio__link--progetti { display: none; }
.categoria-servizio-assistenza-24-7 .mm-servizio .mm-servizio__link--emergenza { display: flex; }
.mm-servizio__link :is(a, button) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mm-servizio-accent);
  font-family: var(--wp--preset--font-family--inter);
  font-size: var(--wp--preset--font-size--body-md);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s;
}
.mm-servizio__link :is(a, button)::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  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-servizio__link :is(a, button):hover { color: var(--mm-servizio-accent-hover); }
.mm-servizio__link :is(a, button):hover::after { transform: translateX(4px); }

/* --- Testate centrate di "Come lavoriamo" e FAQ: etichetta senza pallino in Blu MM, H2 700 (come Stitch) --- */
.wp-block-group.mm-servizi-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.wp-block-group.mm-servizi-head > * { margin: 0; }
.mm-servizi-head > .mm-eyebrow { color: var(--wp--preset--color--primary); letter-spacing: .05em; }
.mm-servizi-head > .mm-eyebrow::before { content: none; }
.mm-servizi-head > .mm-title { font-weight: 700; }
.mm-servizi-head > .mm-servizi-head__text { line-height: 1.6; }

/* --- 3. COME LAVORIAMO: fascia Ghiaccio a tutta larghezza, 4 fasi (4 colonne da 1024px, 2 da 768px) --- */
.wp-block-group.mm-section.mm-lavoro { margin-block: 64px; padding-block: 64px; }
.wp-block-group.mm-lavoro__inner > * { margin: 0; }
.wp-block-group.mm-lavoro__inner > .mm-lavoro__head { max-width: 720px; margin: 0 auto 48px; }
.wp-block-group.mm-lavoro__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.wp-block-group.mm-lavoro__grid > * { margin: 0; }
@media (min-width: 768px) { .wp-block-group.mm-lavoro__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .wp-block-group.mm-lavoro__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Fase: icona in riquadro 48px in alto (mm-tile), numero grande decorativo in alto a destra */
.wp-block-group.mm-fase {
  --mm-tile-size: 48px;
  --mm-tile-radius: 12px;
  --mm-tile-inset: 24px auto auto 24px;
  --mm-ico-size: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 88px 24px 24px;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(6, 51, 107, .04);
}
.wp-block-group.mm-fase > * { margin: 0; }
.mm-fase > .mm-fase__num {
  position: absolute;
  top: 24px;
  right: 24px;
  color: rgba(1, 76, 152, .1);
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: var(--wp--preset--font-size--stat-number);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}
.mm-fase > .mm-fase__title { color: var(--wp--preset--color--on-surface); font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.mm-fase > .mm-fase__text { line-height: 1.55; }

/* --- 4. DOMANDE FREQUENTI: colonna di 720px, card bianche con freccia che ruota --- */
.wp-block-group.mm-section.mm-faq { padding-block: 32px 48px; }
.wp-block-group.mm-faq > * { max-width: 720px; margin: 0 auto; }
.wp-block-group.mm-faq > .mm-faq__head { gap: 12px; margin-bottom: 32px; }
.wp-block-group.mm-faq__list { display: flex; flex-direction: column; gap: 16px; }
.wp-block-group.mm-faq__list > * { margin: 0; }
.wp-block-details.mm-faq__item {
  padding: 24px;
  border-radius: 24px;
  background-color: var(--wp--preset--color--surface);
  box-shadow: 0 4px 20px rgba(6, 51, 107, .04);
}
.mm-faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  color: var(--wp--preset--color--on-surface);
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: var(--wp--preset--font-size--title);
  font-weight: 600;
  line-height: 1.35;
}
.mm-faq__item > summary::-webkit-details-marker { display: none; }
.mm-faq__item > summary::after {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background-color: var(--wp--preset--color--primary);
  -webkit-mask: var(--mm-ico-chevron) center / contain no-repeat;
  mask: var(--mm-ico-chevron) center / contain no-repeat;
  transition: transform .3s var(--mm-ease, ease);
}
.mm-faq__item[open] > summary::after { transform: rotate(180deg); }
.mm-faq__item > summary:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 6px; border-radius: 8px; }
.wp-block-details.mm-faq__item > .mm-faq__answer { margin: 0; padding-top: 16px; line-height: 1.55; }
@media (prefers-reduced-motion: no-preference) {
  .mm-faq__item[open] > :not(summary) { animation: mm-fade-up .5s var(--mm-ease) backwards; }
}