/* ============================================================================
   microsite-admitere.css — cele trei pagini de admitere ale microsite-ului

   DE CE EXISTĂ, PESTE CONTRACTUL COMUN DIN microsite.css
   Contractul comun dă scheletul: cap de pagină, grilă de cartonașe, tabel,
   pastilă, stare de gol. El nu are însă trei lucruri de care zona de admitere
   nu se poate lipsi:

     1. O CIFRĂ MARE. Media ultimului elev admis e singurul număr pentru care un
        părinte deschide pagina. Într-un er-ms-cartonas-meta, scrisă cu 0,72rem
        și majuscule, ar fi arătat ca o notă de subsol.
     2. O EVOLUȚIE PE ANI. Trei medii puse una lângă alta, cu diferența dintre
        ele, spun dacă profilul urcă sau coboară — ceea ce o singură cifră nu
        spune. Nu e un tabel: e o linie citită dintr-o privire.
     3. UN ACORDEON. Întrebările frecvente se deschid cu <details>/<summary>, ca
        meniul din antet. Browserul le dă comportamentul; aici primesc doar
        aspectul, ca să nu arate ca o listă de fișiere.

   REGULA DE CULOARE. Niciun cod de culoare scris de mână, numai var(--ms-*).
   Modul de contrast ridicat din _tokens.css rescrie tokenii, deci o culoare
   scrisă aici ar fi rămas colorată pe negru, exact la utilizatorii care au cerut
   contrast. Din același motiv --ms-accent-2-light se folosește DOAR peste
   --ms-accent: în contrast ridicat devine alb, iar alb pe hârtie albă nu se
   vede.

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


/* ============================================================================
   1. BANDA DE CONTEXT DIN CAPUL PAGINII

   Nivelurile de învățământ și totalul locurilor, sub titlu. Stă în capul
   colorat, deci textul e pe accent.
   ============================================================================ */

.er-ms-adm-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.er-ms-adm-context-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--ms-accent-2);
    border-radius: var(--ms-radius);
    font-family: var(--ms-font-cifre);
    font-size: 0.78rem;
    color: var(--ms-accent-2-light);
}

.er-ms-adm-context-item .material-icons {
    font-size: 1rem;
}

.er-ms-adm-context-item strong {
    color: var(--ms-surface);
    font-weight: 600;
}


/* ============================================================================
   2. CIFRA DE ADMITERE

   Media ultimului admis, cu anul lângă ea. Cifrele sunt în IBM Plex Mono, ca
   restul numerelor din microsite: la mediile cu trei zecimale, o fontă cu
   cifre de lățime egală ține virgulele aliniate pe coloană.
   ============================================================================ */

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

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

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

.er-ms-adm-cifra-an {
    font-family: var(--ms-font-cifre);
    font-size: 0.78rem;
    color: var(--ms-ink-soft);
}

/* Varianta din capul colorat al paginii de detaliu. Aceleași proporții, alte
   culori: pe accent, hârtia și cerneala nu se mai văd. */
.er-ms-adm-cifra-pe-accent {
    background: transparent;
    border-color: var(--ms-accent-2);
}

.er-ms-adm-cifra-pe-accent .er-ms-adm-cifra-eticheta,
.er-ms-adm-cifra-pe-accent .er-ms-adm-cifra-an {
    color: var(--ms-accent-2-light);
}

.er-ms-adm-cifra-pe-accent .er-ms-adm-cifra-valoare {
    color: var(--ms-surface);
}

/* Rândul de cifre din capul paginii de detaliu: media, locurile, orele. */
.er-ms-adm-cifre-rand {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
}


/* ============================================================================
   3. EVOLUȚIA PE ANI

   Câte o coloană îngustă per an școlar, cel mai recent primul. Diferența față
   de anul anterior se scrie CU SEMN, nu doar cu o culoare: pe un sit cu mod de
   contrast ridicat, o săgeată verde și una roșie devin amândouă negre.
   ============================================================================ */

.er-ms-adm-evolutie {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.er-ms-adm-evolutie-an {
    flex: 1 1 96px;
    min-width: 96px;
    padding: 9px 11px;
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
}

/* Anul cel mai recent e cifra pe care se uită toată lumea, deci se desprinde
   de celelalte cu o margine mai apăsată. */
.er-ms-adm-evolutie-an-recent {
    border-color: var(--ms-accent-2);
    border-width: 2px;
}

.er-ms-adm-evolutie-eticheta {
    display: block;
    font-family: var(--ms-font-cifre);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: var(--ms-ink-soft);
}

.er-ms-adm-evolutie-valoare {
    display: block;
    margin-top: 3px;
    font-family: var(--ms-font-cifre);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ms-accent);
}

.er-ms-adm-evolutie-delta {
    display: block;
    margin-top: 2px;
    font-family: var(--ms-font-cifre);
    font-size: 0.68rem;
    color: var(--ms-ink-soft);
}


/* ============================================================================
   4. CARTONAȘUL DE PROFIL

   Peste er-ms-cartonas: două coloane pe ecran larg — textul la stânga, cifra
   la dreapta — și o talpă cu butonul spre pagina de detaliu.
   ============================================================================ */

.er-ms-adm-profil {
    gap: 16px;
}

.er-ms-adm-profil-sus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
}

.er-ms-adm-profil-etichete {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.er-ms-adm-profil-jos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--ms-line);
}

/* Extrasul din descrierea scrisă de școală. Se taie la câteva rânduri, fiindcă
   textul întreg are pagina lui: un cartonaș de patru paragrafe ar fi împins
   cifra de admitere sub marginea ecranului. */
.er-ms-adm-profil-extras {
    margin: 0;
    font-family: var(--ms-font-text);
    font-size: var(--ms-text-base);
    line-height: 1.6;
    color: var(--ms-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ============================================================================
   5. PAGINA DE DETALIU — două coloane

   Textul editorial pe coloana largă, cifrele pe cea îngustă. Pe telefon
   coloanele se pun una sub alta, cu cifrele PRIMELE: cine deschide pagina pe
   telefon caută media, nu descrierea.
   ============================================================================ */

.er-ms-adm-strat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 32px;
    align-items: start;
}

.er-ms-adm-panou {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px;
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-top: 3px solid var(--ms-accent-2);
    border-radius: var(--ms-radius);
}

.er-ms-adm-panou-titlu {
    margin: 0;
    font-family: var(--ms-font-titlu);
    font-size: var(--ms-titlu-sm);
    font-weight: 600;
    color: var(--ms-accent);
}

/* Perechile „etichetă — valoare" din panou: locuri scoase la admitere, ore de
   specialitate, locuri ocupate în clasele existente. */
.er-ms-adm-fapte {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.er-ms-adm-fapt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ms-line);
}

.er-ms-adm-fapt:last-child {
    border-bottom: none;
}

.er-ms-adm-fapt dt {
    font-family: var(--ms-font-text);
    font-size: var(--ms-text-sm);
    color: var(--ms-ink-soft);
}

.er-ms-adm-fapt dd {
    margin: 0;
    font-family: var(--ms-font-cifre);
    font-size: var(--ms-text-base);
    font-weight: 600;
    color: var(--ms-accent);
}


/* ============================================================================
   6. SECȚIUNILE DE TEXT ȘI LISTELE DE COMPETENȚE

   tCompetente și tOportunitati au câte un element pe rând, separate prin CRLF,
   fără marcatori scriși în text. Sparte pe rânduri în C#, devin o listă
   adevărată: un cititor de ecran anunță „listă cu 5 elemente", ceea ce un bloc
   de text cu rânduri păstrate nu poate face.
   ============================================================================ */

.er-ms-adm-sectiune {
    margin-bottom: 34px;
}

.er-ms-adm-sectiune:last-child {
    margin-bottom: 0;
}

.er-ms-adm-titlu {
    margin: 0 0 12px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--ms-accent-2);
    font-family: var(--ms-font-titlu);
    font-size: var(--ms-titlu-sm);
    font-weight: 600;
    color: var(--ms-accent);
}

.er-ms-adm-text {
    margin: 0;
    max-width: 72ch;
    font-family: var(--ms-font-text);
    font-size: var(--ms-text-base);
    line-height: 1.7;
    color: var(--ms-ink-soft);
}

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

.er-ms-adm-lista li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-left: 3px solid var(--ms-accent-2);
    border-radius: var(--ms-radius);
    font-family: var(--ms-font-text);
    font-size: var(--ms-text-base);
    line-height: 1.55;
    color: var(--ms-ink);
}

.er-ms-adm-lista .material-icons {
    flex: 0 0 auto;
    font-size: 1.05rem;
    color: var(--ms-accent);
}


/* ============================================================================
   7. ACORDEONUL DE ÎNTREBĂRI

   <details>/<summary>, ca meniul din antet: merge fără JavaScript, se deschide
   de la tastatură cu Enter și e anunțat ca „extins/restrâns" de cititoarele de
   ecran, fără nicio linie de cod.

   Marcatorul propriu al browserului e ascuns și înlocuit cu o pictogramă
   marcată aria-hidden: triunghiul implicit se așază pe prima linie a unei
   întrebări de două rânduri și arată strâmb.
   ============================================================================ */

.er-ms-adm-faq {
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    margin-bottom: 10px;
}

.er-ms-adm-faq[open] {
    border-color: var(--ms-accent-2);
}

.er-ms-adm-faq > summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
    cursor: pointer;
    font-family: var(--ms-font-text);
    font-size: var(--ms-text-base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--ms-accent);
    list-style: none;
}

.er-ms-adm-faq > summary::-webkit-details-marker {
    display: none;
}

.er-ms-adm-faq > summary::marker {
    content: '';
}

.er-ms-adm-faq > summary:hover {
    background: var(--ms-paper);
}

.er-ms-adm-faq > summary:focus-visible {
    outline: 2px solid var(--ms-accent);
    outline-offset: -2px;
}

.er-ms-adm-faq-semn {
    flex: 0 0 auto;
    color: var(--ms-accent-2);
}

.er-ms-adm-faq[open] .er-ms-adm-faq-semn {
    transform: rotate(180deg);
}

.er-ms-adm-faq-raspuns {
    padding: 15px 18px 17px;
    border-top: 1px solid var(--ms-line);
    font-family: var(--ms-font-text);
    font-size: var(--ms-text-base);
    line-height: 1.7;
    color: var(--ms-ink-soft);
    max-width: 78ch;
}


/* ============================================================================
   8. NAVIGAREA ÎNTRE CATEGORII ȘI ÎNTRE PROFILURI

   Ancore, nu filtre din JavaScript: toate întrebările rămân în pagină, deci se
   pot căuta cu Ctrl+F și se pot tipări. Un filtru ar fi ascuns unsprezece
   întrebări din douăsprezece.
   ============================================================================ */

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

.er-ms-adm-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-adm-navigare a:hover {
    border-color: var(--ms-accent-2);
    background: var(--ms-paper-warm);
}

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

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

/* Bara de la baza paginii de detaliu, spre celelalte profiluri. */
.er-ms-adm-alte {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--ms-line);
}


/* ============================================================================
   9. LEGĂTURILE DIN TEXT

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

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

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

/* În titluri și în capetele de rând din tabel, sublinierea apare la trecerea cu
   mouse-ul: acolo nu e nevoie de ea ca semn, fiindcă titlul e deja ținta
   evidentă. Conturul de focus, care e cel ce contează la tastatură, vine din
   regula globală. */
.er-ms-adm-legatura-titlu:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}


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

@media (max-width: 900px) {

    /* Panoul cu cifrele urcă deasupra textului: pe telefon, media de admitere nu
       are voie să stea la trei ecrane de derulare sub titlu. */
    .er-ms-adm-strat {
        grid-template-columns: 1fr;
    }

    .er-ms-adm-panou {
        order: -1;
    }

    .er-ms-adm-profil-sus {
        grid-template-columns: 1fr;
    }

    .er-ms-adm-cifra-valoare {
        font-size: 1.75rem;
    }

    .er-ms-adm-evolutie-an {
        flex-basis: 84px;
        min-width: 84px;
    }
}