/* Banner Home — slide a tutta larghezza pilotate dal Gestionale.
   Immagine, testo, pulsante, allineamento, velo e colore del testo arrivano da
   li': qui si decide solo l'impaginazione. */

.cds-hb {
  position: relative;
  --cds-hb-h: 560px; --cds-hb-radius: 0px;
  --cds-hb-inner: 1200px;   /* larghezza del contenitore, come le altre sezioni */
  --cds-hb-max: 720px;      /* larghezza del blocco di testo dentro al contenitore */
  --cds-hb-focus-x: 50%; --cds-hb-focus-y: 50%;
}
.cds-hb button { -webkit-appearance: none; appearance: none; border: 0; padding: 0; margin: 0; font: inherit; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.cds-hb__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  border-radius: var(--cds-hb-radius);
}
.cds-hb__track::-webkit-scrollbar { display: none; }

.cds-hb__slide {
  position: relative; flex: 0 0 100%; min-width: 0;
  scroll-snap-align: start;
  /* min-height e non height: con un titolo lungo su schermo stretto il testo e'
     piu' alto del banner, e a quota fissa finiva fuori dall'immagine — sopra il
     bianco della pagina. Cosi' la slide si allunga quanto serve e l'immagine,
     ancorata ai quattro lati, la segue sempre. */
  min-height: var(--cds-hb-h);
  padding: 32px 0;
  display: flex; align-items: center;
  overflow: hidden;
}
/* L'immagine riempie sempre la slide senza deformarsi, quindi su un banner largo
   e basso di una foto se ne vede solo una fascia: i due cursori "Posizione
   immagine" scelgono QUALE fascia, separatamente per ogni dispositivo. Al 50/50
   si vede il centro — che su una foto col soggetto in basso vuol dire cielo. */
.cds-hb__img {
  position: absolute; inset: 0;
  /* !important non per capriccio: quasi ogni tema WordPress porta un
     `img { max-width: 100%; height: auto }`, che vince su una regola normale e
     lascia l'immagine alla sua altezza naturale — copriva solo la fascia alta
     della slide e sotto si vedeva la pagina. Qui l'immagine DEVE riempire il
     riquadro, non adattarsi. */
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover; object-position: var(--cds-hb-focus-x, 50%) var(--cds-hb-focus-y, 50%);
  display: block;
}
/* Il velo scurisce la foto quanto basta perche' il testo resti leggibile: la
   percentuale la decide chi carica la slide nel Gestionale. */
.cds-hb__veil { position: absolute; inset: 0; background: #0a121e; }

.cds-hb__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--cds-hb-inner); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px);
}
.cds-hb__box { max-width: var(--cds-hb-max); display: flex; flex-direction: column; gap: 14px; }
.cds-hb__box--center { margin: 0 auto; text-align: center; align-items: center; }
.cds-hb__box--right  { margin-left: auto; text-align: right; align-items: flex-end; }

/* Occhiello giallo maiuscolo, titolo maiuscolo pesante, pulsante giallo squadrato:
   e' il banner che il sito ha gia'. I colori restano variabili, cosi' si cambiano
   dal pannello senza toccare il foglio di stile. */
/* I font del sito: Dosis per i titoli, Poppins per il resto. Il widget non li
   ereditava — Elementor li applica con classi sue, e i nostri elementi restavano
   col font di sistema, visibilmente diverso dal resto della pagina. Restano
   sovrascrivibili dai controlli Tipografia nel pannello. */
.cds-hb__eyebrow, .cds-hb__sub, .cds-hb__cta {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.cds-hb__title {
  font-family: 'Dosis', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

.cds-hb__eyebrow {
  font-size: clamp(13px, 1.15vw, 17px); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cds-hb-eyebrow, #FFD938); margin: 0;
}
.cds-hb__title {
  font-size: clamp(30px, 4.4vw, 54px); line-height: 1.04; font-weight: 700;
  text-transform: uppercase; letter-spacing: -.01em; margin: 0;
}
.cds-hb__sub { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.5; margin: 0; opacity: .92; max-width: 46em; }

.cds-hb__cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 10px; padding: 16px 30px; border-radius: var(--cds-hb-cta-radius, 8px);
  background: var(--cds-hb-cta-bg, #FFD938); color: var(--cds-hb-cta-fg, #151F33);
  font-size: clamp(15px, 1.3vw, 18px); font-weight: 800; text-transform: uppercase;
  letter-spacing: .01em; text-decoration: none;
  transition: filter .15s ease, transform .1s ease;
}
.cds-hb__box--center .cds-hb__cta { align-self: center; }
.cds-hb__box--right .cds-hb__cta  { align-self: flex-end; }
.cds-hb .cds-hb__cta:hover { filter: brightness(.94); color: var(--cds-hb-cta-fg, #151F33); }
.cds-hb .cds-hb__cta:active { transform: scale(.98); }


/* ── Indicatori, sovrapposti in basso ───────────────────────────────────── */
.cds-hb__dots {
  position: absolute; left: 0; right: 0; bottom: 20px; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
/* Il pallino attivo diventa una barretta che si riempie nel tempo che manca alla
   slide successiva: si vede a colpo d'occhio quanto resta, senza aggiungere
   elementi al banner. */
.cds-hb .cds-hb__dot {
  position: relative; overflow: hidden;
  width: 9px; height: 9px; border-radius: 999px;
  background: rgba(255,255,255,.45);
  transition: background .2s ease, width .25s ease;
}
.cds-hb .cds-hb__dot:hover { background: rgba(255,255,255,.75); }
.cds-hb .cds-hb__dot.is-on { width: 44px; background: rgba(255,255,255,.35); }
.cds-hb .cds-hb__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cds-hb__dotfill {
  position: absolute; inset: 0; width: 0; border-radius: inherit;
  background: var(--cds-hb-eyebrow, #FFD938);
}
.cds-hb__dot.is-on .cds-hb__dotfill { width: 100%; }
/* Con lo scorrimento automatico acceso il riempimento e' progressivo; da fermo
   resta pieno, cosi' il pallino attivo si distingue comunque. */
.cds-hb__dot.is-on .cds-hb__dotfill--anim { width: 0; animation: cds-hb-fill linear forwards; }
@keyframes cds-hb-fill { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .cds-hb__dot.is-on .cds-hb__dotfill--anim { animation: none; width: 100%; }
}

/* Altezze di riserva: valgono se nessuno tocca il controllo "Altezza" in
   Elementor, che essendo piu' specifico vince quando viene impostato. Senza,
   un banner tarato per il desktop resterebbe alto uguale sul telefono. */
@media (max-width: 1024px) { .cds-hb { --cds-hb-h: 460px; } }
@media (max-width: 767px)  { .cds-hb { --cds-hb-h: 420px; } }

/* ── Telefono: niente frecce, si scorre col dito ────────────────────────── */
@media (max-width: 767px) {
  .cds-hb__dots { bottom: 14px; }
  .cds-hb__box { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cds-hb__track { scroll-behavior: auto; }
}