/* ============================================================================
   30-afacere.css · antetul grupului „Afacerea & Rezultatele" (`xab`)
                    + sectiunea „Despre companie" (`xdp`)

   ⚠⚠ ZERO VALORI INVENTATE. Fiecare marime, culoare si raza e COPIATA din
      fisierele deja livrate, cu ancora pe linie:
        20-grup2.css:45-66       `.xgh` — antetul de grup. Se REFOLOSESTE.
        20-grup2.css:82-84       titlu de sectiune  clamp(26,…,34)
        20-grup2.css:88-89       lede-ul            `--xf-sm` 15.5px
        20-grup2.css:91-95       `.xan__c` — cardul
        20-grup2.css:97-99       titlu de card      clamp(21,…,24)
        24-proiectii.css:109-114 `.xpj__mc` — MINICARDUL. Cele trei celule
                                 (valoare/calitate/crestere) sunt exact el.
        22-fair-value.css:74-77  `.xfv__chip` — pastila
        22-fair-value.css:83     pista `--xbar` / `--xs-track`
        14-argumente.css:66-69   pista de swipe (flex + snap + bara ascunsa)
        14-argumente.css:152     `overflow-x:clip` · R29
        raportari.css:571-582    `overflow-anchor` la pliere
        verdict.css:345-357      `scroll-margin-top` 78 / 82px
        20-grup2.css:207-210     pragul de desktop `@container mdsx (min-width:900px)`

   ⚠ DE CE `xgh` SE REFOLOSESTE, nu se copiaza. Antetul de grup e ACELASI
     component pe toate grupurile; o copie proprie ar diverge la prima
     corectura. Consecinta: fisierul DEPINDE de `20-grup2.css`. Acelasi folder,
     incarcare alfabetica (`01-css-sectiuni.php:78`), deci 20 vine mereu inainte.

   ⚠ `xab` si `xdp` sunt namespace-uri NOI. Ocupate: xhd xhd2 xvd xvm xvp xar
     xgh xan xfv xpj. Garda de coliziuni: zero intersectii noi.
   ============================================================================ */

/* ⚠ Tokenii NU se redefinesc: `20-grup2.css:25-39` ii pune pe `:root` si se
   incarca inainte. Singurele adaugari sunt cele doua gutiere de pista, ca sa
   fie scrise o data si folosite si in `calc()`-ul latimii de card. */
:root{
  --xab-gap:10px;               /* gutiera pistei de celule  · = `.xpj__mini`:108 */
  --xdp-gap:14px;               /* gutiera pistei de carduri · = `.xan__pair`:208 */
}

/* ══ ANTETUL GRUPULUI 3 ═════════════════════════════════════════════════════
   Structura e cea de la grupul 2: kicker cu liniuta, titlu, fraza, linie de
   inchidere. Ce se ADAUGA e randul de scor: pastila + cele trei componente.
   Randul intra INAINTE de `.xgh::after`, deci sub el ramane aceeasi linie. */

/* ⚠⚠ `overflow-x:clip`, NU `hidden` (R29). Pista de celule are `overflow-x:auto`
   si se deruleaza singura, dar extinderea ei se propaga in `scrollWidth`-ul
   parintelui si pagina capata derulare orizontala pe mobil. `hidden` ar crea un
   AL DOILEA container de derulare — exact problema. `clip` opreste propagarea
   fara sa creeze unul. */
.xgh{ overflow-x:clip; }

/* ⚠⚠ DISTANTA DEASUPRA ANTETULUI DE GRUP · 62px mobil / 88px desktop.
   MASURAT, nu ales: capitolul dinaintea lui e `#proiectii` (cheia 32), un
   `<section class="xpj">` care n-are `padding-bottom`, iar `.xgh` (20-grup2.css:45)
   are `margin:0`. Rezultatul era ZERO — antetul lipit de ultimul card al
   Proiectiilor.
   Cele doua cifre sunt ale temei, nu inventate de mine: `14-argumente.css:163`
   le scrie explicit, dupa ce lotul 6 a facut aceeasi greseala in sens invers —
   „spatiul pana la antetul de grup a scazut de la 62px la 34px pe mobil si de la
   88px la 48px pe desktop". Acolo distanta o da `padding-bottom`-ul benzii de
   deasupra; aici, neexistand banda, o da `margin-top`-ul antetului.
   ⚠ Clasa e `xab__gh`, NU `.xgh`. Antetul grupului 2 isi ia deja distanta din
     banda de argumente de deasupra lui; pusa pe `.xgh`, s-ar aduna de doua ori. */
/* ⚠ Distanta deasupra antetului de grup NU MAI E AICI: sta o singura data,
   pe `.xgh` (`20-grup2.css`), cu marimea din `--xsp-grup` (`00-shell.css`).
   Erau sapte reguli identice in sapte fisiere, iar antetul primului grup —
   singurul fara clasa proprie — ramasese pe dinafara, cu distanta ZERO. */
.xab__gh{ overflow-x:clip; }

/* Pastila scorului · declaratiile lui `.xfv__chip` (22-fair-value.css:74).
   ⚠ `--bc` se seteaza inline, din `mds_anz_score_color()` — pragurile TEMEI
     (`analiza.php:144-150`: >=67 lime, >=40 yellow, restul pink). */
.xab__chipw{ margin:18px 0 0; }
.xab__chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px;
  border-radius:var(--xr-p); background:color-mix(in srgb, var(--bc) 16%, transparent);
  color:var(--bc); font-weight:600; font-size:var(--xt-7); font-variant-numeric:tabular-nums; }

/* ── cele trei componente · valoare, calitate, crestere ─────────────────────
   ⚠ CELULA E `.xpj__mc` (24-proiectii.css:109-114), copiata declaratie cu
     declaratie: `padding:15px 16px`, `--xr-i`, `--xs-inset`; eticheta
     `500 var(--xf-sm)/1.4` pe `--xc-ink2`; cifra `600 20px/1.1` cu
     `letter-spacing:-.014em`; nota `500 13.5px/1.2` pe `--xc-ink3`.
     Singura adaugire fata de proiectii e bara indicatoare de dedesubt.

   ⚠ PISTA, NU GRILA. Cerut: toate pe acelasi rand, cu derulare stanga-dreapta
     si pe desktop. Mecanica e a temei (`mds-design.css:653-655`), refolosita la
     argumente (14-argumente.css:66) si la verdict (12-verdict.css:256):
     `display:flex`, `overflow-x:auto`, `scroll-snap-type:x mandatory`, bara
     ascunsa, celulele `flex:0 0 <cota>` cu `scroll-snap-align`.

   ⚠ `min-width:0` pe pista (R30). Minimul automat al unui item de flex sau de
     grila e `min-content`: fara el pista se INTINDE la latimea continutului in
     loc sa deruleze, si impinge pagina. Aceeasi capcana ca la `.xvp__tr`
     (12-verdict.css:251).

   ⚠ COTA PE MOBIL E 44%. MASURAT pe textul real, la 390px: cea mai lata linie
     dintr-o celula e eticheta („cresterea", 67px), plus 32px de padding = 99px
     necesari. 44% da 172px, deci 73px de aer. Doua celule intra complet
     (343 + 10 gutiera = 353px) si din a treia se vad 27px — destul cat sa se
     citeasca drept „mai urmeaza", nu drept card taiat.
     ⚠ Prima varianta era 62% (217px): incapea tot, dar cardurile erau prea late
       si se vedea o singura celula plus o jumatate. */
.xab__tri{ min-width:0; display:flex; gap:var(--xab-gap); margin:20px 0 0;
  padding:2px 0; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; }
.xab__tri::-webkit-scrollbar{ display:none; }
/* ⚠ `--xs-card`, ca la `.xdp__c` (linia 161). Erau pe `--xs-inset`, adica fondul
   de celula dintr-un card — dar astea NU stau intr-un card, stau direct pe pagina,
   in acelasi rand cu „Despre" si „Produse si clienti". Doua fonduri diferite pe
   acelasi rand se citeau ca doua feluri de continut. */
.xab__cell{ min-width:0; flex:0 0 44%; scroll-snap-align:start;
  padding:15px 16px; border-radius:var(--xr-i); background:var(--xs-card); }
.xab__cl{ display:block; font:500 var(--xf-sm)/1.4 var(--xf); color:var(--xc-ink2); }
.xab__cl::first-letter{ text-transform:uppercase; }
.xab__cv{ display:block; margin-top:2px; font:600 var(--xt-5)/1.1 var(--xf);
  letter-spacing:-.014em; font-variant-numeric:tabular-nums; }
.xab__cn{ display:block; margin-top:4px; font:500 var(--xt-7)/1.2 var(--xf);
  font-style:normal; color:var(--xc-ink3); font-variant-numeric:tabular-nums; }
/* Bara indicatoare · pastrata din varianta anterioara: pista `--xs-track` si
   inaltimea `--xbar`, ca la `bar-range` (22-fair-value.css:83). */
.xab__ct{ position:relative; height:var(--xbar); margin:12px 0 0;
  border-radius:var(--xr-p); background:var(--xs-track); overflow:hidden; }
.xab__cf{ position:absolute; left:0; top:0; height:100%; border-radius:var(--xr-p); }

/* ══ SECTIUNEA „DESPRE COMPANIE" ════════════════════════════════════════════
   ⚠ NU mai trece prin blocul `sectiune`. Masurat: banda temei e o grila
     `240px | 1fr` (mds-design.css:481) si cele doua carduri primeau 395px din
     1100. E costul descris de tema la ARG-2 (`analiza.php:1812`) si platit o
     data de lotul 6. Sectiunile refacute emit propriul `<section id>`, ca
     `.xan` si `.xfv`.
   ⚠ `<section id>`, NU `<div id>`: ancora de scroll a temei e pe
     `.mdsx section[id]` (verdict.css:345). Cu `div`, titlul se lipeste de
     antetul lipicios. */
.xdp{ font-family:var(--xf); color:var(--xc-ink); letter-spacing:-.004em;
  margin-top:var(--xsp-sec,39px); overflow-x:clip; }
.xdp *{ box-sizing:border-box; border:0; }

/* ⚠⚠ TITLUL E ALB. Masurat pe stilul calculat inainte: sectiunea veche iesea
   `rgb(29,155,240)`, fiindca banda pornea cu `var(--cyan)` iar
   `mds-design.css:417` da `.mdsx .ch__t{color:var(--c)}`. Acelasi tipar ca
   titlul VERDE prins la lotul 6. In sectiunile refacute titlul e `--xc-ink`. */
.xdp__t{ margin:0; font-size:var(--xt-3); font-weight:700;
  line-height:1.15; letter-spacing:-.022em; color:var(--xc-ink); }
.xdp__t::first-letter{ text-transform:uppercase; }
.xdp__l{ margin:14px 0 0; font:400 var(--xf-sm)/1.55 var(--xf);
  letter-spacing:-.006em; color:var(--xc-ink); }
/* Randul de meta · `.xfv__meta` (22-fair-value.css:79). */
.xdp__meta{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:16px 0 0;
  font:400 var(--xf-sm)/1.45 var(--xf); color:var(--xc-ink2); }
.xdp__meta b{ color:var(--xc-ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* ── pista de carduri · PE ACELASI RAND SI PE MOBIL ─────────────────────────
   ⚠ Cerut explicit: cele doua carduri pe acelasi rand la ORICE latime, cu
     swipe pe mobil. Deci NU se mai comuta intre stiva si grila — e o singura
     pista, iar ce se schimba peste 900px e doar COTA: de la 86% (un card plus
     o bucata din al doilea, care semnaleaza swipe-ul) la exact jumatate minus
     gutiera, adica amandoua complet vizibile si fara derulare.
   ⚠ `align-items:start` — un card are cinci paragrafe, celalalt patru; egalizate
     la aceeasi inaltime arata prost (`raportari.css:591`). */
.xdp__pair{ min-width:0; display:flex; align-items:start; gap:var(--xdp-gap);
  margin:28px 0 0; padding:2px 0;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; }
.xdp__pair::-webkit-scrollbar{ display:none; }
/* Cardul · `.xan__c` (20-grup2.css:91).
   ⚠ `scroll-margin-top` e valoarea TEMEI (verdict.css:348), fiindca scriptul de
     revenire face `scrollIntoView({block:'start'})`; fara ea cardul ar ajunge
     sub antetul lipicios. Nu e o valoare proprie — e aceeasi cifra, citita. */
.xdp__c{ min-width:0; flex:0 0 86%; scroll-snap-align:center; scroll-margin-top:78px;
  display:flex; flex-direction:column;
  background:var(--xs-card); border-radius:28px; padding:26px 24px 28px;
  box-shadow:var(--xe-lift); }
.xdp__top{ margin:0 0 20px; }
.xdp__ct{ margin:0; font-weight:600; font-size:var(--xt-4);
  line-height:1.25; letter-spacing:-.012em; }
.xdp__cs{ margin:8px 0 0; font:400 var(--xf-sm)/1.5 var(--xf); color:var(--xc-ink2); }
.xdp__txt p{ margin:0; font:400 var(--xf-sm)/1.62 var(--xf); letter-spacing:-.006em;
  color:var(--xc-ink); }
.xdp__txt p + p{ margin-top:13px; }

/* ── plierea · pur CSS pentru DESCHIDERE ────────────────────────────────────
   ⚠ SELECTOR PE SUFIX DE ID, nu pe id fix (R7). Blocul genereaza `uid` per
     activ, ca doua sectiuni in aceeasi pagina sa nu-si comute textul reciproc.
     Lotul 6 a avut bugul invers — CSS pe id fix, marcaj cu uid — si coloana
     ramanea ascunsa in productie.
   ⚠ Caseta ramane in fluxul de tabulare (`opacity:0`, nu `display:none`),
     tiparul temei de la `raportari.css:497`.
   ⚠ `.xdp__fx` TREBUIE sa fie FRATE cu `.xdp__txt`: selectorul e `~`.
   ⚠ MOBILUL PRIMESTE MAI PUTIN (R24): cinci randuri, opt pe desktop. `1.62em` e
     exact inaltimea de rand a paragrafului, deci taietura cade INTRE randuri. */
.xdp__ft{ position:absolute; opacity:0; pointer-events:none; }
.xdp__ft:not(:checked) ~ .xdp__txt{
  max-height:calc(1.62em * 5);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
}

/* ⚠⚠ REVENIREA LA CARD DUPA INCHIDERE · `overflow-anchor` NU AJUNGE SINGUR.
   Cand textul pliat dispare, butonul de sub el urca si pagina ramane unde era:
   sub card, in sectiunea urmatoare. `overflow-anchor` mai la vale ii spune
   browserului de ce sa se agate (`raportari.css:578-582`).

   ⚠⚠ MASURAT, si nu e ce zice comentariul temei. Cu ancorarea CSS SINGURA, dupa
      inchidere varful cardului ajunge la +176px de marginea de sus la 390px si
      la +109px la 1440 — adica langa card, nu LA card. Cerinta e sa se revina
      la nivelul cardului, deci `assets/js/mds-xdp.js` NU e un fallback de
      Safari: e mecanismul. Cu el, varful cardului revine la +2px, exact unde
      era inainte de deschidere, la amandoua latimile, iar `scrollLeft`-ul
      pistei orizontale ramane 0 (swipe-ul nu se misca).
      Ancorarea CSS ramane fiindca reduce saltul pana cand scriptul intervine, si
      fiindca daca scriptul lipseste comportamentul degradeaza la „langa card"
      in loc de „doua ecrane mai jos". */
.xdp__txt{ overflow-anchor: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. */
.xdp__fx{ overflow-anchor:auto; }

/* Butonul · bara pe toata latimea, nu link mic. Motivul e scris in tema, la
   `raportari.css:508`: „prea mic ca sa para apasabil si sub pragul de 44px".
   ⚠ `margin-top:auto` il lipeste de baza cardului, ca doua carduri de inaltimi
     diferite sa aiba butoanele aliniate. */
/* ⚠ `--xr-p`, aceeasi raza ca `.xar__more` de la Argumente (14-argumente.css:120).
   Erau doua butoane cu acelasi rol si doua raze diferite pe aceeasi pagina. */
.xdp__fx{ display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin:22px 0 0; padding:13px 16px; min-height:44px;
  border-radius:var(--xr-p); background:var(--xs-inset);
  font:600 var(--xt-7)/1 var(--xf); color:var(--xc-ink); cursor:pointer;
  transition:background .15s ease; }
.xdp__c > .xdp__fx{ margin-top:auto; }
.xdp__fx:hover{ background:#141417; }
/* chevron desenat din doua muchii, ca sa nu depinda de vreun font
   (`raportari.css:529`) */
.xdp__fx::after{ content:""; width:9px; height:9px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-3px) rotate(45deg); transition:transform .18s ease; }
/* ⚠⚠ FONDUL RAMANE. Era `transparent` la deschis: butonul disparea si ramanea doar
   textul „Vezi mai putin", plutind pe fondul cardului. Un control care se vede
   inainte de apasare si dispare dupa nu mai arata ca poate fi apasat inapoi.
   Culoarea textului ramane mai stinsa — asta e destul ca sa spuna „deja deschis". */
.xdp__ft:checked ~ .xdp__fx{ color:var(--xc-ink2); }
.xdp__ft:checked ~ .xdp__fx::after{ transform:translateY(2px) rotate(-135deg); }
.xdp__fb{ display:none; }
.xdp__ft:checked ~ .xdp__fx .xdp__fa{ display:none; }
.xdp__ft:checked ~ .xdp__fx .xdp__fb{ display:block; }

/* ⚠ SEPARATORUL DE SUB SECTIUNE. Dupa `#despre` urmeaza capitolul 40, o `.band`
   cu `border-top` de la tema — o linie de 1px lipita sub doua carduri cu
   elevatie proprie. Se stinge, ca la `20-grup2.css:203`.
   ⚠ (0,3,0) fata de (0,2,0) a temei, deci castiga indiferent de ordinea de
     tiparire (R5). */
.mdsx .xdp + .band{ border-top:0; background-image:none; }

/* ⚠ Miscare redusa: fara snap fortat si fara tranzitii pe buton. */
@media (prefers-reduced-motion:reduce){
  .xab__tri,.xdp__pair{ scroll-snap-type:none; }
  .xdp__fx,.xdp__fx::after{ transition:none; }
}

/* ══ DESKTOP · pragul temei, pe CONTAINER (20-grup2.css:207) ══ */
@container mdsx (min-width:900px){
  /* ⚠ Trei celule umplu exact randul. A PATRA — `dividende`, prezenta la sase
     din cele sapte companii — depaseste si pista deruleaza. Deci derularea pe
     desktop exista si e functionala, dar se ANGAJEAZA doar cand chiar e ceva de
     vazut dincolo de margine. */
  .xab__cell{ flex:0 0 calc((100% - 2 * var(--xab-gap)) / 3); }
  /* ⚠ Ambele carduri complet vizibile: 543px la o coloana de 1100 — exact
     latimea masurata la Argumente dupa lotul 6. */
  .xdp__c{ flex:0 0 calc((100% - var(--xdp-gap)) / 2);
    border-radius:var(--xr-c); padding:29px 31px 31px; scroll-margin-top:82px; }
  .xdp__ft:not(:checked) ~ .xdp__txt{ max-height:calc(1.62em * 8); }
}