/* ============================================================================
   microsite-despre.css — completările grupului „Despre noi”

   TREI PAGINI: /{slug}/Echipa, /{slug}/BazaMateriala, /{slug}/Documente.
   Se încarcă din fiecare dintre ele prin @section Styles, deci după
   microsite.css: regulile de aici se adaugă peste contractul comun, nu îl
   rescriu.

   CE NU E AICI, ȘI DE CE
   Scheletul (cap de pagină, firimituri, grilă, cartonaș, grup, tabel, pastilă,
   stare de gol, butoane) vine din microsite.css și NU se redefinește. Aici stau
   numai formele pe care contractul nu le are: medalionul cu iniţiale, citatul
   directorului, rândul de document cu mărime și tip de fișier, banda de cifre
   din capul paginii.

   DE CE PREFIXUL er-ms-dn-
   Cele patru grupuri de pagini se scriu în paralel, fiecare cu foaia lui de
   stil, iar toate se încarcă peste aceeași microsite.css. Un nume plauzibil ca
   „er-ms-sumar” l-ar fi putut inventa și alt grup, cu alte reguli, iar cele două
   s-ar fi suprapus în liniște, pe pagini pe care niciunul dintre autori nu le
   deschide. Prefixul „dn” (despre noi) face coliziunea imposibilă.

   CULORILE sunt exclusiv var(--ms-*). Bara de accesibilitate comută modul de
   contrast ridicat rescriind chiar acele variabile în _tokens.css; o culoare
   scrisă de mână ar fi rămas colorată pe negru, adică zona asta ar fi fost
   singura care nu se comută.

   FUNCȚIILE ȘI ETICHETELE MONO folosesc --ms-ink-soft, nu --ms-accent-2:
   auriul pe hârtie albă dă un raport de contrast sub 3:1, iar aici e text de
   citit, nu ornament. Auriul rămâne pe fundalurile închise, unde funcționează.
   ============================================================================ */


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

   Stă în er-ms-pagina-cap, adică pe fundalul de accent. Există fiindcă toate
   trei paginile răspund întâi la o întrebare cantitativă — câți oameni, câte
   spații, câte documente — iar răspunsul merită să fie deasupra listei, nu
   numărat de vizitator.
   ============================================================================ */

.er-ms-dn-sumar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 34px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb, var(--ms-accent-2-light) 40%, transparent);
}

.er-ms-dn-sumar-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.er-ms-dn-sumar-valoare {
    font-family: var(--ms-font-cifre);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ms-accent-2-light);
}

.er-ms-dn-sumar-eticheta {
    font-family: var(--ms-font-cifre);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ms-surface);
}


/* ============================================================================
   2. ZONELE PAGINII

   Paginile interioare nu au benzi colorate ca prima pagină: totul stă pe
   aceeași hârtie, iar separarea o face spațiul. De aceea zonele au numai
   distanță și titlu, nu fundal.
   ============================================================================ */

.er-ms-dn-sectiune {
    margin-bottom: 64px;
}

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

.er-ms-dn-sectiune-titlu {
    margin: 0 0 10px;
    font-size: var(--ms-titlu-md);
    color: var(--ms-accent);
}

.er-ms-dn-sectiune-intro {
    max-width: 74ch;
    margin: 0 0 26px;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--ms-ink-soft);
}

/* Notă de context: de ce lipsește ceva, sau ce nu se publică. Marcată și cu
   pictogramă și cu poziție, nu doar cu bordura colorată. */
.er-ms-dn-nota {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 74ch;
    margin: 0 0 30px;
    padding: 14px 16px;
    background: var(--ms-paper-warm);
    border: 1px solid var(--ms-line);
    border-left: 3px solid var(--ms-accent);
    border-radius: var(--ms-radius);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ms-ink-soft);
}

.er-ms-dn-nota .material-icons {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--ms-accent);
}

/* Butonul dintr-o stare de gol. er-ms-body pune margine zero pe p, iar butonul
   lipit de text arăta ca parte din propoziție. */
.er-ms-dn-gol-actiune {
    margin-top: 20px;
}

/* Text numai pentru cititoarele de ecran. Trebuie pentru butoanele de descărcare
   din arhiva de documente: pe ecran scrie „Descarcă”, fiindcă titlul e chiar
   deasupra, dar într-o listă de linkuri douăzeci de „Descarcă” identice nu spun
   nimic. Nu se folosește display:none — ar fi scos textul și din citire. */
.er-ms-dn-doar-citit {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================================
   3. MEDALIONUL CU INIȚIALE

   Personal_TD.tImagineProfil e NULL pe toate rândurile și nu există fotografii
   în proiect. Un substituent gri cu silueta „utilizator fără poză” ar fi arătat
   ca o eroare de încărcare; iniţialele arată ca o alegere. Aceeași soluție ca
   pentru inițiala directorului de pe prima pagină.

   Cercul e decorativ pentru cititorul de ecran (aria-hidden în pagină): numele
   întreg stă alături, iar „A.C.” citit înaintea lui ar fi fost zgomot.
   ============================================================================ */

.er-ms-dn-medalion {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border: 2px solid var(--ms-accent-2);
    border-radius: 50%;
    background: var(--ms-accent);
    color: var(--ms-surface);
    font-family: var(--ms-font-titlu);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    user-select: none;
}

.er-ms-dn-medalion-mic {
    width: 68px;
    height: 68px;
    font-size: 1.2rem;
}


/* ============================================================================
   4. CUVÂNTUL DIRECTORULUI

   tCitat e vorba unui om, nu descrierea unei instituții, deci se așază ca citat:
   blockquote, literă serif cu înclinare, semnătură dedesubt. white-space
   pre-wrap fiindcă textul se afișează escapat și rândurile lui sunt singura
   formatare care supraviețuiește — vezi nota din er-ms-text-pastrat.
   ============================================================================ */

.er-ms-dn-citat {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 26px;
    align-items: start;
    padding: 30px 32px;
    background: var(--ms-paper-warm);
    border: 1px solid var(--ms-line);
    border-left: 4px solid var(--ms-accent-2);
    border-radius: var(--ms-radius);
}

.er-ms-dn-citat-text {
    margin: 0;
    font-family: var(--ms-font-titlu);
    font-size: var(--ms-text-lg);
    font-style: italic;
    line-height: 1.62;
    color: var(--ms-ink);
    white-space: pre-wrap;
}

.er-ms-dn-citat-semnatura {
    margin-top: 16px;
    font-family: var(--ms-font-cifre);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: var(--ms-ink-soft);
}

/* cite e înclinat implicit, dar citatul de deasupra e deja înclinat: numele ar
   fi arătat ca o continuare a lui. */
.er-ms-dn-citat-semnatura cite {
    font-style: normal;
    font-weight: 600;
    color: var(--ms-ink);
}


/* ============================================================================
   5. CONDUCEREA

   Alt tratament decât restul echipei, intenționat: sunt oamenii pe care un
   părinte vrea să-i vadă întâi, iar cartonașul lor e mai lat, cu medalionul
   alături de text și cu mini-CV-ul întreg, nu tăiat.

   Bordura de sus e aurie, ca să se distingă de er-ms-persoana din restul
   echipei, care o are bleumarin.
   ============================================================================ */

.er-ms-dn-lideri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 22px;
}

.er-ms-dn-lider {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: start;
    padding: 26px 24px;
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-top: 3px solid var(--ms-accent-2);
    border-radius: var(--ms-radius);
}

/* Fotografia de conducere, exact la dimensiunea medalionului pe care îl
   înlocuiește: cele două trebuie să fie interschimbabile fără să sară așezarea
   când o școală încarcă poze doar pentru o parte din oameni. */
.er-ms-dn-lider-foto {
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    border: 2px solid var(--ms-accent-2);
    border-radius: 50%;
    object-fit: cover;
}

.er-ms-dn-lider-nume {
    margin: 0;
    font-size: 1.12rem;
    color: var(--ms-accent);
}

.er-ms-dn-lider-functie {
    margin-top: 6px;
    font-family: var(--ms-font-cifre);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ms-ink-soft);
}

.er-ms-dn-lider-discipline {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--ms-ink-soft);
}

/* Mini-CV-ul, scris de școală. Aceeași clasă pe cartonașul de conducere și pe
   cel de profesor: e același fel de text, iar două clase pentru el s-ar fi
   despărțit la prima modificare. Rândurile se păstrează prin
   er-ms-text-pastrat, pus alături în pagină. */
.er-ms-dn-cv {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ms-line);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ms-ink-soft);
}


/* ============================================================================
   6. TURUL VIRTUAL

   Una singură dintre cele nouă facilități are link de tur, deci zona trebuie să
   arate corect și cu un singur buton. E un rând de butoane, nu o grilă: o grilă
   cu un element lasă un gol pe care nu-l explică nimic.
   ============================================================================ */

.er-ms-dn-tur {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


/* ============================================================================
   7. CARTONAȘUL DE FACILITATE

   Folosește er-ms-cartonas din contract; aici se adaugă numai piciorul cu
   pastile și buton. er-ms-cartonas e o coloană flexibilă, deci margin-top auto
   lipește piciorul jos și cartonașele de pe același rând rămân aliniate.
   ============================================================================ */

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

.er-ms-dn-etichete {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.er-ms-dn-imagine-facilitate {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: var(--ms-radius);
    background: var(--ms-accent);
}


/* ============================================================================
   8. GALERIA BAZEI MATERIALE

   Nu mozaicul de pe prima pagină, ci o grilă egală cu legenda DEDESUBT.
   Motivul e în datele reale: imaginile sunt substituenți SVG cu o etichetă
   scrisă în centrul desenului, iar legenda suprapusă a mozaicului ar fi căzut
   exact peste ea. Cu legenda dedesubt se citesc amândouă, iar când apar
   fotografii adevărate așezarea rămâne bună.
   ============================================================================ */

.er-ms-dn-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
    gap: 16px;
}

.er-ms-dn-galerie-item {
    margin: 0;
    overflow: hidden;
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
}

.er-ms-dn-galerie-item img {
    width: 100%;
    height: 178px;
    object-fit: cover;
    background: var(--ms-accent);
}

.er-ms-dn-galerie-legenda {
    padding: 14px 16px;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--ms-ink-soft);
}

.er-ms-dn-galerie-legenda strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--ms-font-titlu);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--ms-ink);
}


/* ============================================================================
   9. CUPRINSUL CATEGORIILOR DE DOCUMENTE

   Șaisprezece categorii nu se parcurg derulând. Pastilele duc la ancora
   grupului; regula globală .er-ms-body [id] rezervă deja înălțimea antetului
   lipit, deci ținta nu ajunge sub el.
   ============================================================================ */

.er-ms-dn-cuprins {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 36px;
}

.er-ms-dn-cuprins a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    font-family: var(--ms-font-cifre);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--ms-accent);
}

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

.er-ms-dn-cuprins-numar {
    color: var(--ms-ink-soft);
}


/* ============================================================================
   10. RÂNDUL DE DOCUMENT

   Un titlu de document e lung, are descriere, tip de fișier, mărime și an
   școlar. Într-un cartonaș de grilă ar fi ieșit înalt și îngust; într-un tabel
   cu cinci coloane, ilizibil pe telefon. Rândul de listă ține textul într-o
   coloană care se poate rupe și acțiunea la dreapta, iar pe ecran mic acțiunea
   coboară singură sub text.
   ============================================================================ */

.er-ms-dn-doc-lista {
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
}

.er-ms-dn-doc {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 20px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ms-line);
}

.er-ms-dn-doc:last-child {
    border-bottom: none;
}

.er-ms-dn-doc-principal {
    flex: 1 1 320px;
    min-width: 0;
}

.er-ms-dn-doc-titlu {
    margin: 0;
    font-size: 1rem;
    color: var(--ms-accent);
}

.er-ms-dn-doc-titlu a {
    border-bottom: 1px solid transparent;
}

.er-ms-dn-doc-titlu a:hover {
    border-bottom-color: var(--ms-accent-2);
}

.er-ms-dn-doc-descriere {
    margin: 6px 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ms-ink-soft);
}

.er-ms-dn-doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 9px;
    font-family: var(--ms-font-cifre);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ms-ink-soft);
}

/* Documentul fără cale de fișier: se spune, nu se pune un link mort. */
.er-ms-dn-doc-lipsa {
    font-family: var(--ms-font-cifre);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ms-ink-soft);
}

/* Celulă de tabel cu cifre: mono, pe un singur rând, ca coloanele de tip și
   mărime să se citească una sub alta. */
.er-ms-dn-celula-cifre {
    font-family: var(--ms-font-cifre);
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: var(--ms-ink-soft);
}


/* ============================================================================
   11. ECRANE MICI

   Aceeași limită de 900px ca microsite.css, ca cele două foi să comute
   împreună: două praguri apropiate ar fi dat o lățime la care jumătate de
   pagină e pe telefon și jumătate pe desktop.
   ============================================================================ */

@media (max-width: 900px) {

    .er-ms-dn-sectiune {
        margin-bottom: 48px;
    }

    .er-ms-dn-sectiune-titlu {
        font-size: var(--ms-titlu-sm);
    }

    .er-ms-dn-lideri,
    .er-ms-dn-galerie {
        grid-template-columns: 1fr;
    }

    /* Medalionul trece deasupra textului: la 340px, două coloane lasă numelui
       o lățime pe care se rupe după fiecare cuvânt. */
    .er-ms-dn-citat,
    .er-ms-dn-lider {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .er-ms-dn-citat {
        padding: 24px 20px;
    }

    .er-ms-dn-sumar {
        gap: 12px 24px;
    }

    .er-ms-dn-sumar-valoare {
        font-size: 1.25rem;
    }
}