/* ============================================================================
   01-blocuri.css · blocul generic de secțiune.   ARH-SEC-3
   SCARA-STRICTA

   Trei lucruri, toate cerute de secțiunile care urmeaza:

     1. TITLUL DE SECȚIUNE NU MAI E COLORAT
     2. VARIANTA `band--lata`  — conținut pe toata latimea
     3. `autogrid`             — N carduri pe rând, câte încap

   Se tipareste DUPA `mds-design.css` — vezi `inc/sections/01-ordine-css.php`,
   care adauga dependenta `mds-design` pe tot folderul. Deci suprascrierile de
   aici functioneaza la specificitate EGALA, ca in orice alt fisier din
   `assets/css/sections/`.
   ============================================================================ */

/* ══ 1 · TITLUL DE SECȚIUNE ═════════════════════════════════════════════════
   `mds-design.css:408` da `.mdsx .ch__t{ color:var(--c) }` — titlul preia
   culoarea de accent a capitolului. Pe o pagina cu zeci de secțiuni, zece
   titluri in zece culori nu mai sunt o ierarhie, sunt zgomot; iar `--c` e
   informatie (accentul capitolului), nu decor, deci trebuie sa rămână pe
   elementul care o duce fara sa se citeasca drept judecata: linia de 2px de
   sus (`.band::before`) si cifrele mari (`.big b`), ambele NEATINSE.

   ⚠ SINGURA regula din tot lotul care cade pe marcaj EXISTENT. Se vede imediat
     pe cele patru capitole deja randate. Cardul de verdict NU e afectat:
     titlul lui e `.cd__ttl` (`:719`), care e deja `var(--ink)`.
   ⚠ Se anuleaza stergand aceste doua linii. Nimic altceva nu depinde de ele. */
.mdsx .ch__t{ color:var(--ink); }

/* ══ 2 · VARIANTA LATA ══════════════════════════════════════════════════════
   Pe desktop, `mds-design.css:472` face din `.band` o grila
   `240px | 1fr` cu gutiera de 48px si trimite tot ce nu e `.ch` in coloana a
   doua (`:478`). Pentru un tabel sau o lista de metrici e exact ce trebuie:
   eticheta stă lipicioasa la stânga.

   Pentru conținut in DOUA COLOANE e o capcana masurata: pe o coloana de
   1000px, `.pc` (pro/contra) primeste (1000 − 288) / 2 = 356px per coloana in
   loc de 500px. De aceea argumentele au fost facute card la inceput — cardul
   scapa de grila. `band--lata` da acelasi scap fara card: antet sus, pe toata
   latimea, conținut dedesubt, pe toata latimea.

   ⚠ Pe mobil `.band` e deja bloc, deci varianta nu schimba nimic acolo. Toate
     regulile de mai jos sunt in container query, ca sa fie evident ca nu ating
     randarea mobila. */
@container mdsx (min-width:900px){
  .mdsx .band--lata{ display:block; }

  /* `.ch` revine la antet orizontal: pe desktop tema il face coloana
     lipicioasa (`:483`) — flex pe coloana, `position:sticky`, fara bordura
     jos. Aici redevine ce e pe mobil (`:406`). */
  .mdsx .band--lata .ch{
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:space-between;
    gap:var(--s-1) var(--s-3);
    padding:0;
  }

  /* `.ch__s` primeste pe desktop `width:100%`, bordura sus si `white-space:
     normal` (`:487`), ca reper sub titlul din coloana. In antet orizontal
     redevine o eticheta pe un rând. */
  .mdsx .band--lata .ch__s{
    width:auto;
    padding-top:0;
    border-top:0;
    white-space:nowrap;
  }

  /* Fraza editoriala isi recapata marja de sus: in grila era primul element al
     coloanei a doua, deci tema i-o scoate (`:480`). Sub un antet orizontal, o
     are din nou. */
  .mdsx .band--lata .dek{ margin-top:var(--s-4); }
}

/* ══ 3 · GRILA CU CÂTE ÎNCAP ════════════════════════════════════════════════
   `--min` e latimea minima a unui card; peste ea, câte încap. Nicio valoare de
   coloana nu se mai scrie in CSS-ul secțiunii, doar `--min` in marcaj.

   ⚠ `auto-fit`, nu `auto-fill`. Cu `auto-fill`, o coloana de 1040px si
     `--min:240px` produce 4 piste; trei carduri ocupa trei si lasa un gol la
     dreapta. `auto-fit` colapseaza pistele goale, deci trei carduri se intind
     pe toata latimea. Handoff-ul cerea literal `auto-fill` (T3); abaterea e
     deliberata si e vizibila in preview pe cazul cu trei carduri.
   ⚠ `.cd` are `margin-top:22px` (`:717`), potrivit pentru carduri stivuite,
     greșit intr-o grila: primul rând ar fi impins, al doilea nu. */
.mdsx .autogrid{
  display:grid;
  gap:var(--s-ritm);
  grid-template-columns:repeat(auto-fit,minmax(var(--min,var(--s-min-card)),1fr));
  align-items:start;
}
.mdsx .autogrid > .cd{ margin-top:0; }


/* ══ 4 · FRAZA DE SUB TITLU E TEXT NORMAL ═══════════════════════════════════
   `mds-design.css:404` face din `.dek` un al doilea titlu: fontul de titluri
   (`--h`), 17px pe mobil si 19px pe desktop, `font-weight:600`. Doua titluri
   unul sub altul nu formeaza o ierarhie — al doilea concureaza cu primul.

   Rolul frazei e sa spuna in cuvinte simple ce urmeaza. Deci: fontul de text,
   marimea corpului, greutate normala, culoare secundara.

   ⚠ Ramane `<p class="dek">`: zero marcaj schimbat, si regula
     `.mdsx .dek+*{margin-top:16px!important}` continua sa dea spatiul pana la
     continut.
   ⚠ Separatorul de sub antet — linia pe care o adaugasem EU in `band--lata` —
     e scos mai sus in acest fisier. Titlul si fraza nu au nevoie de o linie
     intre ele si continut: spatiul o face. */
.mdsx .band p.dek,
.mdsx .dek{
	font-family:var(--b);
	font-size:var(--f-corp);
	font-weight:400;
	line-height:var(--lh-corp);
	color:var(--ink-2);
	letter-spacing:0;
}


/* ══ 5 · FARA LINIE INTRE TITLU SI FRAZA ════════════════════════════════════
   `mds-design.css:406` da `.mdsx .ch{ padding-bottom:13px; border-bottom:1px
   solid var(--line) }` — o linie sub titlu, INAINTEA frazei. Deci titlul era
   despartit de propria lui explicatie.

   Titlul, fraza si continutul sunt un singur bloc; ce le separa de restul
   paginii e spatiul dintre benzi, nu o linie in mijlocul lor.

   ⚠ Cade pe TOATE benzile, si `banda` si `lata`, pe mobil si pe desktop —
     e aceeasi regula peste tot. */
.mdsx .ch{
	padding-bottom:0;
	border-bottom:0;
}

/* ══ 6 · BANDA COLORATA, SUB TITLU SI SUB FRAZA ═════════════════════════════
   `mds-design.css:187` o pune ca `.band::before`, absolut, la `top:-1px` —
   deasupra titlului. Trece dedesubt, dupa titlu SI dupa fraza introductiva, la
   toate sectiunile, pe mobil si pe desktop.

   ⚠ DOUA GRESELI IN VERSIUNEA PRECEDENTA, amandoua reparate aici:

     1. LATIMEA CAT COLOANA, PE DESKTOP. Scrisesem `flex:0 0 100%` impreuna cu
        `width:240px`. `flex:0 0 100%` inseamna `flex-basis:100%`, iar pe un item
        de flex BASIS-ul bate `width` — deci linia se intindea pe toata coloana.
        Acum latimea e impusa cu `max-width`, pe care basis-ul NU o poate
        depasi: `flex-basis` cere 100%, `max-width` taie la 56px (mobil) sau
        240px (desktop).

     2. PE DESKTOP SARISE INAPOI SUB TITLU. Mutasem accentul de pe `.dek` pe
        `.ch` la latimi mari, deci nu mai era sub fraza, ci sub titlu. Acum sta
        sub fraza pe ambele latimi; pe `.ch` cade doar la sectiunile care NU au
        frazaintroductiva.

   ⚠ `flex:0 0 100%` ramane, dar are un singur rol: la sectiunile fara fraza,
     `.ch` e `display:flex` si pseudo-elementul lui e ITEM de flex — fara basis
     100% s-ar aseza langa titlu in loc sa treaca pe rândul lui. Pe `.dek`, care
     e `<p>`, proprietatea e ignorata: nu e item de flex.
   ⚠ Tot pseudo-element: zero clase noi, zero marcaj nou. */
.mdsx .band::before{
	display:none;
}
.mdsx .band .dek::after,
.mdsx .band:not(:has(.dek)) .ch::after{
	content:"";
	display:block;
	flex:0 0 100%;
	width:var(--s-accent);
	max-width:var(--s-accent);
	height:2px;
	margin-top:var(--s-4);
	background:var(--c);
}

@container mdsx (min-width:900px){
	.mdsx .band .dek::after,
	.mdsx .band:not(:has(.dek)) .ch::after{
		width:var(--s-col);
		max-width:var(--s-col);
	}
}


/* ══ 7 · FARA LINIE LIPITA DE MARGINEA CARDULUI DE VERDICT ══════════════════
   `mds-design.css:186` da fiecarei benzi `border-top:1px solid var(--line)` —
   linia care desparte doua sectiuni. Dupa cardul de verdict insa banda incepe
   imediat sub el, fara nicio marja, deci linia cade LIPITA de marginea de jos a
   cardului si arata ca o dunga in plus pe card, nu ca un separator.

   ⚠ Doar dupa cardul de verdict (`.cd--vh`). Intre doua benzi obisnuite linia
     ramane: acolo isi face treaba. */
.mdsx .cd--vh + .band{
	border-top:0;
}

/* ══ 8 · ACCENTUL LA §VALOARE JUSTA ═════════════════════════════════════════
   Regula generala pune accentul dupa fraza introductiva. La Valoare justa,
   fraza e textul lung despre modele, iar sub el accentul rupea citirea. Acolo
   accentul vine imediat dupa reperul de pret — „prețul e de X ori estimarea
   celor 4 modele” (`.vj__chs`), ultimul rând al antetului.

   ⚠ `:has()` alege sectiunea dupa CONTINUT, nu dupa o clasa noua pe banda: nu
     se atinge marcajul. */
.mdsx .band:has(.vj__chs) .dek::after{
	display:none;
}
.mdsx .band .vj__chs::after{
	content:"";
	display:block;
	width:var(--s-accent);
	max-width:var(--s-accent);
	height:2px;
	margin-top:var(--s-4);
	background:var(--c);
}

@container mdsx (min-width:900px){
	.mdsx .band .vj__chs::after{
		width:var(--s-col);
		max-width:var(--s-col);
	}
}

/* ══ 9 · PASTILA PE RÂNDUL TITLULUI ═════════════════════════════════════════
   Marcajul a fost schimbat (`analiza-band.php`): pastila e acum FRATE al lui
   `<h3>`, nu copil al metei. Aici ramane doar asezarea.

   `.ch` e flex cu `justify-content:space-between`, deci fara nicio interventie
   pastila ar fi impinsa la capatul opus al rândului. Grupul „titlu + pastila”
   trebuie sa stea lipit la stanga, iar meta sa treaca pe rândul urmator. */
.mdsx .ch .vj__chip{
	margin-top:0;
	margin-right:auto;
	flex:0 1 auto;
	min-width:0;
	align-self:center;
}
.mdsx .ch .ch__s{
	flex:0 0 100%;
}