/* ============================================================
   consiliericrestini.ro — design system
   Limbaj vizual cald si flat: roz prafuit ca fundal, verde
   padure ca voce, terracotta doar pe actiuni. Colturi drepte,
   fara umbre, fara gradiente. 8px spacing grid.
   ============================================================ */

/* ---------- Tokens: light (default) ---------- */
:root {
    /* Valorile de brand vin din logo (Logo/ConsilieriCrestini patrat color.svg):
       verde #023F2D, terracotta #C45E2D, crem #FCFAF7 — tokenurile UI se
       aliniaza la logo, nu invers (doua verzi concurente s-ar vedea). */
    --paper:        #F2E7DF;   /* roz prafuit — fundalul cald al paginii */
    --surface:      #FCFAF7;   /* crem (din logo) — carduri si continut */
    --surface-sunk: #EFE2D8;
    --ink:          #1F2A22;
    /* #5A6B5E dadea 4.47:1 pe --surface-sunk — sub AA, si acolo ajung textele
       secundare din .section--alt (.section__head p, .muted, .article-row time),
       plus segmentul inactiv din .density-toggle. Un pas mai jos le trece pe
       toate: 5.68:1 pe --surface, 4.87:1 pe --paper, 4.66:1 pe --surface-sunk. */
    --ink-2:        #58685C;
    --line:         #DFD2C7;   /* separatoare si muchii de card — decorativ */
    /* --line-strong e singura afordanta a controalelor (sistem flat, fara
       umbre): input-uri, chips, .btn--ghost, .theme-toggle, .spec-card__cta.
       WCAG 1.4.11 cere 3:1 pentru conturul unei componente, iar taupe-ul vechi
       #C3B0A2 dadea 2.01:1 pe --surface. Aceeasi familie calda, cu doua trepte
       mai jos: 4.00:1 pe --surface, 3.43:1 pe --paper, 3.28:1 pe --surface-sunk.
       Tine si .step__n (text mare decorativ, era 2.01:1). */
    --line-strong:  #957660;
    --brand:        #023F2D;   /* verde padure (din logo) — vocea principala */
    --brand-hover:  #02291E;
    --on-brand:     #FCFAF7;

    /* Terracotta (din logo) e EXCLUSIV actiune (butoane primare, accente) —
       niciodata fundal de sectiune. Pe crem, #C45E2D da 4.04:1 — sub AA pentru
       text mic; pentru text si linkuri intra --terra-ink.
       Cifrele lui sunt masurate pe toate cele trei suprafete deschise, nu doar
       pe --surface: 5.65:1 pe --surface, 4.85:1 pe --paper, 4.64:1 pe
       --surface-sunk. Ultima conteaza cel mai mult — .eyebrow si .link-more cad
       pe --surface-sunk in .section--alt, unde vechiul #A84E22 dadea 4.38:1.
       Ca fundal (.btn--secondary) poarta --on-brand la 5.65:1. */
    --terra:        #C45E2D;
    --terra-ink:    #A24B21;
    --terra-soft:   #F4DFD2;
    --terra-hover:  #8F3E17;

    /* Pop-ul cald e exclusiv pentru suprafete inchise (footer, banda CTA):
       terracotta luminata, ilizibila pe deschis, calda pe verde adanc. */
    --pop:          #E08B5A;
    --danger:       #8C2F1B;
    /* Suprafete care NU se inverseaza in tema dark (footer, banda CTA). */
    --surface-deep: #02291E;
    --on-deep:      #F2E7DF;

    /* Flat: fara umbre. Tokenurile raman definite pentru ca ~30 de componente
       le refera; valoarea `none` le stinge pe toate dintr-un singur loc. */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;

    /* 8px grid — neschimbat fata de sistemul mostenit. */
    --s0: 4px;  --s1: 8px;  --s2: 16px; --s3: 24px;
    --s4: 32px; --s5: 48px; --s6: 64px; --s7: 112px; --s8: 160px;

    /* Flat: colturi drepte peste tot — decizie de brand, nu se ajusteaza
       per-componenta. Chips-urile folosesc --r-sm, ca orice alt control.
       Singurele exceptii sunt cercurile (avatar, monograma), care isi scriu
       `border-radius: 50%` direct: sunt repere de identitate, nu controale. */
    --r-sm: 0;
    --r: 0;
    --r-lg: 0;

    --display: 'Archivo', system-ui, -apple-system, sans-serif;
    --text: 'Source Sans 3', system-ui, -apple-system, sans-serif;

    /* type scale — neschimbata */
    --t-xs: 0.8125rem;
    --t-sm: 0.9375rem;
    --t-0:  1.0625rem;
    --t-1:  1.3125rem;
    --t-2:  2rem;
    --t-3:  2.75rem;
    --t-4:  clamp(2.75rem, 6.4vw, 5rem);

    --wrap: 1280px;
    color-scheme: light;
}

/* ---------- Tokens: dark ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper:        #131F18;
        --surface:      #1B2A21;
        --surface-sunk: #16231B;
        --ink:          #EAE4DA;
        --ink-2:        #A8B3A6;
        --line:         #2C3E33;
        /* Ca in tema deschisa: conturul de control trebuie sa treaca 3:1.
           #46604F dadea 2.18:1 pe --surface; #5C7D67 da 3.28:1 pe --surface,
           3.71:1 pe --paper, 3.55:1 pe --surface-sunk. */
        --line-strong:  #5C7D67;
        --brand:        #9CC3AB;
        --brand-hover:  #B8D8C6;
        --on-brand:     #0F1D15;
        --terra:        #E08B5A;
        --terra-ink:    #E39B72;
        --terra-soft:   #33241A;
        --terra-hover:  #EBAD8C;
        --pop:          #E08B5A;
        --danger:       #E08A73;
        --surface-deep: #0F1D15;
        --on-deep:      #EAE4DA;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --paper:        #131F18;
    --surface:      #1B2A21;
    --surface-sunk: #16231B;
    --ink:          #EAE4DA;
    --ink-2:        #A8B3A6;
    --line:         #2C3E33;
    /* Vezi blocul de mai sus: 3.28:1 / 3.71:1 / 3.55:1 pe surface/paper/sunk. */
    --line-strong:  #5C7D67;
    --brand:        #9CC3AB;
    --brand-hover:  #B8D8C6;
    --on-brand:     #0F1D15;
    --terra:        #E08B5A;
    --terra-ink:    #E39B72;
    --terra-soft:   #33241A;
    --terra-hover:  #EBAD8C;
    --pop:          #E08B5A;
    --danger:       #E08A73;
    --surface-deep: #0F1D15;
    --on-deep:      #EAE4DA;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    color-scheme: dark;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* The UA rule for [hidden] is only `display: none`, so any author rule that sets
   display (e.g. `.field { display: grid }`) silently wins and the element stays
   visible. Restore the intent for every element that opts out this way. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--text);
    font-size: var(--t-0);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}
/* Suprafetele care NU se inverseaza cu tema (footer, banda CTA, banda cu
   numerele de urgenta) stau mereu pe --surface-deep, unde --brand da 1.31:1 —
   inelul de focus dispare in tema deschisa. --pop urca la 5.98:1 pe acelasi
   fundal; e aceeasi solutie pe care o foloseste deja
   .embed-copy-btn:focus-visible.
   Pentru .emergency conteaza mai mult decat oriunde: acolo tot ce se poate
   focaliza e un numar de telefon, iar cine navigheaza din tastatura trebuie sa
   vada pe care e.
   Specificitatea (0,2,0) bate regula de baza indiferent de ordine. */
.site-footer :focus-visible,
.emergency :focus-visible,
.cta :focus-visible { outline-color: var(--pop); }

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-wrap: balance;
    margin: 0;
    color: var(--ink);
}

p { margin: 0; }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--s3);
}

/* Eyebrow — small caps label, sets editorial rhythm */
.eyebrow {
    font-family: var(--text);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--terra-ink);
    margin: 0 0 var(--s2);
}

.lede {
    font-size: var(--t-1);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 34ch;
}

.muted { color: var(--ink-2); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s1);
    padding: 13px var(--s3);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-family: var(--text);
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    /* Fara box-shadow si fara transform: umbrele sunt `none` in sistemul flat,
       iar ridicarea de 1px era un gest de elevatie care nu mai ridica nimic.
       Feedbackul de hover il da schimbarea de fundal a fiecarei variante. */
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-hover); box-shadow: var(--shadow-md); }

/* Varianta secundara e disponibila, dar nu se aplica pe niciun buton existent:
   asta ar rescrie ierarhia de actiune a paginilor, nu doar aspectul lor. */
/* Fundalul e --terra-ink, nu --terra: crem (--on-brand) pe --terra pur da 4.04:1,
   sub AA pentru text mic; pe --terra-ink urca la 5.65:1 (7.62:1 in tema inchisa). */
.btn--secondary { background: var(--terra-ink); color: var(--on-brand); }
.btn--secondary:hover { background: var(--terra-hover); box-shadow: var(--shadow-md); }

.btn--ghost { background: transparent; color: var(--brand); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--brand); background: var(--surface-sunk); }

/* ---------- Header ---------- */
/* Fara backdrop-filter: pe fundal alb opac nu adauga nimic vizibil si costa
   la compunere pe fiecare scroll. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
/* Golurile din rândul de header sunt var(--s3), nu var(--s4), de când meniul
   are șase intrări. Vezi nota de la pragul de navigație (@media max-width:
   1000px) pentru cifrele măsurate: cu goluri de 32px, rândul cerea 954px de
   conținut și avea 938px la 1001px, deci brandul era comprimat cu 16px și
   textul lui trecea peste primul link. Pe ecranele largi schimbarea nu se vede:
   `space-between` împinge oricum blocurile în colțuri, iar golul declarat e
   doar minimul. */
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    min-height: 84px;
}
.brand {
    display: flex;
    align-items: center;
    gap: var(--s1);
    text-decoration: none;
    white-space: nowrap;
}
.brand-text {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--t-1);
    letter-spacing: -0.02em;
}
.brand-icon { display: block; height: 40px; width: auto; }
.brand-icon--white { display: none; }
:root[data-theme="dark"] .brand-icon--white { display: block; }
:root[data-theme="dark"] .brand-icon--color { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-icon--white { display: block; }
    :root:not([data-theme="light"]) .brand-icon--color { display: none; }
}

/* var(--s3) între linkuri, aceeași distanță ca în meniul de admin. Era
   var(--s4) cât timp meniul avea cinci intrări; a șasea nu mai încăpea. */
.nav { display: flex; align-items: center; gap: var(--s3); }
.nav a {
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
    padding-block: var(--s1);
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.nav a:hover { color: var(--brand); border-bottom-color: var(--terra); }
/* Doar pentru dropdown-ul mobil — pe desktop "Cont consilier" ramane
   butonul dedicat din .header-actions, ca sa nu apara de doua ori. */
.nav__cta { display: none; }

/* Submeniul de admin: „Specialisti" ramane link direct catre lista, iar
   sageata de langa el deschide coada/revendicarile/importul. Deschiderea e
   pe click (nu pe hover), ca sa mearga identic pe touch si la tastatura. */
.admin-nav__group { position: relative; display: flex; align-items: center; gap: 2px; }
.admin-nav__toggle {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1;
    color: var(--ink);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
}
.admin-nav__toggle:hover { color: var(--brand); border-color: var(--line-strong); }
.admin-nav__toggle span { display: block; transition: transform .2s ease; }
.admin-nav__toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.admin-nav__submenu {
    position: absolute;
    top: calc(100% + var(--s1));
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 168px;
    padding-block: var(--s1);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
}
/* `display:flex` de mai sus bate `[hidden]` din foaia browserului (author > UA),
   deci starea inchisa trebuie spusa explicit, altfel submeniul ramane vizibil. */
.admin-nav__submenu[hidden] { display: none; }
.admin-nav__submenu a {
    padding: var(--s1) var(--s3);
    border-bottom: 0;
}
.admin-nav__submenu a:hover { background: var(--surface-sunk); border-bottom-color: transparent; }

.header-actions { display: flex; align-items: center; gap: var(--s2); }

/* Hamburger — vizibil doar sub breakpoint, vezi blocul responsive. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px; height: 42px;
    padding: 0 11px;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    cursor: pointer;
}
.nav-toggle:hover { border-color: var(--brand); background: var(--surface-sunk); }
.nav-toggle__bar {
    display: block;
    height: 2px;
    background: var(--ink);
}

/* Theme toggle — icon button */
.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 42px; height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--ink);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.theme-toggle:hover { border-color: var(--brand); background: var(--surface-sunk); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* ---------- Hero — asymmetric, top-aligned (never vertically centered) ---------- */
.hero {
    padding-block: var(--s7);
    background: var(--surface);
    position: relative;
    overflow: hidden;
}
.hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--s6);
    align-items: center;
}
.hero h1 {
    font-size: var(--t-4);
    line-height: 1.04;
    letter-spacing: -0.032em;
    max-width: 16ch;
}
.hero h1 em {
    font-style: normal;
    color: var(--brand);
}
.hero__lede { margin-top: var(--s4); }
.hero__aside { padding-top: 0; }

/* Panou generic. Nu e doar cautarea din hero: aceeasi clasa imbraca formularul
   de revendicare si cele patru formulare din pagina de cont. Tratamentul
   trebuie sa functioneze in ambele roluri. */
.search {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-md);
    padding: var(--s4);
    display: grid;
    gap: var(--s3);
}
.field { display: grid; gap: var(--s1); }

/* `> label:first-child` e deliberat: prinde eticheta proprie a campului, dar
   nu si <label>-urile de checkbox dinauntru, care sunt propozitii citibile. */
.field > label:first-child {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.field select,
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--text);
    font-size: var(--t-0);
    line-height: 1.5;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; }
.field select:hover,
.field input:hover,
.field textarea:hover { border-color: var(--ink-2); }
.field select:focus,
.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
.search__note {
    font-size: var(--t-sm);
    color: var(--ink-2);
    border-top: 1px solid var(--line);
    padding-top: var(--s3);
    margin: 0;
}

/* ---------- Stats — hairline-ruled band, not cards ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s3);
    border-bottom: 0;
}
.stat {
    padding: var(--s5) var(--s4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
}
.stat__num {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--t-3);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}
.stat__label {
    display: block;
    margin-top: var(--s1);
    font-size: var(--t-sm);
    color: var(--ink-2);
}

/* Varianta compactă — dashboard-ul de admin înșiră multe carduri deodată,
   spre deosebire de banda de trei cifre de pe homepage; scade doar padding-ul
   și cifra, fără să atingă `.stats`/`.stat` de bază. */
.stats--compact {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s2);
}
.stats--compact .stat {
    padding: var(--s2) var(--s3);
}
.stats--compact .stat__num {
    font-size: var(--t-1);
}
.stats--compact .stat__label {
    margin-top: 2px;
}

/* ---------- Sections ---------- */
/* `.wrap` a fost mutat inauntru, ca banda de fundal sa iasa pe toata latimea
   ferestrei, nu doar pe latimea containerului. */
.section { padding-block: var(--s7); }
.section--tight { padding-block: var(--s6); }
.section--alt { background: var(--surface-sunk); }

/* Bordura pe selectorul `+`, nu pe fiecare sectiune: ultima sectiune nu capata
   niciodata linie suspendata, iar cand blocul de articole lipseste (lista
   goala) alternanta nu lasa gol. */
.section + .section:not(.section--alt) { border-top: 1px solid var(--line); }
.section--alt + .section:not(.section--alt) { border-top: 0; }

.section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s4);
    margin-bottom: var(--s6);
    flex-wrap: wrap;
}
.section__head h2 { font-size: var(--t-2); }
.section__head p { color: var(--ink-2); max-width: 48ch; margin-top: var(--s2); }

/* Link with sliding underline */
.link-more {
    display: inline-flex;
    align-items: center;
    gap: var(--s0);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--terra-ink);
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 2px;
    transition: border-color .2s ease, color .2s ease;
    white-space: nowrap;
}
.link-more:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* Reset native chrome when .link-more is a <button> (ex: "Preferinte cookies"
   in footer) instead of an <a> — altfel butonul iese cu fundal si chenar
   complet de la stilurile implicite ale browserului. */
button.link-more {
    background: none;
    border: none;
    border-bottom: 1px solid var(--line-strong);
    padding: 0 0 2px;
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--terra-ink);
    cursor: pointer;
}

/* ---------- Steps — numbered, ruled, varied width (not equal cards) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.step {
    padding: var(--s4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    border-top: 3px solid var(--terra);
}
.step:nth-child(2) { border-top-color: var(--brand); }
/* Nu --pop: tokenul e declarat explicit ca fiind doar pentru suprafete inchise,
   iar pe --surface da 2.52:1. Ritmul e terra / verde / terra pe cei trei pasi —
   doi verzi la rand se citeau ca o greseala. --terra-ink, nu --terra, ca sa
   ramana acelasi accent inchis folosit peste tot altundeva. Sunt borduri
   decorative de 3px, nu text si nu controale. */
.step:nth-child(3) { border-top-color: var(--terra-ink); }
.step__n {
    font-family: var(--display);
    font-size: var(--t-2);
    font-weight: 700;
    line-height: 1;
    color: var(--line-strong);
    font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--t-1); margin-top: var(--s2); }
.step p { margin-top: var(--s1); color: var(--ink-2); font-size: var(--t-sm); }

/* ---------- Intrebari frecvente (homepage) ----------
   A fost un <div> fara clasa cu `max-width: 68ch` inline si fara centrare, deci
   o coloana lipita de marginea stanga cu ~640px de gol in dreapta la 1280px —
   reclamatia care a pornit Task 7.
   Grila, nu o singura coloana lata: pe toata latimea, un paragraf ar avea ~150
   de caractere pe rand si ochiul pierde randul la intoarcere. Doua coloane
   folosesc toata latimea si pastreaza randul citibil.
   minmax(min(320px, 100%), 1fr): la fel ca la `.article-grid`, un prag fix ar
   iesi din pagina sub ~344px latime de ecran; min() lasa pragul sa coboare la
   latimea disponibila cand nu incape. */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--s4) var(--s5);
    margin-top: var(--s4);
}
/* min-width:0 + overflow-wrap: o intrebare cu un token nerupt (un URL) are un
   min-content mai lat decat pista si ar impinge coloana vecina. */
.faq-grid > div { min-width: 0; overflow-wrap: anywhere; }
.faq-grid h3 { font-size: var(--t-1); }
.faq-grid p { margin-top: var(--s1); line-height: 1.75; color: var(--ink-2); }

/* ---------- Specialist cards — asymmetric grid, first is featured ---------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--s3);
}
.spec-card {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding: var(--s4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    transition: border-color .2s ease;
}
/* Hover plat: cardul nu se mai ridica (nu mai exista umbra peste care sa se
   ridice), ci isi coloreaza conturul in verde. */
.spec-card:hover { border-color: var(--brand); }
/* featured: first card takes 3 of 6 columns on the home grid */
.card-grid--featured .spec-card:first-child { grid-column: span 3; }
.card-grid--featured .spec-card:nth-child(2) { grid-column: span 3; }
.spec-card h3 { font-size: var(--t-1); }
.spec-card h3 a { text-decoration: none; color: var(--ink); transition: color .2s ease; }
.spec-card h3 a:hover { color: var(--brand); }
/* Titulatura e identitate, deci verde. Regula generala a paletei: verdele
   spune cine e cineva, terracotta spune ce poti face. */
.spec-card .role {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--brand);
}
.spec-card .city {
    font-size: var(--t-sm);
    color: var(--ink-2);
}

/* Monograma e singurul alt element rotund din sistem, alaturi de avatar —
   e un reper de identitate, nu o eticheta, deci rotunjirea completa ramane potrivita. */
.spec-card__identity { display: flex; align-items: flex-start; gap: var(--s2); }
.spec-card__avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--terra-soft);
    /* Initialele sunt identitate, nu actiune — si pe --terra-soft verdele urca
       de la 4.32:1 (sub AA pentru bold 13–15px) la 9.32:1 in tema deschisa. */
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--t-sm);
}

/* Atributele width/height din HTML sunt cele ale fisierului, ca sa nu sara
   layoutul in timpul incarcarii; aici le readucem la dimensiunea din card. */
.spec-card__avatar--photo {
    object-fit: cover;
    background: var(--terra-soft);
}
/* Modul de lucru e un fapt scurt, nu o categorie filtrabila. Iconita plus
   eticheta il spun mai repede decat doua etichete cu contur, si lasa
   randul de dedesubt sa se citeasca drept continut, nu drept al treilea
   zid de butoane. */
.spec-card__modes {
    /* +4px peste gap-ul cardului: identitatea are nevoie de mai mult aer
       decat au intre ele randurile de meta. */
    margin-top: var(--s0);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    font-size: var(--t-sm);
    color: var(--ink-2);
}
.spec-card__mode { display: inline-flex; align-items: center; gap: 6px; }
.spec-card__mode svg { flex-shrink: 0; color: var(--brand); }

.spec-card__tags {
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--ink-2);
}
/* Punctul mosteneste culoarea textului, nu una mai palida: el e singurul lucru
   care mai desparte etichetele intre ele, iar un gri de contur ar disparea pe
   alb si le-ar lipi la loc intr-un sir. Glifa e destul de mica cat sa nu strige. */
.spec-card__tags-sep { padding: 0 .4em; }
.spec-card__footer {
    margin-top: auto;
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
}
.spec-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    color: var(--brand);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s ease, background-color .2s ease;
}
.spec-card__cta:hover { border-color: var(--brand); background: var(--surface-sunk); }

/* ---------- Tratament de imagine ----------
   Clase gata de folosit cand proiectul va avea imagini. Astazi nu exista
   niciun <img> in view-uri, deci nu se aplica nicaieri. */
.media {
    position: relative;
    overflow: hidden;
    border-radius: var(--r);
    background: var(--surface-sunk);
}
.media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--wide { aspect-ratio: 16 / 9; }
.media--card { aspect-ratio: 3 / 2; }
.media--square { aspect-ratio: 1 / 1; }
.media--portrait { aspect-ratio: 4 / 5; }

/* Chips-urile poarta patru sectiuni intregi din pagina de profil, deci trebuie
   sa citeasca drept continut, nu drept eticheta decorativa. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.4;
    padding: 5px 12px;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    text-decoration: none;
}
a.chip { transition: border-color .2s ease, color .2s ease; }
a.chip:hover { border-color: var(--terra-ink); color: var(--terra-ink); }

/* ---------- Articles — editorial list with hanging dates, not cards ---------- */
.article-list { display: grid; gap: 0; }
.article-row {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: var(--s4);
    align-items: baseline;
    padding: var(--s4) var(--s3);
    border-bottom: 1px solid var(--line);
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: background-color .2s ease;
}
/* Bordura pe fiecare rand mai putin ultimul. Perechea veche border-top peste
   tot plus border-bottom pe ultimul incheia lista cu o linie suspendata. */
.article-row:last-child { border-bottom: 0; }
.article-row:hover { background: var(--surface-sunk); }
/* Data e informatie, nu actiune: terracotta ramane rezervata butoanelor,
   linkurilor din continut si eyebrow-urilor.
   `.row-label` e acelasi slot pentru randurile care nu poarta o data: pe
   /scoli/{slug} acolo sta nivelul declarat de consilier la scoala respectiva.
   Un <time> fara data ar fi fost marcaj gresit, iar o a doua regula copiata ar
   fi divergat de prima. */
.article-row time,
.article-row .row-label,
.article-card .row-label {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.article-row h3 { font-size: var(--t-1); font-weight: 600; color: var(--ink); }
.article-row .arrow { color: var(--terra); font-size: var(--t-1); }

/* ---------- Articles — aceleasi articole, in carduri ----------
   Nu .card-grid: aceea e o grila de 6 coloane in care fiecare card isi declara
   `grid-column: span N` ca sa iasa asimetria din director. Cardurile de articol
   sunt egale intre ele, deci grila isi numara singura coloanele.
   Fara imagine si fara placeholder de imagine: tabela `articles` nu are coloana
   de coperta. Ierarhia vine din tipografie si spatiere. */
/* auto-fit, nu auto-fill. In .wrap (1280px, minus 2x24 padding = 1232 utili) si
   cu gap de 24px incap patru piste de 280px (4x280 + 3x24 = 1192). auto-fill le
   pastreaza pe toate patru chiar si cu trei carduri: trei carduri de ~290px si
   ~300px de gol in dreapta — exact reclamatia care a pornit Task 7. auto-fit
   colapseaza pistele goale, deci randul se umple mereu, oricate carduri ar fi.
   minmax(min(280px, 100%), 1fr): la 320px latime ecran caseta de continut are
   272px, iar un prag fix de 280px ar iesi 8px in afara paginii. min() lasa
   pragul sa coboare la latimea disponibila cand nu incape. */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--s3);
}
/* Cardul intreg e linkul, deci si tinta de click, si — prin regula globala
   `:focus-visible` — locul unde apare inelul de focus. */
/* min-width:0 + overflow-wrap: un titlu care contine un token nerupt (un URL
   lipit din greseala) are un min-content mai lat decat pista lui si ar iesi
   peste cardul vecin. Rupem cuvantul, nu grila. */
.article-card {
    min-width: 0;
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    text-decoration: none;
    color: var(--ink);
    transition: border-color .2s ease;
}
/* Hover plat, ca la .spec-card: conturul se face verde, cardul nu se ridica
   (nu exista umbra peste care sa se ridice) si nu se misca. */
.article-card:hover { border-color: var(--brand); }
/* Aceeasi data ca pe rand: informatie, nu actiune, deci nu terracotta. */
.article-card time {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
/* var(--display) si greutatea vin din regula globala de titluri; aici doar
   marimea si nuanta, ca la .article-row h3. */
.article-card h3 { font-size: var(--t-1); font-weight: 600; color: var(--ink); }
.article-card p { font-size: var(--t-sm); color: var(--ink-2); }
/* `margin-top: auto` lipeste actiunea de baza cardului, ca randul de carduri sa
   se termine aliniat chiar cand excerpt-urile au lungimi diferite. */
.article-card__action {
    margin-top: auto;
    padding-top: var(--s2);
    color: var(--terra-ink);
    font-size: var(--t-sm);
    font-weight: 600;
}

/* ---------- Panoul de bife din filtrele Directorului ---------- */
.filters__panel {
    flex-basis: 100%;
    grid-column: 1 / -1;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: var(--s3);
    margin-top: 0;
    background: var(--surface-sunk);
}
.filters__panel summary {
    font-weight: 700;
    font-size: var(--t-sm);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--s2);
    color: var(--ink);
}
.filters__panel summary::-webkit-details-marker { display: none; }
.filters__panel summary::before {
    content: '';
    flex: 0 0 auto;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}
.filters__panel[open] summary::before { transform: rotate(45deg); }
.filters__panel summary:hover { color: var(--terra-ink); }
.filters__panel summary:focus-visible { outline: 2px solid var(--terra-ink); outline-offset: 3px; }
.filters__panel-body { margin-top: var(--s3); }
.filters__group + .filters__group { margin-top: var(--s4); }
.filters__group-label {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: var(--s2);
}

/* Abordarea nu sta in panoul pliat, ci pe primul rand al formularului, singura
   pe toata latimea. E filtrul care desparte directorul asta de unul generalist,
   deci se citeste inaintea orasului. Linia de sub el separa intrebarea „ce fel
   de consiliere cauti" de restul cautarii, fara sa mai adauge un chenar. */
.filters__group--primary {
    grid-column: 1 / -1;
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--line);
}
.filters__group--primary .filters__group-label {
    font-size: var(--t-sm);
    color: var(--ink);
}

/* ---------- Corpul unui articol randat prin MarkdownLite ---------- */
.article-body { line-height: 1.8; max-width: 68ch; font-size: var(--t-0); }
.article-body p { margin-bottom: var(--s3); }
.article-body h2 { font-size: var(--t-2); margin-top: var(--s6); margin-bottom: var(--s3); }
.article-body ul { margin-bottom: var(--s3); padding-left: 1.5em; }
.article-body li { margin-bottom: var(--s2); }
.article-body a { color: var(--terra-ink); }

/* ---------- Wrapper de derulare pentru tabele late ----------
   Un tabel care nu incape in latimea paginii nu trebuie sa faca PAGINA sa
   deruleze orizontal — deruleaza el, in propriul wrapper. Scroll-ul sta pe
   wrapper, nu pe <table> cu `display: block`: schimbarea lui `display` scoate
   tabelul din arborele de accesibilitate, iar un tabel de date e exact
   continutul care trebuie sa ramana citibil de masini.

   Regula nu mai e scopata pe `.article-body`: acelasi tipar il folosesc si
   paginile legale, unde tabelele GDPR au ~490px de continut minim si impingeau
   viewportul la 515px pe un ecran de 320px. `tabindex="0"` din markup nu e
   decorativ — fara el, o zona care deruleaza nu se poate parcurge de la
   tastatura. */
.table-scroll {
    overflow-x: auto;
    max-width: 100%;
    margin-block: var(--s4);
}

.table-scroll:focus-visible {
    outline: 2px solid var(--terra-ink);
    outline-offset: 2px;
}

.article-body table {
    border-collapse: collapse;
    width: 100%;
    /* Sub aceasta latime celulele s-ar rupe cuvant cu cuvant si tabelul ar
       deveni ilizibil; mai bine deruleaza. */
    min-width: 30rem;
    font-size: var(--t-sm);
}

.article-body th,
.article-body td {
    border: 1px solid var(--line-strong);
    padding: var(--s2);
    text-align: left;
    vertical-align: top;
}

/* 55%, nu 25%: la 25% amestecul cu --line e practic invizibil pe fundalul
   inchis din tema intunecata, iar randul de antet nu se mai distinge. */
.article-body th {
    font-weight: 600;
    background: color-mix(in srgb, var(--line) 55%, transparent);
}

/* ---------- Numerele de urgenta ----------
   Blocul cu numerele care se suna acum, pe /organizatii, pe pagina fiecarei
   organizatii si pe /resurse. E primul lucru care trebuie vazut in pagina,
   deci e o banda plina pe --surface-deep, aceeasi
   suprafata ca .cta si ca footerul, cea mai apasata suprafata din paleta.
   Numerele iau --pop, care are ~6:1 pe fundalul asta (vezi nota de la footer);
   pe fundalul deschis al paginii aceeasi culoare ar fi fost prea slaba.
   Colturi drepte si fara umbra, ca tot restul. */
.emergency {
    background: var(--surface-deep);
    color: var(--on-deep);
    /* Liniile de sus si de jos nu sunt decor. Pe tema deschisa banda se vede
       oricum, fiindca --surface-deep e aproape negru pe hartia crem; pe tema
       inchisa --surface-deep (#0F1D15) si --paper (#131F18) sunt la patru
       trepte una de alta si blocul dispare in pagina. Perechea nu se
       inverseaza cu tema, la fel ca restul benzii, deci separarea trebuie sa
       vina din altceva, iar --pop are contrast bun si pe deschis, si pe
       inchis. Fara ele, exact blocul care trebuie vazut primul e singurul care
       nu se vede. */
    border-block: 4px solid var(--pop);
    border-radius: var(--r);
    padding-block: var(--s4);
}
.emergency__title {
    font-family: var(--display);
    font-size: var(--t-1);
    font-weight: 700;
    color: var(--on-deep);
}
/* auto-fit cu prag care coboara la latimea disponibila, ca la .article-grid:
   trei numere pe un rand pe desktop, unul sub altul pe telefon, fara sa iasa
   din pagina la 320px. */
.emergency__list {
    list-style: none;
    margin: var(--s3) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--s3);
}
.emergency__number {
    display: block;
    font-family: var(--display);
    font-size: var(--t-2);
    font-weight: 700;
    line-height: 1.1;
    color: var(--pop);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
/* Fara ridicare si fara umbra la hover: se schimba doar culoarea, ca la
   .article-card. */
a.emergency__number:hover { color: var(--on-deep); }
.emergency__what {
    display: block;
    margin-top: var(--s1);
    font-size: var(--t-sm);
    line-height: 1.6;
    color: color-mix(in srgb, var(--on-deep) 84%, transparent);
}
.emergency__note {
    margin-top: var(--s3);
    font-size: var(--t-sm);
    line-height: 1.6;
    max-width: 70ch;
    color: color-mix(in srgb, var(--on-deep) 78%, transparent);
}

/* ---------- CTA band — flat, no gradient ---------- */
.cta {
    background: var(--surface-deep);
    color: var(--on-deep);
    border-radius: var(--r-lg);
    padding: var(--s6);
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--s5);
    align-items: center;
    position: relative;
    overflow: hidden;
}
.cta > div { position: relative; }
.cta h2 { color: var(--on-deep); font-size: var(--t-2); max-width: 24ch; }
.cta p { color: color-mix(in srgb, var(--on-deep) 80%, transparent); margin-top: var(--s3); max-width: 46ch; }
/* Textul butonului e --surface-deep (~6:1 pe --pop); perechea nu se
   inverseaza cu tema, la fel ca restul benzii. */
.cta .btn { background: var(--pop); color: var(--surface-deep); justify-self: end; position: relative; }
.cta .btn:hover { background: var(--on-deep); color: var(--surface-deep); }

/* ---------- Directory ---------- */
.page-head { padding-block: var(--s6) var(--s5); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: var(--t-3); }
/* Puntea dintre blogul public si „Blog Specialisti". Doar distanta: forma o da
   .btn--ghost, care e deja fara colturi rotunde si fara umbra. */
.page-head__switch { margin-top: var(--s3); }

.filters {
    display: grid;
    /* Doua campuri plus butonul: abordarea a urcat pe randul de deasupra, pe
       toata latimea, iar cele trei coloane de dinainte ar fi lasat o coloana
       goala si butonul intins peste ea. */
    grid-template-columns: repeat(2, 1fr) auto;
    gap: var(--s3);
    align-items: end;
    padding: var(--s4);
    margin-top: var(--s5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
}

/* Textul introductiv al directorului. Sta sub filtre si deasupra rezultatelor:
   nu impinge cautarea — actiunea principala a paginii — sub prima vizibila, dar
   ramane deasupra listei, unde e citit ca descriere a paginii, nu ca nota de
   subsol. Culoare secundara, ca sa nu concureze cu rezultatele. */
/* Acelasi tipar reparat la `.legal-text`: `max-width` fara `margin-inline: auto`
   lipea blocul de marginea stanga. Plafonul de rand se muta pe paragraf, cu
   `margin-inline: 0` explicit — limiteaza randul, nu centreaza blocul. */
.directory-intro {
    margin-top: var(--s5);
    color: var(--ink-2);
    line-height: 1.75;
}
.directory-intro p { max-width: 90ch; margin-inline: 0; }
.directory-intro p + p { margin-top: var(--s2); }

.result-count {
    padding-block: var(--s4);
    font-size: var(--t-sm);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.directory-list { padding-bottom: var(--s7); }
.directory-list .card-grid { grid-template-columns: repeat(2, 1fr); }
.directory-list .spec-card { grid-column: span 1; }

.directory-map-wrap { margin-bottom: var(--s4); }
#directory-map {
    height: 260px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

/* ---------- Comutator Carduri / Listă compactă ----------
   Nu e doar al directorului: acelasi tipar poarta si listele de articole. Ambele
   variante pleaca in HTML, iar regula de mai jos ascunde una — comutarea e
   instant, fara o a doua cerere la server. Granita o face `[data-density-scope]`
   din markup, ca doua comutatoare de pe aceeasi pagina sa nu se calce. */
[data-density-panel].is-hidden { display: none; }

.density-toggle {
    display: flex;
    gap: var(--s1);
    margin-bottom: var(--s4);
    padding: var(--s0);
    background: var(--surface-sunk);
    border-radius: var(--r-sm);
    max-width: 320px;
}
.density-toggle__btn {
    flex: 1;
    padding: 10px var(--s3);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-2);
    font-family: var(--text);
    font-size: var(--t-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
/* Segmentul activ e plin, nu doar conturat: fara umbra, diferenta dintre
   --surface si --surface-sunk e 1.17:1 si bordura --line 1.42:1, adica starea
   selectata devenea practic invizibila.
   Segmentul inactiv nu are regula proprie: sta pe --ink-2, care a fost coborat
   la #58685C tocmai fiindca pe pista --surface-sunk dadea 4.47:1. Acum 4.66:1,
   peste AA pentru cei 15px/600 de aici (7.49:1 in tema inchisa, deja bun). */
.density-toggle__btn.is-active {
    background: var(--brand);
    color: var(--on-brand);
    border-color: var(--brand);
}

.spec-row-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.spec-row {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    transition: background-color .2s ease;
}
.spec-row:last-child { border-bottom: 0; }
.spec-row:hover { background: var(--surface-sunk); }
.spec-row__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--terra-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--t-xs);
}

.spec-row__avatar--photo {
    object-fit: cover;
    background: var(--terra-soft);
}
.spec-row__identity { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.spec-row__name, .spec-row__role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spec-row__name { font-weight: 600; color: var(--ink); }
.spec-row__role { font-size: var(--t-xs); color: var(--brand); }
.spec-row__city { flex-shrink: 0; font-size: var(--t-sm); color: var(--ink-2); }
.spec-row__cta {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    color: var(--brand);
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Leaflet — adus in sistem ----------
   leaflet.css e linkat in <body> (directory.php), deci DUPA app.css: la
   specificitate egala castiga vendorul si regulile de aici erau cod mort.
   Prefixul `.leaflet-container` urca specificitatea peste vendor, ca ordinea
   incarcarii sa nu mai conteze.

   Fundalul si culoarea textului se seteaza explicit: Leaflet hardcodeaza alb pe
   popup si pe varful lui, iar un link tematizat pe un alb netematizat ar cobori
   la 2.28:1 in tema inchisa. Fundalul si linkul se schimba impreuna. */
.leaflet-container .leaflet-popup-content-wrapper,
.leaflet-container .leaflet-popup-tip {
    background: var(--surface);
    color: var(--ink);
    border-radius: 0;
    box-shadow: none;
}
.leaflet-container .leaflet-popup-content-wrapper { font-family: var(--text); }
.leaflet-container .leaflet-popup-content { margin: var(--s3); font-size: var(--t-sm); }
.leaflet-container .leaflet-popup-content a { color: var(--terra-ink); font-weight: 600; }
/* Vendorul isi scrie deja regula ca `.leaflet-container a.leaflet-popup-...`,
   deci prefixul simplu ar da egalitate — si egalitatea o pierde app.css. */
.leaflet-container .leaflet-popup a.leaflet-popup-close-button { color: var(--ink-2); }
.leaflet-container .leaflet-popup a.leaflet-popup-close-button:hover,
.leaflet-container .leaflet-popup a.leaflet-popup-close-button:focus { color: var(--ink); }

/* Controlul de zoom (+/-) e mereu vizibil, deci raza si umbra lui erau singurul
   loc din site unde „colturi drepte, fara umbre" nu era adevarat. Vendorul pune
   raze pe primul/ultimul buton in doua variante — cu si fara `.leaflet-touch` —
   asa ca sunt necesare doua trepte de specificitate. */
.leaflet-container .leaflet-bar { border-radius: 0; box-shadow: none; }
.leaflet-container .leaflet-bar a,
.leaflet-container .leaflet-bar a:first-child,
.leaflet-container .leaflet-bar a:last-child,
.leaflet-container.leaflet-touch .leaflet-bar a:first-child,
.leaflet-container.leaflet-touch .leaflet-bar a:last-child { border-radius: 0; }

/* Bara de atribuire: Leaflet ii da linkurilor #0078A8, singurul albastru din
   paleta. Ca si la popup, culoarea linkului nu poate pleca singura de la alb:
   pe fundalul alb hardcodat, --terra-ink din tema inchisa ar da 2.30:1.
   Si aici vendorul are deja `.leaflet-container .leaflet-control-attribution`,
   deci e nevoie de inca o clasa pe lant. */
.leaflet-container .leaflet-control-container .leaflet-control-attribution {
    background: var(--surface);
    color: var(--ink-2);
}
.leaflet-container .leaflet-control-attribution a { color: var(--terra-ink); }

/* Nicio harta nu foloseste inca tooltip-uri, dar daca apar trebuie sa vina
   deja imbracate — inclusiv varful, care e desenat din borduri. */
.leaflet-container .leaflet-tooltip {
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--ink);
    border-radius: 0;
    box-shadow: none;
}
.leaflet-container .leaflet-tooltip-top::before { border-top-color: var(--surface); }
.leaflet-container .leaflet-tooltip-bottom::before { border-bottom-color: var(--surface); }
.leaflet-container .leaflet-tooltip-left::before { border-left-color: var(--surface); }
.leaflet-container .leaflet-tooltip-right::before { border-right-color: var(--surface); }

/* ---------- Specialist profile ----------
   Regula care guverneaza tot blocul: oricare dintre cele opt sectiuni poate
   lipsi complet din HTML. Deci nicio bordura trailing, nicio inaltime
   rezervata, niciun separator care presupune un element urmator. */
.profile { padding-block: var(--s6) var(--s7); }
.profile__grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--s6); align-items: start; }

/* Pagina evenimentului: descrierea trebuie sa ramana mai lata decat caseta,
   inclusiv cand URL-ul de inscriere e un sir lung. Copiii au min-width: 0
   ca gridul sa nu se lungeasca dupa continut. */
.event-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s6); align-items: start; }
.event-layout > * { min-width: 0; }
.event-layout .profile__media-photo {
    object-fit: contain;
    background: var(--surface);
}
.profile h1 { font-size: var(--t-3); margin-top: var(--s1); }
.profile__role { font-size: var(--t-1); color: var(--brand); font-weight: 600; margin-top: var(--s2); }
.profile__city { color: var(--ink-2); margin-top: var(--s1); }

/* Logo si chip, in coloana din dreapta, deasupra cardului de contact. Pe
   latimea coloanei, ca sa nu pluteasca doua dreptunghiuri de latimi diferite. */
.profile__media { display: grid; gap: var(--s3); margin-bottom: var(--s3); }

/* Logo-ul pastreaza proportiile: unul lat taiat patrat devine ilizibil. Fundalul
   si conturul sunt pentru PNG-urile cu transparenta, care altfel dispar pe tema
   inchisa. */
.profile__media-logo {
    width: 100%;
    max-height: 120px;
    object-fit: contain;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s3);
}

/* Poza e salvata patrata (600x600), deci pe latimea coloanei ramane patrata. */
.profile__media-photo {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--terra-soft);
}

.profile__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s3);
}

.profile__gallery img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: var(--r);
    border: 1px solid var(--line);
}
/* Fara `max-width` pe container (vezi `.legal-text`): coloana din stanga a
   profilului are deja o latime data de grila, iar plafonul de aici o mai taia o
   data pe stanga, cu gol in dreapta. Plafonul de rand sta pe paragraf. */
.profile__body { margin-top: var(--s6); }
.profile__body h2 { font-size: var(--t-2); margin-bottom: var(--s3); }
.profile__body p { line-height: 1.75; max-width: 90ch; margin-inline: 0; }

/* Separatorul sta pe `+`, deci apare doar INTRE doua sectiuni prezente:
   prima nu are linie deasupra, ultima nu are dedesubt, iar cand o sectiune
   lipseste vecinele ei se leaga fara gol. */
.profile__section { margin-top: 0; }
.profile__section + .profile__section {
    margin-top: var(--s5);
    padding-top: var(--s5);
    border-top: 1px solid var(--line);
}

.profile__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.chip--price { background: var(--brand); color: var(--on-brand); border-color: var(--brand); font-variant-numeric: tabular-nums; }

.profile__meta { display: flex; gap: var(--s2); align-items: baseline; margin-top: var(--s3); font-size: var(--t-sm); }
.profile__meta .k { color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; font-size: var(--t-xs); font-weight: 700; }
.profile__meta .v { font-weight: 600; }

.profile__subheading {
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-2);
    margin-top: var(--s4);
    margin-bottom: var(--s2);
}
.profile__section > .profile__subheading:first-of-type { margin-top: var(--s3); }

.profile__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.profile__list li { display: grid; gap: 2px; }
.profile__list-main { font-weight: 600; }
.profile__list-aside { color: var(--ink-2); font-size: var(--t-sm); font-weight: 400; }

/* Calificarea reglementata detinuta in plus. Marcajul e deliberat DIFERIT de
   restul sectiunilor: nu e o treapta a formarii in consiliere, ci o profesie
   obtinuta in alta parte, iar daca ar arata la fel cititorul ar citi cele doua
   ca pe un singur parcurs. Bara din stanga e terracotta, culoarea care atrage
   privirea in paleta — aici ca semn de „citeste asta separat", nu ca actiune.
   Colturi drepte si fara umbra, ca peste tot. */
.profile__regulated {
    margin-top: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--terra);
}
.profile__regulated-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.profile__regulated-list li { font-weight: 600; }
.profile__regulated-note {
    margin-top: var(--s2);
    color: var(--ink-2);
    font-size: var(--t-sm);
}

.profile__fees { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.profile__fees li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s4);
    padding-block: var(--s3);
    border-bottom: 1px solid var(--line);
}
/* Fara asta, ultimul tarif ramane cu o linie suspendata dedesubt. */
.profile__fees li:last-child { border-bottom: 0; }
.profile__fee-service { display: grid; gap: 2px; }
.profile__fee-price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--brand); }

/* ---------- Formularul de cont ---------- */
.fieldset {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s4);
    margin-top: 0;
    display: grid;
    gap: var(--s4);
    background: var(--surface-sunk);
}
.fieldset legend {
    padding-inline: var(--s2);
    font-family: var(--display);
    font-size: var(--t-1);
    font-weight: 700;
    color: var(--ink);
}

/* „Afiseaza public" decide ce ajunge pe pagina publica, deci primeste greutate
   vizuala de control, nu de bifa pierduta langa camp. */
.field--with-toggle {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: var(--s3);
}
.field--with-toggle > label:first-child { grid-column: 1 / -1; }
.toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--t-sm);
    white-space: nowrap;
    padding: 12px var(--s3);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.toggle:hover { border-color: var(--brand); }
.toggle input { margin: 0; }

/* Randurile devin carduri, nu randuri despartite de linie punctata:
   repeater.php randeaza mereu trei randuri goale peste cele existente, iar o
   linie punctata sub un rand gol citeste ca eroare. Un card gol citeste ca
   invitatie. */
.repeater { display: grid; gap: var(--s3); }
/* Un camp de text liber pe o coloana de 180px se scrie prin gaura cheii, de aceea
   `full` il intinde peste tot randul. */
.repeater .field--full { grid-column: 1 / -1; }
/* Contorul sta sub camp, aliniat la dreapta, ca sa nu concureze cu eticheta. */
.field__count {
    justify-self: end;
    color: var(--ink-2);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
}
.repeater__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s3);
    padding: var(--s3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

/* ---------- Taburile formularului de profil (cont + admin) ---------- */
/* Panourile poarta clasa .search, adica arata ca panourile de formular de peste
   tot. Aici se adauga doar bara si ce tine de starea taburilor. */
.profile-editor { display: grid; gap: var(--s3); margin-top: var(--s4); }
/* Formularul si-a pierdut clasa .search cand panourile au preluat-o, deci isi
   distanteaza singur copiii: caseta de administrare, bara, panourile, butonul. */
.profile-editor > form { display: grid; gap: var(--s3); }

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    border-bottom: 1px solid var(--line-strong);
}
.tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    /* -1px ca tabul activ sa-si acopere linia de sub bara, nu sa stea peste ea. */
    margin-bottom: -1px;
    padding: 10px var(--s3);
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ink-2);
    font-family: var(--text);
    font-size: var(--t-sm);
    font-weight: 600;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}
/* Pe ecran ingust cele sase taburi s-ar rupe pe trei randuri, iar linia de sub
   tabul activ ar cadea peste randul de dedesubt — arata a subliniere gresita, nu
   a tab selectat. Se deruleaza lateral, ca orice bara de taburi de pe telefon. */
@media (max-width: 700px) {
    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }
    .tabs__btn { flex: 0 0 auto; }
}
.tabs__btn:hover { color: var(--ink); }
.tabs__btn[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.tabs__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.tabs__btn.is-error { color: var(--danger); }
.tabs__btn.is-error[aria-selected="true"] { border-bottom-color: var(--danger); }
.tabs__mark { font-weight: 700; line-height: 1; }
.tabs__mark--error { color: var(--danger); }
.tabs__mark--dirty { color: var(--brand); }

.tabpanel__title {
    font-family: var(--display);
    font-size: var(--t-1);
    font-weight: 700;
    margin: 0;
}

/* Bara de salvare se lipeste de marginea de jos a ferestrei cat timp formularul
   e pe ecran: cu sase panouri, butonul ajungea altfel sub un tab intreg de
   derulare, iar „am modificat ceva si nu stiu unde e Salveaza" e exact ce
   strica taburile daca nu le insotesti cu asta. */
.form-actions {
    position: sticky;
    bottom: var(--s2);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    box-shadow: var(--shadow-md);
}
.form-actions__note { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }

/* Ce tine de moderare, nu de profil: sta afara din taburi, mereu la vedere, si
   se citeste altfel decat panourile ca sa nu para inca un tab. */
.admin-box {
    display: grid;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--surface-sunk);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
}
.admin-box__title {
    margin: 0;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.admin-box__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s3);
}

/* Coloana din dreapta poate avea pana la trei .contact-card: datele de contact,
   un mesaj de stare si formularul.
   Lipirea are voie DOAR cand cardul e singur in coloana. Un element sticky e un
   element pozitionat, deci se deseneaza peste fratii lui statici: cat timp
   ramane fixat la 108px, formularul care se ridica prin dreptul lui la scroll
   ii trece pe dedesubt, cu text peste text. Cu doua carduri, coloana se
   deruleaza intreaga — oricum e prea inalta ca sa incapa fixata pe ecran. */
.contact-card {
    position: static;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-md);
    padding: var(--s4);
}
aside > .contact-card:only-child,
aside > .profile__media + .contact-card:last-child { position: sticky; top: 108px; }
.contact-card h2 { font-size: var(--t-1); margin-bottom: var(--s3); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.contact-list li { display: grid; gap: var(--s0); }
.contact-list .k {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.contact-list .v { font-size: var(--t-1); font-variant-numeric: tabular-nums; }
.contact-list .v a { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.contact-list .v a:hover { border-bottom-color: var(--brand); }

/* ---------- Intrarile de pe /resurse ----------
   Text curatoriat, nu randuri din baza, deci nu pot fi carduri de articol:
   acelea sunt linkuri intregi catre o pagina proprie de pe site, iar aici
   pagina proprie e a altcuiva. Refolosesc caseta .contact-card, asezata in
   coloana principala si nu in aside, unde regula ei de lipire nu se aplica.
   Colturi drepte si fara umbra, ca tot restul. */
.resource-list { display: grid; gap: var(--s4); }
.resource-list h3 { font-size: var(--t-1); margin-top: var(--s1); }
.resource-list p { margin-top: var(--s3); max-width: 68ch; }
.resource-list .contact-list { margin-top: var(--s4); }

/* ---------- Footer ---------- */
/* Footerul e singura suprafata verde-adanc mare din pagina, deci e singurul loc
   unde --pop are contrast bun (~6:1 pe --surface-deep). Pe fundalul deschis al
   paginii ar fi ilizibil, la ~2.2:1. */
.site-footer {
    background: var(--surface-deep);
    color: var(--on-deep);
    border-top: 0;
    padding-block: var(--s6) var(--s4);
    margin-top: var(--s7);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s5); }
.footer-grid h3 {
    font-family: var(--text);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pop);
    margin-bottom: var(--s3);
}
/* Primul h3 e numele site-ului, nu o eticheta de coloana. */
.footer-grid > div:first-child h3 {
    font-size: var(--t-1);
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--on-deep);
    margin-bottom: 0;
}
.footer-brand { display: flex; align-items: center; gap: var(--s1); margin-bottom: var(--s3); }
.footer-brand img { display: block; height: 28px; width: auto; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
/* Doua clase, ca sa bata `display: grid` de mai sus prin specificitate, nu prin ordine. */
.footer-grid .footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s4);
    margin-top: var(--s3);
}
.footer-grid .footer-social a { display: inline-flex; align-items: center; gap: 0.45em; }
.footer-grid .footer-social svg { flex: none; opacity: 0.9; }
.footer-grid a,
.site-footer button.link-more {
    font-size: var(--t-sm);
    text-decoration: none;
    color: color-mix(in srgb, var(--on-deep) 82%, transparent);
    border-bottom: 0;
    transition: color .2s ease;
}
.footer-grid a:hover,
.site-footer button.link-more:hover { color: var(--pop); }
.site-footer .muted { color: color-mix(in srgb, var(--on-deep) 78%, transparent); }
.footer-note {
    margin-top: var(--s6);
    padding-top: var(--s3);
    border-top: 1px solid color-mix(in srgb, var(--on-deep) 20%, transparent);
    display: flex;
    justify-content: space-between;
    gap: var(--s2);
    flex-wrap: wrap;
    font-size: var(--t-xs);
    color: color-mix(in srgb, var(--on-deep) 72%, transparent);
}

/* Linkurile din randul de jos nu sunt prinse de `.footer-grid a`, care traieste
   in coloanele cu <ul>. Fara regula asta ar mosteni doar `a { color: inherit }`
   (linia 144) si sublinierea implicita a browserului — nici urma de culoarea sau
   marimea celorlalte linkuri din footer, de-aia sunt fixate explicit mai jos, ca
   sa citeasca a link langa creditul hartii, nu ca text simplu. Grupul tine si
   asezarea: `.footer-note` e un flex cu space-between si exact doi copii, iar
   patru ar fi fost imprastiati pe toata latimea. */
.footer-note__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); }
.footer-note__links a {
    font-size: var(--t-sm);
    color: color-mix(in srgb, var(--on-deep) 82%, transparent);
    text-decoration: none;
    border-bottom: 0;
    transition: color .2s ease;
}
.footer-note__links a:hover { color: var(--pop); }

/* ---------- Empty state ---------- */
.empty {
    padding: var(--s6) var(--s3);
    text-align: center;
    color: var(--ink-2);
    background: var(--surface-sunk);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r);
}

.empty__cities {
    margin-top: var(--s2);
    line-height: 1.9;
}

/* ---------- Motion: purposeful reveal only ---------- */
.reveal {
    opacity: 0;
    transform: translateY(12px);
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .hero__grid { grid-template-columns: 1fr; gap: var(--s5); }
    .hero__aside { padding-top: 0; }
    .hero h1 { max-width: 20ch; }
    .lede { max-width: 56ch; }
    .cta { grid-template-columns: 1fr; }
    .cta .btn { justify-self: start; }
    .profile__grid { grid-template-columns: 1fr; }
    .event-layout { grid-template-columns: 1fr; }
    .contact-card,
    aside > .contact-card:only-child,
    aside > .profile__media + .contact-card:last-child { position: static; }
    .field--with-toggle { grid-template-columns: 1fr; }
    .toggle { padding-bottom: 0; }
    .repeater__row { grid-template-columns: 1fr; }
    .profile__fees li { flex-direction: column; align-items: flex-start; gap: 2px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .card-grid--featured .spec-card:first-child,
    .card-grid--featured .spec-card:nth-child(2) { grid-column: span 3; }
}

/* Pragul navigatiei, separat de restul responsive-ului.
   Istoric: la F0b pragul a urcat de la ~861px la 1000px fiindca cinci intrari
   plus brandul si butonul „Cont consilier" nu mai incapeau sub atat.
   La F2b a intrat a sasea intrare, „Organizatii", si masuratoarea s-a refacut
   la 1001px (un pixel peste prag), in Chrome pe Windows, cu bara de derulare
   vizibila, deci cu 938px de latime utila in `.wrap` (brand 222 + nav + actiuni
   196 + doua goluri exterioare):
     - sase intrari, „Caută consilier", goluri de 32px: 996px ceruti (peste cu 58)
     - sase intrari, „Consilieri", goluri de 32px:      968px ceruti (peste cu 30)
     - sase intrari, „Caută consilier", goluri de 24px: 940px ceruti (peste cu 2)
     - sase intrari, „Consilieri", goluri de 24px:      912px ceruti (sub cu 26)
   Doar ultima incape, deci in cod sunt amandoua schimbarile: eticheta scurtata
   (decizia proprietarului) SI golurile duse la var(--s3), aceeasi distanta pe
   care o foloseste deja meniul de admin. Fara golurile mai mici, brandul era
   comprimat cu 16px si textul lui trecea peste primul link, ceea ce nu se vedea
   ca „rand rupt" dar era exact asta.
   Punctul de rupere coboara astfel la ~975px, deci pragul RAMANE la 1000px, cu
   ~25px de rezerva. Mai putin decat cei ~37px de la F0b, dar singurul risc care
   ramane e o randare cu fonturi mai late: absenta barei de derulare adauga
   15px, deci lucreaza in favoarea randului.
   De ce nu s-a urcat pragul in loc: fiecare urcare muta inca o clasa de ecrane
   pe hamburger, iar la 1060px ar fi intrat acolo si tabletele de 1024px, care
   au loc berechet pentru randul intreg.
   Cand se adauga a saptea intrare, se reface exact masuratoarea asta inainte de
   orice altceva.
   NU s-a mutat cu el nimic din blocul vechi: harta si filtrele directorului
   raman la 860px, unde sunt regulile lor. */
@media (max-width: 1000px) {
    /* Nav-ul nu mai dispare pur si simplu: se pliaza sub header si se deschide
       din hamburger. Aceleasi linkuri ca pe desktop, doar asezate in coloana —
       cate sunt nu conteaza pentru regulile de mai jos, fiindca fiecare isi ia
       propriul rand (numarul era scris aici si a ramas in urma o data deja). */
    .nav-toggle { display: flex; }
    .site-header__inner { flex-wrap: wrap; gap: var(--s2); }
    .nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: var(--s2);
    }
    .nav.is-open { display: flex; }
    .nav a {
        padding-block: var(--s2);
        border-bottom: 1px solid var(--line);
    }
    /* Bordura pe fiecare link mai putin ultimul — altfel meniul se termina cu
       o linie suspendata. */
    .nav a:last-child { border-bottom: 0; }
    /* "Cont consilier" trece in dropdown-ul mobil; butonul dedicat din header
       (langa comutatorul de tema) disparea altfel pe un rand separat, prea
       ingust pentru brand + hamburger + tema + buton pe acelasi rand. */
    .nav__cta { display: block; }
    .header-actions .btn--primary { display: none; }

    /* Adminul nu are hamburger, deci nav-ul lui nu se poate ascunde: curge pe
       mai multe randuri. Regula vine DUPA `.nav { display: none }` de mai sus,
       altfel aceea ar castiga. */
    .admin-nav { display: flex; flex-basis: 100%; flex-direction: row; }
    .admin-nav a { border-bottom: 0; padding-block: var(--s1); }
}

@media (max-width: 860px) {
    #directory-map { height: 200px; }
    .filters { grid-template-columns: 1fr 1fr; }
    /* Cu doua coloane, orasul si cadrul umplu primul rand, iar butonul ramane
       singur pe al doilea. Il intindem peste amandoua coloanele, ca sa nu lase
       o jumatate de rand goala langa el. */
    .filters > .btn { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    :root {
        --t-4: clamp(2.25rem, 10vw, 3rem);
        --t-3: 2rem;
        --t-2: 1.625rem;
        /* Cele 22 de utilizari inline ale lui --s7 se micsoreaza odata cu el. */
        --s7: 72px;
        --s8: 96px;
    }
    .hero { padding-block: var(--s6) var(--s6); }
    .section { padding-block: var(--s6); }
    .steps { grid-template-columns: 1fr; gap: var(--s4); }
    .stats { grid-template-columns: 1fr; }
    .card-grid, .directory-list .card-grid { grid-template-columns: 1fr; }
    .spec-card, .card-grid--featured .spec-card:first-child,
    .card-grid--featured .spec-card:nth-child(2) { grid-column: span 1; }
    .article-row { grid-template-columns: 1fr; gap: var(--s1); }
    .article-row .arrow { display: none; }
    .filters { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: var(--s5); }
    .cta { padding: var(--s4); }
    .profile__fees li { flex-direction: column; align-items: flex-start; gap: var(--s1); }
    .fieldset { padding: var(--s3); gap: var(--s3); }
    .filters { padding: var(--s3); }
}

/* ---------------------------------------------------------------------------
   Consimțământ: banner + placeholder de hartă
   --------------------------------------------------------------------------- */
.cookie-banner {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    background: var(--surface);
    border-top: 1px solid var(--line-strong);
    box-shadow: var(--shadow-lg);
    padding: var(--s4) var(--s3);
}

.cookie-banner__inner {
    max-width: var(--wrap);
    margin: 0 auto;
    display: grid;
    gap: var(--s4);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.cookie-banner__title { font-size: var(--t-1); margin: 0 0 var(--s2); }

.cookie-banner__text {
    font-size: var(--t-sm);
    color: var(--ink-2);
    margin: 0 0 var(--s1);
    max-width: 78ch;
}

.cookie-banner__actions {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    align-items: stretch;
}

.map-consent {
    display: grid;
    place-content: center;
    gap: var(--s3);
    text-align: center;
    min-height: 340px;
    padding: var(--s5) var(--s4);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r);
    background: var(--surface-sunk);
}

.map-consent p {
    font-size: var(--t-sm);
    color: var(--ink-2);
    max-width: 48ch;
    margin: 0 auto;
}

@media (max-width: 720px) {
    .cookie-banner__inner { grid-template-columns: 1fr; }
}

.legal-draft {
    border: 1px solid var(--danger);
    border-left-width: 4px;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--danger) 6%, var(--surface));
    padding: var(--s3);
    margin-bottom: var(--s5);
    font-size: var(--t-sm);
    color: var(--ink);
}

/* Fara `max-width` pe container: `72ch` fara `margin-inline: auto` intr-un
   `.wrap` de 1280px insemna o coloana de ~610px lipita de marginea stanga, cu
   tot atat gol in dreapta. Textul curge acum pe latimea lui `.wrap`.
   Ce tine randul citibil nu mai e o coloana ingusta, ci structura: titluri si
   liste cu aer, iar paragrafele lungi plafonate la 90ch — mult peste cat era,
   fara sa ajunga la ~150 de caractere pe rand. `margin-inline: 0` e explicit:
   plafonul limiteaza randul, nu muta blocul la mijloc. */
.legal-text { line-height: 1.8; }
.legal-text h2 { font-size: var(--t-2); margin-top: var(--s6); margin-bottom: var(--s3); }
.legal-text h3 { font-size: var(--t-1); margin-top: var(--s5); margin-bottom: var(--s2); }
.legal-text p, .legal-text li { color: var(--ink-2); }
.legal-text p { max-width: 90ch; margin-inline: 0; margin-bottom: var(--s3); }
.legal-text ul { padding-left: var(--s3); display: grid; gap: var(--s2); max-width: 90ch; margin-inline: 0; margin-block: var(--s3); }
.legal-text .legal-draft { max-width: 90ch; margin-inline: 0; }
/* Fara margine proprie: fiecare tabel legal sta intr-un `.table-scroll`, iar
   spatierea verticala o da wrapper-ul. Marginea tabelului nu s-ar mai prabusi
   cu vecinii oricum — `overflow-x: auto` face din wrapper un context de
   formatare de bloc — deci s-ar aduna peste cea a wrapper-ului. */
.legal-text table { width: 100%; border-collapse: collapse; margin: 0; font-size: var(--t-sm); }
.legal-text th, .legal-text td { text-align: left; padding: var(--s2); border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-text th { color: var(--ink); font-weight: 700; }

/* ---------- Bannere de partener (/bannere) ----------
   Cardul de cod foloseste --surface-deep / --on-deep, nu --surface / --ink:
   trebuie sa ramana un panou "de cod" recognoscibil in ambele teme, la fel
   ca banda CTA si footerul, nu sa se inverseze odata cu tema paginii. */
.embed-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s4);
    align-items: start;
}
@media (max-width: 720px) {
    .embed-grid { grid-template-columns: 1fr; }
}

.embed-sample {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
}
.embed-sample__swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s4) var(--s3);
    overflow-x: auto;
}
.embed-sample__swatch--light { background: var(--surface-sunk); }
.embed-sample__swatch--dark { background: var(--surface-deep); }

.embed-sample__body { padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--line); }
.embed-sample__title { font-size: var(--t-0); font-weight: 700; margin: 0 0 4px; color: var(--ink); }
.embed-sample__hint { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); margin: 0 0 var(--s2); }

.embed-code { background: var(--surface-deep); border-radius: var(--r); overflow: hidden; }
.embed-code__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    padding: var(--s1) var(--s1) var(--s1) var(--s3);
    border-bottom: 1px solid color-mix(in srgb, var(--on-deep) 14%, transparent);
}
.embed-code__label {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--on-deep) 60%, transparent);
}
.embed-code pre {
    margin: 0;
    padding: var(--s3);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    color: var(--on-deep);
    overflow-x: auto;
    white-space: pre;
}
.embed-copy-btn {
    flex-shrink: 0;
    font-family: var(--text);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--on-deep);
    background: color-mix(in srgb, var(--on-deep) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--on-deep) 22%, transparent);
    border-radius: var(--r-sm);
    padding: 6px 12px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.embed-copy-btn:hover { background: color-mix(in srgb, var(--on-deep) 20%, transparent); }
.embed-copy-btn:focus-visible { outline: 2px solid var(--pop); outline-offset: 2px; }
.embed-copy-btn[data-copied="true"] {
    color: var(--pop);
    border-color: var(--pop);
    background: color-mix(in srgb, var(--pop) 16%, transparent);
}

/* Honeypot: scos din pagina fara display:none — unii boti ignora campurile
   ascunse cu display:none, dar completeaza tot ce e in DOM. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Textarea a fost pliata in regula comuna de camp, mai sus. Blocul separat de
   aici ii dadea alt padding si alt radius decat inputurilor de langa el. */

/* ---------- Pagina de contact ---------- */
.contact-layout { display: grid; grid-template-columns: 1.4fr minmax(0, 1fr); gap: var(--s5); align-items: start; }
.company-data { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); margin-bottom: var(--s4); }
.company-data dt { font-weight: 600; }
.company-data dd { margin: 0; }
@media (max-width: 860px) {
    .contact-layout { grid-template-columns: 1fr; }
}
/* Acelasi prag ca breakpoint-ul ingust folosit deja mai sus in fisier
   (max-width: 680px): la latimea aia coloana "auto" tot rezerva min-content
   pentru "Comerțului", ceea ce strange coloana dd. Regula sta AICI, dupa
   regula de baza — declarata inainte in fisier, la aceeasi specificitate,
   ar fi pierdut indiferent de media query (ordinea in sursa decide, nu
   conditia). */
@media (max-width: 680px) {
    .company-data { grid-template-columns: 1fr; }
}

/* ---------- Jurnalul de versiuni ---------- */
/* Coloana ingusta e comuna listei si formularului de sugestii de mai jos:
   o singura declaratie, ca sa nu poata diverge cele doua valori. */
.changelog, .versiuni-suggest { max-width: 46rem; }
.changelog { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.changelog__entry { border-left: 2px solid var(--line); padding-left: var(--s4); }
.changelog__entry h2 { font-size: var(--t-1); margin-bottom: var(--s2); }
.changelog__date { font-family: var(--text); font-size: var(--t-sm); font-weight: 400; color: var(--ink-2); margin-left: var(--s2); }
.changelog__entry ul { margin: 0; padding-left: var(--s4); display: grid; gap: var(--s1); }
.changelog__note { font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s2); }

/* ---------- Panoul de administrare ----------
   Adminul imparte app.css cu site-ul public, deci mosteneste tot sistemul.
   Aici raman doar diferentele care tin de el: cele opt linkuri de nav si
   tabelele. Scoparea se face prin `.admin` pe <body>, nu prin `main table`,
   ca sa nu atinga tabelele din paginile legale. */
.admin-nav { flex-wrap: wrap; gap: var(--s3); row-gap: var(--s1); }

.admin table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.admin th {
    text-align: left;
    padding: var(--s2) var(--s3);
    background: var(--surface-sunk);
    color: var(--ink);
    font-weight: 700;
    font-size: var(--t-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}
.admin td {
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.admin tr:last-child td { border-bottom: 0; }
.admin tbody tr:hover td { background: var(--surface-sunk); }

/* Cap de coloana sortabil. Sageata sta mereu in marcaj, ca latimea coloanei sa
   nu sara la click; pe coloanele inactive e doar invizibila, si se arata la
   hover ca o promisiune a directiei pe care o da urmatorul click. */
.admin th a {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.admin th a:hover { color: var(--brand); }
.admin th[aria-sort="none"] .admin-sort__arrow { visibility: hidden; }
.admin th[aria-sort="none"] a:hover .admin-sort__arrow { visibility: visible; opacity: .5; }

/* Coloana de actiuni: butoane mici, pe un singur rand. */
.admin-actions { display: flex; align-items: center; gap: var(--s1); flex-wrap: nowrap; }
.admin-actions form { margin: 0; }
.admin-actions .btn { white-space: nowrap; }

.admin .admin-cell--tight { white-space: nowrap; }

/* ---------- Grafica de fundal ----------
   Motiv abstract de retea: noduri legate intre ele, citit ca retea neuronala
   si ca legatura intre oameni. Pur decorativ, contrast mic, folosit in doua
   locuri. Ca `data:` URI trece de CSP, care are `img-src 'self' data:`. */
.hero::before,
.cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 620px 620px;
}

/* Hero-ul sta pe --surface, care SE inverseaza cu tema, deci motivul nu poate
   avea culoarea scrisa in `data:` URI: verdele inchis disparea pe fundalul
   inchis. Aici desenul e masca (alb + opacity in SVG = alpha-ul mastii), iar
   culoarea vine din `background-color`, deci urmeaza tokenul in ambele teme.
   Banda CTA de mai jos NU are nevoie de asta: --surface-deep nu se inverseaza. */
.hero::before {
    --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 620' fill='%23ffffff' stroke='%23ffffff' stroke-width='1.2' opacity='0.13'%3E%3Cg fill='none'%3E%3Cpath d='M120 90 L280 170 L200 330 Z M280 170 L470 120 M280 170 L420 300 M200 330 L360 430 M420 300 L360 430 M420 300 L540 250 M360 430 L300 540 M470 120 L540 250'/%3E%3C/g%3E%3Ccircle cx='120' cy='90' r='6'/%3E%3Ccircle cx='280' cy='170' r='9'/%3E%3Ccircle cx='200' cy='330' r='6'/%3E%3Ccircle cx='470' cy='120' r='7'/%3E%3Ccircle cx='420' cy='300' r='10'/%3E%3Ccircle cx='360' cy='430' r='7'/%3E%3Ccircle cx='540' cy='250' r='5'/%3E%3Ccircle cx='300' cy='540' r='6'/%3E%3C/svg%3E");
}
/* Fara masca, `background-color` singur ar umple tot hero-ul cu verde plin —
   de aceea perechea culoare + masca sta intreaga in @supports. */
@supports (mask-image: none) or (-webkit-mask-image: none) {
    .hero::before {
        background-color: var(--brand);
        -webkit-mask: var(--motif) right -80px top -60px / 620px 620px no-repeat;
        mask: var(--motif) right -80px top -60px / 620px 620px no-repeat;
    }
}

.cta::before {
    background-position: right -120px bottom -140px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 620' fill='%23E08B5A' stroke='%23E08B5A' stroke-width='1.2' opacity='0.20'%3E%3Cg fill='none'%3E%3Cpath d='M120 90 L280 170 L200 330 Z M280 170 L470 120 M280 170 L420 300 M200 330 L360 430 M420 300 L360 430 M420 300 L540 250 M360 430 L300 540 M470 120 L540 250'/%3E%3C/g%3E%3Ccircle cx='120' cy='90' r='6'/%3E%3Ccircle cx='280' cy='170' r='9'/%3E%3Ccircle cx='200' cy='330' r='6'/%3E%3Ccircle cx='470' cy='120' r='7'/%3E%3Ccircle cx='420' cy='300' r='10'/%3E%3Ccircle cx='360' cy='430' r='7'/%3E%3Ccircle cx='540' cy='250' r='5'/%3E%3Ccircle cx='300' cy='540' r='6'/%3E%3C/svg%3E");
}

/* Pe ecran mic decorul concureaza cu textul in loc sa-l sustina. */
@media (max-width: 860px) {
    .hero::before, .cta::before { display: none; }
}

.btn--sm { padding: 4px 10px; font-size: var(--t-xs); }

.image-block { margin-top: var(--s4); }
.image-block__title { font-size: var(--t-0); font-weight: 600; }
.image-block__help { font-size: var(--t-sm); margin-top: 2px; }
.image-block__list {
    list-style: none;
    padding: 0;
    margin: var(--s3) 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--s3);
}
.image-block__item img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: var(--r);
    border: 1px solid var(--line);
}
.image-block__actions { display: flex; gap: var(--s2); margin-top: var(--s2); flex-wrap: wrap; }
.image-block__upload { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s3); flex-wrap: wrap; }