/* ============ zona din stânga a hero-ului: replica + cardul (ultimul rezultat + fișa echipajului), vezi hero-left.js ============ */
.hx{opacity:0;transform:translateY(.6rem)}
.hero-card{width:13rem}
/* eticheta roșie stă sub linia conturului (colțul teșit de sus), nu peste ea (client) */
@media (min-width:992px){ .hero-card{padding-top:3rem} }
.hero-card a{display:block}

/* titlul: frază în loc de nume (numele e deja în bară) */
.hl-title{font-size:4.6rem;max-width:18rem;line-height:.9;top:32%}
@media (min-width:992px) and (max-height:760px){ .hl-title{top:26%;font-size:3.8rem} }
.hl-title .ln{padding-top:.22em} /* loc pentru căciulița lui Ă (overflow:clip o tăia / o lipea de rândul de sus) */
.hl-title .ln.s{font-size:.5em;line-height:1.1;margin-top:.1em}

/* ultimul rezultat (sau etapa următoare) */
.hl-last{margin:.5rem 0 .2rem}
.hl-big{font-family:var(--d);font-size:3rem;line-height:.95;text-transform:uppercase}
.hl-sub{font-weight:700;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-top:.35rem}

/* fișa echipajului */
.hl-sheet{margin:.7rem 0 .2rem;display:grid;gap:.5rem;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);padding-top:.6rem}
.hl-row{display:grid;gap:.1rem;padding-bottom:.45rem;border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.hl-row dt{font-weight:700;font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.hl-row dd{font-family:var(--d);font-size:1.05rem;line-height:1.1;text-transform:uppercase}

/* telefon și tabletă: portretul ocupă jumătatea de jos, deci titlul urcă sub bară, în spațiul liber de deasupra capului,
   iar cardul rămâne jos în stânga, pe un fond mat deschis ca să se citească peste combinezon (fără rândurile Număr / Pe Fabia) */
@media (max-width:991px){
  .hero-card{width:15rem;padding:1rem;border-radius:.8rem;background:rgba(241,240,235,.84);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .hero-card .outline{display:none}
  .hero-card .eyebrow{font-size:max(.62rem,10px)}
  .hl-big{font-size:3.6rem}
  .hl-sub,.hl-row dt{font-size:max(.56rem,9px)}
  .hl-row dd{font-size:1.5rem}
  .hl-row:nth-child(3),.hl-row:nth-child(4){display:none}
  .hero-title{display:block;top:6.8rem;transform:none;left:1.1rem;max-width:none;font-size:4.4rem}
}
@media (min-width:768px) and (max-width:991px){ .hero-right{display:none} }

/* ============ telefon (≤ 767 px): banda de cronometraj + fișa în fereastră, în locul cardului mare, vezi hero-left.js ============ */
.hm,.hm-pop{display:none}
@media (max-width:767px){
  .hero-card{display:none}
  .hero-title{display:none} /* pe telefon fără replică: încărca prea mult hero-ul (client) */
  /* hero-ul are 100vh (= ecranul cu barele browserului ascunse); pe iPhone bara Safari de jos stă peste el, așa că banda urcă
     cu diferența dintre înălțimea mare și cea mică a ecranului (100lvh − 100svh = bara), plus zona de sub bară */
  .hm{display:flex;align-items:center;gap:.7rem;position:absolute;left:1.6rem;right:1.6rem;z-index:3;
    bottom:calc(1.2rem + env(safe-area-inset-bottom));bottom:calc(1.2rem + env(safe-area-inset-bottom) + 100lvh - 100svh)}
  /* intrarea animă copiii: opacitatea lui .hm însuși e condusă de scroll (app.js, ieșirea din hero) */
  .hm > *{opacity:0;transform:translateY(1rem);transition:opacity .8s,transform 1s var(--ease)}
  .hm.in > *{opacity:1;transform:none}
  .hm .lbl{display:block;font-weight:700;font-size:max(.58rem,9px);letter-spacing:.16em;text-transform:uppercase;opacity:.6}
  .hm b{font-family:var(--d);font-weight:400;text-transform:uppercase;line-height:1}
  .hm .sub{font-weight:700;font-size:max(.58rem,9px);letter-spacing:.12em;text-transform:uppercase;opacity:.6}
  .hm-helmet{flex:none;margin-left:auto;width:4.4rem;height:4.4rem;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
    background:rgba(241,240,235,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);box-shadow:0 4px 18px rgba(0,0,0,.18);transition:background .3s,color .3s}
  .hm-helmet svg{width:2.4rem;height:auto}
  .hm-helmet[aria-pressed="true"]{background:var(--ink);color:var(--offwhite)}

  /* banda de cronometraj */
  .hm-ticker{flex:1;min-width:0;display:flex;align-items:stretch;height:4.4rem;border:0;padding:0 .4rem 0 0;cursor:pointer;border-radius:99rem;overflow:hidden;background:rgba(17,17,18,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--offwhite);text-align:left;box-shadow:0 4px 18px rgba(0,0,0,.22)}
  .hm-ticker .flag{flex:none;width:1.4rem;margin:.9rem 0 .9rem 1.1rem;border-radius:.2rem;background:repeating-conic-gradient(#fff 0 25%,#111112 0 50%) 0 0/.46rem .46rem}
  .hm-ticker .hm-track{flex:1;overflow:hidden;display:flex;align-items:center;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .hm-ticker .run{display:flex;align-items:center;white-space:nowrap;animation:hmRun 26s linear infinite}
  .hm-ticker .it{display:inline-flex;align-items:baseline;gap:.6rem;padding:0 1rem}
  .hm-ticker .it .lbl{opacity:.55}
  .hm-ticker .it b{font-size:1.7rem}
  .hm-ticker .it:first-child b{color:#ff4a50}
  .hm-ticker .sep{width:.35rem;height:.35rem;border-radius:50%;background:var(--red);font-size:0;flex:none;opacity:.9}
  @keyframes hmRun{to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){ .hm-ticker .run{animation:none} }

  /* fereastra cu fișa completă */
  .hm-pop{display:block;position:fixed;inset:0;z-index:40;pointer-events:none;visibility:hidden;transition:visibility 0s .7s;overflow:hidden}
  .hm-pop[data-open]{pointer-events:auto;visibility:visible;transition:none}
  .hm-bd{position:absolute;inset:0;background:rgba(17,17,18,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;transition:opacity .5s}
  .hm-pop[data-open] .hm-bd{opacity:1}
  .hm-sheet{position:absolute;left:0;right:0;bottom:0;max-height:80dvh;overflow-y:auto;background:var(--offwhite);color:var(--ink);border-radius:1.6rem 1.6rem 0 0;
    padding:.8rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom));transform:translateY(102%);transition:transform .7s var(--ease)}
  .hm-pop[data-open] .hm-sheet{transform:none}
  .hm-grab{width:3.6rem;height:.35rem;border-radius:1rem;background:rgba(26,26,24,.2);margin:0 auto 1rem}
  .hm-head{display:flex;justify-content:space-between;align-items:center}
  .hm-head .eyebrow{font-size:max(.62rem,10px);isolation:isolate}
  .hm-x{position:relative;width:3.4rem;height:3.4rem;border-radius:50%;border:0;background:var(--ink);color:var(--offwhite)}
  .hm-x i{position:absolute;left:50%;top:50%;width:1.3rem;height:2px;margin:-1px 0 0 -.65rem;background:currentColor}
  .hm-x i:first-child{transform:rotate(45deg)} .hm-x i:last-child{transform:rotate(-45deg)}
  .hm-last{display:block;margin:.6rem 0 1rem}
  .hm-last b{display:block;font-family:var(--d);font-weight:400;font-size:5.4rem;line-height:1}
  .hm-last span{font-weight:700;font-size:max(.62rem,10px);letter-spacing:.14em;text-transform:uppercase;opacity:.6}
  .hm-rows{display:grid;border-top:1px solid rgba(26,26,24,.14)}
  .hm-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.9rem 0;border-bottom:1px solid rgba(26,26,24,.14)}
  .hm-rows dt{font-weight:700;font-size:max(.58rem,9px);letter-spacing:.14em;text-transform:uppercase;opacity:.55;flex:none}
  .hm-rows dd{font-family:var(--d);font-size:1.9rem;line-height:1.1;text-transform:uppercase;text-align:right}
  .hm-cal{margin-top:1.2rem;width:100%;justify-content:center;padding:1.3rem;font-size:max(.72rem,12px)}
}