/* =========================================================================
   Stili dei template: archivio, articolo, evento, ricerca.
   Le sezioni della home vivono nei blocchi.
   ========================================================================= */

/* ----------------------- HERO DELLE PAGINE INTERNE ------------------------- */
/* Vive qui e non nel blocco hero: la usano i template di pagina,
   articolo, evento e archivio, dove quel blocco non è presente. */
/* L'apertura resta appiccicata in cima e il resto della pagina le scorre
   sopra. Il fondo pieno sulle sezioni che seguono è quello che la copre:
   senza, la fotografia si vedrebbe attraverso. È scritto con :where() così
   pesa zero e le sezioni con un colore proprio continuano a vincere. */
main > .page-hero,
main > .hero{
  position: sticky;
  top: 0;
  z-index: 0;
}
main > :where(.page-hero ~ *, .hero ~ *){
  position: relative;
  z-index: 1;
  background-color: var(--marmo-l);
  /* I margini dei figli non devono uscire dalla sezione: uscendo si
     porterebbero dietro una riga scoperta fra un fondo e l'altro, e da
     lì tornerebbe a vedersi l'apertura. Succedeva con i 40px sotto
     .block__head di una testata di sezione con lo spazio sotto azzerato.
     Pesa zero, quindi chi ha bisogno di flex o grid se li tiene. */
  display: flow-root;
}
.page-hero{
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Sulle testate il bianco pieno è troppo duro sopra la fotografia: il
     testo prende il marmo chiaro della palette. */
  color: var(--marmo-l);
}
/* Apertura senza fotografia: blu del tema con la trama delle formelle.
   La usano le news, che non hanno un'immagine di testata. */
.page-hero--texture{ background: var(--blu-deep); }
.page-hero--texture::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/texture_blu.svg");
  background-repeat: repeat;
  background-size: 1920px auto;
  pointer-events: none;
}
.page-hero__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  filter: saturate(0.92);
}
.page-hero__veil{
  position: absolute;
  inset: 0;
  /* Velo nel blu profondo del tema (--blu-deep), non nero. */
  background: linear-gradient(180deg, rgba(39,51,74,0.72) 0%, rgba(56,72,103,0.45) 45%, rgba(39,51,74,0.78) 100%);
  mix-blend-mode: multiply;
}
.page-hero__content{
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 200px 0 60px;
}
/* L'eyebrow globale è bianco pieno: sulla testata segue il titolo. */
.page-hero .eyebrow{ color: var(--marmo-l); }
.page-hero .eyebrow::before{ background: var(--marmo-l); }
.page-hero__title{
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: 1.1;
  color: var(--marmo-l);
}
.page-hero__title em{
  font-style: italic;
  color: var(--oro-l);
}
.page-hero__lede{
  margin-top: 18px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--marmo-l);
}
/* Percorso di navigazione: piccolo, sotto l'eventuale sottotitolo, con la
   barra dorata a separare le voci. Va a capo da solo sui titoli lunghi. */
.page-hero__breadcrumb{
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.6;
}
.page-hero__breadcrumb ol{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 0;
  list-style: none;
}
.page-hero__breadcrumb li{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0;
}
.page-hero__breadcrumb li + li::before{
  content: "/";
  color: var(--oro-l);
  opacity: 0.7;
}
.page-hero__breadcrumb a{
  color: var(--marmo-l);
  opacity: 0.75;
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}
.page-hero__breadcrumb a:hover{
  color: var(--oro-l);
  opacity: 1;
}
.page-hero__breadcrumb [aria-current="page"]{
  color: var(--marmo-l);
  opacity: 0.55;
}

@media (max-width: 720px){
  .page-hero{ min-height: 46vh; }
  .page-hero__content{ padding: 150px 0 56px; }
}

/* ----------------------- ELENCO NEWS ED EVENTI ------------------------- */
/* Globale e non nel blocco: le stesse schede compaiono negli archivi
   e nei template di articolo, dove il blocco non è presente. */
.entries{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Niente bordo, come le schede degli interventi: a staccare la scheda dal
   marmo della pagina basta il bianco, con un'ombra appena accennata. */
.entry{
  display: flex;
  flex-direction: column;
  background: var(--carta, #FEFBF3);
  box-shadow:
    0 1px 2px rgba(39,51,74,0.05),
    0 10px 26px -20px rgba(39,51,74,0.30);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* Al passaggio del mouse la scheda si stacca davvero: due ombre sovrapposte,
   una corta che la appoggia e una lunga e morbida che le dà l'altezza. */
.entry:hover{
  transform: translateY(-3px);
  box-shadow:
    0 4px 10px rgba(39,51,74,0.07),
    0 28px 52px -24px rgba(39,51,74,0.38);
}
/* Quadrate come le schede degli interventi: con tre schede per riga le
   immagini si allineano anche quando le fotografie hanno formati diversi. */
.entry__media{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--blu);
}
.entry__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.entry:hover .entry__media img{ transform: scale(1.04); }

.entry__body{
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}
.entry__meta{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.entry__type{
  color: var(--oro);
  font-weight: 600;
}
.entry__type::after{
  content: "·";
  margin-left: 12px;
  color: var(--line);
}
.entry__title{
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 23px;
  line-height: 1.25;
  color: var(--blu);
}
.entry__excerpt{
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  flex: 1;
}
.entry__place{
  font-size: 13.5px;
  font-style: italic;
  color: var(--muted);
}
.entry__more{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oro);
}
.entry__more .arr{ transition: transform .2s ease; }
.entry:hover .entry__more .arr{ transform: translateX(4px); }

.entry--past{ opacity: .72; }

.entries__foot{
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.entries__empty{
  padding: 40px;
  background: var(--carta, #FEFBF3);
  border: 1px dashed var(--line);
  text-align: center;
  color: var(--muted);
}

@media (max-width: 1024px){
  .entries{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .entries{ grid-template-columns: 1fr; }
}

/* ----------------------- FILTRO ARCHIVIO ------------------------- */
.entries__filter{
  display: flex;
  gap: 8px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.entries__filter__item{
  padding: 10px 22px;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blu);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.entries__filter__item:hover{ border-color: var(--oro); color: var(--oro); }
.entries__filter__item.is-active{
  background: var(--blu);
  border-color: var(--blu);
  color: var(--marmo-l, #F1ECE0);
}

.entries__group{
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(27px, 2.2vw, 32px);
  color: var(--blu);
  margin: 0 0 28px;
}
.entries + .entries__group{ margin-top: 72px; }

/* ----------------------- PAGINAZIONE ------------------------- */
.pagination{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 64px;
  flex-wrap: wrap;
}
.pagination .page-numbers{
  min-width: 44px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  color: var(--blu);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.pagination a.page-numbers:hover{ border-color: var(--oro); color: var(--oro); }
.pagination .page-numbers.current{
  background: var(--blu);
  border-color: var(--blu);
  color: var(--marmo-l, #F1ECE0);
}
.pagination .dots{ border-color: transparent; }

/* ----------------------- CONTENUTO DI ARTICOLI ED EVENTI ------------------------- */
.entry-content > * + *{ margin-top: 12px; }
.entry-content h2,
.entry-content h3{
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  line-height: 1.2;
  color: var(--blu);
  margin-top: 44px;
}
/* Lo stacco sopra i titoli serve a separarli dal testo che li precede: se il
   titolo apre il contenuto non c'è niente da separare. Vale per qualunque
   primo elemento, immagini comprese. */
.entry-content > *:first-child{ margin-top: 0; }
.entry-content h2{ font-size: clamp(30px, 2.6vw, 36px); }
.entry-content h3{ font-size: clamp(25px, 2.2vw, 28px); }
.entry-content figure{ margin-top: 32px; }
/* Solo le figure di primo livello si staccano dal testo: quelle dentro una
   galleria, e le immagini dentro il confronto o il carosello, le dispone il
   blocco che le contiene. Con lo stacco anche lì restava una fascia vuota
   sopra le foto e il cursore del prima/dopo sporgeva oltre l'immagine. */
.entry-content figure figure{ margin-top: 0; }
/* WordPress appoggia le didascalie della galleria sopra all'immagine, in
   bianco su una sfumatura nera: qui tornano sotto alla loro immagine, con
   lo stesso aspetto delle altre didascalie del sito. */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{
  position: static;
  max-width: none;
  margin-top: 10px;
  padding: 0;
  background: none;
  text-shadow: none;
  overflow: visible;
  /* WordPress le dà flex-basis 100%: prenderebbe tutto lo spazio della
     figura e schiaccerebbe la foto sopra. Qui è alta quanto il suo testo. */
  flex: 0 0 auto;
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
  text-align: left;
  color: var(--muted);
}
/* Nelle gallerie non ritagliate le foto hanno altezze diverse: WordPress le
   centra in verticale nella riga, qui partono tutte dall'alto, con la
   didascalia subito sotto alla propria foto. */
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){
  justify-content: flex-start;
}
/* Con "Ritaglia le immagini" WordPress fa crescere la foto per riempire il
   riquadro (flex: 1 0 0% e height: 100%). Regge finché la didascalia è
   sovrapposta; con la didascalia nel flusso il riquadro non ha più
   un'altezza di partenza e le immagini caricate in differita si schiacciano
   a zero: era il motivo per cui di una galleria se ne vedeva una sola.
   Qui la forma la dà la proporzione, uguale per tutte le foto della riga. */
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img{
  flex: 0 0 auto;
  height: auto;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Zoom al passaggio del mouse: la fotografia cresce dal proprio centro,
   dentro un riquadro che resta fermo. Stesso movimento e stessa durata
   delle schede di news e interventi.

   L'ingrandimento è centrato, quindi la foto deborda anche in basso, dove
   sotto c'è la didascalia dentro la stessa figura: su un'immagine alta
   500px sono 10px, cioè tutto lo stacco che la didascalia ha. A tenerla
   fuori non basta il ritaglio della figura, che di sotto non chiude.

   Ci pensa il clip-path, che viaggia insieme all'ingrandimento: si toglie
   dall'immagine la stessa quota che l'ingrandimento aggiunge, così quello
   che resta in vista è esattamente il riquadro di partenza, su tutti e
   quattro i lati. La quota è (1 - 1/1,04) / 2 = 1,9231%: cambiando la
   scala va ricalcolata, altrimenti il riquadro si sposta. */
.wp-block-gallery.has-nested-images figure.wp-block-image{ overflow: hidden; }
.wp-block-gallery.has-nested-images figure.wp-block-image img{
  clip-path: inset(0%);
  transition: transform .6s ease, clip-path .6s ease;
}
.wp-block-gallery.has-nested-images figure.wp-block-image:hover img{
  transform: scale(1.04);
  clip-path: inset(1.9231%);
}
@media (prefers-reduced-motion: reduce){
  .wp-block-gallery.has-nested-images figure.wp-block-image img{ transition: none; }
  .wp-block-gallery.has-nested-images figure.wp-block-image:hover img{
    transform: none;
    clip-path: inset(0%);
  }
}

.entry-content figcaption,
.text-section__body figcaption,
.wp-block-gallery figcaption{
  margin-top: 10px;
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
  color: var(--muted);
  text-align: left;
}
.entry-content blockquote{
  margin-top: 32px;
  padding-left: 28px;
  border-left: 2px solid var(--oro);
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  line-height: 1.5;
  color: var(--blu);
}
.entry-content a{
  color: var(--oro);
  text-decoration: none;
  transition: color .2s ease;
}
.entry-content a:hover{ color: var(--oro-i); }

/* ----------------------- SCHEDA EVENTO ------------------------- */
.event-layout,
.intervento-layout{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 72px;
  align-items: start;
}
.event-facts,
.intervento-facts{
  padding: 22px;
  background: var(--marmo);
  position: sticky;
  /* La testata è fissa: fermandosi più in alto il riquadro le finirebbe
     dietro. --sticky-top è l'altezza della testata ristretta più un
     margine, e tiene già conto della barra di amministrazione. */
  top: var(--sticky-top);
  /* Più alto della finestra il riquadro resterebbe tagliato: qui si ferma
     all'altezza dello schermo e scorre al suo interno, così si arriva
     comunque al suo margine inferiore. */
  max-height: calc(100svh - var(--sticky-top) - 24px);
  overflow-y: auto;
}
.event-facts__title,
.intervento-facts__title{
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--blu);
  margin-bottom: 20px;
}
/* Etichetta e valore corrono sulla stessa riga separati da uno spazio
   normale — "STATO: Completato" — e ogni coppia va a capo da sola. */
.event-facts dt,
.intervento-facts dt{
  display: inline;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oro);
}
.event-facts dt::after,
.intervento-facts dt::after{ content: ":"; }
.event-facts dd,
.intervento-facts dd{
  display: inline;
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
}
.event-facts dd::after,
.intervento-facts dd::after{
  content: "\A";
  white-space: pre;
}
/* Il nome del progetto è lungo: va a capo sotto l'etichetta, con
   un'interlinea stretta. */
.intervento-facts dd.intervento-facts__progetto,
.intervento-facts dd.intervento-facts__fase{
  display: block;
  line-height: 1.2;
  margin: 4px 0 10px;
}
.intervento-facts dd.intervento-facts__progetto::after,
.intervento-facts dd.intervento-facts__fase::after{ content: none; }
.event-past-note{
  display: inline-block;
  margin-bottom: 32px;
  padding: 10px 20px;
  background: var(--marmo);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ----------------------- NAVIGAZIONE FRA CONTENUTI ------------------------- */
.post-nav{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.post-nav__link{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--line);
  transition: border-color .25s ease;
}
.post-nav__link:hover{ border-color: var(--oro); }
.post-nav__link--next{ text-align: right; grid-column: 2; }
.post-nav__label{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oro);
}
.post-nav__title{
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  line-height: 1.3;
  color: var(--blu);
}

/* ----------------------- RICERCA ------------------------- */
.search-form{
  display: flex;
  gap: 12px;
  margin-top: 24px;
  max-width: 560px;
}
.search-form__field{
  flex: 1;
  padding: 14px 18px;
  border: 1px solid var(--line);
  background: var(--carta, #FEFBF3);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
}
.search-form__field:focus{ outline: none; border-color: var(--oro); }

@media (max-width: 1024px){
  .event-layout,
  .intervento-layout{ grid-template-columns: 1fr; gap: 40px; }
  /* In colonna il riquadro apre la scheda, prima del racconto; e non essendo
     più appiccicato non ha senso troncarlo: si vede tutto. */
  .event-facts,
  .intervento-facts{
    order: -1;
    position: static;
    max-height: none;
    overflow: visible;
  }
}
@media (max-width: 720px){
  .post-nav{ grid-template-columns: 1fr; }
  .post-nav__link--next{ grid-column: 1; text-align: left; }
  .search-form{ flex-direction: column; }
}

/* ----------------------- ELENCO INTERVENTI ------------------------- */
/* La pagina indice del post type Interventi: una scheda per intervento,
   immagine e titolo come da progetto grafico. Le schede sono poche e
   importanti, quindi la griglia è a due colonne e non a tre come le news. */
.interventi{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.intervento-card{
  background: var(--carta, #FEFBF3);
  box-shadow:
    0 1px 2px rgba(39,51,74,0.05),
    0 10px 26px -20px rgba(39,51,74,0.30);
  transition: transform .25s ease, box-shadow .25s ease;
}
.intervento-card:hover{
  transform: translateY(-3px);
  box-shadow:
    0 4px 10px rgba(39,51,74,0.07),
    0 28px 52px -24px rgba(39,51,74,0.38);
}
.intervento-card__link{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.intervento-card__media{
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--blu);
}
.intervento-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.intervento-card:hover .intervento-card__media img{ transform: scale(1.04); }

.intervento-card__body{
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
  padding: 32px;
}
/* Lo stato di avanzamento sta sull'immagine, in alto a destra: si legge
   prima del titolo ed è la prima cosa che distingue una scheda dall'altra. */
.intervento-card__stato{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  padding: 5px 10px;
  background: var(--oro);
  color: var(--marmo-l, #F1ECE0);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.intervento-card__periodo{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.intervento-card__title{
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(25px, 1.9vw, 28px);
  line-height: 1.25;
  color: var(--blu);
  flex: 1;
}
.intervento-card__more{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oro);
}
.intervento-card__more .arr{ transition: transform .2s ease; }
.intervento-card:hover .intervento-card__more .arr{ transform: translateX(4px); }

/* Fra l'intestazione e il testo di news, eventi e interventi lo stacco è
   più corto di quello fra due sezioni di una pagina. */
.block--dopo-testata{ padding-top: 60px; }

/* ----------------------- SCHEDA INTERVENTO ------------------------- */
.intervento-facts .btn{ margin-top: 8px; }
/* Intervento diviso in fasi: niente riquadro laterale, una colonna sola. */
.intervento-layout--senza-riquadro{ grid-template-columns: 1fr; }
.intervento-facts dd a{ color: var(--oro); }
.intervento-facts dd a:hover{ color: var(--oro-i); }
/* Link alla rassegna stampa, in fondo al riquadro. */
.intervento-facts__link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oro);
}
.intervento-facts__link{ transition: color .2s ease; }
.intervento-facts__link:hover{ color: var(--oro-i); }
.intervento-facts__link .arr{ transition: transform .2s ease; }
.intervento-facts__link:hover .arr{ transform: translateX(4px); }
.intervento-facts__lede{
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 22px;
}

/* La galleria esce dal riempimento del riquadro per occuparne tutta la
   larghezza; le immagini sono quadrate e scorrono in orizzontale, con
   l'aggancio che le ferma sempre a inquadratura piena. */
/* La galleria esce dal riempimento del riquadro per occuparne tutta la
   larghezza; sotto trovano posto lo stato e il periodo. */
.intervento-gallery{
  position: relative;
  margin: 0 -22px 22px;
}
.intervento-gallery__track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.intervento-gallery__track::-webkit-scrollbar{ display: none; }
.intervento-gallery__slide{
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
}
.intervento-gallery__img{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Le frecce stanno sull'immagine, ai due lati: il fondo è una fotografia,
   quindi sono bianche su un velo scuro. */
.intervento-gallery__freccia{
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: rgba(39,51,74,0.45);
  color: var(--marmo-l, #F1ECE0);
  cursor: pointer;
  transition: background .25s ease;
}
.intervento-gallery__freccia:hover{ background: rgba(39,51,74,0.75); }
.intervento-gallery__freccia--prec{ left: 0; }
.intervento-gallery__freccia--succ{ right: 0; }
.intervento-gallery__freccia svg{ width: 26px; height: 26px; }
.intervento-gallery__freccia--succ svg{ transform: scaleX(-1); }



/* Testo sotto al titolo della sezione fasi, e filtri per categoria. */
.intervento-fasi__intro{
  max-width: 920px;
  margin: -8px 0 40px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
}
.fasi-filtro{ margin-bottom: 40px; }
button.entries__filter__item{
  background: none;
  font-family: inherit;
  cursor: pointer;
}
button.entries__filter__item.is-active{ background: var(--blu); }
.interventi--fasi > [hidden]{ display: none; }

/* Le fasi di un intervento, sotto la sua scheda: di solito sono più di due,
   quindi tre per riga, su un fondo marmo che le stacca dal testo. */
.interventi--fasi{
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.interventi--fasi .intervento-card__body{ padding: 26px; }
.interventi--fasi .intervento-card__title{ font-size: clamp(21px, 1.6vw, 24px); }

@media (max-width: 1100px){
  .interventi--fasi{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px){
  .interventi,
  .interventi--fasi{ grid-template-columns: 1fr; gap: 32px; }
}


/* ----------------------- DA TELEFONO ------------------------- */
/* Le fotografie di una galleria vanno una per riga: a due colonne su uno
   schermo da 375px restano larghe 169px, dove non si vede più niente.
   Il selettore ricalca quello di WordPress, che si difende con un :not()
   su un id: serve la stessa forma per poterlo scavalcare. */
@media (max-width: 720px){
  .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){
    width: 100%;
  }

  /* Titoli: un filo più piccoli, come in base.css. */
  .page-hero__title{ font-size: 34px; }
  .entries__group{ font-size: 24px; }
  .entry-content h2{ font-size: 26px; }
  .entry-content h3{ font-size: 22px; }
  .intervento-card__title{ font-size: 23px; }
}

/* Fasi: quante per riga lo sceglie chi scrive la scheda, nella metabox. */
.interventi--fasi--col-2{ grid-template-columns: repeat(2, 1fr); }
.interventi--fasi--col-3{ grid-template-columns: repeat(3, 1fr); }
.interventi--fasi--col-4{ grid-template-columns: repeat(4, 1fr); }
.interventi--fasi--col-4 .intervento-card__title{ font-size: clamp(19px, 1.4vw, 22px); }

/* A una o due colonne la scheda si corica: fotografia quadrata piccola a
   sinistra e testo a fianco, come le schede larghe di news ed eventi in home. */
.interventi--fasi--riga{ grid-template-columns: 1fr; gap: 24px; }
.interventi--fasi--riga .intervento-card__link,
.interventi--fasi--col-2 .intervento-card__link{ flex-direction: row; }
.interventi--fasi--riga .intervento-card__media,
.interventi--fasi--col-2 .intervento-card__media{
  flex: 0 0 250px;
  width: 250px;
  align-self: flex-start;
  aspect-ratio: 1 / 1;
}
.interventi--fasi--riga .intervento-card__body,
.interventi--fasi--col-2 .intervento-card__body{
  justify-content: center;
  padding: 28px;
}
.interventi--fasi--riga .intervento-card__title,
.interventi--fasi--col-2 .intervento-card__title{ flex: 0 0 auto; }
.interventi--fasi--riga .intervento-card__title{ font-size: 26px; }

/* Fase ancora da iniziare: nessun link, quindi niente sollevamento, niente
   zoom sulla fotografia e niente "Scopri di più". */
.intervento-card--statica,
.intervento-card--statica:hover{
  transform: none;
  box-shadow:
    0 1px 2px rgba(39,51,74,0.05),
    0 10px 26px -20px rgba(39,51,74,0.30);
}
.intervento-card--statica:hover .intervento-card__media img{ transform: none; }
/* Fotografia in bianco e nero: la fase non è ancora cominciata. */
.intervento-card--statica .intervento-card__media img{ filter: grayscale(1); }

@media (max-width: 1100px){
  .interventi--fasi--col-3,
  .interventi--fasi--col-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px){
  .interventi--fasi--col-2,
  .interventi--fasi--col-3,
  .interventi--fasi--col-4{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .interventi--fasi--riga .intervento-card__link,
  .interventi--fasi--col-2 .intervento-card__link{ flex-direction: column; }
  .interventi--fasi--riga .intervento-card__media,
  .interventi--fasi--col-2 .intervento-card__media{ flex: 0 0 auto; width: auto; align-self: auto; }
  .interventi--fasi--riga .intervento-card__body,
  .interventi--fasi--col-2 .intervento-card__body{ padding: 28px; }
  .interventi--fasi--riga .intervento-card__title{ font-size: 23px; }
}