/* ════════════════════════════════════════════════════════════════════════════
   93-hero-pret · BANDA DE PRET DIN HERO (namespace `xhp`)            LOT 93

   TOT CE E AICI E MASURAT DIN CAPTURILE WIDGETULUI, nu ales de mine.
   Capturile: heroul lat, 1164x291, si widgetul ingust, 433x305, amandoua de pe
   site. Masurat cu PIL: culorile ca frecventa a pixelilor de text, marimile ca
   inaltime de majuscula, distantele ca goluri intre benzile de text.

   CULORI, citite din pixeli:
     #dbdbdb  numele, pretul, valorile      (219,219,219)
     #b8b8b8  randul cu simbolul si bursa   (184,184,184)
     #8c8c8c  randul de stare si etichetele (140,140,140)
     #089981  crestere                      (8,153,129)
     #f23645  scadere                       (242,54,69)

   MARIMI, din inaltimea majusculei impartita la 0,72:
     nume 31px majuscula -> 42px      pret 26px -> 36px
     sub  11px           -> 15px      variatie 13px -> 18px
     stare 8px           -> 11px      valoare statistica 13px -> 18px
                                      eticheta statistica 8px -> 11px

   ASEZARE, din coordonate:
     logo 56x56, la 12px de text
     pretul incepe la marginea din stanga, sub logo, nu indentat sub nume
     statisticile stau in DREAPTA, pe acelasi rand cu pretul
     valoarea deasupra, eticheta dedesubt (invers fata de cum facusem)
     randul de stare si etichetele statisticilor sunt pe aceeasi linie

   ⚠ FARA CARD. Widgetul are fundal transparent si sta direct pe gradientul
     heroului. Deci: zero fundal, zero chenar, zero umbra, zero radius, zero
     padding. Asta era greseala cea mare a lotului 92.

   ⚠ FARA PRESCURTAREA `font:`. O prescurtare care contine `var()` si iese
     invalida la calcul e aruncata INTREAGA si ramane marimea mostenita.
     Masurat in Chromium: 14px peste tot pe desktop, in timp ce regulile de
     mobil, scrise separat, mergeau. Deci toate marimile se scriu desfacut.

   ⚠ FARA FONTUL TEMEI. Widgetul foloseste stiva lui de sistem, iar pe paginile
     unde el ruleaza fontul ala e deja in hero. Daca banda ar folosi Hanken,
     doua pagini de acelasi fel ar arata diferit. Deci aceeasi stiva ca a lor.
   ════════════════════════════════════════════════════════════════════════════ */

.mds-ahero__tv--date{ margin-top:18px; }

.xhp{
  --xhp-ink:#dbdbdb;
  --xhp-sub:#b8b8b8;
  --xhp-mut:#8c8c8c;
  --xhp-sus:#089981;
  --xhp-jos:#f23645;

  display:flex; flex-direction:column; gap:18px;
  width:100%; max-width:none;
  margin:0; padding:0;
  background:none; border:0; border-radius:0; box-shadow:none;
  --xhp-font:-apple-system,BlinkMacSystemFont,'Trebuchet MS',Roboto,Ubuntu,sans-serif;
  font-family:var(--xhp-font);
  color:var(--xhp-ink);
  -webkit-font-smoothing:antialiased;
}

/* ══ IDENTITATE ═════════════════════════════════════════════════════════════
   Logo 56x56 la 12px de text. Numele intreg mare, iar simbolul si bursa
   dedesubt, mici. In captura lata asta e ordinea; in cea ingusta e invers,
   dar heroul nostru e lat. */

.xhp__id{ display:flex; align-items:center; gap:12px; min-width:0; }

.xhp__logo{
  flex:none; width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.06);
  display:grid; place-items:center; overflow:hidden;
}
.xhp__logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.xhp__mono{ font-weight:700; font-size:22px; line-height:1; color:var(--xhp-sub); }

.xhp__idt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.xhp__nume{
  font-weight:600; font-size:42px; line-height:1.05;
  letter-spacing:-.01em;
  color:var(--xhp-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.xhp__sub{
  display:flex; align-items:center; gap:14px; min-width:0;
  font-weight:400; font-size:15px; line-height:1.2; color:var(--xhp-sub);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.xhp__tick,.xhp__bursa{ font-style:normal; }

/* ══ PRET + STATISTICI, pe acelasi rand ═════════════════════════════════════ */

.xhp__rand{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px 40px; flex-wrap:wrap;
}
.xhp__pret{ display:flex; flex-direction:column; gap:7px; min-width:0; }

.xhp__cap{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; }
.xhp__val{
  font-weight:600; font-size:36px; line-height:1;
  letter-spacing:-.005em;
  color:var(--xhp-ink);
}
.xhp__mon{
  font-size:13px; font-weight:400; line-height:1;
  color:var(--xhp-ink); margin-left:2px;
}
.xhp__var{
  font-weight:400; font-size:18px; line-height:1;
  background:none; padding:0; border-radius:0;
}
.xhp__var--sus{ color:var(--xhp-sus); }
.xhp__var--jos{ color:var(--xhp-jos); }

/* ══ RANDUL DE STARE ════════════════════════════════════════════════════════
   La ei scrie „AT CLOSE (AS OF SEP 19, 02:59 GMT+3)", majuscule mici si gri.
   Punctul colorat apare doar cand pretul e viu; la inchidere nu e niciunul. */

.xhp__stare{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:400; font-size:11px; line-height:1;
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--xhp-mut);
}
.xhp__stare i{ width:6px; height:6px; border-radius:50%; flex:none; background:none; }
.xhp__stare--live i{ background:var(--xhp-sus); }
.xhp__stare--delayed i{ background:#f7a600; }

/* ══ STATISTICILE ═══════════════════════════════════════════════════════════
   Valoarea deasupra, eticheta dedesubt. `column-reverse` pastreaza `dt` inainte
   de `dd` in marcaj, adica semantica corecta a unei liste de definitii, si
   totusi deseneaza valoarea prima, ca la ei. */

/*
 * CIFRELE STAU INTOTDEAUNA PE UN SINGUR RAND. O regula, fara praguri, si iese
 * singura asezarea potrivita la fiecare latime, fiindca flexbox rupe randul
 * INAINTE sa stranga un element:
 *
 *   incape langa pret        -> sta in dreapta, pe randul pretului, ca in captura
 *   nu incape langa pret     -> cade sub pret si se intinde pe toata latimea
 *   nu incape nici asa       -> se trage cu degetul (numai pe telefon)
 *
 * Masurat la 1280, banda are 972px: TSLA cere 277+40+590=907, deci sta in
 * dreapta; TLV cere 249+40+707=996 si BTC 346+40+642=1028, deci cad sub pret,
 * unde au 972px si incap lejer pe un rand. Pe telefon, la 390px, TLV cere 640
 * si are 358, deci deruleaza 282px.
 *
 * ⚠ `min-width:0` e obligatoriu. Fara el un element de flex nu coboara sub
 *   latimea continutului, deci nu s-ar derula nimic, ci ar iesi pagina in
 *   lateral.
 * ⚠ `flex:0 0 auto` pe casute: fara el s-ar strange una intr-alta in loc sa
 *   deruleze.
 *
 * Bara de derulare e ascunsa, ca la ei. Casuta taiata la marginea din dreapta e
 * semnul ca mai e ceva acolo.
 */
.xhp__stat{
  display:flex; flex-wrap:nowrap; gap:14px 40px;
  min-width:0;
  margin:0; padding:0;
  border:0;
  overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.xhp__stat::-webkit-scrollbar{ width:0; height:0; }

.xhp__cel{ flex:0 0 auto; display:flex; flex-direction:column-reverse; min-width:0; }
.xhp__stat dd{
  margin:0;
  font-weight:400; font-size:18px; line-height:1.2;
  color:var(--xhp-ink);
  white-space:nowrap;
}
.xhp__stat dt{
  margin-top:5px;
  font-weight:400; font-size:11px; line-height:1.2;
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--xhp-mut);
  white-space:nowrap;
}

/* ══ LINIA DE PRET, OPTIONALA ═══════════════════════════════════════════════
   Stinsa implicit: widgetul n-are asa ceva. Se aprinde cu
   `add_filter( 'mds_hero_sparkline', '__return_true' )`. */

.xhp__spark{ display:block; width:100%; max-width:420px; height:40px; overflow:visible; }
.xhp__spark polyline{ stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.xhp__spark--sus polyline{ stroke:var(--xhp-sus); }
.xhp__spark--jos polyline{ stroke:var(--xhp-jos); }

/* ══ MOBIL ══════════════════════════════════════════════════════════════════
   Captura ingusta, 433px, arata ca la latime mica scad numele si pretul, iar
   statisticile trec sub ele. Masurat acolo: numele mic, pretul aproape cat pe
   desktop. Pastram raportul. */

@media (max-width:640px){
  .xhp{ gap:14px; }
  .xhp__logo{ width:44px; height:44px; }
  .xhp__mono{ font-size:18px; }
  .xhp__nume{ font-size:26px; line-height:1.1; }
  .xhp__sub{ font-size:13px; gap:10px; }
  .xhp__val{ font-size:30px; }
  .xhp__var{ font-size:16px; }
  .xhp__rand{ gap:16px 28px; }
  .xhp__stat{ gap:12px 28px; }
  .xhp__stat dd{ font-size:16px; }
}