/* ============================================================================
   microsite-consiliu.css — completările paginii „Consiliul elevilor”

   O SINGURĂ PAGINĂ: /{slug}/Consiliu. Se încarcă din ea 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 vine din microsite.css și NU se redefinește: capul de pagină,
   firimiturile, starea de gol, butoanele, pastila (er-ms-eticheta), rândurile
   păstrate (er-ms-text-pastrat) și — important — grupul cu titlu și număr
   (er-ms-grup, er-ms-grup-titlu, er-ms-grup-numar), care e exact forma de care
   are nevoie un rol din consiliu cu oamenii lui dedesubt. O a doua formă de
   titlu de categorie, scrisă aici, ar fi făcut ca aceleași grupe să arate altfel
   pe pagina consiliului decât pe documente, orar sau performanțe.

   CE E AICI: banda de cifre din capul paginii, nota de date personale, indexul
   de roluri și cartonașul de membru cu medalion. Niciuna nu există în contract.

   DE CE PREFIXUL er-ms-ce-
   Cele patru pagini noi se scriu în paralel, fiecare cu foaia ei de stil, iar
   toate se încarcă peste aceeași microsite.css. Un nume plauzibil ca
   „er-ms-membru” sau „er-ms-sumar” l-ar fi putut inventa și alt autor, cu alte
   reguli, iar cele două s-ar fi suprapus în liniște, pe pagini pe care niciunul
   nu le deschide. Prefixul „ce” (consiliul elevilor) face coliziunea imposibilă.
   Nu „cs”: îl putea alege și autorul paginii de căutare în site.

   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ă aici ar fi rămas colorată pe negru, adică pagina consiliului ar
   fi fost singura zonă care nu se comută.

   NIMIC NU SE TRANSMITE NUMAI PRIN CULOARE SAU FORMĂ: cartonașul unui membru
   fără nume publicat nu se deosebește prin nuanță, ci prin textul „Nume
   nepublicat” și prin pictograma din medalion, iar clasa și mandatul sunt pastile
   cu text, nu puncte colorate.
   ============================================================================ */


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

   Stă în er-ms-pagina-cap, adică pe fundalul de accent, deci folosește tokenii
   de text pentru fundal închis. Răspunde înainte de orice listă la întrebarea
   „cât de mare e consiliul și pe ce mandat”: câți reprezentanți, câte roluri
   distincte, care e mandatul curent.

   CIFRELE AFIȘATE VIN NUMAI din colecția filtrată pe acordul de publicare. Nu
   există aici nicio regulă de stil care să depindă de câți membri are unitatea
   în tabelă: forma e aceeași pentru unu și pentru douăzeci.
   ============================================================================ */

.er-ms-ce-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-ce-sumar-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.er-ms-ce-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-ce-sumar-eticheta {
    font-family: var(--ms-font-cifre);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ms-surface);
}


/* ============================================================================
   2. NOTA DE DATE PERSONALE

   Explică, înaintea listei, de ce pagina arată nume de elevi și de ce nu arată
   date de contact ale lor. Nu e o avertizare și nu are voie să arate ca una:
   fără roșu, fără pictogramă de eroare — bară calmă pe margine, pe hârtia
   paginii. Un chenar de alarmă ar fi sugerat că e ceva în neregulă cu pagina.
   ============================================================================ */

.er-ms-ce-nota {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 32px;
    padding: 16px 18px;
    border-left: 3px solid var(--ms-calm);
    border-radius: var(--ms-radius);
    background: var(--ms-paper-warm);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ms-ink-soft);
}

    .er-ms-ce-nota .material-icons {
        flex: none;
        font-size: 20px;
        color: var(--ms-calm);
    }

    /* Linkul din notă rămâne subliniat: e singurul link din paragraf și trebuie
       să se vadă ca link și în modul de contrast ridicat, unde diferența de
       culoare se subțiază. */
    .er-ms-ce-nota a {
        color: var(--ms-accent);
        text-decoration: underline;
    }


/* ============================================================================
   3. INDEXUL DE ROLURI

   Cuprinsul paginii, cu ancore către secțiunile de rol. Există fiindcă pagina
   răspunde la „cui îi spun asta?”, iar cu șapte-opt funcții cu titluri lungi
   („Reprezentant în Consiliul de Administrație”) răspunsul ar fi fost la a treia
   derulare.

   E <nav> cu listă de linkuri, nu pastile de filtrare: nu există parametru de
   filtrare în controller, iar o pastilă care arată ca un buton dar doar
   derulează pagina promite altceva decât face.
   ============================================================================ */

.er-ms-ce-index {
    margin: 0 0 36px;
    padding: 20px 22px;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    background: var(--ms-surface);
}

.er-ms-ce-index-titlu {
    margin: 0 0 14px;
    font-family: var(--ms-font-cifre);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ms-ink-soft);
}

.er-ms-ce-index-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    /* Linkul de rol e o suprafață de apăsat, deci are talie: pe telefon se
       nimerește cu degetul, iar rolurile lungi se rup pe două rânduri fără să
       iasă din chenar. */
    .er-ms-ce-index-lista a {
        display: inline-flex;
        align-items: baseline;
        gap: 8px;
        padding: 8px 12px;
        border: 1px solid var(--ms-line);
        border-radius: var(--ms-radius);
        background: var(--ms-paper-warm);
        font-size: 0.9rem;
        line-height: 1.35;
        color: var(--ms-accent);
    }

        .er-ms-ce-index-lista a:hover,
        .er-ms-ce-index-lista a:focus-visible {
            border-color: var(--ms-accent-2);
            background: var(--ms-paper);
        }

.er-ms-ce-index-numar {
    font-family: var(--ms-font-cifre);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ms-ink-soft);
}


/* ============================================================================
   4. MEMBRII UNUI ROL

   Grilă de cartonașe orizontale: medalion la stânga, textul la dreapta. Nu
   coloane înguste ca la echipă, fiindcă informația principală de aici e
   descrierea mandatului — o frază sau două, care într-o coloană de 228px ar fi
   ajuns opt rânduri.

   Rolurile au de obicei UN OM (președinte, secretar, delegat), iar atunci
   cartonașul ocupă lățimea rândului. Nu e o scăpare: pe un rol cu un singur
   titular, cartonașul lat citește ca o fișă, nu ca o coloană rămasă goală. Grila
   se umple de la sine când o școală pune mai mulți „membri” cu aceeași funcție.
   ============================================================================ */

.er-ms-ce-membri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

.er-ms-ce-membru {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 22px;
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-left: 3px solid var(--ms-accent);
    border-radius: var(--ms-radius);
}

/* Cartonașul fără nume publicat se deosebește prin bara de margine ștearsă, dar
   informația NU stă în culoare: numele lipsă e scris în cuvinte în er-ms-ce-nume-lipsa,
   iar medalionul are pictogramă în loc de iniţiale. */
.er-ms-ce-membru-anonim {
    border-left-color: var(--ms-line);
}

/* Medalionul cu iniţiale, ca în restul sitului: nu există fotografii în proiect
   (tCaleImagine e NULL pe toate rândurile), iar un chenar gol în locul lor ar fi
   arătat ca o imagine care nu s-a încărcat. Rămâne cerc și când fotografia
   există, ca să nu se schimbe forma cartonașului de la un membru la altul. */
.er-ms-ce-medalion,
.er-ms-ce-foto {
    flex: none;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
}

.er-ms-ce-medalion {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ms-paper-warm);
    border: 1px solid var(--ms-line);
    font-family: var(--ms-font-titlu);
    font-size: var(--ms-titlu-sm);
    line-height: 1;
    color: var(--ms-accent);
}

/* Medalionul unui membru fără nume publicat: pictogramă în loc de iniţiale,
   fiindcă din text gol nu se poate scoate nicio literă. NU e aria-hidden, ca
   celelalte medalioane: acolo iniţialele repetă numele de dedesubt, aici nu
   există nume de repetat — dar nici nu i se dă text alternativ, fiindcă
   „numele nu e publicat” e deja scris în cartonaș. */
.er-ms-ce-medalion-anonim {
    color: var(--ms-ink-soft);
}

    .er-ms-ce-medalion-anonim .material-icons {
        font-size: 30px;
    }

.er-ms-ce-membru-corp {
    min-width: 0;
}

.er-ms-ce-nume {
    margin: 0;
    font-family: var(--ms-font-titlu);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ms-ink);
}

/* „Nume nepublicat” e text de stare, nu un nume: se scrie cursiv și în tonul
   secundar, ca să nu fie citit ca numele cuiva. */
.er-ms-ce-nume-lipsa {
    font-style: italic;
    font-weight: 500;
    color: var(--ms-ink-soft);
}

.er-ms-ce-etichete {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.er-ms-ce-mandat {
    margin: 12px 0 0;
    font-family: var(--ms-font-text);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ms-ink-soft);
}

/* Butonul din starea de gol: același rând separat ca la celelalte pagini, ca
   starea de gol să ofere o ieșire, nu doar o explicație. */
.er-ms-ce-gol-actiune {
    margin: 18px 0 0;
}


/* ============================================================================
   5. ECRANE MICI

   Pe telefon cartonașul rămâne orizontal, dar cu medalion mai mic: pus pe
   coloană, medalionul ar fi împins descrierea mandatului — informația pentru
   care se deschide pagina — sub prima îndoitură a ecranului.
   ============================================================================ */

@media (max-width: 900px) {

    .er-ms-ce-membri {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .er-ms-ce-membru {
        gap: 14px;
        padding: 18px;
    }

    .er-ms-ce-medalion,
    .er-ms-ce-foto {
        width: 52px;
        height: 52px;
    }

    .er-ms-ce-medalion {
        font-size: 1rem;
    }

        .er-ms-ce-medalion-anonim .material-icons {
            font-size: 24px;
        }

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

    .er-ms-ce-index {
        padding: 16px 18px;
    }
}