/* ============================================================================
   microsite-istoric.css — pagina „Istoric, misiune și viziune”

   O SINGURĂ PAGINĂ: /{slug}/Istoric. Se încarcă din ea prin @section Styles,
   deci după microsite.css: regulile de aici se ADAUGĂ peste contractul comun,
   nu îl rescriu. Nicio regulă din fișierul acesta nu atinge o clasă din
   contract (er-ms-pagina*, er-ms-grup*, er-ms-cartonas*, er-ms-gol*,
   er-ms-btn*, er-ms-tabel*, er-ms-eticheta*, er-ms-text-pastrat).

   DE CE PREFIXUL er-ms-ist-
   Paginile de secțiune 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-sumar” sau „er-ms-nota” l-ar fi putut inventa și altă pagină, cu alte
   reguli, iar cele două s-ar fi suprapus în liniște. Prefixul „ist” 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ă.

   AURIUL NU E FOLOSIT PENTRU TEXT PE HÂRTIE: --ms-accent-2 pe alb dă un raport
   de contrast sub 3:1. Pe hârtie auriul apare numai ca linie, punct sau bară,
   adică desen; textul mărunt e pe --ms-ink-soft. Pe fundalurile închise, unde
   funcționează, se folosește --ms-accent-2-light.
   ============================================================================ */


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

   Stă în er-ms-pagina-cap, adică pe fundalul de accent. Trei numere despre care
   pagina răspunde înainte de orice text: din ce an, de câți ani, câte etape.

   E o listă fără marcatori: sunt trei fapte de același fel, nu o enumerare de
   citit cu ochiul pe puncte.
   ============================================================================ */

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

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

.er-ms-ist-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);
    /* Cifre de aceeași lățime: altfel „1957” și „2022” nu se aliniază între ele
       în bandă și par de mărimi diferite. */
    font-variant-numeric: tabular-nums;
}

.er-ms-ist-sumar-eticheta {
    font-family: var(--ms-font-text);
    font-size: var(--ms-text-sm);
    line-height: 1.4;
    color: var(--ms-surface);
}


/* ============================================================================
   2. TEXTUL DE PREZENTARE ȘI NOTELE PAGINII
   ============================================================================ */

/* Descrierea lungă a unității: măsură scurtă, litere mai mari decât restul
   paginii. E singurul text lung din pagină, iar un rând de 120 de caractere se
   citește prost oriunde. */
.er-ms-ist-prezentare-text {
    max-width: 68ch;
    margin: 0;
    font-family: var(--ms-font-text);
    font-size: var(--ms-text-lg);
    line-height: 1.7;
    color: var(--ms-ink);
}

/* Nota de sub un titlu de zonă: explică ce urmează, nu e conținut publicat de
   unitate. Se deosebește de restul prin mărime și culoare, nu prin cursive:
   cursivele lungi sunt greu de citit la corp mic. */
.er-ms-ist-nota {
    max-width: 68ch;
    margin: 0 0 20px;
    font-family: var(--ms-font-text);
    font-size: var(--ms-text-sm);
    line-height: 1.6;
    color: var(--ms-ink-soft);
}

    /* Nota care vine DUPĂ conținut (cea de sub declarații) nu are ce împinge în
       jos; marginea se mută sus. */
    .er-ms-ist-declaratii + .er-ms-ist-nota {
        margin: 16px 0 0;
    }


/* ============================================================================
   3. CRONOLOGIA — LINIA

   Forma centrală a paginii. Două coloane: anul, aliniat la dreapta lângă axă, și
   textul etapei. Axa verticală trece exact pe granița dintre ele.

   CUM E DESENATĂ AXA. Fiecare etapă își desenează propriul SEGMENT de linie
   (::before) și propriul punct (::after), amândouă poziționate pe variabila
   --ist-gutter. O singură linie continuă, desenată pe <ol>, ar fi trebuit să
   știe unde se termină ultimul punct — adică o înălțime calculată, care se
   desparte de conținut la primul text mai lung. Așa, linia se oprește singură:
   ultima etapă nu desenează segment, deci axa nu atârnă în gol sub ultimul
   moment din istoric.

   DE CE O VARIABILĂ PENTRU LĂȚIMEA COLOANEI DE AN. Poziția axei apare în trei
   locuri (coloana grilei, segmentul, punctul). Pe ecran îngust coloana dispare,
   iar axa se mută la marginea din stânga. Cu trei numere scrise de mână, două
   s-ar fi potrivit și al treilea nu — și nu la fel pe toate lățimile.
   ============================================================================ */

.er-ms-ist-linie {
    /* Lățimea coloanei de an și distanța dintre axă și text. Se rescriu în
       media query, iar tot desenul le urmează. */
    --ist-gutter: 6.5rem;
    --ist-spatiu: 30px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.er-ms-ist-etapa {
    position: relative;
    display: grid;
    grid-template-columns: var(--ist-gutter) 1fr;
    column-gap: var(--ist-spatiu);
    padding-bottom: 34px;
}

    /* Segmentul de axă: pornește de sub punct și coboară până la etapa următoare. */
    .er-ms-ist-etapa::before {
        content: "";
        position: absolute;
        top: 1.55rem;
        bottom: 0;
        left: var(--ist-gutter);
        width: 2px;
        margin-left: -1px;
        background: var(--ms-line);
    }

    /* Punctul: ancora vizuală a etapei pe axă. Inelul de culoarea hârtiei
       decupează linia din spatele lui, ca punctul să se vadă ca punct și nu ca o
       îngroșare. Se folosește --ms-paper fiindcă cronologia stă direct pe hârtia
       paginii, nu pe cartonașe. */
    .er-ms-ist-etapa::after {
        content: "";
        position: absolute;
        top: 0.5rem;
        left: var(--ist-gutter);
        width: 13px;
        height: 13px;
        margin-left: -6.5px;
        border-radius: 50%;
        background: var(--ms-accent-2);
        box-shadow: 0 0 0 3px var(--ms-paper), 0 0 0 4px var(--ms-line);
    }

    /* Ultima etapă nu prelungește axa: o linie care coboară sub ultimul moment ar
       fi promis o continuare care nu există. */
    .er-ms-ist-etapa:last-child::before {
        display: none;
    }

    .er-ms-ist-etapa:last-child {
        padding-bottom: 0;
    }

/* Etapa fără an. Punctul e GOL, dar diferența nu se sprijină pe asta: în coloana
   anului stă textul „An nedeclarat”, care spune același lucru în litere și se
   citește și în contrast ridicat, și cu ecran-cititor. */
.er-ms-ist-etapa-nedatata::after {
    background: var(--ms-paper);
    box-shadow: 0 0 0 3px var(--ms-paper), 0 0 0 4px var(--ms-line), inset 0 0 0 2px var(--ms-accent-2);
}

.er-ms-ist-an {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    /* Spațiu până la axă, ca cifrele să nu atingă linia. */
    padding-right: 18px;
    text-align: right;
}

.er-ms-ist-an-cifre {
    font-family: var(--ms-font-cifre);
    font-size: var(--ms-titlu-sm);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ms-accent);
    font-variant-numeric: tabular-nums;
}

.er-ms-ist-an-nedeclarat {
    font-family: var(--ms-font-cifre);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--ms-ink-soft);
}

.er-ms-ist-etapa-titlu {
    margin: 0 0 8px;
    font-family: var(--ms-font-titlu);
    font-size: var(--ms-titlu-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ms-accent);
}

.er-ms-ist-etapa-text {
    max-width: 62ch;
    margin: 0;
    font-family: var(--ms-font-text);
    font-size: var(--ms-text-base);
    line-height: 1.65;
    color: var(--ms-ink-soft);
}


/* ============================================================================
   4. DECLARAȚIILE — MISIUNEA ȘI VIZIUNEA

   Panouri late, cu text cu serife, mai mare decât restul paginii: sunt de citit
   ca declarații, nu de parcurs ca date.

   auto-fit, NU auto-fill: o unitate care a completat numai misiunea trebuie să
   vadă panoul întins pe toată lățimea, nu o jumătate de rând goală lângă el.

   CELE DOUĂ ARATĂ DIFERIT, ȘI ASTA E INTENȚIONAT. Misiunea e ce face unitatea
   acum — panou plin, pe accent. Viziunea e unde vrea să ajungă — hârtie caldă,
   cu o bară aurie la stânga. Diferența nu duce nicio informație singură:
   fiecare panou își are titlul scris, „Misiunea” și „Viziunea”.
   ============================================================================ */

.er-ms-ist-declaratii {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
    align-items: start;
}

.er-ms-ist-declaratie {
    padding: 28px 30px;
    border-radius: var(--ms-radius);
}

.er-ms-ist-declaratie-eticheta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-family: var(--ms-font-cifre);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

    .er-ms-ist-declaratie-eticheta .material-icons {
        font-size: 20px;
    }

.er-ms-ist-declaratie-text {
    max-width: 54ch;
    margin: 0;
    /* Serife, la un corp mai mare decât textul paginii: două fraze grave se
       citesc altfel decât o listă de facilități. */
    font-family: var(--ms-font-titlu);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.6;
}

/* Misiunea: panou plin. În contrast ridicat --ms-accent devine negru și
   --ms-surface alb, deci rămâne alb pe negru.

   Text de culoarea hârtiei pe fundal de accent e pariul pe care îl face deja
   er-ms-pagina-cap din contractul comun: --ms-accent e una dintre cele două
   culori pe care le poate rescrie școala, deci o alegere foarte deschisă ar
   slăbi contrastul aici exact cât îl slăbește și în capul fiecărei pagini. Nu se
   adaugă un risc nou, se folosește același. */
.er-ms-ist-declaratie-misiune {
    background: var(--ms-accent);
    border-top: 3px solid var(--ms-accent-2);
    color: var(--ms-surface);
}

    .er-ms-ist-declaratie-misiune .er-ms-ist-declaratie-eticheta {
        color: var(--ms-accent-2-light);
    }

/* Viziunea: hârtie caldă, cu bara aurie la stânga. Eticheta e pe --ms-ink-soft,
   nu pe auriu: auriul pe hârtie e desen, nu text de citit. */
.er-ms-ist-declaratie-viziune {
    background: var(--ms-paper-warm);
    border: 1px solid var(--ms-line);
    border-left: 4px solid var(--ms-accent-2);
    color: var(--ms-ink);
}

    .er-ms-ist-declaratie-viziune .er-ms-ist-declaratie-eticheta {
        color: var(--ms-ink-soft);
    }


/* ============================================================================
   5. LEGĂTURILE SPRE CELELALTE PAGINI DIN GRUP
   ============================================================================ */

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

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


/* ============================================================================
   6. ECRANE MICI

   Pragul e 760px, nu 900px ca în microsite.css: forma care se rupe prima e
   coloana de an de 6.5rem, iar ea mai încape bine până pe sub 800px. Un prag
   copiat de altundeva ar fi stricat o așezare care încă funcționa.

   Axa NU dispare pe telefon — e tot ce ține cronologia laolaltă. Se mută la
   marginea din stânga, iar anul urcă deasupra titlului, aliniat la stânga:
   --ist-gutter devine zero, deci și segmentul și punctul se mută singure.
   ============================================================================ */

@media (max-width: 760px) {

    /* Axa se mută la 7px, nu la 0: punctul are 13px și e centrat pe axă, deci la
       zero ar fi ieșit cu jumătate în afara coloanei de conținut, adică
       cronologia ar fi părut împinsă la stânga față de titlurile de zonă. */
    .er-ms-ist-linie {
        --ist-gutter: 7px;
        --ist-spatiu: 0px;
    }

    .er-ms-ist-etapa {
        grid-template-columns: 1fr;
        /* Loc pentru axă și punct la stânga textului. */
        padding-left: 28px;
    }

    .er-ms-ist-an {
        align-items: flex-start;
        gap: 0;
        margin-bottom: 4px;
        padding-right: 0;
        text-align: left;
    }

    .er-ms-ist-an-cifre {
        font-size: var(--ms-text-lg);
    }

    /* Punctul se ridică puțin: în stânga lui nu mai stă anul, ci prima linie a
       blocului, iar anul e mai mărunt decât era în coloană. */
    .er-ms-ist-etapa::after {
        top: 0.3rem;
    }

    .er-ms-ist-etapa::before {
        top: 1.25rem;
    }

    .er-ms-ist-declaratie {
        padding: 22px 20px;
    }

    .er-ms-ist-declaratie-text {
        font-size: 1.1rem;
    }

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

    .er-ms-ist-prezentare-text {
        font-size: var(--ms-text-base);
    }
}