/* =========================================================
   BOX — eroul cu videoclipul lui Arun (alb-negru, benzi roz).
   Două așezări, comutabile din pastilele de jos-dreapta:
   „lat"   — clipul decupat pe toată lățimea (object-fit: cover);
   „panou" — pe desktop clipul întreg 9:16 stă ca panou pe dreapta,
             textul pe stânga, pe fundal închis.
   Clipul rămâne NEtentat: rozul e tot farmecul lui — doar un văl
   bleumarin jos, ca titlul să se citească.
   ========================================================= */
.erou-box {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(520px, 78svh, 860px);
  padding: calc(var(--header-h, 84px) + 30px) 0 clamp(40px, 6vh, 70px);
  background: #0c1220;
  color: #fff;
}
.eb-fundal { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.eb-poster,
.eb-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.eb-val {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(7, 19, 48, 0.9) 0%, rgba(7, 19, 48, 0.42) 42%, rgba(7, 19, 48, 0.16) 100%);
}
.erou-box .sport-ghost { z-index: 1; }
.eb-copy { position: relative; z-index: 2; }

/* cine preferă mișcare redusă vede doar cadrul static */
@media (prefers-reduced-motion: reduce) {
  .eb-video { display: none; }
}

/* ---------- varianta „panou" (doar pe desktop; pe telefon cade pe „lat") ---------- */
@media (min-width: 881px) {
  .erou-box[data-varianta="panou"] { background: linear-gradient(155deg, #0a101f 0%, #131c33 60%, #1c2745 120%); }
  .erou-box[data-varianta="panou"] .eb-poster,
  .erou-box[data-varianta="panou"] .eb-video {
    inset: auto;
    top: 50%;
    right: clamp(28px, 5vw, 90px);
    transform: translateY(-50%);
    height: auto;
    width: min(46%, 640px);
    aspect-ratio: 16 / 9;      /* clipul e orizontal: se vede cadrul întreg */
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  }
  /* panoul arată clipul întreg — vălul de lizibilitate nu mai e necesar
     peste el; textul stă pe fundalul închis din stânga */
  .erou-box[data-varianta="panou"] .eb-val {
    background: linear-gradient(to top, rgba(7, 19, 48, 0.55) 0%, rgba(7, 19, 48, 0) 40%);
  }
  /* textul nu intră sub panou */
  .erou-box[data-varianta="panou"] .eb-copy { max-width: min(52%, 640px); margin-right: auto; }
}

/* ---------- comutatorul temporar ---------- */
.eb-comutator {
  position: absolute;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 26px);
  z-index: 3;
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(7, 19, 48, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
}
.eb-comutator button {
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  font: 700 0.74rem var(--font-display, Poppins), sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out),
              transform 0.18s var(--ease-out);
}
.eb-comutator button:active { transform: scale(0.96); }
.eb-comutator button.activ { background: var(--gold); color: var(--navy-900, #14345c); }
/* pe telefon variantele arată la fel — comutatorul doar pe desktop */
/* ---------- telefon: clipul în formatul lui, nu decupat ----------
   Clipul e 1280×720, adică fix 16:9. Într-un erou înalt de ~585px pe un ecran
   de 375px, `object-fit: cover` îl scala la 1040px lățime și tăia circa 64%
   din cadru — se vedea o fâșie întunecată din mijloc, fără Arun.
   Aici îi dăm exact raportul lui: o bandă 16:9 lipită sub antet, pe toată
   lățimea. Fiindcă recipientul are chiar raportul clipului, `cover` nu mai
   taie nimic. Textul rămâne suprapus peste erou, dar coboară sub bandă —
   de-aia înălțimea vine din padding (antet + bandă + text), nu dintr-un
   min-height ghicit. */
@media (max-width: 880px) {
  .eb-comutator { display: none; }
  .erou-box {
    min-height: 0;
    padding-top: calc(var(--header-h, 84px) + 56.25vw + 22px);  /* 56.25vw = 9/16 */
    padding-bottom: clamp(26px, 5vh, 46px);
  }
  .eb-poster,
  .eb-video {
    inset: auto;
    top: var(--header-h, 84px);
    left: 0; right: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  /* Vălul se mută exact peste bandă: dedesubt nu mai are ce întuneca, iar
     marginea de jos a clipului se stinge în fundalul secțiunii, ca banda să
     nu se termine cu o tăietură dreaptă peste text. */
  .eb-val {
    inset: auto;
    top: var(--header-h, 84px);
    left: 0; right: 0;
    aspect-ratio: 16 / 9;
    background: linear-gradient(to bottom,
      rgba(7, 19, 48, 0.3) 0%,
      rgba(7, 19, 48, 0) 38%,
      rgba(12, 18, 32, 0.86) 90%,
      #0c1220 100%);
  }
}