/* =====================================================================
   HOME › SERVIZI — titolo fisso a sinistra (4 col, sticky) + elenco a fisarmonica (8 col).
   Ogni voce e' un blocco Dettagli (<details> nativo, nessun JavaScript) con lo stesso "name":
   se ne apre una alla volta. Numero 01, 02... automatico (contatore CSS).
   Sommario: <strong>Titolo</strong><br>sottotitolo (il sottotitolo si nasconde quando la voce e' aperta).
   Vedi design/DESIGN.md › Components › Lista servizi interattiva.
   ===================================================================== */
.wp-block-group.mm-servizi__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.wp-block-group.mm-servizi__grid > * { margin: 0; }

/* --- Colonna titolo --- */
.wp-block-group.mm-servizi__intro { display: flex; flex-direction: column; gap: 20px; }
.wp-block-group.mm-servizi__intro > * { margin: 0; }
.mm-servizi__intro > .mm-servizi__title { line-height: 1.25; }
.mm-servizi__intro > .wp-block-buttons { padding-top: 8px; }

/* --- Elenco --- */
.wp-block-group.mm-servizi__list { display: flex; flex-direction: column; gap: 16px; counter-reset: mm-srv; }
.wp-block-group.mm-servizi__list > * { margin: 0; }
.wp-block-details.mm-srv {
  counter-increment: mm-srv;
  padding: 24px;
  border-radius: 20px;
  background-color: var(--wp--preset--color--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: background-color .2s;
}
.wp-block-details.mm-srv:not([open]):hover { background-color: var(--wp--preset--color--background); }
.wp-block-details.mm-srv[open] { padding: 32px; border-radius: 24px; box-shadow: 0 6px 24px rgba(6, 51, 107, .06); }
.wp-block-details.mm-srv > * { margin: 0; }
.wp-block-details.mm-srv > * + * { margin-top: 24px; }

/* Griglia: numero | titolo / sottotitolo | freccia. Titolo, <br> e sottotitolo sono celle separate della griglia:
   numero e freccia occupano le due righe, il titolo va nella riga 1, il sottotitolo (testo) finisce nella cella libera sotto. */
.mm-srv > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 32px;
  align-items: center;
  column-gap: 16px;
  list-style: none;
  cursor: pointer;
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 12px;
  line-height: 16px;
}
.mm-srv > summary::-webkit-details-marker { display: none; }
.mm-srv > summary br { display: none; }
/* Numero */
.mm-srv > summary::before {
  content: counter(mm-srv, decimal-leading-zero);
  grid-area: 1 / 1 / 3 / 2;
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: var(--wp--preset--font-size--title);
  font-weight: 800;
  line-height: 1.35;
}
/* Titolo */
.mm-srv > summary strong {
  grid-area: 1 / 2;
  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: 700;
  line-height: 1.35;
}
/* Freccia (in un cerchio Ghiaccio quando la voce e' aperta: il cerchio e' lo sfondo del sommario) */
.mm-srv > summary::after {
  content: "";
  grid-area: 1 / 3 / 3 / 4;
  width: 32px;
  height: 32px;
  background-color: currentColor;
  -webkit-mask: var(--mm-ico-chevron) center / 20px no-repeat;
  mask: var(--mm-ico-chevron) center / 20px no-repeat;
  transition: transform .3s var(--mm-ease, ease);
}
.mm-srv[open] > summary {
  color: var(--wp--preset--color--primary-bright);
  font-size: 0; /* nasconde il sottotitolo */
  background: radial-gradient(circle 16px at calc(100% - 16px) 50%, var(--wp--preset--color--surface-blue) 15.5px, transparent 16px);
}
.mm-srv[open] > summary strong { font-size: var(--wp--preset--font-size--headline-sm); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.mm-srv[open] > summary::after { transform: rotate(180deg); }
.mm-srv > summary:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 6px; border-radius: 8px; }

/* --- Contenuto aperto: descrizione, checklist + foto --- */
.wp-block-group.mm-srv__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.wp-block-group.mm-srv__body > * { margin: 0; }
.wp-block-list.mm-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  list-style: none;
  color: var(--wp--preset--color--on-surface);
  font-size: var(--wp--preset--font-size--body-sm);
  font-weight: 500;
  line-height: 1.55;
}
.wp-block-list.mm-checklist > li { display: flex; align-items: center; gap: 10px; margin: 0; }
.wp-block-list.mm-checklist > li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: var(--wp--preset--color--primary-bright);
  -webkit-mask: var(--mm-ico-check) center / contain no-repeat;
  mask: var(--mm-ico-check) center / contain no-repeat;
}
.wp-block-image.mm-srv__img { height: 176px; overflow: hidden; border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.wp-block-image.mm-srv__img img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
  .wp-block-group.mm-srv__body:has(> .mm-srv__img) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .wp-block-group.mm-servizi__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .wp-block-group.mm-servizi__intro { grid-column: span 4; position: sticky; top: 160px; align-self: start; }
  .wp-block-group.mm-servizi__list { grid-column: span 8; }
}

/* Apertura di una voce: il contenuto entra con dissolvenza, la foto con leggero zoom (DESIGN.md › Motion 9) */
@media (prefers-reduced-motion: no-preference) {
  .mm-srv[open] > :not(summary) { animation: mm-fade-up .5s var(--mm-ease) backwards; }
  .mm-srv[open] .mm-srv__img img { animation: mm-zoom-out .9s var(--mm-ease) backwards; }
}