/* ==========================================================================
   Home page

   ATTENZIONE: nessun colore grezzo in questo file. Solo variabili --cbt-*.
   In particolare NESSUN colore di allerta: la fascia "In caso di emergenza"
   parla di emergenza ma non È un'allerta, e colorarla di rosso o arancione
   insegnerebbe all'utente che quei colori non significano nulla.
   ========================================================================== */

/* --- Hero -----------------------------------------------------------------
   Veduta aerea di Villa Potenza. È la fotografia dello sfondo del sito
   precedente, ma nella versione ORIGINALE fornita dall'associazione: quella in
   uso sul vecchio sito aveva loghi e stemmi già impressi nella metà inferiore,
   che sotto lo stemma dell'hero comparivano una seconda volta in filigrana.

   LA FOTO È PREPARATA, NON ANNEGATA. Con l'originale così com'era, per portare
   il testo bianco in WCAG AA serviva una velatura all'80%, che riduceva il
   paese a una macchia. È stata invece lavorata a monte — desaturazione al 45%,
   virata verso il blu più forte sulle alte luci, compressione delle luminanze
   al 62% — così i dettagli sopravvivono e la velatura serve solo a legare la
   foto alla palette, non a renderla leggibile.

   Numeri misurati su 26.215 pixel della fascia che sta dietro al testo,
   contrasto con il bianco sul PEGGIOR pixel e non sulla media:

     originale, velatura blu scuro 0.80  ->  4.74   AA di misura
     preparata, NESSUNA velatura         ->  6.23   AA con ampio margine
     preparata, velatura 0.25            ->  6.63   scelta

   Lo script del calcolo è in docs/superpowers/migrazione/contrasto-hero.php e
   va rilanciato se si cambia la foto o il colore della velatura.

   Peso: 67 KB su mobile, 112 KB su desktop. L'originale non trattato ne
   pesava 949. */
.cbt-hero {
  background-color: var(--cbt-blu-scuro);
  background-image:
    linear-gradient(160deg, rgba(var(--cbt-blu-scuro-rgb), .34) 0%, rgba(var(--cbt-blu-scuro-rgb), .22) 55%, rgba(var(--cbt-blu-scuro-rgb), .30) 100%),
    url("../../../../uploads/2026/08/villa-potenza-hero-768x512.jpg");
  background-position: center 62%;
  background-size: cover;
  background-repeat: no-repeat;
  color: #FFF;
  padding: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) 1.25rem;
  text-align: center;
}
@media (min-width: 769px) {
  .cbt-hero {
    background-image:
      linear-gradient(160deg, rgba(var(--cbt-blu-scuro-rgb), .34) 0%, rgba(var(--cbt-blu-scuro-rgb), .22) 55%, rgba(var(--cbt-blu-scuro-rgb), .30) 100%),
      url("../../../../uploads/2026/08/villa-potenza-hero-1024x683.jpg");
  }
}
.cbt-hero__interno {
  max-width: var(--cbt-contenuto);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.cbt-hero__logo {
  width: clamp(88px, 12vw, 132px);
  height: auto;
  border-radius: 50%;
  background: #FFF;
  padding: 4px;
}
.cbt-hero h1,
.cbt-hero h2 {
  color: #FFF;
  margin: 0;
}
.cbt-hero__occhiello {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  font-weight: 700;
  opacity: .9;
  margin: 0;
}
.cbt-hero__sottotitolo {
  max-width: 46rem;
  margin: 0;
  font-size: clamp(17px, 15px + .4vw, 20px);
  opacity: .95;
}
.cbt-hero__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
  margin-top: .6rem;
}

/* --- Sezioni ---------------------------------------------------------------- */
.cbt-sezione {
  padding: clamp(2.2rem, 1.5rem + 3vw, 3.8rem) 1.25rem;
}
.cbt-sezione__interno {
  max-width: var(--cbt-contenuto);
  margin: 0 auto;
}

/* --- Griglia di card -------------------------------------------------------- */
.cbt-card-griglia {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.cbt-card {
  margin: 0;
}
.cbt-card a {
  display: block;
  height: 100%;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--cbt-bordo);
  border-radius: var(--cbt-raggio);
  background: var(--cbt-sfondo);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cbt-card a:hover,
.cbt-card a:focus-visible {
  border-color: var(--cbt-accento);
  box-shadow: var(--cbt-ombra);
}
.cbt-card__titolo {
  display: block;
  font-weight: 700;
  color: var(--cbt-primario);
  margin-bottom: .3rem;
}
.cbt-card__testo {
  display: block;
  color: var(--cbt-testo-tenue);
  font-size: 15px;
  line-height: 1.5;
}

/* --- Numeri ---------------------------------------------------------------- */
.cbt-numeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.5rem;
  margin: 1.8rem 0;
  text-align: center;
}

/* --- Fascia a fondo pieno (richiesta servizio) ------------------------------ */
.cbt-fascia-blu {
  background: var(--cbt-primario);
  color: #FFF;
  text-align: center;
}
.cbt-fascia-blu h2,
.cbt-fascia-blu p {
  color: #FFF;
}
.cbt-fascia-blu h2 {
  margin-top: 0;
}

/* --- Fascia emergenza: volutamente NEUTRA ----------------------------------
   Bordo e fondo grigi. Se qui comparisse il rosso, il rosso smetterebbe di
   voler dire "allerta rossa in corso" e comincerebbe a voler dire "pagina che
   parla di emergenze". È esattamente l'erosione che il vincolo cromatico
   esiste per impedire. */
.cbt-fascia-emergenza {
  background: var(--cbt-sfondo-alt);
  border-top: 3px solid var(--cbt-bordo);
  border-bottom: 3px solid var(--cbt-bordo);
}
.cbt-emergenza-numero {
  font-weight: 800;
  font-size: 1.15em;
}

/* --- Ultime news ----------------------------------------------------------- */
.cbt-news-griglia {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
}
.cbt-news-card {
  margin: 0;
}
.cbt-news-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.cbt-news-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: var(--cbt-raggio);
  display: block;
  margin-bottom: .6rem;
}
.cbt-news-card__senza-immagine {
  height: 170px;
  border-radius: var(--cbt-raggio);
  background: var(--cbt-azzurro-tenue);
  margin-bottom: .6rem;
}
.cbt-news-card__data {
  display: block;
  color: var(--cbt-testo-tenue);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .2rem;
}
.cbt-news-card__titolo {
  display: block;
  font-weight: 700;
  color: var(--cbt-primario);
  line-height: 1.3;
}

/* --- Mappa ----------------------------------------------------------------- */
.cbt-mappa {
  border: 1px solid var(--cbt-bordo);
  border-radius: var(--cbt-raggio);
  overflow: hidden;
  line-height: 0;
}
.cbt-mappa iframe {
  width: 100%;
  height: 340px;
  border: 0;
}

/* --- Due colonne su schermi larghi ------------------------------------------ */
.cbt-due-colonne {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
}
@media (min-width: 900px) {
  .cbt-due-colonne {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* --- Fasce a piena larghezza -----------------------------------------------
   OceanWP incapsula il contenuto in #content-wrap.container, che ha una
   larghezza massima. Sulla home le sezioni devono invece toccare i bordi
   della finestra, altrimenti l'hero e le fasce colorate diventano riquadri
   sospesi in mezzo al bianco.

   Si neutralizza il contenitore SOLO in home, invece di ricorrere al trucco
   del margine negativo con 100vw: quello somma la larghezza della barra di
   scorrimento e produce uno scorrimento orizzontale su Windows. */
.home #main #content-wrap.container {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  /* Il selettore include #main perche OceanWP dichiara #main #content-wrap con
     DUE id: due id battono un id piu due classi, e senza #main questa regola
     perderebbe sulla spaziatura verticale. Verificato nel browser. */
  padding-top: 0;
  padding-bottom: 0;
}
.home #content-wrap .entry,
.home #content-wrap .entry-content {
  margin: 0;
}
/* Le pagine interne non sono toccate: lì il contenitore fa il suo mestiere. */

.cbt-news-tutte {
  margin-top: 1.4rem;
}

/* Niente spazio bianco fra l'header (o la fascia di allerta) e l'hero: la
   home deve aprirsi sull'hero, non su una striscia vuota. OceanWP mette una
   spaziatura verticale sul contenitore del contenuto, qui azzerata. */

/* --- Schede con icona: valori e attività ------------------------------------
   Usate da [cbt_griglia] e [cbt_scheda].

   LE ICONE SONO TUTTE BLU, e non è una scelta estetica. Il riferimento
   grafico da cui siamo partiti usava icone di sei colori diversi — verde
   acqua, rosa, viola, arancione. Su questo sito verde, giallo, arancione e
   rosso significano "livello di allerta della protezione civile", e usarli
   come decorazione insegnerebbe al visitatore che non vogliono dire niente.
   La varietà si ottiene con i disegni, non con la tavolozza. */
.cbt-schede {
  display: grid;
  gap: 1.6rem 1.4rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.cbt-schede--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cbt-schede--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cbt-schede--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Sopra i 900px il numero di colonne e FISSO, non lasciato ad auto-fit:
   con sei valori auto-fit ne infilava quattro nella prima riga e due nella
   seconda, che si legge come una griglia sbagliata invece che come due
   righe da tre. */
@media (min-width: 900px) {
  .cbt-schede--3 { grid-template-columns: repeat(3, 1fr); }
  .cbt-schede--4 { grid-template-columns: repeat(4, 1fr); }
}

.cbt-scheda {
  display: block;
  text-align: center;
  padding: .5rem .6rem;
  color: inherit;
  text-decoration: none;
}

.cbt-scheda__icona {
  display: block;
  margin: 0 auto .7rem;
  color: var(--cbt-accento);
}

.cbt-scheda__titolo {
  display: block;
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--cbt-primario);
  line-height: 1.25;
  margin-bottom: .45rem;
}

.cbt-scheda__testo {
  display: block;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cbt-testo-tenue);
}

/* Il titolo è il collegamento, ma l'area cliccabile è tutta la scheda: il
   riquadro invisibile qui sotto la copre per intero. Così il bersaglio resta
   grande come sembra, mentre il testo del link annunciato da uno screen
   reader è il solo titolo e non l'intero paragrafo. */
.cbt-scheda--link {
  position: relative;
}
.cbt-scheda__titolo--link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* L'hover si accende sull'intera scheda, non solo sul titolo */
.cbt-scheda--link:hover .cbt-scheda__titolo,
.cbt-scheda--link:focus-within .cbt-scheda__titolo {
  color: var(--cbt-primario-hover);
}
.cbt-scheda--link:hover .cbt-scheda__icona,
.cbt-scheda--link:focus-within .cbt-scheda__icona {
  color: var(--cbt-primario);
}
.cbt-scheda--link:focus-within {
  outline: 3px solid var(--cbt-azzurro);
  outline-offset: 4px;
  border-radius: var(--cbt-raggio);
}
/* L'outline lo disegna la scheda: sul titolo sarebbe doppio */
.cbt-scheda__titolo--link:focus-visible {
  outline: none;
}

/* Frase di apertura sotto il titolo di sezione, centrata come il titolo */
.cbt-sezione__occhiello {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
  color: var(--cbt-testo-tenue);
}

/* --- Chi siamo: testo e tessera affiancati ----------------------------------
   Il numero grande e la tessera dell'anno in corso dicono la stessa cosa in
   due modi: uno la afferma, l'altra la mostra. La tessera porta anche la
   corona con il 40, quindi si rafforzano invece di ripetersi. */
.cbt-chi-siamo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  /* In alto e non centrato: con il testo centrato contro una tessera piu alta
     restava un vuoto sotto il titolo di sezione che sembrava un errore. */
  align-items: start;
}
@media (min-width: 860px) {
  .cbt-chi-siamo {
    grid-template-columns: 1.15fr 1fr;
    gap: 2.6rem;
  }
}

/* Il fregio dei quarant anni: e lo stesso disegno della tessera sociale, e
   contiene gia la dicitura "anni di attivita". Per questo non c e testo
   accanto: sarebbe una didascalia doppia. Chi usa uno screen reader la
   sente comunque, perche sta nell attributo alt. */
.cbt-anniversario {
  margin: 1.5rem 0;
}
.cbt-fregio {
  display: block;
  width: 170px;
  height: auto;
}

.cbt-tessera {
  margin: 0;
}
.cbt-tessera__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cbt-raggio);
  box-shadow: var(--cbt-ombra-alta);
}
.cbt-tessera figcaption {
  margin-top: .7rem;
  font-size: 14px;
  color: var(--cbt-testo-tenue);
  text-align: center;
}
.cbt-chi-siamo__testo > p:first-child {
  margin-top: 0;
}

/* --- Collegamenti con icona in linea ---------------------------------------
   Stesso trattamento visivo delle schede, ma leggero: restano due link, non
   diventano due riquadri. */
.cbt-link-riga {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.6rem;
  margin-top: 1.4rem;
}
.cbt-link-con-icona {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
}
.cbt-link-icona {
  flex: 0 0 auto;
  color: var(--cbt-accento);
}
.cbt-link-con-icona:hover .cbt-link-icona,
.cbt-link-con-icona:focus-visible .cbt-link-icona {
  color: var(--cbt-primario-hover);
}

/* --- Griglia delle schede di rischio ---------------------------------------
   Quattro per riga su schermo largo, come chiesto. I rischi sono undici, non
   otto: l'ultima riga ne ha tre e va bene così, perché scegliere quali tre
   emergenze non meritano la home non è una decisione di impaginazione.

   Le immagini portano già il nome del fenomeno stampato sopra, ma il nome è
   ripetuto anche come testo sotto: quello nell'immagine non è selezionabile,
   non si ingrandisce con lo zoom del testo e uno screen reader non lo legge. */
.cbt-rischi {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.2rem 1rem;
}
@media (min-width: 900px) {
  .cbt-rischi {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cbt-rischio {
  margin: 0;
}
.cbt-rischio a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.cbt-rischio img,
.cbt-rischio__senza-immagine {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--cbt-raggio);
  border: 1px solid var(--cbt-bordo);
  background: var(--cbt-azzurro-tenue);
  transition: box-shadow .18s ease, transform .18s ease;
}
.cbt-rischio a:hover img,
.cbt-rischio a:focus-visible img {
  box-shadow: var(--cbt-ombra-alta);
  transform: translateY(-2px);
}

.cbt-rischio__nome {
  display: block;
  margin-top: .5rem;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--cbt-primario);
  line-height: 1.3;
}
#content .cbt-rischio a:hover .cbt-rischio__nome,
#content .cbt-rischio a:focus-visible .cbt-rischio__nome {
  color: var(--cbt-primario-hover);
}

/* Il nome sotto l'immagine e' una didascalia, non un rimando a se': tutta la
   scheda e' gia' cliccabile. Senza sottolineatura in quiete, con la
   sottolineatura all'hover perche' li' sta indicando dove si va. */
/* L'id serve davvero: OceanWP sottolinea i link di pagina con un selettore
   che pesa sei classi (.page:not(...):not(...) .entry a:not(...):not(...)) e
   nessuna combinazione di sole classi nostre lo supera. */
#content .cbt-rischio a,
#content .cbt-rischio a:hover,
#content .cbt-rischio a:focus {
  text-decoration: none;
}
#content .cbt-rischio a:hover .cbt-rischio__nome,
#content .cbt-rischio a:focus-visible .cbt-rischio__nome {
  text-decoration: underline;
}

/* La griglia e i rimandi che la seguono si toccavano. */
.cbt-rischi + p {
  margin-top: 1.8rem;
}

/* Intestazioni dei due gruppi di schede. Il secondo titolo arrivava attaccato
   alla riga di immagini precedente: senza stacco i due gruppi si leggevano
   come uno solo. */
.cbt-rischi__titolo {
  margin: 3.4rem 0 0;
}
.cbt-rischi__titolo:first-child {
  margin-top: 0;
}
/* Anche il titolo che segue l'ultima griglia ha bisogno del suo respiro:
   nelle schede ereditate viene subito «Potrebbe interessarti anche…». */
.cbt-rischi + h2,
.cbt-rischi + h3 {
  margin-top: 3.4rem;
}

/* Le due scorciatoie all'allerta meteo. Restano larghe come due schede della
   griglia normale invece di allargarsi a metà pagina l'una: sono due rimandi,
   non il contenuto principale. */
.cbt-rischi--due {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .cbt-rischi--due {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Coda comune delle schede di rischio ----------------------------------- */

/* Il divisore separa le tre parti che si ripetono uguali su tutte e undici le
   schede: le griglie, l'invito a entrare in Protezione Civile e il modulo.
   Serve a far capire dove finisce l'argomento della pagina. */
.cbt-divisore {
  border: 0;
  border-top: 1px solid var(--cbt-bordo);
  margin: 4rem 0 3rem;
  height: 0;
}
/* Il titolo che segue subito il divisore ha gia' il margine del divisore
   sopra di se': senza questo il distacco raddoppierebbe. */
.cbt-divisore + h2,
.cbt-divisore + .cbt-rischi__titolo {
  margin-top: 0;
}

/* Lo stemma della Protezione Civile accanto all'invito. */
.cbt-stemma-pc {
  float: right;
  width: 132px;
  height: auto;
  margin: 0 0 1.2rem 2rem;
}
@media (max-width: 600px) {
  .cbt-stemma-pc {
    float: none;
    display: block;
    margin: 0 auto 1.2rem;
  }
}

/* Solo dove sopra c'e' la griglia da quattro: la coppia si stringe a due
   colonne di quella, cosi' i banner si incolonnano con le prime due schede
   invece di stare per conto loro. Altrove prende tutta la larghezza.
   (1rem = 10px, quindi .5rem e' meta' dello spazio fra le colonne.) */
.cbt-rischi--due.cbt-rischi--allineata {
  max-width: calc(50% - .5rem);
}

/* Tre riquadri in fila. Sotto i 760px scendono a due e poi a uno da soli,
   perché la griglia base usa auto-fit. */
.cbt-rischi--tre {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}