@charset "UTF-8";
/* ===========================================================================
   GAZETA ROMÂNIEI — foaia de stil publică
   ---------------------------------------------------------------------------
   Rescrisă complet. Versiunea anterioară crescuse organic: reguli duplicate
   (.placeholder-for-mkt era definit de două ori cu valori diferite), layout pe
   float-uri, și un header cu înălțime fixă de 50px care se spărgea vizual la
   orice element adăugat în navigație.

   Structură:
     1. Fonturi
     2. Tokeni de design
     3. Bază și tipografie
     4. Layout
     5. Masthead și navigație
     6. Breadcrumbs
     7. Carduri de articol / listări
     8. Pagina de articol
     9. Coloana laterală
    10. Paginare, căutare, etichete
    11. Profil de autor
    12. Pagina 404
    13. Spații publicitare
    14. Footer
    15. Utilitare
    16. Responsive
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. FONTURI
   Subsetate la latin + diacritice românești (ă Ă â Â î Î ș Ș ț Ț) și punctuație
   tipografică („ ” – …). 5 fețe, 144 KB total, în loc de 8 fețe .ttf și 2,0 MB.
   font-display: swap — textul apare imediat cu fontul de sistem.
   ------------------------------------------------------------------------- */
@font-face {
    font-family: 'Roboto';
    src: url('/assets/Roboto/Roboto-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('/assets/Roboto/Roboto-Italic.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('/assets/Roboto/Roboto-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('/assets/Roboto/Roboto-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('/assets/Roboto/Roboto-Black.woff2') format('woff2');
    font-weight: 900; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------------------
   2. TOKENI DE DESIGN
   Identitatea vizuală pornește din publicație: cerneală de tipar, hârtie, și
   roșul din tricolor ca accent de brand. Albastrul bootstrap #007BFF folosit
   înainte pentru absolut orice a fost înlocuit cu două culori cu roluri
   distincte: roșu pentru identitate și secțiuni, albastru editorial pentru
   link-uri.
   ------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Cerneală: negru cu o urmă de albastru, nu negru pur */
    --ink:          #0F1115;
    --ink-2:        #2E333B;
    --ink-3:        #5E6672;
    --ink-4:        #8A929E;

    /* Hârtie */
    --paper:        #FFFFFF;
    --paper-2:      #F7F6F3;
    --paper-3:      #EFEDE8;

    --rule:         #DFDCD5;
    --rule-soft:    #ECEAE5;

    /* Accent de brand: roșul din tricolor */
    --brand:        #C8102E;
    --brand-dark:   #9E0C24;
    --brand-tint:   #FDF2F3;

    /* Link-uri: albastru editorial, distinct de roșul de brand */
    --link:         #12379B;
    --link-hover:   #0B2570;

    /* Tricolor */
    --tri-blue:     #002B7F;
    --tri-yellow:   #FCD116;
    --tri-red:      #CE1126;

    /**
     * Suprafețe permanent întunecate: masthead, submeniu, sertar, footer.
     * Au tokeni proprii pentru că nu trebuie să se inverseze în tema închisă.
     * Dacă foloseam --ink ca fundal, în tema închisă ar fi devenit text deschis
     * pe text deschis.
     */
    --surface-dark: #0F1115;
    --on-dark:      #FFFFFF;
    --on-dark-2:    rgba(255, 255, 255, .82);
    --on-dark-3:    rgba(255, 255, 255, .5);
    --on-dark-rule: rgba(255, 255, 255, .12);
    --on-dark-fill: rgba(255, 255, 255, .1);

    /* Buton neutru (copiază link) — nu poate folosi --ink-2, care se inversează */
    --btn-neutral:  #2E333B;

    --header-h:     60px;

    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

    --wrap: 1200px;
}

/* ---------------------------------------------------------------------------
   TEMA ÎNTUNECATĂ
   ---------------------------------------------------------------------------
   Trei straturi, în ordinea de precedență:
     1. @media (prefers-color-scheme: dark)  -> preferința sistemului
     2. :root[data-theme="dark"]             -> alegerea explicită a cititorului
     3. :root[data-theme="light"]            -> revine la tema deschisă chiar și
                                                dacă sistemul cere întunecat
   Atributul data-theme este pus pe <html> de PHP, din cookie, deci nu există
   flash de temă greșită la încărcare.

   Roșul de brand este deschis la #FF4D62: #C8102E pe fundal închis coboară sub
   pragul de contrast și își pierde lizibilitatea.
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --ink:          #E8E6E2;
        --ink-2:        #B4B9C1;
        --ink-3:        #8A9099;
        --ink-4:        #6B7078;

        --paper:        #101215;
        --paper-2:      #171A1F;
        --paper-3:      #1E222A;

        --rule:         #2A2F37;
        --rule-soft:    #212630;

        --brand:        #FF4D62;
        --brand-dark:   #FF7385;
        --brand-tint:   #2A1418;

        --link:         #8FADFF;
        --link-hover:   #B3C7FF;

        --surface-dark: #08090C;
        --btn-neutral:  #343A44;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --ink:          #E8E6E2;
    --ink-2:        #B4B9C1;
    --ink-3:        #8A9099;
    --ink-4:        #6B7078;

    --paper:        #101215;
    --paper-2:      #171A1F;
    --paper-3:      #1E222A;

    --rule:         #2A2F37;
    --rule-soft:    #212630;

    --brand:        #FF4D62;
    --brand-dark:   #FF7385;
    --brand-tint:   #2A1418;

    --link:         #8FADFF;
    --link-hover:   #B3C7FF;

    --surface-dark: #08090C;
    --btn-neutral:  #343A44;
}

:root[data-theme="light"] {
    color-scheme: light;

    --ink:          #0F1115;
    --ink-2:        #2E333B;
    --ink-3:        #5E6672;
    --ink-4:        #8A929E;

    --paper:        #FFFFFF;
    --paper-2:      #F7F6F3;
    --paper-3:      #EFEDE8;

    --rule:         #DFDCD5;
    --rule-soft:    #ECEAE5;

    --brand:        #C8102E;
    --brand-dark:   #9E0C24;
    --brand-tint:   #FDF2F3;

    --link:         #12379B;
    --link-hover:   #0B2570;

    --surface-dark: #0F1115;
    --btn-neutral:  #2E333B;
}

/* ---------------------------------------------------------------------------
   3. BAZĂ ȘI TIPOGRAFIE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* Reset global pentru figure. Browserul aplică implicit "margin: 1em 40px",
   iar cele 40px laterale îngustau imaginile din cardurile de articol. */
figure { margin: 0; }

h1, h2, h3, h4 {
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

img { max-width: 100%; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

/* Titlul de pagină: greutate 900, tracking negativ — ton de masthead */
.page-title {
    font-size: clamp(26px, 3.6vw, 38px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin-bottom: var(--sp-4);
}

/* Titlurile de secțiune. Înainte foloseau două pseudo-elemente flex cu bare
   negre de 6px, care produceau un rezultat inconsistent. Acum: eyebrow
   uppercase cu literaj lărgit, pe o linie roșie de brand. */
.section-title {
    display: block;
    margin: 0 0 var(--sp-4);
    padding-bottom: var(--sp-2);
    border-bottom: 2px solid var(--ink);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    position: relative;
}
.section-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 48px; height: 2px;
    background: var(--brand);
}
.section-title span { padding: 0; }
.section-title a { color: inherit; text-decoration: none; }

/* Focus vizibil: nu exista niciun stil de focus, deci navigarea cu Tab era
   imposibil de urmărit. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--link);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
}

main {
    min-height: 60vh;
    padding: calc(var(--header-h) + var(--sp-5)) 0 var(--sp-7);
}

/* Grilă de conținut: grid cu gap, în locul float-urilor cu padding compensator */
.articles-listing,
.articles-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: var(--sp-7);
    align-items: start;
}
.articles-listing > .left,
.articles-details > .left,
.articles-listing > .right,
.articles-details > .right { min-width: 0; }

/* Link "sari la conținut" */
.skip-link {
    position: absolute;
    top: -80px; left: var(--sp-4);
    z-index: 300;
    padding: 10px 18px;
    background: var(--paper);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    border: 2px solid var(--ink);
    transition: top .15s ease-out;
}
.skip-link:focus { top: var(--sp-2); }

/* ---------------------------------------------------------------------------
   5. MASTHEAD ȘI NAVIGAȚIE
   Flex, înălțime automată. Nu se mai poate sparge pe două rânduri.
   ------------------------------------------------------------------------- */
#site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: var(--surface-dark);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    min-height: var(--header-h);
}

/* Tricolorul: o singură linie de 3px sub masthead */
.tricolor {
    display: block;
    height: 3px;
    background: linear-gradient(to right,
        var(--tri-blue)   0 33.33%,
        var(--tri-yellow) 33.33% 66.66%,
        var(--tri-red)    66.66% 100%);
}

/* --- Marca --- */
.brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 0 0 auto;
    text-decoration: none;
    color: var(--on-dark);
}
.brand img {
    display: block;
    width: 34px; height: 34px;
    object-fit: contain;
}
.brand-name {
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}
.brand-name-accent {
    color: var(--tri-yellow);
    margin-left: .28em;
}
.brand:hover .brand-name { color: var(--on-dark); }

/* --- Panoul de navigație --- */
.nav-panel {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    margin-left: auto;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-links > li { position: relative; }

.nav-links > li > a {
    display: block;
    padding: 8px 10px;
    color: var(--on-dark-2);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .12s, border-color .12s;
}
.nav-links > li > a:hover {
    color: var(--on-dark);
    border-bottom-color: var(--brand);
}
/* Secțiunea curentă e marcată, nu doar la hover */
.nav-links > li > a[aria-current="page"] {
    color: var(--on-dark);
    border-bottom-color: var(--tri-yellow);
}

/* Declanșatorul pentru județe, cu caret */
.nav-trigger { position: relative; padding-right: 20px !important; }
.nav-trigger::after {
    content: "";
    position: absolute;
    right: 6px; top: 50%;
    margin-top: -2px;
    border: 4px solid transparent;
    border-top-color: currentColor;
    transition: transform .15s;
}
.nav-trigger.active::after { transform: rotate(180deg); margin-top: -6px; }

/* Submeniul cu județe */
.nav-submenu-wrapper {
    position: fixed;
    top: calc(var(--header-h) + 3px);
    left: 0; right: 0;
    background: var(--surface-dark);
    border-top: 1px solid var(--on-dark-rule);
    padding: var(--sp-6) 0 var(--sp-7);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    /* Ascuns fără a strica accesibilitatea layout-ului */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .16s ease-out, transform .16s ease-out, visibility 0s .16s;
}
.nav-submenu-wrapper.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .16s ease-out, transform .16s ease-out;
}
.nav-submenu-x1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-6) var(--sp-5);
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--on-dark);
}
.nav-submenu-x1 > li { min-width: 0; }
.nav-submenu-x1 > li > strong {
    display: block;
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-3);
    border-bottom: 2px solid var(--brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tri-yellow);
}
.nav-submenu-x1 ul { list-style: none; margin: 0; padding: 0; }
.nav-submenu-x1 li a {
    display: block;
    padding: 5px 0;
    color: var(--on-dark-2);
    font-size: 14px;
    text-decoration: none;
}
.nav-submenu-x1 li a:hover { color: var(--tri-yellow); }

/* --- Căutarea din masthead --- */
#nav-search {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    gap: 0;
}
#nav-search input[type="search"] {
    width: 150px;
    min-width: 0;
    padding: 7px 10px;
    background: var(--on-dark-fill);
    border: 1px solid rgba(255, 255, 255, .18);
    border-right: 0;
    border-radius: 3px 0 0 3px;
    color: var(--on-dark);
    font-family: inherit;
    font-size: 13px;
    transition: background .12s, width .16s;
}
#nav-search input[type="search"]::placeholder { color: var(--on-dark-3); }
#nav-search input[type="search"]:focus {
    background: rgba(255, 255, 255, .16);
    outline: none;
    width: 190px;
}
#nav-search button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 0 3px 3px 0;
    color: #fff;
    cursor: pointer;
}
#nav-search button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* --- Comutatorul de temă --- */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px; height: 38px;
    padding: 0;
    background: var(--on-dark-fill);
    border: 1px solid var(--on-dark-rule);
    border-radius: 50%;
    color: var(--on-dark-2);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.theme-toggle:hover {
    background: rgba(255, 255, 255, .18);
    color: var(--on-dark);
}
.theme-icon { display: none; }

/**
 * Ce pictogramă se afișează:
 *   tema deschisă activă  -> lună  (apasă pentru a trece la întunecat)
 *   tema închisă activă   -> soare (apasă pentru a trece la deschis)
 *
 * Se rezolvă din CSS, nu din JavaScript, ca starea corectă să fie randată chiar
 * și înainte ca scriptul să ruleze.
 */
.theme-icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
    .theme-icon-moon { display: none; }
    .theme-icon-sun  { display: block; }
}
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun  { display: block; }
:root[data-theme="light"] .theme-icon-moon { display: block; }
:root[data-theme="light"] .theme-icon-sun  { display: none; }

/* --- Butonul de meniu (mobil) --- */
.nav-toggle {
    display: none;
    position: relative;
    width: 42px; height: 42px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
    content: "";
    position: absolute;
    left: 11px;
    width: 20px; height: 2px;
    /* --on-dark, NU --paper: barele stau pe masthead-ul permanent întunecat.
       Cu --paper deveneau negru pe negru în tema închisă, adică invizibile. */
    background: var(--on-dark);
    transition: transform .18s ease-out, opacity .12s;
}
.nav-toggle::before { top: 14px; }
.nav-toggle span    { top: 20px; }
.nav-toggle::after  { top: 26px; }

.nav-toggle.active::before { top: 20px; transform: rotate(45deg); }
.nav-toggle.active::after  { top: 20px; transform: rotate(-45deg); }
.nav-toggle.active span    { opacity: 0; }

/* Masca de fundal */
#noscroll-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    visibility: hidden;
    opacity: 0;
    z-index: 98;
    transition: opacity .16s, visibility 0s .16s;
}
html.noscroll #noscroll-mask {
    visibility: visible;
    opacity: 1;
    transition: opacity .16s;
}
html.noscroll { overflow: hidden; }

/* ---------------------------------------------------------------------------
   6. BREADCRUMBS
   ------------------------------------------------------------------------- */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--sp-1);
    list-style: none;
    margin: 0 0 var(--sp-5);
    padding: 0;
    font-size: 12.5px;
}
.breadcrumbs-item { display: flex; align-items: center; }
.breadcrumbs li:not(:last-child)::after {
    content: "›";
    padding: 0 var(--sp-2);
    color: var(--ink-4);
}
.breadcrumbs-item-link {
    color: var(--ink-3);
    text-decoration: none;
}
.breadcrumbs-item-link:hover { color: var(--brand); text-decoration: underline; }
.breadcrumbs li:last-child .breadcrumbs-item-link {
    color: var(--ink-3);
    pointer-events: none;
    /* Ultimul element e pagina curentă: îl trunchiem, titlurile pot fi lungi */
    max-width: 44ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   7. CARDURI DE ARTICOL / LISTĂRI
   Estetică editorială: linii subțiri și spațiu, nu umbre și colțuri rotunjite.
   ------------------------------------------------------------------------- */
.listing-meta {
    margin: calc(-1 * var(--sp-2)) 0 var(--sp-6);
    font-size: 13px;
    color: var(--ink-3);
}

/* Eticheta de categorie: pătrat roșu + text uppercase */
.tiny-cat-label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    color: var(--brand);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
}
.tiny-cat-label::before {
    content: "";
    width: 4px; height: 12px;
    background: var(--brand);
    flex: 0 0 auto;
}
.tiny-cat-label:hover { color: var(--brand-dark); text-decoration: underline; }

.article {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
    padding-bottom: var(--sp-5);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--rule-soft);
}
.article:last-of-type { border-bottom: 0; }

.article-thumbnail {
    margin: 0;
    overflow: hidden;
    background: var(--paper-3);
}
.article-thumbnail a { display: block; }
.article-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    /* aspect-ratio rezervă spațiul înainte de încărcare -> fără layout shift.
       Înainte se folosea max-height: 210px + overflow: hidden, care tăia
       imaginile la o înălțime arbitrară. */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .3s ease-out;
}
.article-thumbnail a:hover img { transform: scale(1.03); }

.article-thumbnail-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--paper-3) 0%, var(--paper-2) 100%);
}

.article-title {
    margin: 0 0 var(--sp-2);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
}
.article-title a { color: var(--ink); text-decoration: none; }
.article-title a:hover { color: var(--brand); }

.article-short-desc {
    margin: 0 0 var(--sp-3);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

.article-date {
    display: block;
    font-size: 12px;
    /* --ink-4 dădea doar 3,1:1 pe alb — sub pragul WCAG AA pentru text normal */
    color: var(--ink-3);
}

/* Articolul principal: imagine mare, titlu de dimensiune editorială */
.article.article-lg {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding-bottom: var(--sp-6);
    margin-bottom: var(--sp-6);
    border-bottom: 3px solid var(--ink);
}
.article.article-lg .article-thumbnail img { aspect-ratio: 16 / 9; }
.article.article-lg .article-title {
    font-size: clamp(24px, 3.4vw, 36px);
    font-weight: 900;
    letter-spacing: -0.032em;
    line-height: 1.06;
    margin-bottom: var(--sp-3);
}
.article.article-lg .article-short-desc {
    font-size: 17px;
    line-height: 1.55;
    max-width: 62ch;
}
.article.article-lg .tiny-cat-label { font-size: 12.5px; }

.main-article-separator { display: none; }

/* ---------------------------------------------------------------------------
   8. PAGINA DE ARTICOL
   ------------------------------------------------------------------------- */
.article-full { max-width: 100%; }

.articles-details .page-title {
    font-size: clamp(27px, 4.2vw, 42px);
    font-weight: 900;
    letter-spacing: -0.033em;
    line-height: 1.07;
    border-bottom: 0;
    margin-bottom: var(--sp-4);
}

.article-lead {
    margin: 0 0 var(--sp-4);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 60ch;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--rule);
    font-size: 13px;
    color: var(--ink-3);
}
.article-meta a { color: var(--link); font-weight: 500; text-decoration: none; }
.article-meta a:hover { text-decoration: underline; }
.article-meta-author { font-size: 13.5px; }
.article-meta-category {
    padding: 3px 9px;
    background: var(--brand-tint);
    color: var(--brand) !important;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Imaginea articolului: figcaption sub imagine.
   Înainte era poziționat absolut PESTE fotografie și îi acoperea partea de jos. */
.articles-details .article-thumbnail {
    width: 100%;
    position: static;
    margin-bottom: var(--sp-5);
    background: transparent;
}
.articles-details .article-thumbnail img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    transform: none;
}
.articles-details .article-thumbnail figcaption {
    position: static;
    padding-top: var(--sp-2);
    background: transparent;
    font-size: 12.5px;
    font-style: italic;
    color: var(--ink-3);
}

/* Corpul articolului: măsură de citire confortabilă */
.article-content { padding: 0; }
.articles-details .article-content {
    margin-top: var(--sp-5);
    max-width: 40em;
    font-size: 17.5px;
    line-height: 1.7;
    color: var(--ink);
}
.articles-details .article-content p { margin: 0 0 var(--sp-5); }
.articles-details .article-content p:last-child { margin-bottom: 0; }
.articles-details .article-content h2,
.articles-details .article-content h3 {
    margin: var(--sp-7) 0 var(--sp-3);
    font-weight: 700;
    line-height: 1.25;
}
.articles-details .article-content h2 { font-size: 24px; }
.articles-details .article-content h3 { font-size: 20px; }
.articles-details .article-content a { color: var(--link); text-decoration: underline; }
.articles-details .article-content ul,
.articles-details .article-content ol { margin: 0 0 var(--sp-5); padding-left: var(--sp-5); }
.articles-details .article-content li { margin-bottom: var(--sp-2); }
.articles-details .article-content img { height: auto; margin: var(--sp-5) 0; }
.articles-details .article-content blockquote {
    margin: var(--sp-6) 0;
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
    border-left: 3px solid var(--brand);
    font-size: 19px;
    line-height: 1.5;
    color: var(--ink-2);
}
.articles-listing .article-content p { margin-bottom: 0; }

/* --- Share, fără SDK-uri externe --- */
.article-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-6) 0;
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.article-share-label {
    margin-right: var(--sp-1);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.article-share-btn {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 9px 15px;
    border: 0;
    border-radius: 3px;
    background: var(--btn-neutral);
    color: #fff !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .12s;
}
.article-share-btn:hover { opacity: .85; }
.article-share-fb   { background: #1877F2; }
.article-share-wa   { background: #25D366; }
.article-share-x    { background: #000; }
.article-share-copy { background: var(--btn-neutral); }
.article-share-copy.copied { background: #17624A; }
.article-share-native { display: none; background: var(--brand); }
.article-share-native.available { display: inline-flex; }

/* --- Etichete și autor --- */
.article-source-and-tags {
    margin-bottom: var(--sp-6);
    line-height: 1.6;
}
.article-tags { margin-bottom: var(--sp-3); }
.article-tags-label,
.article-author-line {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.article-author-line { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; }
.tag-link {
    display: inline-block;
    margin: 0 var(--sp-1) var(--sp-2) 0;
    padding: 5px 11px;
    background: var(--paper-2);
    border: 1px solid var(--rule-soft);
    border-radius: 20px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
}
.tag-link:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }

/* --- Navigare articol anterior / următor --- */
.article-siblings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-4);
    margin: var(--sp-6) 0;
}
.article-sibling {
    padding: var(--sp-4);
    border: 1px solid var(--rule);
    border-radius: 3px;
    text-decoration: none;
    transition: border-color .12s, background .12s;
}
.article-sibling:hover { border-color: var(--brand); background: var(--brand-tint); }
.article-sibling-dir {
    display: block;
    margin-bottom: var(--sp-2);
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.article-sibling-title {
    display: block;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
}
.article-sibling-next { text-align: right; }

/* --- "Alte știri similare" --- */
.other-news-container { margin-top: var(--sp-7); }
.other-news-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--sp-5);
}
.other-news-row .section-title { grid-column: 1 / -1; }
/* Carduri verticale: imagine sus, titlu dedesubt.
   Regula veche folosea float: left cu lățime fixă de 260px și min-height: 280px,
   ceea ce scotea cardurile din flux și lăsa spațiu gol sub ele. */
.other-news-container .widget-element {
    display: block;
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
    min-height: 0;
    border-bottom: 0;
    box-shadow: none;
}
.other-news-container .widget-element img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 0;
    margin-bottom: var(--sp-3);
}
.other-news-container .widget-element .article-title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.005em;
}
.other-news-container .widget-element .article-title a,
.other-news-container .widget-element a {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: var(--ink);
    text-decoration: none;
}
.other-news-container .widget-element a:hover { color: var(--brand); }

/* ---------------------------------------------------------------------------
   9. COLOANA LATERALĂ
   ------------------------------------------------------------------------- */
.widget { margin-bottom: var(--sp-7); }
.widget-title { margin-bottom: var(--sp-4); }
.widget figure { margin: 0; display: block; }
.widget img { max-width: 100%; }

/* Layout orizontal (miniatură + titlu) DOAR în bara laterală.
   Scopul este important: aceeași clasă .widget-element este folosită și de
   "Alte știri similare", care are nevoie de carduri verticale. */
.widget .widget-element {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: start;
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--rule-soft);
}
.widget .widget-element:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.widget .article-thumb { margin: 0; }
.widget .article-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.widget .widget-element .article-title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
}
.widget .widget-element .article-title a { color: var(--ink); text-decoration: none; }
.widget .widget-element .article-title a:hover { color: var(--brand); }

/* Curs valutar */
.widget-exchange-rate {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--sp-3) 0;
    margin: 0;
    border-bottom: 1px solid var(--rule-soft);
    font-variant-numeric: tabular-nums;
}
.widget-exchange-rate-title { font-size: 14px; color: var(--ink-2); }
.currency-rate { font-weight: 700; color: var(--ink); }

/* Județe */
.widget.local-news ul {
    max-height: 260px;
    overflow: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rule-soft);
}
.widget.local-news li { border-bottom: 1px solid var(--rule-soft); }
.widget.local-news li:last-child { border-bottom: 0; }
.widget.local-news li a {
    display: block;
    padding: 8px var(--sp-3);
    color: var(--ink-2);
    font-size: 14px;
    text-decoration: none;
}
.widget.local-news li a:hover { background: var(--paper-2); color: var(--brand); }
.widget.local-news .selected-cat a {
    background: var(--brand-tint);
    color: var(--brand);
    font-weight: 500;
    box-shadow: inset 3px 0 0 var(--brand);
}

/* Cele mai citite */
.most-read-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: most-read;
}
.most-read-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--sp-3);
    counter-increment: most-read;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--rule-soft);
}
.most-read-list li:last-child { border-bottom: 0; }
.most-read-list li::before {
    content: counter(most-read);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    color: var(--brand);
    letter-spacing: -0.04em;
}
.most-read-list a {
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
}
.most-read-list a:hover { color: var(--brand); }

/* ---------------------------------------------------------------------------
   10. PAGINARE, CĂUTARE, ETICHETE
   ------------------------------------------------------------------------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-7) 0 0;
    padding-top: var(--sp-5);
    border-top: 2px solid var(--ink);
}
.pagination a,
.pagination .pagination-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px: ținta minimă de atingere pe mobil */
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--rule);
    border-radius: 3px;
    color: var(--ink);
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}
.pagination a:hover { border-color: var(--ink); background: var(--paper-2); }
.pagination .pagination-current {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    font-weight: 700;
}
.pagination-prev, .pagination-next { font-weight: 500; }
.pagination-gap { padding: 0 var(--sp-1); color: var(--ink-4); }

/* Formularul de căutare (pagină și 404) */
.site-search { display: flex; gap: var(--sp-2); margin: 0; }
.site-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px var(--sp-4);
    border: 2px solid var(--rule);
    border-radius: 3px;
    background: var(--paper);
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
}
.site-search input[type="search"]:focus { border-color: var(--ink); outline: none; }
.site-search button {
    flex: 0 0 auto;
    padding: 11px var(--sp-5);
    border: 2px solid var(--brand);
    border-radius: 3px;
    background: var(--brand);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}
.site-search button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.site-search-lg { max-width: 620px; margin: 0 0 var(--sp-6); }

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: 0;
}

/* ---------------------------------------------------------------------------
   11. PROFIL DE AUTOR
   ------------------------------------------------------------------------- */
.author-profile {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
    padding-bottom: var(--sp-5);
    margin-bottom: var(--sp-6);
    border-bottom: 3px solid var(--ink);
}
.author-profile-avatar {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--paper-3);
}
.author-profile-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: var(--paper);
    font-size: 38px;
    font-weight: 900;
}
.author-profile-meta { min-width: 0; }
.author-profile .page-title { margin-bottom: var(--sp-1); }
.author-profile-bio {
    margin-top: var(--sp-3);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 62ch;
}

/* ---------------------------------------------------------------------------
   12. PAGINA 404
   ------------------------------------------------------------------------- */
.error-page h2 { margin-bottom: var(--sp-4); }
.error-page-lead {
    max-width: 52ch;
    margin-bottom: var(--sp-6);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-2);
}
.error-page-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: 0;
}
.error-page-categories a {
    display: inline-block;
    padding: 9px var(--sp-4);
    background: var(--paper-2);
    border: 1px solid var(--rule-soft);
    border-radius: 3px;
    color: var(--ink-2);
    font-size: 14.5px;
    text-decoration: none;
}
.error-page-categories a:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }
.error-page-articles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--sp-5);
    margin-top: var(--sp-4);
}
.error-page-article a { text-decoration: none; }
.error-page-article img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.error-page-article h3 {
    margin: var(--sp-3) 0 var(--sp-1);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
}
.error-page-article a:hover h3 { color: var(--brand); }

/* ---------------------------------------------------------------------------
   13. SPAȚII PUBLICITARE
   (Regulile erau definite de două ori, cu border-radius diferit.)
   ------------------------------------------------------------------------- */
.mkt-container { margin-bottom: var(--sp-5); text-align: center; }
.mkt-container-footer { margin-top: var(--sp-5); }
.mkt-container a { display: block; }
.mkt-container img { max-height: 150px; max-width: 100%; height: auto; }
.mkt-container.mkt-container-side img { max-height: none; }

/**
 * Reclamele sunt imagini raster produse pentru fundal alb. Pe tema închisă,
 * un JPEG/PNG cu fundal alb ar apărea ca un dreptunghi alb izbitor, iar unul cu
 * fundal transparent și text negru ar deveni ilizibil.
 * Le punem pe o suprafață albă proprie, deci creativele existente rămân corecte
 * fără să fie refăcute.
 */
/* Doar fundal, fara padding: un creativ opac arata normal (fundalul nu se vede),
   iar unul cu transparenta primeste suportul alb de care are nevoie. */
:root[data-theme="dark"] .mkt-container img {
    background: #FFFFFF;
    border-radius: 3px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mkt-container img {
        background: #FFFFFF;
        border-radius: 3px;
    }
}

.placeholder-for-mkt {
    display: block;
    width: 100%;
    min-height: 50px;
    margin: 0 0 var(--sp-5);
    padding: var(--sp-5) var(--sp-3);
    border: 1px dashed var(--rule);
    border-radius: 3px;
    background: var(--paper-2);
    color: var(--ink-3);
    text-align: center;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}
.placeholder-for-mkt:hover { background: var(--paper-3); border-color: var(--ink-4); }
.placeholder-for-mkt .mkt-icon {
    display: inline-block;
    width: 26px; height: 26px;
    margin-bottom: var(--sp-2);
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--paper);
    color: var(--ink-4);
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    vertical-align: middle;
}
.placeholder-for-mkt .mkt-text {
    display: block;
    margin-top: var(--sp-1);
    font-size: 13px;
    color: var(--ink-3);
}

.job-section {
    margin: var(--sp-6) 0;
    padding: var(--sp-5);
    border: 1px dashed var(--brand);
    border-radius: 3px;
    background: var(--brand-tint);
    text-align: center;
}
.job-section h2 { margin-bottom: var(--sp-3); font-size: 20px; }
.add-job-placeholder {
    display: inline-block;
    padding: 10px var(--sp-5);
    border-radius: 3px;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.add-job-placeholder:hover { background: var(--brand-dark); color: #fff; }

/* ---------------------------------------------------------------------------
   14. FOOTER
   ------------------------------------------------------------------------- */
footer {
    position: relative;
    z-index: 2;
    padding: var(--sp-7) 0 var(--sp-6);
    border-top: 3px solid var(--brand);
    background: var(--surface-dark);
    color: var(--on-dark-2);
    font-size: 13px;
}
footer a {
    color: var(--on-dark-2);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
footer a:hover { color: var(--tri-yellow); }
.footer-top ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2) var(--sp-5);
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-top ul li { position: relative; padding: var(--sp-1) 0; margin: 0; }
.footer-top ul li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%; right: calc(-1 * var(--sp-5) / 2);
    width: 1px; height: 12px;
    margin-top: -6px;
    background: var(--on-dark-rule);
}
.footer-bottom {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--on-dark-rule);
    color: var(--on-dark-3);
    font-size: 12.5px;
}

/* ---------------------------------------------------------------------------
   15. UTILITARE
   ------------------------------------------------------------------------- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-underline { text-decoration: underline; }
.mt-50 { margin-top: var(--sp-7); }
.mt-100 { margin-top: var(--sp-8); }
.simple-html { max-width: 42em; }
.simple-html h2 { margin: var(--sp-6) 0 var(--sp-3); font-size: 22px; }
.simple-html p { margin-bottom: var(--sp-4); line-height: 1.65; }
.simple-html ul, .simple-html ol { margin-bottom: var(--sp-4); padding-left: var(--sp-5); line-height: 1.65; }

.has-validation-errors input,
.has-validation-errors select,
.has-validation-errors textarea {
    border: 2px solid var(--brand) !important;
    outline: none;
}
.invalid-feedback { color: var(--brand); font-size: 13px; }

/* ---------------------------------------------------------------------------
   16. RESPONSIVE
   ------------------------------------------------------------------------- */

/* Tabletă mare: navigația nu mai încape pe un rând */
@media (max-width: 1150px) {
    .nav-toggle { display: block; }

    /* Ordinea vizuală în bara de sus: marcă … comutator temă, meniu.
       În DOM, panoul de navigație stă între buton și comutator, pentru că
       selectorul ".nav-toggle.active + .nav-panel" cere frați imediați. */
    .brand        { order: 1; }
    .theme-toggle { order: 2; margin-left: auto; }
    .nav-toggle   { order: 3; }

    /* Panoul devine un sertar sub masthead. Se afișează prin clasa .active de
       pe buton — buton și panou sunt frați imediați. */
    .nav-panel {
        position: fixed;
        top: calc(var(--header-h) + 3px);
        left: 0; right: 0;
        z-index: 99;
        display: block;
        max-height: calc(100vh - var(--header-h) - 3px);
        overflow-y: auto;
        margin: 0;
        padding: var(--sp-4) 0 var(--sp-5);
        background: var(--surface-dark);
        border-top: 1px solid var(--on-dark-rule);
        box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .16s ease-out, transform .16s ease-out, visibility 0s .16s;
    }
    .nav-toggle.active + .nav-panel {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition: opacity .16s ease-out, transform .16s ease-out;
    }

    .nav-links { display: block; padding: 0 var(--sp-5); }
    .nav-links > li { border-bottom: 1px solid var(--on-dark-rule); }
    .nav-links > li:last-child { border-bottom: 0; }
    .nav-links > li > a {
        padding: 13px 0;
        font-size: 15px;
        border-bottom: 0;
        border-left: 3px solid transparent;
        padding-left: var(--sp-3);
    }
    .nav-links > li > a:hover,
    .nav-links > li > a[aria-current="page"] {
        border-bottom: 0;
        border-left-color: var(--brand);
        background: rgba(255, 255, 255, .04);
    }

    /* Submeniul de județe se deschide în flux, în interiorul sertarului */
    .nav-submenu-wrapper {
        position: static;
        display: none;
        padding: var(--sp-4) 0 var(--sp-2);
        border-top: 0;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: none;
    }
    .nav-submenu-wrapper.open { display: block; }
    .nav-submenu-wrapper > .container { padding: 0; }
    .nav-submenu-x1 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-5) var(--sp-4); }

    #nav-search { margin: var(--sp-4) var(--sp-5) 0; }
    #nav-search input[type="search"] { width: 100%; flex: 1 1 auto; }
    #nav-search input[type="search"]:focus { width: 100%; }
    #nav-search { display: flex; }

    /* Coloana laterală trece sub conținut.
       Înainte era "display: none": pe mobil se pierdeau complet navigarea pe
       județe, cursul valutar și widget-urile, deși HTML-ul lor se trimitea. */
    .articles-listing,
    .articles-details {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-6);
    }
    .articles-listing > .right,
    .articles-details > .right {
        padding-top: var(--sp-5);
        border-top: 3px solid var(--ink);
    }
    /* Widget-urile în două coloane cât timp există spațiu */
    .articles-listing > .right,
    .articles-details > .right {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 0 var(--sp-6);
        align-items: start;
    }
}

/* Telefon */
@media (max-width: 700px) {
    :root { --sp-7: 36px; --sp-8: 52px; }

    .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }

    .brand img { width: 28px; height: 28px; }
    .brand-name { font-size: 16px; }

    /* Cardurile trec pe o coloană: imaginea sus, textul dedesubt */
    .article {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-3);
    }
    .article.article-lg .article-title { font-size: clamp(22px, 6.4vw, 28px); }
    .article.article-lg .article-short-desc { font-size: 15.5px; }
    .article-title { font-size: 18px; }

    .articles-details .article-content,
    .articles-details .article-content p { font-size: 16.5px; }
    .article-lead { font-size: 17px; }

    .author-profile { grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-4); }
    .author-profile-avatar { width: 64px; height: 64px; }
    .author-profile-avatar-initials { font-size: 26px; }

    .article-sibling-next { text-align: left; }

    .articles-listing > .right,
    .articles-details > .right { grid-template-columns: minmax(0, 1fr); }

    .footer-top ul { flex-direction: column; gap: var(--sp-1); }
    .footer-top ul li:not(:last-child)::after { display: none; }

    #mkt-billboard-container { padding: 0; }

    /* Pe ecrane mici păstrăm doar controalele esențiale de paginare */
    .pagination a:not(.pagination-prev):not(.pagination-next),
    .pagination .pagination-gap { display: none; }
    .pagination .pagination-current { display: inline-flex; }
}

/* Miniaturile din bara laterală sunt mai înguste pe ecrane late */
@media (min-width: 1151px) {
    .widget .widget-element { grid-template-columns: 84px minmax(0, 1fr); }
}


/* ---------------------------------------------------------------------------
   17. PWA — bara de instalare
   Apare doar dacă browserul confirmă că aplicația e instalabilă
   (evenimentul beforeinstallprompt), inserată din JavaScript.
   ------------------------------------------------------------------------- */
.install-bar {
    position: fixed;
    left: var(--sp-4);
    right: var(--sp-4);
    /* Respectă zona sigură pe telefoanele cu bară de gesturi */
    bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    z-index: 150;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    max-width: 560px;
    margin: 0 auto;
    padding: var(--sp-4);
    background: var(--surface-dark);
    border: 1px solid var(--on-dark-rule);
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .2s ease-out, transform .2s ease-out;
}
.install-bar.visible { opacity: 1; transform: translateY(0); }

.install-bar-text { flex: 1 1 200px; min-width: 0; }
.install-bar-text strong {
    display: block;
    color: var(--on-dark);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.install-bar-text span {
    display: block;
    margin-top: 2px;
    color: var(--on-dark-2);
    font-size: 13px;
    line-height: 1.4;
}

.install-bar-actions {
    display: flex;
    flex: 0 0 auto;
    gap: var(--sp-2);
}
.install-bar-actions button {
    min-height: 40px;
    padding: 9px 16px;
    border-radius: 3px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.install-bar-yes {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
}
.install-bar-yes:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.install-bar-no {
    background: transparent;
    border: 1px solid var(--on-dark-rule);
    color: var(--on-dark-2);
}
.install-bar-no:hover { color: var(--on-dark); }

@media (max-width: 480px) {
    .install-bar { gap: var(--sp-3); }
    .install-bar-actions { flex: 1 1 100%; }
    .install-bar-actions button { flex: 1 1 auto; }
}

/* În modul standalone (aplicație instalată) nu mai are sens invitația */
@media (display-mode: standalone) {
    .install-bar { display: none !important; }
}


/* ---------------------------------------------------------------------------
   18. FORMULAR DE INTERNSHIP
   ------------------------------------------------------------------------- */
.internship-form { max-width: 720px; margin-top: var(--sp-5); }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-5);
}
.form-field-full { grid-column: 1 / -1; }

.form-field label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}
.form-field .req { color: var(--brand); }

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 11px var(--sp-3);
    background: var(--paper);
    border: 2px solid var(--rule);
    border-radius: 3px;
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
}
.form-field textarea { resize: vertical; min-height: 120px; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--ink);
    outline: none;
}

/* Starea de eroare: bordură + mesaj, nu doar culoare —
   culoarea singură nu e accesibilă pentru daltonism. */
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
    border-color: var(--brand);
}
.field-error {
    display: block;
    margin-top: var(--sp-1);
    font-size: 13px;
    font-weight: 500;
    color: var(--brand);
}
.field-error:empty { display: none; }

.field-hint {
    margin-top: var(--sp-1);
    font-size: 12.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-weight: 400 !important;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}
.checkbox-field input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--brand);
    cursor: pointer;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
}
.form-actions button {
    min-height: 48px;
    padding: 13px var(--sp-6);
    background: var(--brand);
    border: 2px solid var(--brand);
    border-radius: 3px;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
}
.form-actions button:hover:not(:disabled) {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}
.form-actions button:disabled { opacity: .55; cursor: wait; }
.form-status { font-size: 14px; color: var(--ink-3); }

.form-message {
    margin-top: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    border-radius: 3px;
    border-left: 3px solid;
    font-size: 15px;
    line-height: 1.55;
}
.form-message p { margin: var(--sp-2) 0 0; }
.form-message-ok {
    background: #E4F1EB;
    border-color: #17624A;
    color: #124B37;
}
.form-message-error {
    background: var(--brand-tint);
    border-color: var(--brand);
    color: var(--brand-dark);
}

/* În tema închisă, fundalurile de mesaj trebuie recalculate:
   verdele/roșul deschis pe fundal închis pierd contrastul. */
:root[data-theme="dark"] .form-message-ok {
    background: #122B24;
    border-color: #6FCFA6;
    color: #9BE0C2;
}
:root[data-theme="dark"] .form-message-error {
    background: #2A1418;
    border-color: var(--brand);
    color: #FFB3BC;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .form-message-ok {
        background: #122B24;
        border-color: #6FCFA6;
        color: #9BE0C2;
    }
    :root:not([data-theme="light"]) .form-message-error {
        background: #2A1418;
        border-color: var(--brand);
        color: #FFB3BC;
    }
}

@media (max-width: 700px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .form-actions { flex-direction: column; align-items: stretch; }
    .form-actions button { width: 100%; }
}

/* Data cursului BNR, sub lista de valute */
.widget-exchange-rate-date {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--rule-soft);
    font-size: 12px;
    color: var(--ink-3);
}