/* ============================================================================
   microsite-viata.css — completările celor trei pagini de „Viața școlii":
   Cluburi, Proiecte și parteneriate, Performanțe.

   DE CE EXISTĂ, LÂNGĂ microsite.css
   Contractul comun din microsite.css dă scheletul: capul paginii, grila,
   cartonașul, tabelul, pastila, starea de gol. Nu are însă un lucru de care au
   nevoie exact aceste trei pagini: liste de „fapte" cu etichetă și valoare,
   citite ÎNAINTE de textul scris de școală. Un elev care vrea să se înscrie într-un
   club nu citește descrierea; caută ora și numele profesorului. Un părinte care
   se uită la performanțe caută nivelul și premiul. Fără o formă proprie pentru
   perechea etichetă–valoare, informația aceea ar fi ajuns tot în paragraful de
   descriere, adică exact în locul care nu se citește.

   microsite.css NU se modifică: e fișier partajat, iar clasele de aici sunt
   folosite numai de cele trei pagini care încarcă foaia asta.

   CULORI: numai variabilele --ms-*. Modul de contrast ridicat din _tokens.css
   comută variabilele, nu regulile — o culoare scrisă de mână aici ar fi rămas
   colorată pe negru și zona ar fi devenit exact partea inaccesibilă a paginii.
   ============================================================================ */


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

   Cifrele care spun, înainte de orice listă, cât conținut e dedesubt: câte
   cluburi, câți membri, câte rezultate naționale. Stau pe capul colorat, deci
   folosesc tokenii de text de pe fundal închis.
   ============================================================================ */

.er-ms-vs-sumar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--ms-font-cifre);
    font-size: 0.74rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ms-accent-2-light);
}

.er-ms-vs-sumar-cifra {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: var(--ms-surface);
}

/* Pastilele informative din cap — programele de finanțare, anii acoperiți. NU
   sunt filtre: nu există parametru de filtrare în controller, iar o pastilă care
   arată ca un buton dar nu face nimic la clic e mai rea decât o etichetă. */
.er-ms-vs-etichete {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}


/* ============================================================================
   2. NOTA DE SUB TITLUL UNUI GRUP

   Un rând care spune ce e în grupul de dedesubt și ce trebuie făcut cu el —
   „la numele de aici te poți duce direct", „aici sunt proiecte încheiate".
   Fără el, două grupe de cartonașe identice la vedere ar fi părut o repetiție.
   ============================================================================ */

.er-ms-vs-nota {
    max-width: 70ch;
    margin: -6px 0 20px;
    font-family: var(--ms-font-text);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ms-ink-soft);
}


/* ============================================================================
   3. LISTA DE FAPTE A UNUI CARTONAȘ

   Perechi etichetă–valoare, așezate înaintea descrierii. Fundalul de hârtie și
   dunga aurie din stânga le desprind de textul liber: se văd ca date, nu ca
   proză.
   ============================================================================ */

.er-ms-vs-fapte {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 13px 15px;
    background: var(--ms-paper);
    border-left: 2px solid var(--ms-accent-2);
}

.er-ms-vs-fapt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.er-ms-vs-fapt dt {
    flex: 0 0 104px;
    font-family: var(--ms-font-cifre);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ms-ink-soft);
}

.er-ms-vs-fapt dd {
    flex: 1 1 170px;
    margin: 0;
    font-family: var(--ms-font-text);
    font-size: var(--ms-text-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ms-ink);
}

/* Valoarea pe care școala nu a completat-o. Se scrie ce lipsește, nu se lasă
   rândul gol: un rând „Se întâlnesc" fără nimic după el arată ca o eroare de
   afișare, nu ca o informație care nu a fost publicată. */
.er-ms-vs-lipsa {
    font-weight: 400;
    font-style: italic;
    color: var(--ms-ink-soft);
}


/* ============================================================================
   4. CLUBURI
   ============================================================================ */

/* Fotografia clubului, când școala a încărcat una. Înălțime fixă, ca un rând de
   cartonașe să nu iasă în trepte. */
.er-ms-club-imagine {
    width: 100%;
    height: 158px;
    object-fit: cover;
    border: 1px solid var(--ms-line);
}

.er-ms-club-coordonator {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Poza coordonatorului e decorativă: numele stă scris lângă ea, deci nu se
   dublează în alt. */
.er-ms-club-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--ms-line);
}


/* ============================================================================
   5. PROIECTE

   Un proiect în derulare e o invitație, unul încheiat e o dovadă. De aceea cele
   în derulare sunt cartonașe cu dunga aurie, iar cele încheiate stau într-un
   tabel: un tabel se citește ca un registru, adică exact ca o dovadă.
   ============================================================================ */

.er-ms-proiect-activ {
    border-left: 3px solid var(--ms-accent-2);
}

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

/* Butonul spre situl proiectului nu se întinde pe toată lățimea cartonașului:
   într-un container cu direcție de coloană, un buton lat arată ca o bară. */
.er-ms-proiect-link {
    align-self: flex-start;
}


/* ============================================================================
   6. CELULELE BOGATE DIN TABELE

   Arhiva proiectelor și rezumatul pe ani țin în celulă mai mult decât un cuvânt.
   ============================================================================ */

.er-ms-vs-celula-titlu {
    display: block;
    font-family: var(--ms-font-titlu);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ms-accent);
}

.er-ms-vs-celula-detaliu {
    max-width: 54ch;
    margin: 6px 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ms-ink-soft);
}

.er-ms-vs-celula-lista {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.er-ms-vs-celula-lista li {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ms-ink);
}


/* ============================================================================
   7. PERFORMANȚE
   ============================================================================ */

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

/* Premiul, în cifre mono: e singurul lucru din cartonaș care se compară între
   două rezultate. */
.er-ms-performanta-premiu {
    font-family: var(--ms-font-cifre);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ms-accent);
}

.er-ms-performanta-persoane {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--ms-font-text);
    font-size: var(--ms-text-sm);
    line-height: 1.5;
    color: var(--ms-ink);
}

.er-ms-performanta-persoane .material-icons {
    flex: 0 0 auto;
    font-size: 17px;
    color: var(--ms-accent-2);
}

/* Absolvenții: hârtie caldă și o dungă sus, ca setul lor să se vadă ca altceva
   decât un premiu. Nu e o distincție decorativă — un premiu spune ce a făcut
   școala anul trecut, un absolvent spune unde ajung copiii de aici. */
.er-ms-absolvent {
    background: var(--ms-paper-warm);
    border-top: 3px solid var(--ms-accent-2);
}

.er-ms-absolvent-persoana {
    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-absolvent-destinatie {
    font-family: var(--ms-font-cifre);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.45;
    color: var(--ms-ink);
}


/* ============================================================================
   8. BANDA DE LEGĂTURI DINTRE CELE TREI PAGINI

   Cluburile, proiectele și performanțele sunt trei fețe ale aceluiași lucru, iar
   în meniu stau sub aceeași intrare. Cine a citit una le vrea, de obicei, pe
   toate; fără banda asta ar fi trebuit să se întoarcă în meniu de fiecare dată.
   ============================================================================ */

.er-ms-vs-legaturi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--ms-line);
}

.er-ms-vs-legaturi-eticheta {
    font-family: var(--ms-font-cifre);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ms-ink-soft);
}


/* ============================================================================
   9. ECRANE MICI
   ============================================================================ */

@media (max-width: 900px) {

    /* Eticheta faptului trece deasupra valorii: la 104px fix, pe un ecran de
       telefon, „Se întâlnesc" ar fi rupt valoarea pe patru rânduri. */
    .er-ms-vs-fapt {
        display: block;
    }

    .er-ms-vs-fapt dt {
        margin-bottom: 3px;
    }

    .er-ms-vs-sumar {
        gap: 10px 20px;
    }

    .er-ms-vs-sumar-cifra {
        font-size: 1.3rem;
    }

    .er-ms-club-imagine {
        height: 140px;
    }
}