/* ============================================================================
   x-antet-date.css · §1 antetul „Merita sa investesti?" + banda „Date cheie"
   Namespace `xhd`. Generat de `fac_hd.py` la 2026-09-12 00:56:13.

   ⚠ TOATE textele si TOATE valorile vin din compunerea TEMEI
     (`mds_anz_title`, `mds_lede_compus`, `mds_anz_facts`), exportata in
     `head.json`. Nimic nu se reformateaza: `mds_fmt` si registrul de unitati au
     decis deja moneda, procentele si compactarea.
   ⚠ R23-R26 din REGULI.md: sectiune 26→34, card 21→24, sprijin `--xf-sm`,
     culori numai din treptele temei, majuscule la randare.
   ============================================================================ */

:root{ --xc-cyan:#1d9bf0; --xc-yellow:#ffd400; }

/* ══ ANTETUL ══ */
.xhd{ font-family:var(--xf); color:var(--xc-ink); letter-spacing:-.004em; }
.xhd *,.xhd2 *{ box-sizing:border-box; border:0; }
.xhd__k{ display:flex; align-items:center; gap:11px; margin:0 0 14px;
  font:600 var(--xt-5)/1.25 var(--xf); color:var(--xc-ink2); }
.xhd__k::before{ content:""; width:26px; height:2px; background:var(--xc-ac); flex:none; }
/* ⚠ Titlul paginii, cel mai mare din pagina. A doua parte primeste culoarea
   verdictului, ca in tema (`analiza-head.php:52`). */
.xhd__t{ margin:0; font-size:var(--xt-1); font-weight:700; line-height:1.08;
  letter-spacing:-.024em; text-wrap:balance; }
.xhd__px{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin:20px 0 0;
  font-size:var(--xf-sm); color:var(--xc-ink3); }
.xhd__px b{ font:700 var(--xt-4)/1 var(--xf); letter-spacing:-.018em;
  color:var(--xc-ink); font-variant-numeric:tabular-nums; }
.xhd__px u{ text-decoration:none; font-weight:600; font-variant-numeric:tabular-nums; }

/* ── textul introductiv, cu pliaj pur CSS ── */
.xhd__r{ position:absolute; opacity:0; pointer-events:none; }
/* ⚠⚠ SPECIFICITATE 0,3,0. Paragrafele vin din `mds_lede_compus()` cu clasa
   TEMEI, `<p class="lede">`, iar `.mdsx .lede` (mds-design.css:441) e (0,2,0) cu
   `font-size:16px` si `color:var(--ink-2)`. O regula `.xhd__lede p` (0,1,1) ar
   fi pierdut, iar textul ar fi ramas gri si la 16px - exact ce ai cerut sa nu
   fie. Nu s-a vazut in preview fiindca acolo scoteam clasa.
   Aceeasi capcana e documentata in `afacere.css:29`, cu aceeasi solutie: o
   clasa in plus, ca sa castige indiferent de ordinea de tiparire.
   ⚠ FARA `max-width` si pe `--xc-ink`, ca `.xgh__l` si `.xan__l` (R24).
   ⚠ Marimea e `--xf-sm`, ca `lede`-ul din §8 si §9 (R23). */
.xhd__lede{ margin:26px 0 0; }
.mdsx .xhd__lede p{ margin:0 0 14px; font:400 var(--xf-sm)/1.65 var(--xf);
  letter-spacing:-.005em; color:var(--xc-ink); }
.xhd__lede p:last-child{ margin-bottom:0; }
/* ══ CAT DIN TEXT SE VEDE INAINTE DE APASARE ══════════════════════════════
   ⚠⚠ ISTORICUL REGLAJULUI, ca sa nu se reia unul vechi: doua randuri la ambele
      latimi (prea putin), apoi opt pe mobil si sase pe desktop.
      CERUT ACUM: pe mobil, JUMATATE din cat se vedea, adica PATRU randuri.
      DESKTOPUL RAMANE LA SASE si nu se atinge.

   ⚠⚠ NU SE POATE REGLA DINTR-UN SINGUR NUMAR, si asta e lucrul de inteles:
      randurile au lungimi foarte diferite la cele doua latimi. Masurat pe TSLA,
      pe cele trei paragrafe ale ledeului (221, 270 si 235 de caractere):
          la 390px   p1 5 randuri · p2 6 · p3 5
          la 1440px  p1 2 randuri · p2 2 · p3 2
      Pe desktop, primul paragraf are DOI randuri in total, deci o taietura pe el
      singur n-ar arata mai nimic. Se schimba CE se arata, nu doar cat.

   ⚠ De aceea cele doua latimi au reguli diferite:
        mobil    numai p1, taiat la 4 randuri      =  4 randuri
        desktop  p1 + p2 intregi + p3 taiat la 3   =  6 randuri
      Desktopul e mai jos, in `@container (min-width:900px)`, si isi anuleaza
      acolo, explicit, si ascunderea paragrafelor, si taietura de pe p1: altfel
      ar mosteni regulile de mobil de aici.

   ⚠ Stingerea in fond sta pe ULTIMUL paragraf vizibil, adica pe cel taiat: acolo
     chiar se intrerupe textul. Pe mobil e p1, pe desktop e p3.
   ⚠ Toate la (0,3,0): `.mdsx .lede` din tema (`mds-design.css:441`) e (0,2,0).
   ⚠ `display:-webkit-box` cu `-webkit-box-orient:vertical` e singura combinatie
     in care `line-clamp` functioneaza; nu e o alegere, e cerinta proprietatii. */
/* PE MOBIL: numai primul paragraf, taiat la patru randuri. Masurat pe TSLA la
   390px, p1 are 5 randuri in total, deci se vad 4 si taietura se si vede. */
.mdsx .xhd__lede.is-fold p:nth-child(n+2){ display:none; }
.mdsx .xhd__lede.is-fold p:nth-child(1){ position:relative;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4;
  overflow:hidden; }
.mdsx .xhd__lede.is-fold p:nth-child(1)::after{ content:""; position:absolute;
  left:0; right:0; bottom:0; height:2.2em; pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--xc-bg)); }
/* ⚠ La deschidere se anuleaza SI `line-clamp`, nu doar `display:none`: fara
   `-webkit-line-clamp:unset`, primul paragraf ar fi ramas taiat la doua randuri
   chiar si dupa apasare. */
.mdsx #xhd-lede:checked ~ .xhd__lede p{ display:block;
  -webkit-line-clamp:unset; overflow:visible; }
.mdsx #xhd-lede:checked ~ .xhd__lede p::after{ display:none; }
/* ⚠ Buton MIC, lipit de text. Era la corpul textului (`--xf-sm`, 15,5px) cu 18px
   deasupra: arata ca o actiune principala, desi e doar „mai vezi trei randuri".
   13,5px si 5px deasupra il pun in rolul lui.
   ⚠ `min-height:36px` ramane: sub 36px tinta de atingere devine greu de nimerit
     pe telefon, si asta nu se negociaza cu marimea literei. */
.xhd__more{ display:inline-flex; align-items:center; gap:7px; margin:5px 0 0; padding:7px 14px;
  min-height:36px; border-radius:var(--xr-p); background:var(--xs-inset);
  font:600 var(--xt-7)/1.3 var(--xf); color:var(--xc-ink); cursor:pointer; }
.xhd__more:hover{ background:var(--xs-track); }
.xhd__more-b{ display:none; }
#xhd-lede:checked ~ .xhd__more .xhd__more-a{ display:none; }
#xhd-lede:checked ~ .xhd__more .xhd__more-b{ display:inline; }

/* ══ DATE CHEIE ══ */
.xhd2{ font-family:var(--xf); color:var(--xc-ink); letter-spacing:-.004em; margin-top:20px; }
.xhd2__t{ margin:0; font-size:var(--xt-3); font-weight:700; line-height:1.15;
  letter-spacing:-.022em; }
.xhd2__t::first-letter{ text-transform:uppercase; }

/* ── comutatorul de coloana, pe mobil ──────────────────────────────────────
   ⚠⚠ TOATE LA (0,3,0). Tema are `.mdsx .facts__tabs` si `.mdsx .facts__tab`
      (`mds-design.css:640-651`) - (0,2,0) - cu alt aspect: grila de trei, raza
      de 8px, fundal `--tc` la 15%. Regulile pe `.xhd__tab` singur ar pierde.
   ⚠ Starea activa e `.is-on`, pusa de `mds-facts.js`. Nu se inventeaza alta. */
.mdsx .xhd__tabs{ display:flex; gap:6px; margin:22px 0 0; padding:4px;
  border-radius:var(--xr-p); background:var(--xs-track); width:fit-content;
  max-width:100%; grid-template-columns:none; }
/* ⚠ BUTOANELE SI TABURILE COBOARA O TREAPTA: `--xt-7` (13,5px), nu `--xf-sm`
   (15,5px). 24 din cele 29 stateau exact la marimea prozei pe care o
   intrerup, si la 600 - adica strigau mai tare decat ce scria in ele.
   Cutia ramane neatinsa (44px inaltime, acelasi padding), deci se apasa la
   fel de usor cu degetul. */
.mdsx .xhd__tabs .xhd__tab{ padding:9px 18px; border-radius:var(--xr-p);
  font:600 var(--xt-7)/1.2 var(--xf); color:var(--xc-ink3); cursor:pointer;
  white-space:nowrap; background:none; border:0; }
.mdsx .xhd__tabs .xhd__tab:hover{ color:var(--xc-ink); }
.mdsx .xhd__tabs .xhd__tab.is-on{ background:var(--xs-card); color:var(--xc-ink); }

/* ── pista: SWIPE pe mobil ─────────────────────────────────────────────────
   ⚠ Mecanica vine de la TEMA (`mds-design.css:653-655`): `display:flex`,
     `overflow-x:auto`, `scroll-snap-type:x mandatory`, bara ascunsa, iar
     coloanele `flex:0 0 100%` cu `scroll-snap-align:center`. Nu se rescrie -
     se suprascrie doar ce tine de aspect.
   ⚠ `gap`-ul temei e 36px, prea mare intre carduri separate. Marginile negative
     fac pista sa sangereze pana la marginile coloanei, ca al treilea card sa nu
     para taiat, iar `scroll-padding` opreste snap-ul la aceeasi margine. */
.mdsx .xhd__cols{ display:flex; gap:12px; margin:14px -18px 0; padding:2px 18px;
  scroll-padding:0 18px; }
/* ⚠⚠ FARA MUCHIA DE 1px. `--xe-lift` are DOUA straturi:
       0 1px 1px rgba(0,0,0,.55)      ← muchia, se citeste ca o bordura
       0 22px 48px -28px rgba(0,0,0,1) ← umbra moale, care ridica cardul
   Pastrez doar al doilea. Cardul ramane desprins de fond, dar fara conturul care
   il incadra. `--xe-lift` NU se atinge: il folosesc toate celelalte carduri. */
.mdsx .xhd__c{ min-width:0; flex:0 0 88%; scroll-snap-align:center; display:block;
  background:var(--xs-card); border-radius:28px; padding:26px 24px 28px;
  box-shadow:0 22px 48px -28px rgba(0,0,0,1); }
.xhd__ct{ display:flex; align-items:center; gap:11px; margin:0 0 6px; }
.xhd__ct svg{ width:19px; height:19px; flex:none; color:var(--cc,var(--xc-ink3)); }
/* ⚠ 21→24, ca titlurile de card din §8 si §9 (R23). Aveam 19→22, adica alta
   scara decat celelalte sectiuni. */
.xhd__ct h4{ margin:0; font-weight:600; font-size:var(--xt-4);
  line-height:1.25; letter-spacing:-.012em; }
/* ⚠ Badge-ul de risc, pe coloana a treia. Vine din `mds_anz_risk_badge()`, cu
   trei trepte: `ok` peste 67, `warn` peste 40, `bad` sub. Exista in date pe
   toate cele sapte si lipsea din prima versiune. */
.xhd__badge{ margin-left:auto; flex:none; padding:5px 11px; border-radius:var(--xr-p);
  font:600 var(--xt-8)/1.3 var(--xf); white-space:nowrap;
  background:color-mix(in srgb, var(--bd) 16%, transparent); color:var(--bd); }
.xhd__badge--ok{ --bd:var(--xc-lime); }
.xhd__badge--warn{ --bd:var(--xc-orange); }
.xhd__badge--bad{ --bd:var(--xc-pink); }

/* ── randurile, cu tooltip pur CSS ── */
.xhd__l{ list-style:none; margin:0; padding:0; }
.xhd__row{ position:relative; }
.xhd__row + .xhd__row{ background:var(--xsep) no-repeat top/100% 1px; }
.xhd__tr{ position:absolute; opacity:0; pointer-events:none; }
/* ⚠⚠ COMANDA E TOT RANDUL, nu bulina. Principiul e scris in blocul vechi
   (`analiza-facts.php:15`): „pe telefon tinta de atins e de ~40px, nu de 15px".
   Eticheta cuprinde si valoarea, iar `padding` ii da inaltimea de atins. */
.xhd__rl{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:12px 0; cursor:pointer; }
.xhd__rl:hover .xhd__i{ background:var(--cc,var(--xc-ink3)); color:var(--xc-bg); }
/* ⚠⚠ ERA O CUTIE FLEX, si de aia iconita statea departe de text.
   `display:flex; gap:7px` face din iconita un ELEMENT FLEX, iar cutia nu se rupe
   (`flex-wrap:nowrap` implicit): cand „Interval 52 de saptamani" se rupea pe doua
   randuri, TEXTUL se ingusta si iconita ramanea lipita de marginea din dreapta a
   cutiei - la 60-70px de ultimul cuvant, pe telefon.
   Acum e text obisnuit, cu iconita inline, exact ca in celelalte noua sectiuni:
   aceeasi regula peste tot, un singur loc de reparat data viitoare. */
.xhd__rk{ min-width:0; font:400 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink2); }
.xhd__i{ display:inline-block; width:15px; height:15px; margin-left:6px;
  border-radius:50%; background:var(--xs-track); color:var(--xc-ink3);
  font:700 10px/15px var(--xf); font-style:normal; text-align:center;
  vertical-align:middle; }
.xhd__i::before{ content:"i"; }
.xhd__rv{ flex:none; font:600 var(--xt-6)/1.3 var(--xf); letter-spacing:-.008em;
  font-variant-numeric:tabular-nums; }
/* ⚠ Nota de subsol a cardului. Tema o pune o SINGURA data, la baza intregii
   benzi (`analiza-facts.php:205`); aici e in fiecare card, ca sa fie langa
   randurile la care se refera. */
.xhd__n{ margin:18px 0 0; padding-top:16px; background:var(--xsep) no-repeat top/100% 1px;
  font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink3); }
.xhd__tip{ display:none; position:absolute; left:0; right:0; top:calc(100% - 4px); z-index:5;
  padding:14px 16px; border-radius:var(--xr-i); background:var(--xs-inset);
  box-shadow:var(--xe-lift); font:400 var(--xt-7)/1.5 var(--xf); color:var(--xc-ink2); }
.xhd__tip b{ display:block; margin-bottom:5px; color:var(--xc-ink); font-weight:600; }
.xhd__tx{ display:none; position:fixed; inset:0; z-index:4; }
.xhd__tr:checked ~ .xhd__tip,.xhd__tr:checked ~ .xhd__tx{ display:block; }

@container mdsx (min-width:900px){
  /* ⚠ Pe desktop comutatorul dispare, pista redevine grila de trei si cardurile
     isi recapata latimea intreaga. Toate la (0,3,0), peste regulile temei din
     `mds-design.css:713-717`, care dau `gap:0`, `padding:18px 30px 0` si un
     chenar in stanga - niciunul potrivit cu carduri separate. */
  .mdsx .xhd__tabs{ display:none; }
  .mdsx .xhd__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px; margin:20px 0 0; padding:0; overflow:visible; }
  .mdsx .xhd__c{ flex:none; border-radius:var(--xr-c); padding:29px 31px 31px;
    border-left:0; }
  /* ⚠⚠ REGULA CARE ASCUNDEA TOT DE LA AL DOILEA PARAGRAF IN SUS A PLECAT.
        Ea era motivul pentru care pe desktop se vedeau doar doua randuri: p1
        are chiar doua randuri la latimea asta, iar restul erau ascunse. Acum
        desktopul mosteneste regula de sus - doua paragrafe intregi plus al
        treilea taiat la trei randuri - si nu mai are nevoie de nimic propriu. */
  /* ⚠⚠ PE DESKTOP, TREI PARAGRAFE. Randurile sunt mult mai late aici: masurat
        pe TSLA la 1440px, fiecare paragraf are exact DOUA randuri, fata de 5-6
        pe mobil. De aia taietura nu poate fi aceeasi: cu regula de pe mobil
        s-ar fi vazut 4 randuri, iar cerinta era de trei-patru ori mai mult
        decat cele 2 de dinainte. Asa se vad 6.
     ⚠ Aici se vad TREI paragrafe, pe mobil doar primul: randurile au lungimi
       foarte diferite la cele doua latimi, deci acelasi reglaj ar da alt
       rezultat. */
  .mdsx .xhd__lede.is-fold p:nth-child(n+2){ display:block; }
  .mdsx .xhd__lede.is-fold p:nth-child(n+4){ display:none; }
  /* ⚠ Primul paragraf isi pierde taietura de pe mobil: aici are doua randuri in
     total si n-are ce taia. Taietura si stingerea trec pe al treilea, adica pe
     ultimul vizibil. */
  .mdsx .xhd__lede.is-fold p:nth-child(1){ display:block;
    -webkit-line-clamp:unset; overflow:visible; }
  .mdsx .xhd__lede.is-fold p:nth-child(1)::after{ display:none; }
  .mdsx .xhd__lede.is-fold p:nth-child(3){ position:relative;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
    overflow:hidden; }
  .mdsx .xhd__lede.is-fold p:nth-child(3)::after{ content:""; position:absolute;
    left:0; right:0; bottom:0; height:2.2em; pointer-events:none;
    background:linear-gradient(180deg,transparent,var(--xc-bg)); }
  .mdsx #xhd-lede:checked ~ .xhd__lede p::after{ display:none; }
}