/* ============================================================================
   microsite-anunturi.css — ce nu acoperă contractul comun din microsite.css,
   pentru cele trei pagini: Noutăți, Orar și examene, Contact.

   Se încarcă din @section Styles al fiecăreia dintre cele trei pagini, DUPĂ
   microsite.css, deci poate întări clasele comune fără să le rescrie.

   DE CE UN FIȘIER SEPARAT, ȘI ATÂT DE MIC
   Contractul comun (er-ms-pagina, er-ms-grila, er-ms-cartonas, er-ms-tabel,
   er-ms-gol, er-ms-eticheta) acoperă scheletul. Rămân trei lucruri pe care nu
   le poate acoperi, fiindcă sunt ale acestor pagini și numai ale lor:
     1. un paginator și un selector de clasă — două benzi de linkuri în care
        elementul curent NU e link;
     2. celulele tabelului de orar, care țin trei informații pe rând
        (disciplină, profesor, sală) în loc de un text;
     3. un formular — singurul din tot microsite-ul.

   PREFIX. Toate clasele de aici încep cu er-ms-aoc- (anunțuri-orar-contact).
   Fișierul de stil al microsite-ului e scris în paralel de mai multe mâini, pe
   pagini diferite; un prefix propriu e singurul mod de a garanta că o clasă
   adăugată aici nu se ciocnește cu una adăugată în altă parte.

   CULORI. Numai var(--ms-*), niciun cod de culoare scris de mână. Bara de
   accesibilitate comută variabilele acelea pe negru și alb; o culoare scrisă
   aici ar rămâne colorată pe negru, adică exact zona pe care cineva a cerut să
   o vadă în contrast ridicat ar fi rămas necitibilă.

   O NOTĂ DESPRE er-ms-eticheta-accent: în modul de contrast ridicat
   --ms-accent-2 și --ms-accent-dark devin amândouă negre, deci pastila aceea
   iese negru pe negru. E în microsite.css, care nu se modifică din felia asta,
   așa că paginile de aici NU o folosesc: pastilele proprii de mai jos pun
   întotdeauna --ms-surface peste --ms-accent, pereche care rămâne lizibilă și
   normal și în contrast.
   ============================================================================ */


/* ============================================================
   1. UTILITARE
   ============================================================ */

/* Text numai pentru cititoarele de ecran. Trebuie pentru celulele goale din
   tabelul de orar: o celulă cu o liniuță se citește „minus", iar o celulă
   complet goală nu se anunță deloc, deci cine ascultă orarul nu află că ora
   aceea e liberă. Nu se folosește display:none — ar fi scos textul și din
   citire. */
.er-ms-aoc-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;
}

/* Rândul de pastile din capul unui cartonaș: etichetă, marcaj de fixat sus,
   termen. Se înfășoară, fiindcă etichetele scrise de școală pot fi lungi. */
.er-ms-aoc-pastile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Pastilă pe accentul școlii. Vezi nota de la capul fișierului: pereche de
   culori care rămâne lizibilă și în contrast ridicat. */
.er-ms-aoc-eticheta-plina {
    background: var(--ms-accent);
    color: var(--ms-surface);
}

/* Rândul de dedesubt: date, termene, atașamente. Mono, ca cifrele să se
   citească în coloană când cartonașele stau unul lângă altul. */
.er-ms-aoc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--ms-line);
    font-family: var(--ms-font-cifre);
    font-size: 0.72rem;
    color: var(--ms-ink-soft);
}

/* Documentul atașat unui anunț. Subliniat, nu doar colorat: un link care se
   deosebește numai prin culoare dispare în contrast ridicat. */
.er-ms-aoc-document {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ms-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.er-ms-aoc-document .material-icons {
    font-size: 16px;
}

/* Imaginea unui articol în arhivă. Raportul fix ține grila aliniată chiar dacă
   școala încarcă fotografii de dimensiuni diferite. */
.er-ms-aoc-imagine {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--ms-paper);
    border-radius: var(--ms-radius);
}


/* ============================================================
   2. PAGINATOR ȘI SELECTOR DE CLASĂ

   Aceeași formă pentru amândouă: o bandă de ținte de click în care elementul
   curent NU e link. Un link către pagina pe care ești deja e o promisiune
   falsă, iar la tastatură e o oprire în plus fără rost.
   ============================================================ */

.er-ms-aoc-banda-linkuri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 28px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--ms-line);
}

.er-ms-aoc-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}

/* Ținta e de cel puțin 40px pe verticală: se apasă cu degetul, pe telefon. */
.er-ms-aoc-chip,
.er-ms-aoc-chip-curent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    background: var(--ms-surface);
    color: var(--ms-accent);
    font-family: var(--ms-font-cifre);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    transition: var(--er-transition);
}

.er-ms-aoc-chip:hover {
    border-color: var(--ms-accent-2);
    background: var(--ms-paper);
}

.er-ms-aoc-chip:focus-visible,
.er-ms-aoc-caseta:focus-visible {
    outline: 3px solid var(--ms-accent-2);
    outline-offset: 2px;
}

/* Elementul curent: fond plin ȘI o marcă text („aici"/„selectată") pusă în
   pagină. Numai fondul ar fi transmis informația doar prin culoare. */
.er-ms-aoc-chip-curent {
    background: var(--ms-accent);
    color: var(--ms-surface);
    border-color: var(--ms-accent);
    font-weight: 600;
    cursor: default;
}

/* Textul „pagina 2 din 4": rămâne lângă linkuri, ca numărul total să fie
   citibil și când paginile nu încap toate în bandă. */
.er-ms-aoc-paginator-info {
    margin-left: auto;
    font-family: var(--ms-font-cifre);
    font-size: 0.75rem;
    color: var(--ms-ink-soft);
}

.er-ms-aoc-paginator-rupt {
    padding: 0 4px;
    font-family: var(--ms-font-cifre);
    color: var(--ms-ink-soft);
}


/* ============================================================
   3. TABELUL DE ORAR

   Zilele pe coloane, orele pe rânduri. Celula ține trei informații —
   disciplină, profesor, sală — deci nu poate fi doar text de tabel.
   ============================================================ */

/* Coloana orelor: îngustă și lipită la stânga la derulare orizontală, ca
   numărul orei să nu dispară când tabelul se împinge pe telefon. */
.er-ms-tabel .er-ms-aoc-orar-ora {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 92px;
    background: var(--ms-paper);
    font-family: var(--ms-font-cifre);
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--ms-ink-soft);
    white-space: nowrap;
}

.er-ms-aoc-orar-numar {
    display: block;
    font-weight: 600;
    color: var(--ms-accent);
}

.er-ms-aoc-orar-disciplina {
    display: block;
    font-weight: 600;
    color: var(--ms-ink);
    line-height: 1.35;
}

.er-ms-aoc-orar-detaliu {
    display: block;
    margin-top: 3px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--ms-ink-soft);
}

/* A doua oră din același interval, când școala a pus două rânduri pe aceeași
   poziție: se despart vizibil, ca să nu pară o singură oră cu text dublu. */
.er-ms-aoc-orar-alta {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--ms-line);
}

/* Celula liberă. Liniuța e decorativă — informația o duce textul ascuns,
   citit de cititoarele de ecran. */
.er-ms-aoc-orar-liber {
    color: var(--ms-ink-soft);
    text-align: center;
}


/* ============================================================
   4. PAGINA DE CONTACT

   Două coloane: datele instituției și formularul. Formularul stă în dreapta pe
   ecran lat, dar în DOM vine al doilea, deci și la citire liniară vin întâi
   adresa și telefonul — cine vrea doar numărul secretariatului nu trebuie să
   treacă prin șase câmpuri.
   ============================================================ */

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

.er-ms-aoc-caseta-alba {
    padding: 26px;
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
}

/* Banda de rezultat a trimiterii. Culoarea deosebește reușita de refuz, dar
   nu singură: textul din pagină începe cu „Trimis." sau „Nu s-a trimis.", iar
   banda are role status/alert, deci se anunță și la ascultare. */
.er-ms-aoc-banda {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
    padding: 14px 16px;
    border-left: 4px solid var(--ms-accent-2);
    border-radius: var(--ms-radius);
    background: var(--ms-paper);
    font-size: var(--ms-text-base);
    line-height: 1.55;
    color: var(--ms-ink);
}

.er-ms-aoc-banda-reusita {
    border-left-color: var(--ms-calm);
    background: var(--ms-calm-light);
}

.er-ms-aoc-banda-refuz {
    border-left-color: var(--ms-urgent);
}

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

.er-ms-aoc-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Două câmpuri scurte pe un rând, pe ecran lat. */
.er-ms-aoc-form-rand {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}

.er-ms-aoc-camp {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.er-ms-aoc-eticheta {
    font-family: var(--ms-font-cifre);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ms-ink-soft);
}

/* Steluța nu e singurul semn al obligativității: eticheta scrie „obligatoriu"
   în litere, fiindcă o steluță fără legendă nu spune nimic. */
.er-ms-aoc-obligatoriu {
    margin-left: 4px;
    font-weight: 600;
    color: var(--ms-urgent);
    text-transform: none;
    letter-spacing: 0;
}

/* Subtitlul unei zone — „Programul secretariatului". Aceeași literă ca
   etichetele de formular, ca zona de contact să arate ca o singură coloană, dar
   cu spațiu deasupra: un h3 lipit de blocul de dinainte se citește ca parte din
   el. */
.er-ms-aoc-subtitlu {
    margin: 30px 0 12px;
    font-family: var(--ms-font-cifre);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ms-ink-soft);
}

.er-ms-aoc-caseta {
    width: 100%;
    padding: 11px 12px;
    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-base);
    line-height: 1.5;
    color: var(--ms-ink);
}

.er-ms-aoc-caseta:hover {
    border-color: var(--ms-accent-2);
}

textarea.er-ms-aoc-caseta {
    min-height: 150px;
    resize: vertical;
}

/* Câmpul refuzat de serviciu: contur gros ȘI mesajul de sub el, legat prin
   aria-describedby. Numai conturul ar fi fost informație prin culoare. */
.er-ms-aoc-caseta-invalid {
    border-width: 2px;
    border-color: var(--ms-urgent);
}

/* Aceeasi pereche display:none / .er-show ca .er-reg-error si .er-fp-error din panou.
   Cutiile de eroare sunt randate mereu, ca validarea din pagina sa aiba unde scrie;
   fara regula de ascundere ar ocupa loc si cand sunt goale, iar cele patru campuri ale
   formularului de contact s-ar departa cu vreo 6px fiecare. */
.er-ms-aoc-eroare {
    display: none;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: var(--ms-text-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ms-urgent);
}

.er-ms-aoc-eroare.er-show {
    display: flex;
}

.er-ms-aoc-ajutor {
    margin: 0;
    font-size: var(--ms-text-sm);
    line-height: 1.5;
    color: var(--ms-ink-soft);
}

.er-ms-aoc-form-jos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding-top: 4px;
}

.er-ms-aoc-nota-legala {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--ms-line);
    font-size: var(--ms-text-sm);
    line-height: 1.6;
    color: var(--ms-ink-soft);
}


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

@media (max-width: 900px) {

    .er-ms-aoc-strat {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Coloana orelor nu mai stă lipită: pe ecran îngust ar fi acoperit prima zi.
       Se micșorează, iar derularea rămâne în er-ms-tabel-cadru. */
    .er-ms-tabel .er-ms-aoc-orar-ora {
        position: static;
        min-width: 76px;
    }

    .er-ms-aoc-paginator-info {
        margin-left: 0;
        width: 100%;
    }
}