/* ============================================================
   psihologicrestini.ro — design system
   Limbaj vizual de asociatie profesionala: alb dominant, benzi
   discrete, carduri cu colturi rotunjite si umbre moi.
   8px spacing grid · navy / teal / cyan · fara gradiente
   ============================================================ */

/* ---------- Tokens: light (default) ---------- */
:root {
    --paper:        #FFFFFF;
    --surface:      #FFFFFF;
    --surface-sunk: #F5F7FA;
    --ink:          #1F2937;
    --ink-2:        #52616F;
    --line:         #D9E1E8;
    --line-strong:  #B4C2CE;
    --brand:        #0B2341;
    --brand-hover:  #06192F;
    --on-brand:     #FFFFFF;

    /* Teal are 3.96:1 pe alb — sub pragul AA pentru text mic. Se foloseste
       pentru borduri, contururi si suprafete; pentru text mic si linkuri
       intra --teal-ink, la 5.9:1. */
    --teal:         #008F8C;
    --teal-ink:     #00706E;
    --teal-soft:    #E6F4F3;
    --teal-hover:   #005B59;

    /* Cyan are ~2:1 pe alb si 7.4:1 pe navy. Exclusiv pentru suprafete
       inchise: footer, banda CTA. */
    --cyan:         #39BFEF;
    --danger:       #B42318;
    /* Suprafete care NU se inverseaza. Footerul si banda CTA sunt blocuri
       mari care structureaza pagina; daca ar urma --brand, in tema intunecata
       ar deveni lespezi albastru-deschis intr-o pagina inchisa. */
    --surface-navy: #0B2341;
    --on-navy:      #FFFFFF;

    --shadow-sm: 0 1px 2px rgba(11, 35, 65, .06), 0 1px 3px rgba(11, 35, 65, .04);
    --shadow-md: 0 4px 12px rgba(11, 35, 65, .08), 0 12px 32px -12px rgba(11, 35, 65, .14);
    --shadow-lg: 0 8px 24px rgba(11, 35, 65, .10), 0 24px 56px -20px rgba(11, 35, 65, .18);

    /* 8px grid — capetele de sus cresc pentru ritmul vertical amplu.
       --s0..--s6 raman neschimbate: sunt folosite de sute de ori inline
       pentru spatieri mici, iar dublarea lor ar disloca fiecare pagina. */
    --s0: 4px;  --s1: 8px;  --s2: 16px; --s3: 24px;
    --s4: 32px; --s5: 48px; --s6: 64px; --s7: 112px; --s8: 160px;

    --r-sm: 8px;
    --r: 12px;
    --r-lg: 20px;
    --r-pill: 999px;

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

    /* type scale */
    --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:        #0A1520;
        --surface:      #11202E;
        --surface-sunk: #0D1926;
        --ink:          #E8EEF4;
        --ink-2:        #A3B4C2;
        --line:         #1E3245;
        --line-strong:  #33506B;
        --brand:        #7FC4EC;
        --brand-hover:  #A5D8F5;
        --on-brand:     #06121D;
        --teal:         #3FBFBB;
        --teal-ink:     #5ED0CC;
        --teal-soft:    #10312F;
        --teal-hover:   #7FE0DC;
        --cyan:         #39BFEF;
        --danger:       #F0806E;
        --surface-navy: #08192B;
        --on-navy:      #E8EEF4;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, .5), 0 12px 32px -12px rgba(0, 0, 0, .7);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, .55), 0 24px 56px -20px rgba(0, 0, 0, .8);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --paper:        #0A1520;
    --surface:      #11202E;
    --surface-sunk: #0D1926;
    --ink:          #E8EEF4;
    --ink-2:        #A3B4C2;
    --line:         #1E3245;
    --line-strong:  #33506B;
    --brand:        #7FC4EC;
    --brand-hover:  #A5D8F5;
    --on-brand:     #06121D;
    --teal:         #3FBFBB;
    --teal-ink:     #5ED0CC;
    --teal-soft:    #10312F;
    --teal-hover:   #7FE0DC;
    --cyan:         #39BFEF;
    --danger:       #F0806E;
    --surface-navy: #08192B;
    --on-navy:      #E8EEF4;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .5), 0 12px 32px -12px rgba(0, 0, 0, .7);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .55), 0 24px 56px -20px rgba(0, 0, 0, .8);
    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;
    border-radius: 2px;
}

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(--teal-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;
    transition: background-color .2s ease, border-color .2s ease,
                color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.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 --teal-ink, nu --teal: alb pe --teal pur da 3.96:1, sub AA. */
.btn--secondary { background: var(--teal-ink); color: var(--on-brand); }
.btn--secondary:hover { background: var(--teal-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);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    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; }
}

.nav { display: flex; align-items: center; gap: var(--s4); }
.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(--teal); }
/* Doar pentru dropdown-ul mobil — pe desktop "Cont specialist" 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);
    border-radius: 2px;
}

/* 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(--teal-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(--teal-ink);
    cursor: pointer;
}

/* ---------- FAQ — doua coloane, ca sa umple latimea sectiunii in loc de o
   singura coloana ingusta lipita de marginea stanga. */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s6) var(--s6);
    margin-top: var(--s5);
}
.faq-item h3 { font-size: var(--t-1); }
.faq-item p { margin-top: var(--s1); line-height: 1.75; color: var(--ink-2); }

/* ---------- 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(--teal);
}
.step:nth-child(2) { border-top-color: var(--brand); }
.step:nth-child(3) { border-top-color: var(--cyan); }
.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); }

/* ---------- 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, box-shadow .2s ease, transform .2s ease;
}
.spec-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}
/* 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); }
.spec-card .role {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--teal-ink);
}
.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(--teal-soft);
    color: var(--teal-ink);
    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(--teal-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(--teal-ink); }

.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(--teal-ink); color: var(--teal-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); }
.article-row time {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-ink);
    font-variant-numeric: tabular-nums;
}
.article-row h3 { font-size: var(--t-1); font-weight: 600; color: var(--ink); }
.article-row .arrow { color: var(--teal); font-size: var(--t-1); }

/* ---------- 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(--teal-ink); }
.filters__panel summary:focus-visible { outline: 2px solid var(--teal-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);
}

/* ---------- 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(--teal-ink); }

/* Tabelele din articole trebuie sa poata depasi coloana de text pe mobil fara
   sa faca pagina sa deruleze orizontal — de aici wrapper-ul cu scroll. Scroll-ul
   sta pe wrapper, nu pe <table> cu `display: block`: schimbarea lui `display`
   scoate tabelul din arborele de accesibilitate, iar un tabel comparativ e exact
   continutul care trebuie sa ramana citibil de masini. */
.article-body .table-scroll {
    overflow-x: auto;
    max-width: 100%;
    margin-block: var(--s4);
}

.article-body .table-scroll:focus-visible {
    outline: 2px solid var(--teal-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);
}

/* ---------- CTA band — flat, no gradient ---------- */
.cta {
    background: var(--surface-navy);
    color: var(--on-navy);
    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-navy); font-size: var(--t-2); max-width: 24ch; }
.cta p { color: color-mix(in srgb, var(--on-navy) 80%, transparent); margin-top: var(--s3); max-width: 46ch; }
.cta .btn { background: var(--cyan); color: #0B2341; justify-self: end; position: relative; }
.cta .btn:hover { background: #FFFFFF; color: #0B2341; }

/* ---------- Directory ---------- */
.page-head { padding-block: var(--s6) var(--s5); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: var(--t-3); }

.filters {
    display: grid;
    grid-template-columns: repeat(3, 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. */
.directory-intro {
    max-width: 68ch;
    margin-top: var(--s5);
    color: var(--ink-2);
    line-height: 1.75;
}
.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; }

[data-density-panel].is-hidden { display: none; }

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

.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;
}
.density-toggle__btn.is-active {
    background: var(--surface);
    color: var(--brand);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
}

.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(--teal-soft);
    color: var(--teal-ink);
    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(--teal-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(--teal-ink); }
.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 popup — match the system */
.leaflet-popup-content-wrapper {
    border-radius: var(--r-sm);
    font-family: var(--text);
    box-shadow: var(--shadow-md);
}
.leaflet-popup-content { margin: var(--s3); font-size: var(--t-sm); }
.leaflet-popup-content a { color: var(--teal-ink); font-weight: 600; }

/* ---------- 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; }
.profile h1 { font-size: var(--t-3); margin-top: var(--s1); }
.profile__role { font-size: var(--t-1); color: var(--teal-ink); 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(--teal-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);
}
.profile__body { margin-top: var(--s6); max-width: 68ch; }
.profile__body h2 { font-size: var(--t-2); margin-bottom: var(--s3); }
.profile__body p { line-height: 1.75; }

/* 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; }

.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); }

/* ---------- Footer ---------- */
/* Footerul e singura suprafata navy mare din pagina, deci e singurul loc unde
   --cyan are contrast bun (7.4:1). Pe alb ar fi ilizibil, la ~2:1. */
.site-footer {
    background: var(--surface-navy);
    color: var(--on-navy);
    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(--cyan);
    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-navy);
    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-navy) 82%, transparent);
    border-bottom: 0;
    transition: color .2s ease;
}
.footer-grid a:hover,
.site-footer button.link-more:hover { color: var(--cyan); }
.site-footer .muted { color: color-mix(in srgb, var(--on-navy) 78%, transparent); }
.footer-note {
    margin-top: var(--s6);
    padding-top: var(--s3);
    border-top: 1px solid color-mix(in srgb, var(--on-navy) 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-navy) 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-navy) 82%, transparent);
    text-decoration: none;
    border-bottom: 0;
    transition: color .2s ease;
}
.footer-note__links a:hover { color: var(--cyan); }

/* ---------- 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; }
    .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; }
}

@media (max-width: 860px) {
    #directory-map { height: 200px; }
    .filters { grid-template-columns: 1fr 1fr; }

    /* Nav-ul nu mai dispare pur si simplu: se pliaza sub header si se deschide
       din hamburger. Aceleasi trei linkuri, doar accesibile. */
    .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 specialist" 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: 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); }
    /* O singura banda cu trei coloane despartite de linii subtiri, nu trei
       carduri late stivuite si aliniate la stanga. */
    .stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    .stat {
        padding: var(--s3) var(--s1);
        text-align: center;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .stat + .stat { border-left: 1px solid var(--line); }
    .stat__num { font-size: var(--t-2); }
    .stat__label { font-size: var(--t-xs); line-height: 1.3; }
    .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; }
    .faq-grid { grid-template-columns: 1fr; gap: var(--s5); }

    /* Footer-ul stivuit pe un singur rand ramanea aliniat la stanga din
       mostenirea `.footer-grid` de pe desktop — pe mobil centram tot blocul. */
    .footer-grid { grid-template-columns: 1fr; gap: var(--s6); text-align: center; }
    .footer-brand { justify-content: center; }
    .site-footer .muted { margin-inline: auto; }
    .footer-grid .footer-social { justify-content: center; }
    .footer-note { flex-direction: column; align-items: center; text-align: center; }
    .footer-note__links { justify-content: center; }
    .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);
}

.legal-text { max-width: 72ch; line-height: 1.8; }
.legal-text h2 { font-size: var(--t-2); margin-top: var(--s6); margin-bottom: var(--s2); }
.legal-text h3 { font-size: var(--t-1); margin-top: var(--s4); margin-bottom: var(--s2); }
.legal-text p, .legal-text li { color: var(--ink-2); }
.legal-text ul { padding-left: var(--s3); display: grid; gap: var(--s1); }
.legal-text table { width: 100%; border-collapse: collapse; margin: var(--s3) 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-navy / --on-navy, 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-navy); }

.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-navy); 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-navy) 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-navy) 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-navy);
    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-navy);
    background: color-mix(in srgb, var(--on-navy) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--on-navy) 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-navy) 20%, transparent); }
.embed-copy-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.embed-copy-btn[data-copied="true"] {
    color: var(--cyan);
    border-color: var(--cyan);
    background: color-mix(in srgb, var(--cyan) 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::before {
    background-position: right -80px top -60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 620' fill='%230B2341' stroke='%230B2341' 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");
}

.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='%2339BFEF' stroke='%2339BFEF' 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; }