/* =====================================================================
   PROGETTI — pagina Progetti (contenuto della pagina: Query Loop sul tipo ACF "progetto") e dettaglio progetto
   (templates/single-progetto.html). Misure dalle schermate Stitch "Progetti" e "Dettaglio Progetto" a 1280px.
   Come le altre pagine interne: testata sullo sfondo della pagina (niente fasce colorate di Stitch), filtri =
   blocco "Filtri per categoria" (stili in 64-pagina-servizi.css), CTA finale = pattern sincronizzato.
   Galleria, copertina delle card e breadcrumb: inc/progetti.php. Vedi design/DESIGN.md › Components › Pagina Progetti.
   ===================================================================== */

/* --- 1. TESTATA: testo (max 720px) a sinistra, riquadro numeri a destra; sotto, i filtri --- */
.wp-block-group.mm-section.mm-intro.mm-progetti-intro { padding-block: 40px 48px; } /* 32 di Stitch + 8 di stacco dall'header */
.wp-block-group.mm-progetti-intro > * { max-width: none; }
.wp-block-group.mm-progetti-intro__row { display: flex; flex-direction: column; gap: 32px; margin-bottom: 48px; }
.wp-block-group.mm-progetti-intro__row > * { margin: 0; }
.wp-block-group.mm-progetti-intro__text { max-width: 720px; }
.wp-block-group.mm-progetti-intro__text > * { margin: 0; }
@media (min-width: 768px) {
  .wp-block-group.mm-progetti-intro__row { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

/* pillola con fulmine al posto del pallino (come Stitch) */
.mm-progetti-intro__text > .mm-eyebrow--chip { margin-bottom: 16px; letter-spacing: .12em; }
.mm-progetti-intro__text > .mm-eyebrow--chip::before {
  width: 14px;
  height: 14px;
  border-radius: 0;
  -webkit-mask: var(--mm-ico-bolt) center / contain no-repeat;
  mask: var(--mm-ico-bolt) center / contain no-repeat;
}
.wp-block-group.mm-progetti-intro__text > .mm-intro__title { margin-bottom: 16px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.mm-progetti-intro__text > .mm-intro__text { line-height: 1.65; }

/* riquadro numeri: due valori separati da una riga verticale */
.wp-block-group.mm-progetti-numeri {
  display: flex;
  flex: none;
  align-items: center;
  gap: 24px;
  width: fit-content;
  padding: 24px;
  border: 1px solid rgba(217, 227, 239, .4); /* outline al 40% */
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.wp-block-group.mm-progetti-numeri > * { margin: 0; }
.wp-block-group.mm-progetti-numero > * { margin: 0; }
.wp-block-group.mm-progetti-numero + .mm-progetti-numero { padding-left: 24px; border-left: 1px solid rgba(217, 227, 239, .6); }
.mm-progetti-numero__valore {
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: clamp(40px, 6vw, var(--wp--preset--font-size--stat-number));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}
.wp-block-group.mm-progetti-numero > .mm-progetti-numero__valore { margin-bottom: 4px; }
.mm-progetti-numero--bright .mm-progetti-numero__valore { color: var(--wp--preset--color--primary-bright); }
.mm-progetti-numero__label {
  color: var(--wp--preset--color--on-surface-variant);
  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.3; /* su mobile l'etichetta va su due righe */
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* filtri: riga sottile sopra (come Stitch) */
.mm-progetti-intro > .mm-filtri { padding-top: 16px; border-top: 1px solid rgba(217, 227, 239, .6); }

/* --- 2. GRIGLIA DEI PROGETTI: 1 / 2 / 3 colonne, gap 16px; card della stessa riga alte uguali --- */
.wp-block-group.mm-section.mm-progetti-lista { padding-top: 0; }
.wp-block-post-template.mm-progetti-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wp-block-post-template.mm-progetti-grid > li { display: flex; margin: 0; }
@media (min-width: 768px) { .wp-block-post-template.mm-progetti-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .wp-block-post-template.mm-progetti-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* card che ricompaiono (caricamento e cambio filtro): dissolvenza, come nella pagina Servizi */
@media (prefers-reduced-motion: no-preference) {
  .wp-block-post-template.mm-progetti-grid > li { transition: opacity .4s var(--mm-ease); }
  @starting-style {
    .wp-block-post-template.mm-progetti-grid > li { opacity: 0; }
  }
}

/* Card: bianca, bordo sottile, foto 256px con categoria flottante; tutta la card porta al dettaglio */
.wp-block-group.mm-progetto-card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--wp--preset--color--outline);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: box-shadow .3s;
}
.wp-block-group.mm-progetto-card > * { margin: 0; }
.wp-block-group.mm-progetto-card:hover { box-shadow: 0 20px 25px -5px rgba(6, 51, 107, .1), 0 8px 10px -6px rgba(6, 51, 107, .1); }

.wp-block-group.mm-progetto-card__media {
  position: relative;
  height: 256px;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--wp--preset--color--surface-blue);
}
.mm-progetto-card__media > * { margin: 0; }
.mm-progetto-card__img,
.mm-progetto-card__img img { display: block; width: 100%; height: 100%; margin: 0; }
.mm-progetto-card__img img { object-fit: cover; transition: transform .5s var(--mm-ease, ease); }
.mm-progetto-card:hover .mm-progetto-card__img img { transform: scale(1.05); }
.mm-progetto-card__media > .mm-progetto-card__cat {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  border-radius: 9999px;
  background-color: var(--wp--preset--color--primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  color: var(--wp--preset--color--surface);
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
/* nell'editor il blocco Termini mostra ancora il link: stesso aspetto del sito (testo semplice) */
.mm-progetto-card__cat a { color: inherit; text-decoration: none; pointer-events: none; }

.mm-progetto-card > .mm-progetto-card__title {
  margin-bottom: 8px;
  color: var(--wp--preset--color--on-surface);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  transition: color .2s;
}
.mm-progetto-card:hover > .mm-progetto-card__title { color: var(--wp--preset--color--primary); }
.mm-progetto-card__excerpt p { display: -webkit-box; margin: 0; overflow: hidden; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mm-progetto-card > .mm-progetto-card__excerpt { margin-bottom: 16px; }

/* "Guarda gallery progetto ->" (blocco Leggi tutto, stile mm-readmore di 62-news.css) in fondo, sopra una riga sottile;
   ::before allarga il link a tutta la card (::after e' la freccia) */
.mm-progetto-card > .wp-block-read-more.mm-progetto-card__link {
  align-self: stretch; /* la riga attraversa tutta la card */
  width: auto;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(217, 227, 239, .4);
}
.mm-progetto-card__link::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mm-progetto-card:hover .mm-progetto-card__link { color: var(--wp--preset--color--primary-bright); }
.mm-progetto-card:hover .mm-progetto-card__link::after { transform: translateX(4px); }

.mm-progetti-vuoto { margin: 0; }

/* --- 3. DETTAGLIO: breadcrumb, H1 e descrizione (= contenuto del progetto) --- */
.wp-block-group.mm-section.mm-intro.mm-progetto-head { padding-block: 40px 72px; } /* 24+48 di Stitch prima della galleria */
.wp-block-group.mm-progetto-head > .mm-breadcrumbs { max-width: none; margin-bottom: 24px; }
.mm-progetto-head .mm-breadcrumbs [aria-current] { max-width: 448px; }
@media (max-width: 639px) { .mm-progetto-head .mm-breadcrumbs [aria-current] { max-width: 220px; } }
.wp-block-group.mm-progetto-head > .mm-progetto__title { margin-bottom: 16px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.mm-progetto__intro > * { margin-block: 0; line-height: 1.65; }
.mm-progetto__intro > * + * { margin-top: 16px; }

/* --- 4. GALLERIA FOTOGRAFICA: 3 colonne (2 sotto 600px, regola del blocco Galleria), foto 4:3 con angoli 12px.
   Clic = ingrandimento a schermo intero con frecce (lightbox del blocco Galleria). Senza foto la sezione non c'e'. --- */
.wp-block-group.mm-section.mm-progetto-galleria { padding-block: 0 48px; }
.mm-progetto-galleria:not(:has(.wp-block-gallery)) { display: none; }
.mm-progetto-galleria > .mm-progetto-galleria__title { margin: 0 0 32px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.mm-galleria > .wp-block-gallery { margin: 0; }
/* foto sempre larghe una colonna: il blocco Galleria allargherebbe quelle dell'ultima riga incompleta (fino a 1200px) */
.mm-galleria .wp-block-gallery.has-nested-images figure.wp-block-image { flex-grow: 0; }
.mm-galleria figure.wp-block-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--wp--preset--color--surface-blue);
  box-shadow: 0 4px 20px rgba(6, 51, 107, .04);
}
.mm-galleria figure.wp-block-image img { transition: transform .5s var(--mm-ease, ease); }
.mm-galleria figure.wp-block-image:hover img { transform: scale(1.05); }

/* --- 5. TESTIMONIANZE: fascia Ghiaccio a tutta larghezza; testata e widget come la sezione recensioni della Home
   (47-recensioni.css: il widget Trustindex ha tutta la larghezza, niente griglie attorno) --- */
.wp-block-group.mm-progetto-recensioni { margin-block: 0; }