/*
 * Eptamed — Hero Carosello (widget Elementor)
 *
 * Font e colori arrivano dalle custom property del tema (--c-*, --font-*,
 * definite in dev/style.css): qui vengono solo referenziate con un fallback,
 * cosi' il widget resta corretto anche se usato senza il child theme attivo.
 */

.ept-hero {
  position: relative;
  height: var(--ept-hero-h, 100vh);
  min-height: var(--ept-hero-min, 580px);
  max-height: var(--ept-hero-max, 960px);
  overflow: hidden;
  background: var(--c-primary-dark, #0E2E4B);
}

.ept-hero-track {
  display: flex;
  height: 100%;
  transition: transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  backface-visibility: hidden;
}

.ept-hero-slide {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
}

/* <picture> ospita l'immagine mobile/desktop (<source> + <img>): è lui il
   contenitore posizionato in absolute (non l'<img> al suo interno) — prima
   usavamo display:contents sul <picture> per farlo "sparire" dal layout e
   posizionare l'<img> interno in absolute, ma su Safari/iOS questo ha un bug
   noto: un figlio absolute dentro un antenato display:contents a volte non
   trova il riferimento di posizionamento corretto e collassa, tagliando
   l'immagine su mobile. Così il <picture> stesso riempie lo slide, e l'<img>
   dentro riempie semplicemente lui al 100%. */
.ept-hero-slide picture {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  display: block;
}

.ept-hero-slide picture .ept-hero-bg-img {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
}

.ept-hero-bg-img,
.ept-hero-bg-video {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  /* valore di default: il widget imposta object-fit inline in base alla
     scelta dell'utente (cover/contain/fill), questo resta solo un fallback. */
  object-fit: cover;
  object-position: center top;
  transform: scale(1);
}

/* Ken Burns solo sulle immagini: sul video interferirebbe con l'autoplay
   (il reset dell'animazione forza un reflow che può interrompere il video). */
.ept-hero-slide.ept-hero-active .ept-hero-bg-img {
  animation: eptHeroBgZoom 6.5s linear forwards;
}

.ept-hero-overlay {
  position: absolute;
  inset: 0;
}

.ept-hero-overlay--light {
  background: linear-gradient(to top, rgba(5, 18, 35, 0.55) 0%, rgba(5, 18, 35, 0.2) 50%, rgba(5, 18, 35, 0.05) 100%);
}

.ept-hero-overlay--standard {
  background: linear-gradient(to top, rgba(5, 18, 35, 0.82) 0%, rgba(5, 18, 35, 0.42) 50%, rgba(5, 18, 35, 0.12) 100%);
}

.ept-hero-overlay--strong {
  background: linear-gradient(to top, rgba(5, 18, 35, 0.92) 0%, rgba(5, 18, 35, 0.6) 50%, rgba(5, 18, 35, 0.25) 100%);
}

/* ─── Contenuto (badge / titolo / descrizione / CTA) ─── */

.ept-hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Il wrapper interno (non posizionato in absolute) è quello che riceve la
   larghezza massima (vedi controllo Stile "Larghezza massima testo") e che
   align-items/justify-content spostano davvero nella slide. Applicare
   max-width direttamente a .ept-hero-content (che ha left/right a 0 per
   l'inset:0) farebbe sì che il box resti sempre ancorato a sinistra, perché
   il browser deve "rilasciare" uno tra left/right quando max-width li
   contraddice — bug storico di questo widget, risolto spostando il vincolo
   di larghezza sul figlio. */
/* NON display:flex qui: un flex-container "stira" (align-items:stretch di
   default) i suoi figli diretti sulla larghezza intera, badge e CTA
   compresi — anche se badge/CTA fuori da un contesto flex sono inline-flex
   e si adatterebbero al loro contenuto. Restando un div normale, badge e
   CTA tornano ad auto-dimensionarsi; il wrapper stesso continua comunque a
   "stringersi" al contenuto perché è lui stesso un flex-item di
   .ept-hero-content (che non usa stretch). */
.ept-hero-content-inner {
  min-width: 0;
  max-width: 100%;
}

.ept-hero-content--hleft { align-items: flex-start; }
.ept-hero-content--hcenter { align-items: center; }
.ept-hero-content--hright { align-items: flex-end; }

.ept-hero-content--hleft .ept-hero-content-inner { text-align: left; }
.ept-hero-content--hcenter .ept-hero-content-inner { text-align: center; }
.ept-hero-content--hright .ept-hero-content-inner { text-align: right; }

/* Titolo e descrizione hanno max-width diversi (18ch / 52ch): senza margini
   automatici restano ancorati a sinistra dentro il wrapper e, con testo
   centrato o a destra, i due blocchi non condividono lo stesso asse. */
.ept-hero-content--hcenter .ept-hero-title,
.ept-hero-content--hcenter .ept-hero-desc { margin-left: auto; margin-right: auto; }
.ept-hero-content--hright .ept-hero-title,
.ept-hero-content--hright .ept-hero-desc { margin-left: auto; margin-right: 0; }
.ept-hero-content--hleft .ept-hero-title,
.ept-hero-content--hleft .ept-hero-desc { margin-left: 0; margin-right: auto; }

.ept-hero-content--vtop { justify-content: flex-start; }
.ept-hero-content--vcenter { justify-content: center; }
.ept-hero-content--vbottom { justify-content: flex-end; }

.ept-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 8px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.ept-hero-title {
  font-family: var(--font-heading, 'Familjen Grotesk', sans-serif);
  font-size: clamp(2.6rem, 4.5vw + 0.5rem, 5.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.03;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.ept-hero-desc {
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.55;
  margin: 0 0 28px;
  /* niente max-width in caratteri qui: la larghezza la decide già il
     controllo "Larghezza massima testo" sul wrapper (.ept-hero-content-inner).
     Un secondo limite fisso (52ch) andava in conflitto con quello, forzando
     il testo a capo anche quando il wrapper avrebbe avuto spazio. */
}

.ept-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 8px;
  min-height: 50px;
  padding: 0 28px;
  border-radius: 10px;
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, opacity 150ms;
}

.ept-hero-cta--primary {
  background: var(--c-accent, #BC5A29);
  color: #fff;
  border: none;
}
.ept-hero-cta--primary:hover {
  background: var(--c-accent-dark, #9E4A20);
}

.ept-hero-cta--outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.ept-hero-cta--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.ept-hero-cta--text {
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
  color: #fff;
}
.ept-hero-cta--text:hover {
  opacity: 0.8;
}

/* ─── Navigazione: dots + frecce ─── */

.ept-hero-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 72px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ept-hero-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* dots/frecce sono <button> nativi: !important per non farli ereditare lo
   stile globale "Site Settings > Pulsanti" di Elementor (che punta a ogni
   <button> della pagina) al posto della loro identità di default. */
.ept-hero-dot {
  width: 28px;
  height: 3px;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 1px 6px rgba(5, 18, 35, 0.4);
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  transition: background 220ms, width 220ms;
}

.ept-hero-dot.on {
  background: #fff !important;
  width: 46px;
}

.ept-hero-arrows {
  display: flex;
  gap: 10px;
}

.ept-hero-arr {
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  /* Fondo navy semi-opaco + bordo chiaro + ombra: le frecce restano visibili
     anche su foto molto chiare (prima erano bianco 12% su bianco). */
  background: rgba(14, 46, 75, 0.62) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 4px 16px rgba(5, 18, 35, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff !important;
  flex-shrink: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms;
}

.ept-hero-arr:hover {
  background: rgba(14, 46, 75, 0.85) !important;
}

@keyframes eptHeroBgZoom {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

@media (max-width: 767px) {
  .ept-hero-nav {
    padding: 16px 28px;
  }
  .ept-hero-title {
    font-size: clamp(2rem, 7vw, 3.2rem);
  }
}