/* ============================================================
   Le notizie principali nella prima schermata (carosello del hero)
   ------------------------------------------------------------
   Prende il posto della fotografia fissa nella meta' destra del hero.
   Regole di casa rispettate: zero gradienti, un solo rosso, raggi nativi del
   tema (4px), movimento solo su `transform` e `opacity`, tutto spento con
   `prefers-reduced-motion`.
   Il riquadro resta `.hero-img`: posizione e misure sono quelle del tema padre
   (destra 50% e alta quanto il hero da 768px in su; a schermo stretto diventa
   una fascia larga tutto lo schermo, alta 380px e poi 270px). Non si toccano.
   ============================================================ */

.f2-hcar {
  overflow: hidden;
  background-color: var(--f2-acc, #d8333a); /* mai il grigio-blu del tema sotto le immagini */
}

/* splide deve riempire il riquadro: le sue tre scatole non hanno altezza propria. */
.f2-hcar .splide,
.f2-hcar .splide__track,
.f2-hcar .splide__list,
.f2-hcar .splide__slide {
  height: 100%;
}

/* 🔴 QUI L'IMBOTTITURA DEI CAROSELLI VA TOLTA, non ereditata.
   Misurato il 10/09/2026 sul sito: `custom.css` da' a OGNI `.splide__track` una
   imbottitura di 30px sopra e 46 sotto, con i margini negativi che la compensano
   (serve perche' l'ombra delle schede dentro i caroselli non venga mozzata dal
   ritaglio del track). Qui dentro non ci sono schede sollevate e non c'e' nessuna
   ombra da salvare: quell'imbottitura toglieva 76px dei 480 del riquadro, e si
   vedeva — una fascia rossa vuota sotto la fotografia, il comando di pausa spinto
   30px sopra il bordo del hero, addosso al menu.
   Imbottitura E margine si dichiarano INSIEME e con la stessa specificita' (e' la
   lezione scritta in `custom.css`: separarli trasforma il compenso in uno
   spostamento). La regola generale vale 0,2,0 (`.splide .splide__track`), questa
   0,3,0: vince per specificita', senza `!important` e senza toccare gli altri
   caroselli del sito. */
.f2-hcar .splide .splide__track {
  padding-top: 0;    margin-top: 0;
  padding-bottom: 0; margin-bottom: 0;
}
.f2-hcar .splide__slide {
  padding: 0; /* `scuole.css` mette 2px a ogni slide: qui sarebbe un filo rosso al bordo */
}

/* Prima che splide si monti (o se il JS non parte) le diapositive sarebbero
   incolonnate una sotto l'altra: si mostra solo la prima. */
.f2-hcar .splide:not(.is-active) .splide__list {
  display: block;
}
.f2-hcar .splide:not(.is-active) .splide__slide + .splide__slide {
  display: none;
}

/* ---- la diapositiva ---- */
.f2-hcar-slide {
  position: relative;
  z-index: 0;
  display: block;
  height: 100%;
  min-height: 270px;
  text-decoration: none !important; /* il tema sottolinea ogni collegamento */
  color: inherit;
}
.f2-hcar-sfondo {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: scale(1);
  transition: transform .5s var(--f2-ease, ease);
}
.f2-hcar-slide:hover .f2-hcar-sfondo,
.f2-hcar-slide:focus-visible .f2-hcar-sfondo {
  transform: scale(1.03);
}

/* ---- il cartello bianco con la notizia ---- */
.f2-hcar-cartello {
  position: absolute;
  z-index: 1;
  left: 24px;
  right: 24px;
  bottom: 24px;
  max-width: 420px;
  display: block;
  padding: 16px 20px 18px;
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--f2-shadow, 0 18px 36px -22px rgba(15, 15, 40, .3));
  transform: translateY(0);
  transition: transform .22s var(--f2-ease, ease), box-shadow .22s var(--f2-ease, ease);
}
.f2-hcar-slide:hover .f2-hcar-cartello,
.f2-hcar-slide:focus-visible .f2-hcar-cartello {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -20px rgba(15, 15, 40, .42);
}
/* 🔴 IL CONTORNO DEL FUOCO DEVE CADERE DENTRO IL RIQUADRO, NON FUORI.
   Misurato il 10/09/2026 contando i pixel bianchi sulle schermate: col link a fuoco,
   pixel cambiati fuori dal riquadro ZERO su 4620. Due cause sovrapposte: il tema padre
   dichiara `outline: 2px solid #fff !important; outline-offset: 3px` in `scuole.css` e
   batteva la regola qui sotto, e `.splide__track` e `.hero-img` hanno `overflow: hidden`
   con lo stesso rettangolo della diapositiva — quindi un contorno spostato in FUORI
   viene ritagliato e non si dipinge mai. Chi naviga da tastiera non vedeva dove si
   trovava (l'ingrandimento del 3% della fotografia non e' un indicatore di fuoco: e'
   identico al passaggio del mouse).
   Serve `!important` perche' ce l'ha il padre, e l'offset NEGATIVO perche' il ritaglio
   non lascia scampo. Controprova del rilevatore: lo stesso conteggio trovava 4620 pixel
   bianchi nella fascia dell'intestazione e 7098 pixel cambiati per il fuoco sul comando
   di pausa, quindi lo zero era una misura e non l'assenza di una misura. */
.f2-hcar .splide .f2-hcar-slide:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: -3px !important;
}

.f2-hcar-occhiello {
  display: block;
  margin-bottom: 6px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--f2-acc-scuro, #af2127);
}
.f2-hcar-punto {
  padding: 0 .2em;
  /* Niente `opacity`: a .7 il puntino misurava 3,86:1 su bianco. E' decorativo e
     nascosto ai lettori di schermo, ma resta testo che si vede. */
}
.f2-hcar-titolo {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  font-weight: 600;
  line-height: 1.28;
  color: #1b1b2b;
  /* tre righe al massimo: i titoli delle circolari sono lunghi e sfonderebbero. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 🔴 IL CARTELLO E' UNA SUPERFICIE BIANCA DENTRO UNA SEZIONE BIANCA SU ROSSO:
   deve dichiarare TUTTI i suoi colori, nessuno escluso.
   Misurato il 10/09/2026: il rimando «Leggi» usciva `rgb(255,255,255)`, bianco su
   bianco, invisibile — ereditava il `color:#fff` di `.section-hero-left`. Occhiello e
   titolo erano giusti solo perche' il loro colore era dichiarato: quello che si
   dimentica di dichiarare, qui dentro, diventa invisibile.
   La freccetta del tema padre non si puo' riusare: `f2-rosso-unico.css` riga 293 ha una
   regola guasta (`a.read-more:before{'/><path d='…`, il generatore ha troncato il
   `content:url()` dentro l'SVG) e il segno risulta `content: none`. Qui si disegna con
   due bordi, che seguono `currentColor` e non dipendono da quel file. */
.f2-hcar-cartello .f2-hcar-leggi,
.f2-hcar-cartello .read-more {
  display: inline-block;
  padding-right: 0;
  color: var(--f2-acc-scuro, #af2127);
  text-decoration: none;
}
.f2-hcar-cartello .read-more::before {
  content: none; /* la freccia del padre e' guasta: non se ne lascia lo spazio vuoto */
}
.f2-hcar-cartello .f2-hcar-leggi::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 1px 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .22s var(--f2-ease, ease);
}
.f2-hcar-slide:hover .f2-hcar-leggi,
.f2-hcar-slide:focus-visible .f2-hcar-leggi {
  text-decoration: underline;
}
.f2-hcar-slide:hover .f2-hcar-leggi::after {
  transform: rotate(45deg) translate(2px, -2px);
}

/* ---- il comando per fermare lo scorrimento ---- */
.f2-hcar-pausa {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 4px;
  background: rgba(27, 27, 43, .62);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s var(--f2-ease, ease);
}
.f2-hcar-pausa:hover,
.f2-hcar-pausa:focus-visible {
  background: #1b1b2b;
}
.f2-hcar-pausa:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.f2-hcar-pausa-icona {
  width: 10px;
  height: 12px;
  flex: 0 0 10px;
  /* due barrette = in pausa si puo' fare; diventa un triangolo quando e' fermo */
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.f2-hcar-pausa[aria-pressed="true"] .f2-hcar-pausa-icona {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left: 10px solid currentColor;
  border-right: 0;
}

/* ---- i pallini di splide, in basso a destra sopra l'immagine ---- */
.f2-hcar .splide__pagination {
  position: absolute;
  z-index: 2;
  bottom: 14px;
  right: 18px;
  left: auto;
  width: auto;
  padding: 0;
  margin: 0;
  gap: 6px;
}
/* 🔴 TRE CLASSI, non due, e non e' pedanteria.
   Misurato il 10/09/2026: `custom.css` stila i pallini con
   `.splide .splide__pagination .splide__pagination__page` (specificita' 0,3,0) per il
   fondo BIANCO delle sezioni. La mia regola valeva 0,2,0 e perdeva il duello in
   silenzio: i pallini restavano quadrati 12x12 e `rgb(217,218,219)`, cioe' grigio
   chiarissimo sopra una fotografia chiara — da telefono, dove stanno in alto sul muro
   giallo, i tre spenti non si vedevano affatto. Lo stile qui sotto sembrava applicato
   e non lo era. E' lo stesso duello dell'imbottitura del track, in fondo allo stesso
   file: quando si scrive sopra `custom.css`, la specificita' si conta, non si spera. */
.f2-hcar .splide .splide__pagination .splide__pagination__page {
  position: relative;
  width: 12px;
  height: 12px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(27, 27, 43, .55);
  box-shadow: 0 1px 3px rgba(27, 27, 43, .45);
  opacity: 1;
  transform: none;
}
/* Il segno resta piccolo, il BERSAGLIO diventa 26x26: le WCAG 2.2 (2.5.8) chiedono
   almeno 24 e il pallino misurava 12. Si allarga l'area da toccare con un riquadro
   trasparente, senza ingrossare il pallino e senza spostare niente. */
.f2-hcar .splide .splide__pagination .splide__pagination__page::after {
  content: "";
  position: absolute;
  inset: -7px;
}
.f2-hcar .splide .splide__pagination .splide__pagination__page.is-active {
  background: #fff;
  border-color: #1b1b2b;
  transform: none;
}
.f2-hcar .splide .splide__pagination .splide__pagination__page:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ---- schermi stretti ---- */
@media (max-width: 991.98px) {
  .f2-hcar-cartello {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
    padding: 14px 16px 16px;
  }
  .f2-hcar-titolo {
    -webkit-line-clamp: 2;
  }
  .f2-hcar .splide__pagination {
    bottom: auto;
    top: 18px;
    left: 16px;
    right: auto;
  }
}

/* Sul telefono il comando di pausa resta un simbolo: la scritta larga 176px su 390
   si mangiava mezza fotografia. Il nome per chi usa un lettore di schermo NON si
   perde — il testo resta nella pagina, solo fuori dalla vista (`clip`), che e' il
   modo in cui il nome accessibile del bottone continua a esistere. */
@media (max-width: 575.98px) {
  .f2-hcar-pausa {
    padding: 9px 11px;
  }
  .f2-hcar-pausa-testo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ---- SULLA CARTA ----
   Misurato il 10/09/2026 con `Emulation.setEmulatedMedia: print`: in stampa il ritaglio
   del carosello cade e si stampavano NOVE riquadri da 480px uno sotto l'altro (le cinque
   notizie piu' le copie che splide crea per il ciclo). Prima, quando qui c'era una
   fotografia sola, il problema non esisteva: e' una regressione di questo blocco e si
   chiude qui. In stampa resta la prima notizia, e i comandi — che su carta non si possono
   premere — sparisce ognuno. */
@media print {
  .f2-hcar .splide__list {
    display: block;
  }
  .f2-hcar .splide__slide:not(:first-child),
  .f2-hcar .splide__slide.is-clone,
  .f2-hcar-pausa,
  .f2-hcar .splide__pagination {
    display: none !important;
  }
  .f2-hcar-cartello {
    position: static;
    max-width: none;
    box-shadow: none;
    border: 1px solid #999;
  }
  .f2-hcar-sfondo {
    display: none; /* le fotografie di sfondo non si stampano (foglio di stampa del sito) */
  }
}

/* ---- chi ha chiesto di non vedere animazioni ---- */
@media (prefers-reduced-motion: reduce) {
  .f2-hcar-sfondo,
  .f2-hcar-cartello,
  .f2-hcar-pausa,
  .f2-hcar-cartello .f2-hcar-leggi::after {
    transition: none !important;
  }
  .f2-hcar-slide:hover .f2-hcar-leggi::after {
    transform: rotate(45deg);
  }
  .f2-hcar-slide:hover .f2-hcar-sfondo,
  .f2-hcar-slide:focus-visible .f2-hcar-sfondo {
    transform: none;
  }
}