/* ============================================================================
   microsite-burse.css — pagina „Burse și sprijin financiar" a microsite-ului

   DE CE EXISTĂ, PESTE CONTRACTUL COMUN DIN microsite.css
   Contractul dă scheletul: capul de pagină, grila de cartonașe, tabelul, pastila
   de etichetă, starea de gol. Nu are însă cele trei lucruri de care pagina de
   burse nu se poate lipsi:

     1. O CASETĂ CU CEAS. Termenul de depunere e singura informație din pagină
        care se schimbă singură, în fiecare zi. Pusă între criterii, ca un
        er-ms-cartonas-meta, ar fi ajuns la cititor după șase paragrafe de
        condiții — adică prea târziu.
     2. O PERECHE DE CIFRE PE FIECARE BURSĂ. Suma lunară și termenul sunt cele
        două lucruri pentru care se deschide pagina. În text curent, o sumă se
        citește ca o notă de subsol.
     3. PATRU STĂRI DE TERMEN, DEOSEBITE FĂRĂ CULOARE. „Se închide în 3 zile",
        „termen deschis", „termen încheiat" și „fără termen" trebuie să se
        deosebească și pe hârtie tipărită alb-negru, și în modul de contrast
        ridicat, unde toate fundalurile devin alb sau negru.

   REGULA DE CULOARE. Niciun cod de culoare scris de mână, numai var(--ms-*).
   Modul de contrast din _tokens.css rescrie tokenii, deci o culoare scrisă aici
   ar fi rămas colorată exact la utilizatorii care au cerut contrast. Din același
   motiv, culorile unității — injectate în layout ca variabile pe body — se aplică
   și zonei de burse fără nicio regulă suplimentară.

   CE NU SE FOLOSEȘTE, DELIBERAT: er-ms-eticheta-accent. În paleta de contrast
   ridicat fundalul ei (--ms-accent-2) și textul ei (--ms-accent-dark) devin
   amândouă negru, deci pastila ar fi dispărut. Stările „încheiat" și „fără
   termen" își primesc aici pastile proprii, construite pe margine și pe hârtie,
   nu pe un fundal plin.

   DEOSEBIREA NU STĂ NICIODATĂ NUMAI ÎN CULOARE. Fiecare stare are text propriu
   în marcaj; aici primește, în plus, o formă proprie — margine plină, margine
   întreruptă, fundal de hârtie caldă — ca să se vadă și când culorile sunt
   reduse la două.

   Fără umbre proprii: în contrast ridicat sunt oricum șterse, iar separarea o fac
   marginile, ca în restul microsite-ului.
   ============================================================================ */


/* ============================================================================
   1. CIFRELE DIN CAPUL PAGINII

   Câte burse, câte cu termen deschis, câte fără termen, câte încheiate. Stau în
   capul colorat, deci textul e pe accent: --ms-accent-2-light pentru etichete
   (în contrast devine alb, adică vizibil pe negru) și --ms-surface pentru cifre.
   ============================================================================ */

.er-ms-brs-sumar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.er-ms-brs-sumar-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--ms-accent-2);
    border-radius: var(--ms-radius);
}

.er-ms-brs-sumar-valoare {
    font-family: var(--ms-font-cifre);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.05;
    color: var(--ms-surface);
}

.er-ms-brs-sumar-eticheta {
    font-family: var(--ms-font-cifre);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ms-accent-2-light);
}


/* ============================================================================
   2. CASETA CU CEAS

   Prima zonă a corpului paginii. Nu e o alertă de sistem, e o informație a
   școlii, deci nu primește nici role="alert", nici roșu pe tot fundalul: numai
   marginea de sus se îngroașă când există un termen urgent, iar urgența propriu-
   zisă e scrisă în cuvinte, în pastilele rândurilor.
   ============================================================================ */

.er-ms-brs-ceas {
    padding: 20px 22px;
    margin-bottom: 34px;
    background: var(--ms-paper-warm);
    border: 1px solid var(--ms-line);
    border-top: 3px solid var(--ms-accent-2);
    border-radius: var(--ms-radius);
}

.er-ms-brs-ceas-titlu {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-family: var(--ms-font-titlu);
    font-size: var(--ms-titlu-sm);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ms-accent);
}

.er-ms-brs-ceas-titlu .material-icons {
    flex: 0 0 auto;
    font-size: 1.3rem;
    color: var(--ms-accent-2);
}

/* Titlul variantei urgente: pictograma trece pe --ms-urgent, care în contrast
   ridicat devine negru, deci rămâne citibilă. Semnul principal rămâne însă
   textul — „un termen se închide în curând" — nu culoarea pictogramei. */
.er-ms-brs-ceas-titlu-urgent .material-icons {
    color: var(--ms-urgent);
}

.er-ms-brs-ceas-text {
    margin: 0;
    max-width: 78ch;
    font-family: var(--ms-font-text);
    font-size: var(--ms-text-base);
    line-height: 1.65;
    color: var(--ms-ink-soft);
}

.er-ms-brs-ceas-lista {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Un rând pe bursă: denumirea, data, zilele rămase. Pe ecran larg stau pe aceeași
   linie; pe telefon se rup, fiindcă o dată scrisă întreg („12 martie 2026") nu
   încape lângă un titlu de bursă. */
.er-ms-brs-ceas-rand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-left: 3px solid var(--ms-urgent);
    border-radius: var(--ms-radius);
    font-family: var(--ms-font-text);
    font-size: var(--ms-text-base);
    line-height: 1.5;
}

.er-ms-brs-ceas-data {
    font-family: var(--ms-font-cifre);
    font-size: 0.82rem;
    color: var(--ms-ink-soft);
}


/* ============================================================================
   3. NAVIGAREA ÎNTRE CATEGORIILE LEGALE

   Ancore către grupele din pagină, nu filtre: toate bursele rămân în document,
   deci se caută cu Ctrl+F, se tipăresc și se pot trimite prin legătură directă.
   ============================================================================ */

.er-ms-brs-navigare {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}

.er-ms-brs-navigare a {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 8px 14px;
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    font-family: var(--ms-font-text);
    font-size: var(--ms-text-sm);
    color: var(--ms-accent);
}

.er-ms-brs-navigare a:hover {
    border-color: var(--ms-accent-2);
    background: var(--ms-paper-warm);
}

.er-ms-brs-navigare a:focus-visible {
    outline: 2px solid var(--ms-accent);
    outline-offset: 2px;
}

.er-ms-brs-navigare-numar {
    font-family: var(--ms-font-cifre);
    font-size: 0.72rem;
    color: var(--ms-ink-soft);
}


/* ============================================================================
   4. LISTA DE CARTONAȘE

   Bursele sunt un <ul> peste er-ms-grila: cititorul de ecran anunță „listă cu 3
   elemente" înainte de primul cartonaș. Marcatorii se scot aici, nu în marcaj.
   ============================================================================ */

.er-ms-brs-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.er-ms-brs-cartonas {
    gap: 14px;
}

/* Bursa cu termen încheiat rămâne în pagină — condițiile publicate într-un an
   sunt utile pentru anul următor — dar se citește ca arhivă: hârtie caldă în loc
   de suprafață albă și margine ÎNTRERUPTĂ la stânga. Forma marginii e semnul care
   supraviețuiește tiparului alb-negru; textul „termen încheiat" din pastilă
   rămâne semnul principal. */
.er-ms-brs-cartonas-incheiat {
    background: var(--ms-paper-warm);
    border-left: 3px dashed var(--ms-line);
}

.er-ms-brs-cartonas-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

/* Pictogramele din pastile: fără regula asta, Material Icons le-ar fi randat la
   24px într-o pastilă de 0,68rem. Marcate aria-hidden în marcaj, deci sunt strict
   decor peste textul stării. */
.er-ms-brs-cartonas-cap .er-ms-eticheta .material-icons {
    font-size: 0.95rem;
}


/* ============================================================================
   5. CELE DOUĂ CIFRE ALE BURSEI: suma lunară și termenul

   Stau una lângă alta, în aceeași formă, fiindcă sunt cele două jumătăți ale
   aceleiași întrebări: cât primesc și până când cer. Cifrele sunt în IBM Plex
   Mono, ca toate numerele microsite-ului.
   ============================================================================ */

.er-ms-brs-cifre {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.er-ms-brs-cifra {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: var(--ms-paper-warm);
    border: 1px solid var(--ms-line);
    border-left: 3px solid var(--ms-accent-2);
    border-radius: var(--ms-radius);
}

/* Pe cartonașul de arhivă, hârtia caldă a cartonașului și cea a cifrei ar fi fost
   aceeași, deci caseta cifrei ar fi dispărut. Trece pe suprafață albă. */
.er-ms-brs-cartonas-incheiat .er-ms-brs-cifra {
    background: var(--ms-surface);
}

.er-ms-brs-cifra-eticheta {
    font-family: var(--ms-font-cifre);
    font-size: 0.66rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ms-ink-soft);
}

.er-ms-brs-cifra-valoare {
    font-family: var(--ms-font-cifre);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ms-accent);
}

/* „Necomunicat" nu e o cifră, deci nu se scrie ca o cifră: aceeași poziție, dar
   fără greutate și fără majuscule de titlu, ca să nu fie citit dintr-o privire ca
   sumă reală. */
.er-ms-brs-cifra-valoare-lipsa {
    font-weight: 400;
    font-size: var(--ms-text-base);
    color: var(--ms-ink-soft);
}

.er-ms-brs-cifra-detaliu {
    font-family: var(--ms-font-text);
    font-size: var(--ms-text-sm);
    line-height: 1.4;
    color: var(--ms-ink-soft);
}


/* ============================================================================
   6. CRITERIILE ȘI ACTELE

   Două secțiuni de text scris de școală, afișat escapat, cu rândurile păstrate
   (er-ms-text-pastrat din contract). Titlurile sunt <h4> sub <h3>-ul bursei, deci
   nu au voie să concureze cu el: cifre mici, majuscule, culoare de accent.
   ============================================================================ */

.er-ms-brs-sectiune {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--ms-line);
}

.er-ms-brs-sectiune-titlu {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-family: var(--ms-font-cifre);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ms-accent);
}

.er-ms-brs-sectiune-titlu .material-icons {
    font-size: 1rem;
    color: var(--ms-accent-2);
}


/* ============================================================================
   7. PASTILELE DE STARE PROPRII

   er-ms-eticheta (calm) e „termen deschis", er-ms-eticheta-urgent e termenul care
   se închide în curând — amândouă din contract, amândouă citibile în contrast
   ridicat. Lipsesc două stări, care se adaugă aici:

     - „termen încheiat": fără fundal plin, numai margine. Ceva care s-a terminat
       nu are voie să atragă privirea mai mult decât ce e deschis, dar trebuie să
       rămână lizibil, deci nu se estompează cu opacitate.
     - „fără termen": hârtie albă cu margine de accent. Nu e nici urgență, nici
       pierdere — e o bursă care se acordă din oficiu.

   Ambele stau pe --ms-surface sau pe transparent, cu text --ms-ink-soft ori
   --ms-accent: în contrast ridicat iese negru pe alb, nu negru pe negru, cum s-ar
   fi întâmplat cu er-ms-eticheta-accent.
   ============================================================================ */

.er-ms-brs-stare-incheiat {
    background: transparent;
    border: 1px solid var(--ms-line);
    color: var(--ms-ink-soft);
}

.er-ms-brs-stare-oficiu {
    background: var(--ms-surface);
    border: 1px solid var(--ms-accent-2);
    color: var(--ms-accent);
}


/* ============================================================================
   8. TABELUL CU TOATE TERMENELE

   Structura vine din contract (er-ms-tabel, er-ms-tabel-cadru). Aici primește
   numai ce ține de conținutul lui: cifrele în fontă monospațiată, ca datele să se
   citească pe coloană, și rândul de arhivă marcat prin fundal, nu prin culoarea
   textului.
   ============================================================================ */

.er-ms-brs-tabel-zona {
    margin-top: 44px;
}

.er-ms-brs-celula-cifre {
    font-family: var(--ms-font-cifre);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Rândul unei burse cu termen încheiat. Fundalul e al doilea semn; primul rămâne
   pastila „termen încheiat" din coloana de stare, fiindcă un fundal cu 4% altă
   nuanță nu se vede la tipar și nu se aude la cititorul de ecran. */
.er-ms-brs-rand-incheiat {
    background: var(--ms-paper-warm);
}

/* Pastilele din tabel nu au pictograme, deci nu au nevoie de regula de mărime;
   au nevoie doar să nu se rupă pe două rânduri într-o celulă îngustă. */
.er-ms-brs-tabel-zona .er-ms-eticheta {
    white-space: nowrap;
}


/* ============================================================================
   9. NOTA DE LA BAZA PAGINII ȘI LEGĂTURILE DIN TEXT

   microsite.css anulează sublinierea tuturor legăturilor. Într-un titlu sau
   într-un buton e corect — poziția spune că e de apăsat. Într-un paragraf nu:
   singurul semn ar rămâne culoarea, iar în contrast ridicat toate culorile devin
   negru pe alb, deci legătura ar dispărea din frază. De aceea legăturile din text
   își primesc sublinierea înapoi, aici.
   ============================================================================ */

.er-ms-brs-nota {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 34px;
    padding: 18px 20px;
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-left: 3px solid var(--ms-accent-2);
    border-radius: var(--ms-radius);
}

.er-ms-brs-nota .material-icons {
    flex: 0 0 auto;
    font-size: 1.2rem;
    color: var(--ms-accent-2);
}

.er-ms-brs-legatura {
    color: var(--ms-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.er-ms-brs-legatura:hover {
    text-decoration-thickness: 2px;
}


/* ============================================================================
   10. ECRANE MICI

   Pe telefon, cifrele burselor trec una sub alta și cele din capul paginii se
   micșorează: patru casete de 1,45rem pe un ecran de 360px ar fi împins titlul
   paginii sub marginea de sus.
   ============================================================================ */

@media (max-width: 900px) {

    .er-ms-brs-ceas {
        padding: 16px 16px;
    }

    .er-ms-brs-sumar-valoare {
        font-size: 1.2rem;
    }

    .er-ms-brs-cifre {
        grid-template-columns: 1fr;
    }

    /* Rândurile casetei de termene: denumirea pe primul rând, data și zilele
       rămase pe al doilea. Aliniate la stânga, nu centrate pe verticală, fiindcă
       un titlu de bursă de două rânduri ar fi împins data la mijlocul lui. */
    .er-ms-brs-ceas-rand {
        align-items: flex-start;
        gap: 6px;
    }
}