/*
 * Eptamed — Testata Pagina (Immagine)
 * Porting della "hero shell" condivisa da perche-diverso.html e
 * percorso-terapeutico.html (stesse classi .hero/.hero-left/.hero-right,
 * stesso sfondo beige — sono letteralmente lo stesso template), con 3
 * varianti selezionabili per la colonna immagine a destra:
 *  - "card"    come equilibriodonzia.html (card immagine + corpo bianco +
 *              barra icona/copy sotto)
 *  - "overlay" come perche-diverso.html (immagine + card 2 righe di testo +
 *              card icona flottante opzionale)
 *  - "collage" come percorso-terapeutico.html (immagine principale + 2
 *              immagini flottanti + card statistica opzionale)
 * Nessun JS: sezione statica.
 */

.ept-ph-hero {
  position: relative;
  background: #EDE8DF;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Rigo scuro semi-trasparente sopra l'immagine di sfondo (controllo
   "Overlay scuro"), sempre nel colore identità del tema indipendentemente
   dallo sfondo scelto — solo l'opacità è configurabile. */
.ept-ph-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #134169;
  pointer-events: none;
}

.ept-ph-inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  min-height: var(--ept-ph-min-height, 640px);
}

.ept-ph-left {
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ept-ph-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary, #134169);
  border: 1.5px solid var(--c-primary, #134169);
  border-radius: 999px;
  padding: 6px 16px;
  width: fit-content;
}

.ept-ph-badge-dot {
  width: 6px;
  height: 6px;
  background: var(--c-primary, #134169);
  border-radius: 50%;
  flex-shrink: 0;
}

.ept-ph-title {
  font-family: var(--font-heading, 'Familjen Grotesk', sans-serif);
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-primary-dark, #0E2E4B);
  letter-spacing: -0.025em;
  margin: 0;
  font-size: var(--ept-ph-title-size, 52px);
}

.ept-ph-sub {
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--c-dark-gray, #4E5655);
  max-width: 460px;
  margin: 0;
}

.ept-ph-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ept-ph-cta-primary,
.ept-ph-cta-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 150ms, border-color 150ms, color 150ms;
}

.ept-ph-cta-primary {
  background: var(--c-primary, #134169);
  color: #fff;
  border: none;
}
.ept-ph-cta-primary:hover {
  background: var(--c-primary-dark, #0E2E4B);
}

.ept-ph-cta-outline {
  background: none;
  color: var(--c-primary-dark, #0E2E4B);
  border: 2px solid rgba(19, 65, 105, 0.3);
}
.ept-ph-cta-outline:hover {
  border-color: var(--c-primary, #134169);
}

.ept-ph-right {
  position: relative;
  padding: 48px 0 48px 24px;
  display: flex;
  align-items: center;
}

/* Con immagine di sfondo la colonna testo passa a colori chiari (come
   l'hero scuro originale di equilibriodonzia.html) — applicato in automatico
   quando è impostata un'immagine di sfondo, non è un controllo separato: il
   badge/titolo/sottotitolo/CTA-contornata in navy diventerebbero illeggibili
   su una foto scura con overlay. La CTA piena resta invariata, è già
   leggibile su qualunque sfondo. */
.ept-ph-hero--on-image .ept-ph-badge {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.ept-ph-hero--on-image .ept-ph-badge-dot {
  background: #fff;
}
.ept-ph-hero--on-image .ept-ph-title {
  color: #fff;
}
.ept-ph-hero--on-image .ept-ph-sub {
  color: rgba(255, 255, 255, 0.78);
}
.ept-ph-hero--on-image .ept-ph-cta-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.ept-ph-hero--on-image .ept-ph-cta-outline:hover {
  border-color: #fff;
}

/* ─── Tappe del percorso (solo variante "collage", opzionale) ─── */

.ept-ph-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 4px;
  flex-wrap: wrap;
}

.ept-ph-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.ept-ph-step-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.8rem;
  font-weight: 800;
  flex-shrink: 0;
  background: transparent;
  border: 2px solid #C5CDD0;
  color: var(--c-medium-gray, #A0ABAB);
}

.ept-ph-step-dot--active {
  background: var(--c-primary, #134169);
  border-color: var(--c-primary, #134169);
  color: #fff;
}

.ept-ph-step-lbl {
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.5875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-medium-gray, #A0ABAB);
  white-space: nowrap;
}

.ept-ph-step-lbl--active {
  color: var(--c-primary, #134169);
}

.ept-ph-step-line {
  width: 28px;
  height: 2px;
  background: #C5CDD0;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.ept-ph-hero--on-image .ept-ph-step-dot {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.7);
}
.ept-ph-hero--on-image .ept-ph-step-dot--active {
  background: #fff;
  border-color: #fff;
  color: var(--c-primary-dark, #0E2E4B);
}
.ept-ph-hero--on-image .ept-ph-step-lbl {
  color: rgba(255, 255, 255, 0.6);
}
.ept-ph-hero--on-image .ept-ph-step-lbl--active {
  color: #fff;
}
.ept-ph-hero--on-image .ept-ph-step-line {
  background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 640px) {
  .ept-ph-step-line { width: 16px; }
}

/* ─── Riprova sociale (solo variante 1, opzionale) ─── */

.ept-ph-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 4px;
}

.ept-ph-stat-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 32px;
  border-left: 1px solid rgba(19, 65, 105, 0.14);
}

.ept-ph-stat-item:first-child {
  padding-left: 0;
  border-left: none;
}

.ept-ph-stat-num {
  font-family: var(--font-heading, 'Familjen Grotesk', sans-serif);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--c-primary-dark, #0E2E4B);
  line-height: 1.1;
}

.ept-ph-stat-label {
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-medium-gray, #A0ABAB);
}

.ept-ph-hero--on-image .ept-ph-stat-num {
  color: #fff;
}
.ept-ph-hero--on-image .ept-ph-stat-label {
  color: rgba(255, 255, 255, 0.5);
}
.ept-ph-hero--on-image .ept-ph-stat-item {
  border-left-color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 1024px) {
  .ept-ph-inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ept-ph-right {
    padding: 0 0 48px;
  }
}

@media (max-width: 767px) {
  .ept-ph-title { font-size: var(--ept-ph-title-size-mobile, 36px); }
  .ept-ph-left { padding: 56px 0 0; }
  .ept-ph-inner { padding: 0 24px; }
  .ept-ph-stats-row { gap: 24px; row-gap: 16px; }
  .ept-ph-stat-item { padding-left: 24px; }
}

/* ─── Variante "card" (equilibriodonzia.html) ─── */

.ept-ph-card {
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(14, 46, 75, 0.28);
  width: 100%;
}

.ept-ph-card-img {
  height: 320px;
  overflow: hidden;
}

.ept-ph-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.ept-ph-card-body {
  padding: 24px;
}

.ept-ph-card-label {
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent, #BC5A29);
  margin: 0 0 8px;
}

.ept-ph-card-title {
  font-family: var(--font-heading, 'Familjen Grotesk', sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-almost-black, #1C2221);
  line-height: 1.2;
  margin: 0;
}

.ept-ph-infobar {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(19, 65, 105, 0.06);
  border: 1px solid rgba(19, 65, 105, 0.1);
}

.ept-ph-infobar-icon {
  color: var(--c-primary, #134169);
  flex-shrink: 0;
  display: flex;
}

.ept-ph-infobar span:last-child {
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.8125rem;
  color: var(--c-dark-gray, #4E5655);
}

/* ─── Variante "overlay" (perche-diverso.html) ─── */

.ept-ph-img-wrap {
  position: relative;
  width: 100%;
}

.ept-ph-main-img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

.ept-ph-text-card {
  position: absolute;
  bottom: 40px;
  left: -16px;
  background: var(--c-primary-dark, #0E2E4B);
  color: #fff;
  border-radius: 14px;
  padding: 14px 20px;
  max-width: 220px;
}

.ept-ph-text-card p {
  margin: 0;
}

.ept-ph-text-card p:first-child {
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px;
}

.ept-ph-text-card p:last-child {
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.ept-ph-float-card {
  position: absolute;
  bottom: 32px;
  right: -16px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 12px 32px -8px rgba(14, 46, 75, 0.18);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 240px;
}

.ept-ph-float-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--c-primary-light, #EFF2F5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary, #134169);
  flex-shrink: 0;
}

.ept-ph-float-title {
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--c-primary-dark, #0E2E4B);
  margin: 0;
}

.ept-ph-float-sub {
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-medium-gray, #A0ABAB);
  margin: 0;
}

/* ─── Variante "collage" (percorso-terapeutico.html) ─── */

.ept-ph-collage {
  position: relative;
  width: 100%;
}

.ept-ph-main {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

.ept-ph-fl-tl {
  position: absolute;
  top: -16px;
  left: -32px;
  width: 190px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px -8px rgba(14, 46, 75, 0.22);
}

.ept-ph-fl-tl img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.ept-ph-fl-tl-lbl {
  padding: 10px 14px;
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-almost-black, #1C2221);
  margin: 0;
}

.ept-ph-fl-br {
  position: absolute;
  bottom: -12px;
  right: -12px;
  width: 170px;
  height: 130px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px -8px rgba(14, 46, 75, 0.22);
}

.ept-ph-fl-br img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ept-ph-stat {
  position: absolute;
  bottom: 72px;
  left: -24px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 12px 32px -8px rgba(14, 46, 75, 0.18);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 240px;
}

.ept-ph-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--c-primary-light, #EFF2F5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary, #134169);
  flex-shrink: 0;
}

.ept-ph-stat-val {
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--c-primary-dark, #0E2E4B);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
}

.ept-ph-stat-sub {
  font-family: var(--font-body, 'Familjen Grotesk', sans-serif);
  font-size: 0.75rem;
  color: var(--c-dark-gray, #4E5655);
  margin: 0;
}

@media (max-width: 600px) {
  .ept-ph-fl-tl,
  .ept-ph-fl-br,
  .ept-ph-stat,
  .ept-ph-text-card,
  .ept-ph-float-card {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
}