/*
 * Tapparelle24h — componenti condivisi
 * Header, barra di chiamata fissa, blocco CTA, recensioni, foto lavori, footer.
 * Ogni valore viene da variabili.css.
 */

/* =====================================================================
 * PULSANTI
 * L'arancio sta qui e nella barra fissa, e da nessun'altra parte.
 * ===================================================================== */

.t24-bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--h-pulsante-alto);
  padding-inline: var(--s-5);
  border: 0;
  border-radius: var(--r-medio);
  font-family: var(--font-titolo);
  font-size: var(--t-medio);
  font-weight: var(--peso-marcato);
  line-height: var(--i-media);
  letter-spacing: var(--sp-titolo-lieve);
  text-decoration: none;
  cursor: pointer;
  /* Il numero non va mai a capo dentro il pulsante. */
  white-space: nowrap;
}

/* L'icona di WhatsApp, unica icona del tasto: dimensione fissa, non legata
   al font-size, così resta la stessa su ogni variante del tasto. */
.t24-bottone__icona {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Chiamata su fondo chiaro */
.t24-bottone--chiama {
  background: var(--c-azione);
  color: var(--c-testo-inverso);
}
.t24-bottone--chiama:hover { background: var(--c-azione-hover); color: var(--c-testo-inverso); }

/* Chiamata su fondo scuro */
.t24-bottone--chiama-scuro {
  background: var(--c-azione-scuro);
  color: var(--c-struttura);
}
.t24-bottone--chiama-scuro:hover { background: var(--c-azione-scuro); color: var(--c-struttura); filter: brightness(1.07); }

.t24-bottone--whatsapp {
  background: var(--c-whatsapp);
  color: var(--c-whatsapp-testo);
}
.t24-bottone--whatsapp:hover { color: var(--c-whatsapp-testo); filter: brightness(1.05); }

/* Azione secondaria su fondo scuro: contorno, niente colore */
.t24-bottone--contorno-scuro {
  background: transparent;
  border: var(--bordo-scuro);
  color: var(--c-testo-inverso-forte);
  min-height: var(--h-pulsante);
  font-weight: var(--peso-forte);
}
.t24-bottone--contorno-scuro:hover { color: var(--c-testo-inverso); }

/* Stessa cosa su fondo chiaro: un contorno, non arancione — è
   navigazione, non un contatto. */
.t24-bottone--contorno {
  background: transparent;
  border: var(--bordo-marcato);
  color: var(--c-testo);
  min-height: var(--h-pulsante);
  font-weight: var(--peso-forte);
}
.t24-bottone--contorno:hover { border-color: var(--c-testo); background: var(--c-fondo-alt); }

.t24-bottone--pieno { width: 100%; }

/* =====================================================================
 * HEADER
 * ===================================================================== */

.t24-header {
  background: var(--c-struttura);
  position: relative;
  z-index: 20;
}

/* La testata è più stretta del resto: ogni pixel qui è spazio per il tasto. */
.t24-header .t24-contenitore { padding-inline: var(--s-4); }

.t24-header__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--h-header);
  padding-block: var(--s-3);
}

.t24-logo {
  font-family: var(--font-titolo);
  /* Su 360px il marchio a 22px non lascia spazio al tasto di chiamata:
     nella testata rimpicciolisce, nel piè di pagina resta grande. */
  font-size: var(--t-grande);
  font-weight: var(--peso-massimo);
  letter-spacing: var(--sp-titolo-grande);
  color: var(--c-testo-inverso);
  text-decoration: none;
  line-height: 1;
}
.t24-logo:hover { color: var(--c-testo-inverso); }
.t24-logo__accento { color: var(--c-azione-scuro); }
/* Sotto i 400px la nota va a capo e raddoppia l'altezza della testata.
   Il marchio dice già tutto: sui telefoni più stretti sparisce. */
.t24-logo__nota { display: none; }
@media (min-width: 400px) {
  .t24-logo__nota { display: block; }
}
.t24-logo__nota {
  margin-top: var(--s-1);
  font-size: var(--t-etichetta);
  font-weight: var(--peso-semi);
  letter-spacing: var(--sp-etichetta);
  color: var(--c-testo-inverso-etichetta);
}

.t24-header__azioni { display: flex; align-items: center; gap: var(--s-2); }

/* Chiamata nell'header: compatta, ma resta sopra l'area minima toccabile */
.t24-header__chiama {
  min-height: var(--tocco-min);
  padding-inline: var(--s-4);
  font-size: var(--t-base);
  border-radius: var(--r-base);
}
/* Il numero compare solo dove ci sta per intero. */
.t24-numero { display: none; }
@media (min-width: 400px) { .t24-numero--da-400 { display: inline; } }
@media (min-width: 768px) { .t24-numero--da-768 { display: inline; } }

/* --- Menu in riga, dal desktop in su --- */

/* Sotto i 1024px esiste solo il pannello: qui la <nav> e' fuori anche
   dall'albero di accessibilita', cosi' non si leggono due menu uguali. */
.t24-nav { display: none; }

/* Non e' un blocco rigido: se le voci non ci stanno preferisce stringersi
   che spingere il tasto di chiamata fuori dalla testata. */
.t24-nav { min-width: 0; }

.t24-nav .t24-menu__voci {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Le sei voci di serie stanno su una riga sola. Un menu piu' lungo
     scritto in amministrazione manda le voci in eccesso a capo e alza la
     testata: brutto, ma non fa scorrere la pagina di lato. */
  flex-wrap: wrap;
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.t24-nav li { margin: 0; }

.t24-nav a {
  display: block;
  /* Il tasto di chiamata e' alto 48px: le voci gli stanno a fianco senza
     alzare la testata, e l'area cliccabile e' comunque tutta la riga. */
  padding: var(--s-3) var(--s-1);
  font-family: var(--font-titolo);
  font-size: var(--t-piccolo);
  font-weight: var(--peso-semi);
  letter-spacing: var(--sp-titolo-lieve);
  line-height: var(--i-media);
  /* Bianco pieno sui link del menu: sul blu notte il tenue non arriva a 4,5:1. */
  color: var(--c-testo-inverso);
  text-decoration: none;
  white-space: nowrap;
}
/* L'arancio chiaro e' il colore dell'azione sui fondi scuri, e queste sono
   voci cliccabili: al passaggio ci vanno, da ferme restano bianche. */
.t24-nav a:hover,
.t24-nav a:focus-visible { color: var(--c-azione-scuro); }

/* La voce della pagina che si sta leggendo. wp_nav_menu le mette da solo
   queste classi; il ripiego no, e li' semplicemente non compare. */
.t24-nav .current-menu-item > a,
.t24-nav .current_page_item > a { color: var(--c-azione-scuro); }

/* --- Menu: <details> nativo, nessun JavaScript --- */

.t24-menu { position: relative; }

.t24-menu__pulsante {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tocco-min);
  height: var(--tocco-min);
  border: var(--bordo-scuro);
  border-radius: var(--r-base);
  cursor: pointer;
  list-style: none;
}
.t24-menu__pulsante::-webkit-details-marker { display: none; }

.t24-menu__tratti { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.t24-menu__tratti span {
  height: 2px;
  background: var(--c-testo-inverso);
  border-radius: 2px;
}

.t24-menu__pannello {
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100% + var(--s-3));
  width: max-content;
  min-width: 15rem;
  max-width: min(88vw, 22rem);
  background: var(--c-fondo);
  border-radius: var(--r-grande);
  box-shadow: var(--ombra-alta);
  padding: var(--s-1) var(--s-5) var(--s-5);
}

.t24-menu__pannello ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.t24-menu__pannello li { margin: 0; }

.t24-menu__pannello a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-4);
  min-height: var(--tocco-min);
  border-bottom: var(--bordo);
  font-family: var(--font-titolo);
  font-size: var(--t-grande);
  font-weight: var(--peso-forte);
  color: var(--c-testo);
  text-decoration: none;
}
.t24-menu__pannello li:last-child a { border-bottom: 0; }
.t24-menu__pannello a:hover { color: var(--c-azione); }

/* =====================================================================
 * BARRA DI CHIAMATA FISSA — solo mobile
 * È la ragione per cui la pagina esiste: sta sempre a portata di pollice.
 * ===================================================================== */

.t24-barra-fissa {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  display: flex;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom));
  background: var(--c-struttura);
  max-width: 100vw;
  /* Il filetto è un'ombra e non un bordo: così non aggiunge un pixel
     all'altezza, e --h-barra-fissa resta l'altezza vera della barra,
     quella che il body si riserva in fondo alla pagina. */
  box-shadow: 0 -1px 0 var(--c-bordo-scuro-tenue);
}

.t24-barra-fissa .t24-bottone {
  min-height: var(--tocco-min);
  padding-inline: var(--s-3);
  font-size: var(--t-base);
  border-radius: var(--r-base);
}
/* WhatsApp è largo quanto la sua etichetta, la chiamata si prende il resto:
   chi ha un guasto in corso telefona, e su 360px non avanza spazio da sprecare. */
.t24-barra-fissa .t24-bottone--chiama-scuro { flex: 1 1 auto; min-width: 0; }
.t24-barra-fissa .t24-bottone--whatsapp     { flex: 0 0 auto; }

@media (min-width: 768px) {
  .t24-barra-fissa { display: none; }
  .t24-header .t24-contenitore { padding-inline: var(--contenuto-pad); }
  .t24-logo { font-size: var(--t-h4); }
}

/* =====================================================================
 * TESTATA DA 1024px: le etichette in chiaro al posto dell'hamburger
 *
 * Marchio, sei voci e tasto di chiamata su una riga sola: a 1024px la
 * misura e' 962px contro 969 disponibili, cioe' sette pixel di margine.
 * Per questo qui la testata sta stretta — padding --s-5 e non
 * --contenuto-pad, voci a 14px, spazi a --s-3: col respiro pieno la
 * chiamata usciva dalla testata e la pagina scorreva di lato di 13px.
 * Da 1200px in su lo spazio c'e' e si torna alle misure normali.
 * ===================================================================== */
@media (min-width: 1024px) {
  .t24-nav { display: block; }
  /* Il pannello a tendina sparisce: le voci sono gia' tutte in vista. */
  .t24-menu { display: none; }

  .t24-header .t24-contenitore { padding-inline: var(--s-5); }
  .t24-header__azioni { gap: var(--s-3); }
}

@media (min-width: 1200px) {
  .t24-header .t24-contenitore { padding-inline: var(--contenuto-pad); }
  .t24-nav .t24-menu__voci { gap: var(--s-5); }
  .t24-nav a { font-size: var(--t-base); }
}

/* =====================================================================
 * FIGURA
 * L'immagine di apertura di guide, servizi, tipologie e hub. Il rapporto
 * e' fisso e lo spazio e' riservato prima che l'immagine arrivi: senza,
 * il testo sotto salta quando la foto si carica, e su una connessione
 * mobile lenta e' il salto che fa sbagliare il tasto di chiamata.
 * ===================================================================== */

.t24-figura {
  margin: 0;
  max-width: none;
}
.t24-figura img {
  display: block;
  width: 100%;
  height: auto;
  /* Su colonna stretta una 16/9 diventa una striscia: sul telefono
     l'immagine resta piu' alta, da tablet in su puo' allargarsi. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-grande);
  /* Il fondo tiene il posto mentre l'immagine arriva: senza, il testo
     sotto salta a caricamento finito, e su una connessione mobile lenta
     e' il salto che fa sbagliare il tasto di chiamata. */
  background: var(--c-fondo-alt);
}
@media (min-width: 768px) {
  .t24-figura img { aspect-ratio: 16 / 9; }
}

.t24-figura__didascalia {
  margin-top: var(--s-3);
  font-size: var(--t-piccolo);
  line-height: var(--i-media);
  color: var(--c-testo-tenue);
}

/* --- Apertura a due colonne ------------------------------------------
 * Titolo, promessa e tasti a sinistra, la foto a destra. Sul telefono e'
 * una colonna sola e la foto sta sotto i tasti: prima si chiama, poi si
 * guarda. Su schermo largo la foto riempie il vuoto che restava a destra
 * del titolo, e soprattutto non spinge il prezzo sotto la piega: a tutta
 * larghezza una 16/9 e' alta 700px e si mangiava la prima schermata.
 *
 * Sta qui e non nei fogli dei singoli template perche' hub.css,
 * servizio.css e pagine.css non si caricano mai tutti insieme.
 * -------------------------------------------------------------------- */

.t24-apertura-griglia { display: grid; gap: var(--s-7); }
.t24-apertura-griglia__testo { min-width: 0; }

/* Le due colonne solo dove c'e' davvero la foto: senza, la seconda
   colonna resterebbe riservata e vuota, e il titolo starebbe stretto in
   meta' pagina per fare spazio a niente. */
@media (min-width: 900px) {
  .t24-apertura-griglia--con-figura {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: var(--s-9);
  }
  /* Accanto a una colonna di testo la 16/9 e' troppo bassa: qui la foto
     ha meno larghezza e puo' tornare quasi quadrata. */
  .t24-apertura-griglia__figura img { aspect-ratio: 5 / 4; }
}

/* Sulle guide del blog la foto viene prima del titolo quando si scorre da
   telefono — è la prima cosa che si incontra nell'articolo — ma resta a
   destra del testo da 900px in su, come le altre pagine con questa
   griglia. Da 900px l'ordine naturale del markup (testo, poi figura)
   torna a decidere le colonne. */
.t24-apertura-griglia--figura-prima .t24-apertura-griglia__figura { order: -1; }
@media (min-width: 900px) {
  .t24-apertura-griglia--figura-prima .t24-apertura-griglia__figura { order: 0; }
}

/* =====================================================================
 * BLOCCO CTA
 * ===================================================================== */

.t24-cta {
  background: var(--c-struttura);
  border-radius: var(--r-grande);
  padding: var(--s-6);
}
.t24-cta__titolo {
  color: var(--c-testo-inverso);
  font-size: var(--t-h3-mobile);
  font-weight: var(--peso-massimo);
  line-height: var(--i-titolo);
  letter-spacing: var(--sp-titolo);
}
.t24-cta__testo {
  margin-top: var(--s-3);
  color: var(--c-testo-inverso-tenue);
  font-size: var(--t-base);
  line-height: var(--i-testo);
  max-width: var(--larghezza-stretta);
}
.t24-cta__azioni {
  margin-top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.t24-cta__nota {
  margin-top: var(--s-4);
  font-size: var(--t-piccolo);
  color: var(--c-testo-inverso-etichetta);
}

@media (min-width: 768px) {
  .t24-cta { padding: var(--s-8); }
  .t24-cta__titolo { font-size: var(--t-h3); }
  .t24-cta__azioni { flex-direction: row; flex-wrap: wrap; }
  .t24-cta__azioni .t24-bottone { flex: 1 1 14rem; }
}

/* =====================================================================
 * RECENSIONI
 * ===================================================================== */

.t24-recensioni__elenco {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.t24-recensione {
  margin: 0;
  padding-left: var(--s-5);
  border-left: var(--bordo-citazione) solid var(--c-bordo);
}
/* La prima porta il filetto arancio: è l'unico accento della sezione. */
.t24-recensioni__elenco > li:first-child .t24-recensione {
  border-left-color: var(--c-azione);
}
.t24-recensione__testo {
  margin: 0;
  font-size: var(--t-medio);
  line-height: var(--i-testo);
  color: var(--c-testo);
  max-width: var(--larghezza-testo);
}
.t24-recensione__firma {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-titolo);
  font-size: var(--t-etichetta);
  font-weight: var(--peso-forte);
  color: var(--c-testo-tenue);
  font-style: normal;
}

@media (min-width: 768px) {
  .t24-recensioni__elenco {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s-7);
  }
  .t24-recensioni__elenco > li { flex: 1 1 20rem; }
}

/* =====================================================================
 * FOTO LAVORI
 * ===================================================================== */

.t24-lavori__elenco {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  list-style: none;
  /* Niente margin-top qui: lo spazio sotto il titolo lo dà
     .t24-sezione__titolo + * (base.css), e un «margin: 0» lo annullava. */
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  max-width: none;
}
.t24-lavoro { margin: 0; }
.t24-lavoro__foto {
  aspect-ratio: 3 / 2;
  border-radius: var(--r-medio);
  overflow: hidden;
  background: var(--c-bordo);
}
.t24-lavoro__foto img { width: 100%; height: 100%; object-fit: cover; }
.t24-lavoro__didascalia {
  margin-top: var(--s-3);
  font-size: var(--t-base);
  line-height: var(--i-testo);
  color: var(--c-testo-medio);
  max-width: var(--larghezza-testo);
}

@media (min-width: 768px) {
  .t24-lavori__elenco { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}
/* Da desktop, come tutte le altre card del sito: tre colonne, non quante
   ne stanno. */
@media (min-width: 900px) {
  .t24-lavori__elenco { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================================
 * FOOTER
 * ===================================================================== */

.t24-footer {
  background: var(--c-struttura);
  color: var(--c-testo-inverso-tenue);
  padding-block: var(--s-8);
}
.t24-footer__griglia {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}
.t24-footer__intro {
  margin-top: var(--s-3);
  font-size: var(--t-piccolo);
  line-height: var(--i-testo);
  color: var(--c-testo-inverso-tenue);
  max-width: var(--larghezza-stretta);
}
/* L'etichetta sta sopra il suo contenuto, non accanto. */
.t24-footer__etichetta { display: block; color: var(--c-testo-inverso-etichetta); }
.t24-footer__voci {
  margin: var(--s-3) 0 0 0;
  padding: 0;
  list-style: none;
  max-width: none;
}
.t24-footer__voci li { margin-bottom: var(--s-2); }
.t24-footer__voci--in-linea { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.t24-footer__voci--in-linea li { margin-bottom: 0; }
.t24-footer__voci a { color: var(--c-testo-inverso-forte); text-decoration: none; }
.t24-footer__voci a:hover { color: var(--c-testo-inverso); text-decoration: underline; }

.t24-footer__numero {
  display: block;
  width: fit-content;
  margin-top: var(--s-3);
  font-family: var(--font-titolo);
  font-size: var(--t-numero);
  font-weight: var(--peso-massimo);
  letter-spacing: var(--sp-titolo);
  color: var(--c-azione-scuro);
  text-decoration: none;
  line-height: var(--i-titolo);
}
.t24-footer__numero:hover { color: var(--c-azione-scuro); text-decoration: underline; }
.t24-footer__orari { margin-top: var(--s-2); font-size: var(--t-piccolo); }

.t24-footer__coda {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-bordo-scuro-tenue);
  font-size: var(--t-etichetta);
  line-height: var(--i-testo);
  color: var(--c-testo-inverso-etichetta);
}

/*
 * La riga d'identità: ragione sociale, partita IVA, email. Su ogni pagina,
 * non solo sulle landing. Sta dentro .t24-footer__coda, quindi colore e
 * corpo li eredita: qui serve solo lo spazio e il trattamento del link.
 */
.t24-footer__identita {
  margin: 0 0 var(--s-3);
}
.t24-footer__identita a {
  color: var(--c-testo-inverso-forte);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.t24-footer__identita a:hover { color: var(--c-testo-inverso); }
.t24-footer__separatore { margin: 0 var(--s-2); opacity: .55; }
.t24-footer__coda a { color: var(--c-testo-inverso-etichetta); }
.t24-footer__coda a:hover { color: var(--c-testo-inverso); }

@media (min-width: 768px) {
  .t24-footer__griglia {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s-8);
  }
  .t24-footer__griglia > * { flex: 1 1 15rem; }
}

@media (min-width: 768px) {
  .t24-footer .t24-logo { font-size: var(--t-h4); }
}


/* =====================================================================
 * CAMPI DI UN MODULO
 * Stanno qui e non con la landing perché li usa anche la ricerca
 * dei comuni negli hub di provincia.
 * ===================================================================== */

.t24-campo { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }

.t24-campo__nome {
  font-family: var(--font-titolo);
  font-size: var(--t-etichetta);
  font-weight: var(--peso-forte);
  letter-spacing: var(--sp-etichetta);
  text-transform: uppercase;
  color: var(--c-testo-tenue);
}

.t24-campo__valore {
  min-height: var(--h-campo);
  padding-inline: var(--s-4);
  background: var(--c-fondo);
  color: var(--c-testo);
  border: var(--bordo-marcato);
  border-radius: var(--r-base);
  font-family: var(--font-testo);
  font-size: var(--t-base);
  width: 100%;
}
.t24-campo__valore:focus { border-color: var(--c-testo); }
.t24-campo__valore--errore {
  border-color: var(--c-errore);
  border-width: 2px;
  background: var(--c-errore-fondo);
}

.t24-campo__file {
  padding: var(--s-3);
  border: 1.5px dashed var(--c-bordo-tratteggio);
  border-radius: var(--r-base);
  font-size: var(--t-piccolo);
  color: var(--c-testo-tenue);
  width: 100%;
}
.t24-campo__nota { font-size: var(--t-etichetta); color: var(--c-testo-tenue); }
.t24-campo__errore {
  font-size: var(--t-etichetta);
  font-weight: var(--peso-semi);
  color: var(--c-errore);
}

/* =====================================================================
 * BANNER COOKIE
 * Il plugin mette il suo pulsante fisso in basso a sinistra, esattamente
 * dove sta la barra di chiamata. Su mobile lo spostiamo sopra la barra:
 * il tasto che porta clienti non si copre con quello che chiede consensi.
 * ===================================================================== */

@media (max-width: 767px) {
  .cky-btn-revisit-wrapper,
  .cky-consent-container {
    bottom: calc(var(--h-barra-fissa) + env(safe-area-inset-bottom) + var(--s-2)) !important;
  }
}

/* Il pannello delle preferenze del plugin è largo 845px fissi e resta nel
   flusso anche da nascosto: su un telefono allarga la pagina e fa comparire
   lo scorrimento orizzontale, che a sua volta sballa la barra fissa.
   Lo teniamo dentro la finestra: serve anche quando il pannello si apre.
   La misura è in vw e non in percentuale, altrimenti si misura su una
   pagina già allargata e il problema si conferma da solo. */
.cky-modal,
.cky-preference-center { max-width: 100vw; }

/* =====================================================================
 * Schede
 *
 * Servizi, province, tipologie, guide correlate, le strade del 404: una
 * scheda sola, in componenti.css perché la usano pagine con fogli diversi.
 * La scheda intera è il link; la freccia accanto al titolo lo dice.
 * ===================================================================== */

.t24-servizi {
  margin: var(--s-6) 0 0 0;
  padding: 0;
  list-style: none;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-3);
}
.t24-servizio-voce { margin: 0; }
.t24-servizi--province { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.t24-servizi--tipologie { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

/* Da desktop, tre colonne: non quante ne stanno, sempre tre. */
@media (min-width: 900px) {
  .t24-servizi,
  .t24-servizi--province,
  .t24-servizi--tipologie { grid-template-columns: repeat(3, 1fr); }
}

/* Sempre bianca, con un filo di bordo: la stacca dai fondi bianchi e da
   quelli grigi allo stesso modo. */
.t24-servizio-voce__link {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  height: 100%;
  min-height: var(--tocco-min);
  padding: var(--s-5);
  background: var(--c-fondo);
  border: var(--bordo);
  border-radius: var(--r-medio);
  text-decoration: none;
  color: var(--c-testo);
}
.t24-servizio-voce__titolo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--font-titolo);
  font-size: var(--t-grande);
  font-weight: var(--peso-forte);
  line-height: var(--i-stretta);
  letter-spacing: var(--sp-titolo-lieve);
}
.t24-servizio-voce__testo {
  font-size: var(--t-base);
  line-height: var(--i-media);
  color: var(--c-testo-medio);
}

/* Con la foto: la foto arriva al bordo, a tagliarla è l'angolo della scheda. */
.t24-servizi--foto .t24-servizio-voce__link { padding: 0; gap: 0; overflow: hidden; }
.t24-servizio-voce__foto { display: block; overflow: hidden; }
.t24-servizio-voce__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--c-bordo);
}
.t24-servizio-voce__testi {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1 1 auto;
  padding: var(--s-5);
}

/* La freccia: il segno che la scheda, o la riga, si tocca. */
.t24-scheda__freccia {
  flex: 0 0 auto;
  font-family: var(--font-titolo);
  font-weight: var(--peso-forte);
  color: var(--c-testo-tenue);
}

/* Il passaggio del puntatore, solo dove un puntatore c'è: sul telefono un
   :hover resta appiccicato dopo il tocco. */
@media (hover: hover) {
  .t24-servizio-voce__link { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
  .t24-servizio-voce__foto img { transition: transform 0.4s ease; }
  .t24-scheda__freccia { transition: transform 0.18s ease, color 0.18s ease; }
  .t24-servizio-voce__link:hover {
    color: var(--c-testo);
    border-color: var(--c-bordo-marcato);
    box-shadow: var(--ombra);
    transform: translateY(-2px);
  }
  .t24-servizio-voce__link:hover .t24-servizio-voce__foto img { transform: scale(1.04); }
  .t24-servizio-voce__link:hover .t24-scheda__freccia { color: var(--c-testo); transform: translateX(3px); }
}
.t24-servizio-voce__link:focus-visible { outline: 2px solid var(--c-struttura); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .t24-servizio-voce__link,
  .t24-servizio-voce__foto img,
  .t24-scheda__freccia { transition: none; transform: none !important; }
}

/* Quattro schede: due colonne, orizzontali — a tre la quarta restava sola. */
@media (min-width: 900px) {
  .t24-servizi--quattro { grid-template-columns: repeat(2, 1fr); }
  .t24-servizi--quattro .t24-servizio-voce__link { flex-direction: row; }
  .t24-servizi--quattro .t24-servizio-voce__foto { flex: 0 0 42%; }
  .t24-servizi--quattro .t24-servizio-voce__foto img { height: 100%; aspect-ratio: 4 / 3; }
  .t24-servizi--quattro .t24-servizio-voce__testi { justify-content: center; }
}

/* Sul telefono: righe, non manifesti. Miniatura quadrata a sinistra, testi
   a destra; da 600px tornano le schede con la foto sopra. */
@media (max-width: 599px) {
  .t24-servizi,
  .t24-servizi--province,
  .t24-servizi--tipologie { grid-template-columns: 1fr; gap: var(--s-3); }
  .t24-servizi--foto .t24-servizio-voce__link {
    flex-direction: row;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3);
  }
  .t24-servizio-voce__foto { flex: 0 0 auto; width: 84px; border-radius: var(--r-base); }
  .t24-servizio-voce__foto img { aspect-ratio: 1 / 1; }
  .t24-servizi--foto .t24-servizio-voce__testi { padding: 0; gap: var(--s-1); min-width: 0; }
  .t24-servizio-voce__titolo { font-size: var(--t-medio); }
  .t24-servizio-voce__testo { font-size: var(--t-piccolo); line-height: var(--i-testo); }
}

/* =====================================================================
 * Righe: zone, province, collegamenti
 *
 * Un elenco a righe separate da un filo. Quando la riga è un link, la riga
 * intera è il link, con la freccia in fondo.
 * ===================================================================== */

.t24-zone {
  margin: var(--s-6) 0 0 0;
  padding: 0;
  list-style: none;
  max-width: 34rem;
  border-top: var(--bordo);
}
.t24-zona {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: var(--bordo);
}
.t24-zona__nome { font-size: var(--t-medio); color: var(--c-testo); }
.t24-zona__tempo {
  font-family: var(--font-titolo);
  font-size: var(--t-medio);
  font-weight: var(--peso-marcato);
  color: var(--c-testo);
  white-space: nowrap;
}
.t24-zone__nota { margin-top: var(--s-4); font-size: var(--t-piccolo); color: var(--c-testo-tenue); }
.t24-zone__intro { margin-top: var(--s-4); font-size: var(--t-base); color: var(--c-testo-medio); max-width: 34rem; }
.t24-zona:has(.t24-zona__link) { padding-block: 0; }
.t24-zona__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  min-height: var(--tocco-min);
  padding-block: var(--s-4);
  color: var(--c-testo);
  text-decoration: none;
}
.t24-zona__link:hover .t24-zona__nome { text-decoration: underline; text-underline-offset: 3px; }
.t24-zona__link:focus-visible { outline: 2px solid var(--c-struttura); outline-offset: 2px; }

/* Tante righe una sotto l'altra: da 700px su due colonne. */
@media (min-width: 700px) {
  .t24-collegamenti--colonne .t24-zone {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--s-8);
  }
}

/* =====================================================================
 * Il testo lungo a fisarmonica
 *
 * Il titolo della sezione è il pulsante, il segno + / − a destra. Chiusa
 * sul telefono da assets/js/fisarmoniche.js; aperta sul desktop.
 * ===================================================================== */

.t24-approfondisci__titolo { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--s-4); }
.t24-approfondisci__titolo::-webkit-details-marker { display: none; }
.t24-approfondisci__titolo > h2,
.t24-approfondisci__titolo > h3 { margin: 0; flex: 1 1 auto; }
.t24-approfondisci__titolo::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--font-titolo);
  font-size: var(--t-h4);
  line-height: 1;
  color: var(--c-testo-medio);
}
.t24-approfondisci[open] > .t24-approfondisci__titolo::after { content: '\2212'; } /* − */
.t24-approfondisci__titolo:focus-visible { outline: 2px solid var(--c-struttura); outline-offset: 4px; border-radius: var(--r-base); }
.t24-approfondisci__corpo > :first-child { margin-top: var(--s-4); }
.t24-sezione--prosa:has(> .t24-contenitore > .t24-approfondisci:not([open])) { padding-block: var(--s-4); }
@media (min-width: 700px) { .t24-approfondisci__titolo::after { display: none; } }

/* Una coppia di tasti — chiama e WhatsApp — uno sotto l'altro sul
   telefono, in riga da tablet. */
.t24-azioni { margin-top: var(--s-7); display: flex; flex-direction: column; gap: var(--s-3); }
@media (min-width: 768px) { .t24-azioni { flex-direction: row; flex-wrap: wrap; } }

/* =====================================================================
 * Contatti diretti con le icone
 *
 * Una riga per canale: l'icona in un tondo, cosa è, il recapito. La riga
 * intera si tocca. Icone in arancio: sono contatti cliccabili, l'unico uso
 * dell'arancio che la palette ammette; gli orari, che non si toccano, in
 * grigio.
 * ===================================================================== */
.t24-contatti__titolo { margin: 0 0 var(--s-4); font-size: var(--t-h4); }
.t24-contatti__elenco {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
  max-width: none;
}
.t24-contatti__voce { margin: 0; }
.t24-contatti__link {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--tocco-min);
  padding: var(--s-3) var(--s-4);
  background: var(--c-fondo);
  border: var(--bordo);
  border-radius: var(--r-medio);
  color: var(--c-testo);
  text-decoration: none;
}
.t24-contatti__icona {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--c-fondo-alt);
  color: var(--c-azione);
}
.t24-contatti__icona svg { width: 22px; height: 22px; }
.t24-contatti__voce--info .t24-contatti__icona { color: var(--c-testo-medio); }
.t24-contatti__testi { display: flex; flex-direction: column; min-width: 0; }
.t24-contatti__etichetta {
  font-family: var(--font-titolo);
  font-size: var(--t-etichetta);
  font-weight: var(--peso-forte);
  letter-spacing: var(--sp-etichetta);
  text-transform: uppercase;
  color: var(--c-testo-tenue);
}
.t24-contatti__valore {
  font-family: var(--font-titolo);
  font-size: var(--t-medio);
  font-weight: var(--peso-forte);
  color: var(--c-testo);
  overflow-wrap: anywhere;
}
a.t24-contatti__link .t24-contatti__valore { color: var(--c-azione); }
.t24-contatti__voce--info .t24-contatti__valore { font-weight: var(--peso-semi); }
@media (hover: hover) {
  a.t24-contatti__link { transition: border-color 0.18s ease, box-shadow 0.18s ease; }
  a.t24-contatti__link:hover { border-color: var(--c-bordo-marcato); box-shadow: var(--ombra); }
}
a.t24-contatti__link:focus-visible { outline: 2px solid var(--c-struttura); outline-offset: 3px; }
/* Da tablet, due per riga: quattro righe una sotto l'altra sono lunghe. */
@media (min-width: 600px) {
  .t24-contatti__elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t24-contatti__voce--largo { grid-column: 1 / -1; }
}