/* ============================================================================
   date-cheie.css · §Date cheie — trei carduri pe desktop.   DATE-CHEIE-1
   SCARA-STRICTA

   CE SCHIMBA
   ----------
   Azi sectiunea e UN card cu trei coloane despartite de o linie verticala.
   Pe desktop devin TREI carduri alaturate; pe mobil ramane exact cum e —
   un card cu trei taburi si swipe.

   CUM, FARA MARCAJ NOU
   --------------------
   Invelisul `.cd.facts` isi pierde pe desktop hainele de card (fundal, bordura,
   raza, padding) si ramane doar container de grila; fiecare `.facts__c` le
   primeste in schimb. Acelasi marcaj, doua infatisari.

   ⚠ Se tipareste DUPA `mds-design.css` (ARH-SEC-3), deci toate suprascrierile
     de mai jos merg la specificitate EGALA. `.facts__c + .facts__c` are (0,3,0)
     in tema si tot (0,3,0) aici — castiga ultima tiparita.
   ⚠ Zero valori in px: paddingul orizontal de 30px si cel de sus de 18px raman
     ale temei, se adauga doar `padding-bottom` din scara.
   ============================================================================ */

@container mdsx (min-width:900px) {

	/* ── invelisul nu mai e card ──────────────────────────────────────────────
	   `.mdsx .cd` da fundal, bordura de 1px, raza si padding. Toate patru se
	   sterg: ce ramane e doar grila. */
	.mdsx .facts {
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
	}

	/* ── grila primeste gutiera ───────────────────────────────────────────────
	   In tema coloanele stau lipite si sunt despartite de o linie verticala.
	   Cu carduri separate, linia dispare si e inlocuita de spatiu — acelasi
	   ritm de 22px ca intre doua carduri `.cd-row`. */
	.mdsx .facts__track {
		gap: var(--s-ritm);
	}

	/* ── fiecare coloana devine card ──────────────────────────────────────────
	   Valorile sunt cele ale lui `.mdsx .cd` (mds-design.css:718), luate din
	   tokenii care il oglindesc, nu rescrise de mana. */
	.mdsx .facts__c {
		/* ⚠ Tema da `padding:18px 30px 0` — 18 sus, ZERO jos, fiindca inainte
		     coloana statea intr-un card care avea el paddingul de jos. Acum
		     fiecare coloana E card, deci are nevoie de acelasi spatiu sus si
		     jos. Orizontalul de 30px ramane al temei. */
		padding-top: var(--s-5);
		padding-bottom: var(--s-5);
		background: var(--cd-bg);
		border: 1px solid var(--cd-line);
		border-radius: var(--cd-r);
	}

	/* Linia despartitoare dintre coloane nu mai are sens: fiecare card are deja
	   bordura lui, iar doua borduri alaturate ar face o dunga dubla. */
	.mdsx .facts__c + .facts__c {
		border-left: 1px solid var(--cd-line);
	}

	/* Nota de subsol iese de sub cardul unic si devine nota a sectiunii: se
	   aliniaza la marginea benzii, nu la paddingul de 30px al unei coloane care
	   nu mai exista. */
	.mdsx .facts__note {
		margin: var(--s-4) 0 0;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   SEC-LOT6 · titlurile de card, nota si taburile.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── TITLURILE DE COLOANA ───────────────────────────────────────────────────
   NU MAI E NICIO REGULA AICI, si asta e reparatia.

   Titlul primeste in marcaj clasa `cd__ttl` — aceeasi pe care o poarta titlul
   cardului „Recomandarea analistilor”. Fontul si marimea vin din `.mdsx
   .cd__ttl` (mds-design.css:721), care e definit DUPA `.mdsx .facts__h` (:651)
   si are aceeasi specificitate, deci castiga fara nicio interventie.

   ⚠ Trei versiuni la rand am scris aici o regula noua: intai `font:` complet cu
     alta familie, apoi `font-size` prin token, apoi `font-size` literal cu
     specificitate marita. Toate trei erau raspunsul gresit la aceeasi
     intrebare: nu trebuia o regula noua, trebuia clasa care exista deja. */

/* ── #5 · NOTA DE SUBSOL, LA MARIMEA DISCLAIMERULUI ─────────────────────────
   Nota era 11px, disclaimerul de sub verdict (`.vdisc`) 12,5px. Doua texte cu
   acelasi rol — „de unde vin cifrele, ce nu sunt”.

   ⚠ Nota vine LA disclaimer, nu invers: `--f-nota` e 12,5px, exact valoarea lui
     `.vdisc`. In lotul trecut coborasem amandoua la 12px, ca sa incapa pe
     scara — dar `.vdisc` nu era de schimbat. `.vdisc` ramane neatins. */
.mdsx .facts__note{
	font-size:var(--f-nota);
	line-height:var(--lh-corp);
	/* ⚠ #2 · Tema pune linia DEASUPRA notei (`border-top` + `padding-top`), deci
	     textul cadea sub separator. Se intoarce: nota intai, linia dupa ea.
	     `border-top` se anuleaza explicit, nu se lasa pe seama scurtaturii. */
	margin-top:var(--s-4);
	padding-top:0;
	border-top:0;
	padding-bottom:var(--s-4);
	border-bottom:1px solid var(--cd-line);
}

/* ── #6 · TABURILE, DEASUPRA CARDULUI, CU BORDURA LOR ───────────────────────
   Taburile au iesit din card (`analiza-facts.php`). Ca sa se citeasca drept
   comanda a cardului de dedesubt, primesc aceeasi bordura si aceeasi raza ca
   el. Fundalul ramane cel de pista (mai deschis decat cardul), ca sa nu para
   ca sunt inca un card.

   ⚠ Doar pe mobil: pe desktop taburile sunt `display:none` si exista trei
     carduri, nu unul. */
@container mdsx (max-width:899px){
	.mdsx .facts__tabs{
		margin:0;
		border:1px solid var(--cd-line);
	}
	/* Cardul urmeaza taburile: ritmul standard intre ele. */
	.mdsx .facts__tabs + .facts{
		margin-top:var(--s-3);
	}
	/* Etichetele: putin mai apasate, ca sa se vada ca sunt comenzi. */
	.mdsx .facts__tab{
		font-weight:700;
	}

	/* ⚠ Pista avea `margin-top:16px` (mds-design.css) pentru spatiul dintre
	     taburile de DEASUPRA ei si prima coloana. Taburile au iesit din card,
	     deci marja a ramas fara motiv si se aduna cu paddingul cardului: 20 + 16
	     = 36px de gol pana la primul titlu. */
	.mdsx .facts__track{
		margin-top:0;
	}

	/* ⚠ TABUL ACTIV, PE MOBIL. Rezerva din temă (`mds-design.css:638-641`) cere
	     ca taburile sa fie DESCENDENTI ai lui `.facts`; de cand au iesit din
	     card, selectorii aceia nu mai au pe ce cadea, iar `.is-on` il pune
	     scriptul. Fara JavaScript niciun tab nu mai era colorat.
	     Rezerva se rescrie pe invelisul nou. */
	.mdsx .facts__w:not(.has-js):not(:has(:target)) .facts__tab:first-child,
	.mdsx .facts__w:not(.has-js):has(#fc1:target) .facts__tab:nth-child(1),
	.mdsx .facts__w:not(.has-js):has(#fc2:target) .facts__tab:nth-child(2),
	.mdsx .facts__w:not(.has-js):has(#fc3:target) .facts__tab:nth-child(3){
		background:color-mix(in srgb,var(--tc) 15%,transparent);
		color:var(--tc);
	}
}


/* ══ #4 · LINIA DE SUB TITLUL DE CARD, DINTR-O MARGINE IN ALTA ══════════════
   Linia de sub „Preț și tranzacționare” nu e un separator desenat anume: e
   `border-top`-ul primului rând de metrici (`.mdsx .fx + .fx`,
   mds-design.css). Randul sta in paddingul de 30px al cardului, deci linia se
   opreste la 30px de fiecare margine.

   In cardurile „Recomandarea analistilor” si „Preț-țintă” linia e a lui
   `.cd__top`, care are paddingul PE EL: bordura cade la marginea cardului.

   Aici se obtine acelasi lucru scotand rândul in afara paddingului si punandu-i
   paddingul inapoi pe el — deci textul ramane aliniat, doar linia se lungeste.

   ⚠ Numai pe desktop: pe mobil coloanele nu sunt carduri si nu au paddingul de
     30px, deci n-ar avea ce sa depaseasca.
   ⚠ `.fx--ascuns` (rândul cu radioul „niciunul”) e primul din lista, deci
     primul rând VIZIBIL e `.fx--ascuns + .fx`. */
@container mdsx (min-width:900px){
	.mdsx .facts__c .fx--ascuns + .fx{
		margin-inline:calc(-1 * var(--s-cd-x));
		padding-inline:var(--s-cd-x);
	}
}