/*
 * Primul ecran al paginii /modele/: „Cifrele” (prototipul A, runda 3, 21.10.2026). Doar clase .e2…
 * Un număr cât lățimea conținutului; stratul negru cu cifrele albe (.e2__voal) se înmulțește peste fotografie, deci
 * prin cifre se vede fotografia întreagă și în jur doar o umbră a ei. Cifrele stau în sloturi cu overflow ascuns, ca
 * pe un contor: banda primei cifre (2 3 4 5) și zeroul SUV-ului urcă prin fereastra slotului.
 * Toată așezarea e în CSS (em și variabile): primul cadru e corect fără JS. cifrele.js scrie doar transform și opacity.
 */

.e2 {
  --H: max(100svh, 560px);       /* înălțimea scenei */
  --F: min(calc((var(--vw, 100vw) - 2 * var(--m)) / var(--W4)), calc((var(--H) - 300px) / .78));   /* 5008 = lățimea conținutului */
  --cy: calc(var(--antet) + .455 * (var(--H) - var(--antet)));   /* mijlocul cifrelor */
  --hb: var(--H); --bt: 0px; --cyl: var(--cy);                  /* banda fotografiilor: pe desktop, tot ecranul */
  --k: .85;                      /* lățimea mașinii / lățimea lui 5008 */
  --voal: .88;                   /* în afara cifrelor se vede 12% din fotografie */
  --T: 290svh;                   /* cât derulezi prin contor */
  position: relative; background: #000; color: #fff;
}

.e2__scena { position: relative; height: var(--H); overflow: hidden; overflow: clip; isolation: isolate; background: #000; }

/* ---- Fotografiile ---------------------------------------------------------------------------------------------- */
.e2__fotos { position: absolute; z-index: 0; left: 0; width: 100%; top: var(--bt); height: var(--hb); overflow: hidden; }
.e2__f { position: absolute; inset: 0; opacity: 0; }
.e2__f--activ { opacity: 1; }
/* mașina cât numărul (dar cel mult 15% peste sursă), fotografia acoperă banda; cutia mașinii centrată pe cifre */
.e2__img {
  --iw: max(min(calc(var(--k) * var(--W4) * var(--F) / var(--fw)), var(--maxw)), var(--vw, 100vw), calc(var(--hb) * var(--ar)));
  position: absolute; max-width: none; width: var(--iw); height: calc(var(--iw) / var(--ar));
  left: clamp(calc(var(--vw, 100vw) - var(--iw)), calc(var(--vw, 100vw) * .5 - var(--fcx) * var(--iw)), 0px);
  top: clamp(calc(var(--hb) - var(--iw) / var(--ar)), calc(var(--cyl) - var(--fcy) * var(--iw) / var(--ar)), 0px);
}

/* ---- Numărul: fereastra (alb pe negru, înmulțit) și conturul --------------------------------------------------- */
.e2__voal { position: absolute; z-index: 1; inset: 0; background: #000; mix-blend-mode: multiply; opacity: var(--voal);
  transition: opacity .24s ease-out; }
.e2__contur { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .3; transition: opacity .24s ease-out; }
.e2__num { position: absolute; left: 50%; top: calc(var(--cy) - .505 * var(--F)); display: block;
  font: 800 var(--F)/1 var(--f-titlu); font-stretch: 125%; font-variant-numeric: normal;
  width: calc(var(--W4) * 1em); margin-left: calc(var(--W4) * -.5em); height: 1em; }
/* slotul: fereastra unei cifre, de la 0,06 em deasupra cifrei la 0,06 em sub ea (cifrele au 0,72 em) */
.e2__s { position: absolute; left: 0; top: .085em; width: .86em; height: .84em; overflow: hidden; display: block; }
.e2__b { position: relative; top: -.085em; display: block; }
.e2__b > span { display: block; height: 1em; line-height: 1; }
.e2__voal .e2__b > span { color: #fff; }
.e2__contur .e2__b > span { color: transparent; -webkit-text-stroke: 1px #fff; }

/* suprafața numărului, pentru mouse și atingere */
.e2__nr { position: absolute; z-index: 3; left: 50%; top: calc(var(--cy) - .42 * var(--F)); height: calc(.84 * var(--F));
  width: calc(var(--W4) * var(--F)); margin-left: calc(var(--W4) * var(--F) * -.5); -webkit-tap-highlight-color: transparent; }

/* ---- În față: hover, focus, primul tap: mașina iese din umbră, cifrele rămân trasate --------------------------- */
.e2--fata .e2__voal { opacity: .42; }
.e2--fata .e2__contur { opacity: .95; }
.e2--fata .e2__et--activ .e2__et-sag { transform: translateX(6px); }

/* ---- Sus -------------------------------------------------------------------------------------------------------- */
.e2__sus { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--antet) + 22px); padding: 0 var(--m);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; pointer-events: none; }
.e2__sus a { pointer-events: auto; }
.e2__h1 { display: grid; gap: 6px; font-weight: 400; margin: 0; min-width: 0; }
.e2__loc { font-size: 15px; line-height: 1.3; color: var(--gri-n); }
.e2__dr { display: grid; justify-items: end; gap: 6px; }
.e2__nota { font-size: 13px; line-height: 1.45; color: var(--gri-n); text-align: right; margin: 0; padding-top: 1px; }
.e2__tel { display: none; font: 500 15px/1 var(--f-titlu); font-stretch: 112%; letter-spacing: .02em; color: #fff; text-decoration: none; padding: 6px 0; white-space: nowrap; }
.e2__tel:hover, .e2__tel:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 1099px) { .e2__tel { display: block; } }

/* ---- Numele și prețul de sub număr ------------------------------------------------------------------------------- */
.e2__ete { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--cy) + .36 * var(--F) + 30px); height: 0; }
.e2__et { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: flex; align-items: baseline; gap: 16px;
  white-space: nowrap; color: #fff; text-decoration: none; opacity: 0; visibility: hidden; padding: 6px 0; }
.e2__et--activ { opacity: 1; visibility: visible; }
.e2__et-nume { font: 500 12px/1.2 var(--f-titlu); font-stretch: 125%; text-transform: uppercase; letter-spacing: .08em; }
.e2__et-seg { font-size: 15px; color: var(--gri-n); }
.e2__et-pret { font-size: 15px; color: var(--gri-n); }
.e2__et-pret .cifre { font: 500 21px/1 var(--f-titlu); font-stretch: 112%; color: #fff; margin: 0 2px; }
.e2__et-sag { display: inline-block; color: #fff; font-size: 18px; margin-left: 6px; transition: transform .2s ease-out; }
.e2__et:hover .e2__et-sag, .e2__et:focus-visible .e2__et-sag { transform: translateX(6px); }
.e2__et:focus-visible { outline: 2px solid var(--albastru); outline-offset: 6px; }

/* ---- Finalul: celelalte modele -------------------------------------------------------------------------------------- */
.e2__altele { position: absolute; z-index: 3; left: 0; right: 0; top: var(--cy); transform: translateY(-50%);
  display: flex; justify-content: center; gap: clamp(48px, 9vw, 160px); padding: 0 var(--m); opacity: 0; visibility: hidden; }
.e2__grup .eticheta { color: var(--gri-n); margin: 0 0 14px; }
.e2__grup ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 36px; }
.e2__grup a { font: 400 clamp(30px, 3.2vw, 48px)/1.15 var(--f-titlu); font-stretch: 125%; color: #fff; text-decoration: none; }
.e2__grup a:hover, .e2__grup a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }

/* ---- Jos: acțiunile și scala ------------------------------------------------------------------------------------------- */
.e2__jos { position: absolute; z-index: 3; left: 0; right: 0; bottom: 44px; padding: 0 var(--m);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.e2__actiuni { display: flex; gap: 12px; }
.e2__actiuni .buton { min-width: 232px; }
.e2__td-nr { font-variant-numeric: tabular-nums; }
.e2__scala { position: relative; width: min(462px, 40vw); }
.e2__scala ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--linie-n); }
.e2__scala a { display: block; padding: 14px 0 6px; font: 500 11.5px/1 var(--f-titlu); font-stretch: 125%; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gri-n); text-decoration: none; transition: color .15s; }
.e2__scala a:hover, .e2__scala a:focus-visible, .e2__scala a.e2--aici { color: #fff; }
.e2__scala-mk { position: absolute; left: 0; top: -1px; width: calc(100% / 7); height: 2px; background: #fff; pointer-events: none; transform-origin: 0 0; }

/* ---- Pe /modele/ (.e2--modele): titlul paginii și „Utilitare” la capătul scării ----------------------------------- */
.e2__h1-t { font: 400 28px/1.05 var(--f-titlu); font-stretch: 125%; color: #fff; }
.e2--modele .e2__h1 { gap: 8px; }
/* „Utilitare” e mai lung decât un număr: coloana lui e dublă (marcajul o urmează, cifrele.js măsoară coloanele) */
.e2--modele .e2__scala { width: min(500px, 42vw); }
.e2--modele .e2__scala ol { grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 2fr); }
.e2--modele .e2__scala-mk { width: calc(100% / 8); }
/* fără final, contorul are 5,3 pași în loc de 5,8: același drum pe model ca acasă (290svh × 5,3 / 5,8) */
.e2--modele { --T: 265svh; }
/* în față (hover, tap) fotografia se luminează: textele mici de peste ea (segmentul, nota prețurilor) primesc o umbră */
.e2--modele .e2__et, .e2--modele .e2__sus { transition: text-shadow .24s ease-out; }
.e2--modele.e2--fata .e2__et, .e2--modele.e2--fata .e2__sus { text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 18px rgba(0, 0, 0, .55); }
/* „Utilitare ↓” nu e un pas al contorului, ci un salt la utilitarele din listă: săgeata o spune */
.e2__salt-sag { display: inline-block; margin-left: .55em; font: 400 13px/0 var(--f-text); transition: transform .2s ease-out; }
.e2__scala-salt a:hover .e2__salt-sag, .e2__scala-salt a:focus-visible .e2__salt-sag { transform: translateY(3px); }

/* Banda (doar ecrane tactile): glisarea orizontală cu degetul e a contorului, cu sau fără mișcare. O derulare orizontală
   NATIVĂ, goală, peste număr și sub texte și butoane: gestul și inerția sunt ale browserului, cifrele.js doar citește
   scrollLeft (pe iPhone, glisarea „de mână” cu touch-action: pan-y era anulată de Safari). overflow-y hidden: gestul
   vertical trece la pagină, nativ. .e2--liber: scena nu e lipită, banda nu se mișcă. */
.e2__banda { display: none; }
@media (pointer: coarse) {
  .js .e2__banda { display: block; position: absolute; z-index: 3; left: 0; right: 0; top: var(--antet); bottom: 0;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-tap-highlight-color: transparent; }
  .js .e2--liber .e2__banda { overflow-x: hidden; }
}
.e2__banda-c { height: 100%; }
.e2__banda::-webkit-scrollbar { display: none; }

/* ---- Cu mișcare: scena lipită, contorul merge cu derularea -------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .e2 { height: calc(var(--H) + var(--T)); }
  .js .e2__scena { position: sticky; top: 0; }
  .js .e2__f, .js .e2__s, .js .e2__b, .js .e2__scala-mk { will-change: transform, opacity; }
}

/* ---- Telefon ----------------------------------------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .e2 {
    --F: calc((var(--vw, 100vw) - 20px) / var(--W4));
    --cy: calc(var(--antet) + .41 * (var(--H) - var(--antet)));
    /* pe telefon mașina e mai mare decât ecranul (tăiată de margini) și umbra ei mai luminoasă: umple ecranul */
    --hb: max(calc(4.2 * var(--F)), calc(.56 * var(--H))); --bt: calc(var(--cy) - var(--hb) / 2); --cyl: calc(var(--hb) / 2);
    --k: 1.32; --voal: .74; --T: 250svh;
  }
  .e2--modele { --T: 228svh; }
  .e2__fotos { -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
  .e2__sus { top: calc(var(--antet) + 14px); }
  .e2__loc { font-size: 13px; }
  .e2__nota { display: none; }
  .e2__ete { top: calc(var(--cy) + .36 * var(--F) + 22px); }
  .e2__et { flex-wrap: wrap; justify-content: center; gap: 4px 10px; width: calc(100vw - 32px); white-space: normal; text-align: center; }
  .e2__et-seg { font-size: 13px; }
  .e2__et-pret { flex-basis: 100%; font-size: 14px; }
  .e2__et-pret .cifre { font-size: 19px; }
  .e2__altele { flex-direction: column; align-items: center; gap: 28px; text-align: center; }
  .e2__grup .eticheta { margin-bottom: 8px; }
  .e2__grup ul { justify-content: center; gap: 2px 22px; }
  .e2__grup a { font-size: clamp(22px, 7vw, 28px); }
  .e2__jos { bottom: max(16px, env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: 18px; }
  .e2__scala, .e2--modele .e2__scala { order: -1; width: 100%; }
  .e2__scala a { text-align: center; font-size: 11px; letter-spacing: .03em; padding-top: 12px; }
  .e2__h1-t { font-size: 21px; }
  .e2__actiuni { gap: 8px; }
  .e2__actiuni .buton { min-width: 0; flex: 1; width: auto; height: 48px; padding: 0 16px; gap: 10px; }
}
/* /modele/ pe telefon (ținut drept): banda fotografiei mai înaltă (umple ecranul între titlu și scală, fără golul negru
   de sub preț), numărul puțin mai jos, prețul mai mare. */
@media (max-width: 899px) and (min-height: 621px) {
  .e2--modele {
    --cy: calc(var(--antet) + .43 * (var(--H) - var(--antet)));
    --hb: max(calc(4.2 * var(--F)), calc(.70 * var(--H)));
    --voal: .7;
  }
  .e2--modele .e2__ete { top: calc(var(--cy) + .36 * var(--F) + 34px); }
  .e2--modele .e2__et-nume { font-size: 13px; }
  .e2--modele .e2__et-pret { font-size: 15px; margin-top: 6px; }
  .e2--modele .e2__et-pret .cifre { font-size: 26px; }
}
@media (max-width: 419px) {
  /* „Test drive 3008 →” nu încape cu săgeată la 320–400 px: textul centrat, fără săgeți */
  .e2__actiuni .buton { justify-content: center; padding: 0 10px; }
  .e2__actiuni .sageata { display: none; }
  /* „Utilitare ↓”: sub 420 px săgeata lipea cuvântul de „5008” (coloana e plină); rămâne doar cuvântul */
  .e2__salt-sag { display: none; }
}
@media (max-width: 359px) {
  .e2__actiuni .buton { letter-spacing: .04em; }
  .e2__loc { font-size: 12px; }
  .e2__scala a { font-size: 10px; letter-spacing: 0; }
}

/* ---- Ecrane joase (telefon culcat, ferestre mici): fără scala și fără rândul de sus ------------------------------------- */
@media (max-height: 620px) {
  .e2 { --H: max(100svh, 340px);
        --F: min(calc((var(--vw, 100vw) - 2 * var(--m)) / var(--W4)), calc((var(--H) - var(--antet) - 150px) / .8));
        --cy: calc(var(--antet) + 14px + .4 * var(--F)); --hb: var(--H); --bt: 0px; --cyl: var(--cy); --k: 1.1; }
  .e2__fotos { -webkit-mask-image: none; mask-image: none; }
  .e2__sus, .e2__scala { display: none; }
  .e2__ete { top: calc(var(--cy) + .36 * var(--F) + 10px); }
  .e2__et { flex-wrap: nowrap; width: auto; white-space: nowrap; }
  .e2__et-pret { flex-basis: auto; }
  .e2 .e2__jos { bottom: 14px; flex-direction: row; justify-content: center; }
  .e2__actiuni .buton { flex: 0 1 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .e2__voal, .e2__contur, .e2__et-sag, .e2__scala a { transition: none; }
}