/* articol.css — arhetipul Articol (DESIGN-SPEC §6): coloana de 720 px, cuprinsul lipit în dreapta pe desktop (familia spatial),
   tabelele lizibile la 390 px, casetele „Ce verifici” cu semnul ›. Vine după comun.css; culorile vin numai din tokens.css. */

.articol { padding-block: var(--acd-sp-card) var(--acd-sp-sectiune); }
.articol__grila { display: grid; gap: var(--acd-sp-titlu); }
.articol__grila > * { min-width: 0; max-width: var(--acd-coloana); }


/* Capul: eticheta, H1 cu bara de brad pe termen (1 pe pagină), prima frază care răspunde titlului, autorul, data, partajarea */
.articol__cap { display: grid; gap: var(--acd-sp-card); }
.articol__cap .eticheta { margin-top: var(--acd-sp-micro); }
.articol__lede { font-size: 1.25rem; line-height: 1.5; }
.articol__meta { font-size: var(--acd-mic); line-height: 1.5; color: var(--acd-otel); }
.partajare { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; font-size: var(--acd-mic); padding-top: 8px; border-top: 2px solid color-mix(in srgb, var(--acd-ardezie) 12%, var(--acd-ceata)); }
.partajare__eticheta { font-weight: 700; }
.partajare a, .partajare button { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: .25em; text-decoration-color: var(--acd-padure); }
.partajare button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.partajare button[hidden] { display: none; }

/* Pozele: cutia rezervată prin raport (E38); umbra-semnătură doar pe poza de sus (§7, 1 pe pagină) */
.articol__figura { display: grid; gap: 14px; }
.articol__figura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.articol__poza img { aspect-ratio: 3 / 2; box-shadow: var(--acd-umbra-semnatura); }
.articol__figura figcaption { font-size: var(--acd-mic); line-height: 1.5; color: var(--acd-otel); }
.articol__poza figcaption { margin-top: 4px; }
/* P1 (S25b): poza de sus stă în cap, sub H1; pe telefon în 4 : 3, ca să țină primul ecran; de la 1024 se mută după partajare, unde era */
@media (max-width: 767px) { .articol__poza img { aspect-ratio: 4 / 3; } }

/* Corpul: capitolele, în ritmul spațierii (E1) */
.articol__corp { display: grid; gap: var(--acd-sp-rand); }
.articol__corp > section > * + * { margin-top: 1.1em; }
.articol__corp > section > h2 + * { margin-top: calc(var(--acd-sp-titlu) / 2); }
.articol__corp > section > h3 { margin-top: var(--acd-sp-titlu); }
.articol__corp > section > h3 + * { margin-top: .6em; }
.articol__corp > section > .articol__figura, .articol__corp > section > .verifici, .articol__corp > section > .tabel { margin-top: var(--acd-sp-card); }
.articol__corp a:not(.buton) { text-underline-offset: .2em; }
.articol__corp a:not(.buton):hover { text-decoration-color: var(--acd-padure); }
.articol__corp .butoane .semn { margin-left: .1em; }

/* „Ce verifici”: o cutie cu umbra treptei, fără chenar (E4), marcată cu semnul › */
.verifici { display: grid; gap: 12px; padding: var(--acd-sp-card); background-color: var(--acd-alb); box-shadow: var(--acd-umbra-treapta); }
.verifici__titlu { display: flex; align-items: center; gap: .45em; font: 600 var(--acd-h3) / 1.25 var(--acd-font-titlu); }
.verifici__titlu .semn { width: .42em; height: .42em; color: var(--acd-padure); }

/* Formula: fără umbră, deci linia de 2 px (E4); pe verticala textului */
.formula { padding-block: 14px; border-block: 2px solid color-mix(in srgb, var(--acd-ardezie) 14%, var(--acd-ceata)); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Tabelul: încape la 320 px, deci nu derulează și nu cere tabindex (E39) */
.tabel { overflow-x: auto; }
.tabel table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabel caption { caption-side: top; text-align: left; padding-bottom: 10px; font-size: var(--acd-mic); line-height: 1.45; color: var(--acd-otel); }
.tabel th, .tabel td { padding: 10px 0 10px 12px; text-align: right; border-bottom: 2px solid color-mix(in srgb, var(--acd-ardezie) 14%, var(--acd-ceata)); }
.tabel tr > :first-child { padding-left: 0; text-align: left; }
.tabel thead th { vertical-align: bottom; font: 600 var(--acd-mic) / 1.3 var(--acd-font-titlu); border-bottom-color: var(--acd-ardezie); }
.tabel tbody th { font-weight: 700; }

/* Exemplele: carduri cu intrările scrise */
.exemple { list-style: none; display: grid; gap: var(--acd-sp-card); }
.exemplu { display: grid; gap: 10px; padding: var(--acd-sp-card); background-color: var(--acd-alb); box-shadow: var(--acd-umbra-treapta); }
.exemplu__titlu { font: 600 1.125rem / 1.3 var(--acd-font-titlu); }
.exemplu dl { margin: 0; display: grid; gap: 8px; font-size: var(--acd-mic); line-height: 1.45; font-variant-numeric: tabular-nums; }
.exemplu dl div { display: grid; gap: 0 12px; }
.exemplu dt { color: var(--acd-otel); }
.exemplu dd { margin: 0; }
.exemplu__rez { padding-top: 8px; border-top: 2px solid color-mix(in srgb, var(--acd-ardezie) 12%, var(--acd-alb)); }
.exemplu__rez b { font-size: 1.125rem; }
.exemplu__pret b { font-size: 1.0625rem; }
@media (min-width: 640px) { .exemplu dl div { grid-template-columns: 8.5rem minmax(0, 1fr); } }


/* Cuprinsul: pe mobil, un <details> închis sub cap; pe desktop, lipit în dreapta și deschis de JS */
.cuprins > summary {
  display: flex; align-items: center; justify-content: space-between; gap: .6em; min-height: 48px; padding: .6rem 1rem; list-style: none; cursor: pointer;
  border: 2px solid var(--acd-ardezie); border-radius: var(--acd-raza-buton); font: 700 var(--acd-mic) / 1.2 var(--acd-font-text);
}
.cuprins > summary::-webkit-details-marker { display: none; }
.cuprins > summary .semn { transform: rotate(135deg) translate(-2px, 2px); }
.cuprins[open] > summary .semn { transform: rotate(-45deg) translate(-2px, 2px); }
.cuprins ol { list-style: none; display: grid; margin-top: 8px; }
.cuprins a {
  display: flex; align-items: center; min-height: 44px; padding: 6px 0 6px 14px; font-size: var(--acd-mic); line-height: 1.35; text-decoration: none;
  border-left: 2px solid color-mix(in srgb, var(--acd-ardezie) 14%, var(--acd-ceata)); transition: border-left-color var(--acd-t1) var(--acd-curba);
}
.cuprins a:hover { text-decoration: underline; text-decoration-color: var(--acd-padure); text-underline-offset: .25em; }
.cuprins a[aria-current] { font-weight: 700; border-left-color: var(--acd-padure); }

/* Subsolul articolului: sursele și ghidurile legate */
.articol__subsol { display: grid; gap: var(--acd-sp-titlu); padding-top: var(--acd-sp-titlu); border-top: 2px solid var(--acd-ardezie); }
.articol__subsol-titlu { font: 600 var(--acd-h3) / 1.25 var(--acd-font-titlu); }
.legate { list-style: none; display: grid; margin-top: 12px; border-top: 2px solid color-mix(in srgb, var(--acd-ardezie) 14%, var(--acd-ceata)); }
.legate a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding-block: 10px; font: 600 1.125rem / 1.3 var(--acd-font-titlu); text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--acd-ardezie) 14%, var(--acd-ceata)); }
.legate a:hover { text-decoration: underline; text-decoration-color: var(--acd-padure); text-underline-offset: .25em; }
.legate .semn { color: var(--acd-padure); }

@media (min-width: 1024px) {
  .articol { padding-top: var(--acd-sp-titlu); }
  /* 720 px de text în stânga, cuprinsul la marginea dreaptă a containerului (asimetria familiei spatial) */
  .articol__grila { grid-template-columns: minmax(0, var(--acd-coloana)) minmax(220px, 280px); justify-content: space-between; column-gap: var(--acd-sp-rand); }
  .articol__grila > :not(.articol__cuprins) { grid-column: 1; }
  .articol__cuprins { grid-column: 2; grid-row: 1 / span 3; }
  .articol__cap > .articol__poza { order: 1; margin-top: calc(var(--acd-sp-titlu) - var(--acd-sp-card)); }
  .cuprins { position: sticky; top: calc(var(--acd-antet) + 24px); }
  .js .cuprins > summary { display: none; }
  .js .cuprins nav::before { content: "Cuprins"; display: block; margin-bottom: 8px; font: 600 var(--acd-eticheta) / 1.3 var(--acd-font-titlu); letter-spacing: .12em; text-transform: uppercase; color: var(--acd-otel); }
  .js .cuprins ol { margin-top: 0; }
}
/* v25 · S24b: exemplele de calcul, pe panoul închis (comun.css); rezultatul e cifra neon, ca în calculator */
.exemplu.pe-inchis dt { color: color-mix(in srgb, var(--acd-ceata) 80%, var(--acd-ardezie)); }
.exemplu.pe-inchis .exemplu__rez { border-top-color: rgb(248 250 252 / .12); }
.exemplu.pe-inchis .exemplu__rez b { color: var(--acd-neon); text-shadow: var(--acd-stralucire); }
.exemplu.pe-inchis .exemplu__pret b { color: var(--acd-cer); }