/* ============================================================
   catalog.css — completări comune paginilor de catalog public:
   prima pagină (Home) și lista completă (ListaInstitutii).

   Stă separat de lista-institutii.css, care descrie cardul în sine, pentru că
   aici e vorba de trei lucruri care nu existau când s-a scris cardul:
     1. cardul devine link către microsite-ul unității;
     2. numărătorile pe niveluri devin filtre pe care se poate da click;
     3. pagina de listă are propriul cap de secțiune.
   ============================================================ */


/* ============================================================
   1. CARDUL CA LINK CĂTRE MICROSITE

   Toată suprafața cardului duce la microsite, dar linkul e un singur <a>, pus pe
   denumire, întins peste card cu un pseudo-element. Varianta anterioară învelea
   întreg cardul într-un <a> și băga <button> înăuntru, ceea ce e HTML nevalid:
   un buton nu are ce căuta într-un link. În plus, cu linkul pe denumire, un
   cititor de ecran anunță „Liceul X, link", nu un link fără nume.

   Butoanele de acțiune stau deasupra suprafeței de link (z-index mai mare), deci
   un click pe „Sună" nu mai navighează.
   ============================================================ */

.er-li-card-link {
    position: relative;
}

.er-li-name-link {
    color: inherit;
    text-decoration: none;
}

    /* Suprafața de click a întregului card */
    .er-li-name-link::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .er-li-name-link:hover {
        color: var(--er-color-secondary);
    }

    /* Conturul de focalizare se desenează pe card, nu pe cuvântul din titlu:
       altfel navigarea cu tastatura ar arăta un dreptunghi în mijlocul cardului. */
    .er-li-name-link:focus-visible {
        outline: none;
    }

    .er-li-card-link:focus-within .er-li-card {
        outline: 3px solid var(--er-color-secondary);
        outline-offset: 2px;
    }

.er-li-actions {
    position: relative;
    z-index: 2;
}

/* Unitățile fără slug nu au microsite. Butonul „Vezi" rămâne vizibil, dar
   inactiv: ascuns cu totul, cardurile ar fi arătat diferit fără motiv vizibil. */
.er-li-btn-view-inactiv {
    background: var(--er-border-strong);
    color: var(--er-text-on-dark);
    cursor: default;
}


/* ============================================================
   2. NUMĂRĂTORILE PE NIVELURI, CA FILTRE

   Cifrele de pe prima pagină sunt numărate pe nivelurile din
   NiveluriInvatamant_REF, iar filtrarea listei se face pe același nivel. Ca
   pastile pe care se dă click, cifra afișată și lista rezultată nu se pot
   contrazice.
   ============================================================ */

.er-cat-niveluri {
    display: flex;
    flex-wrap: wrap;
    gap: var(--er-space-sm);
    margin-top: var(--er-space-md);
}

.er-cat-nivel {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--er-radius-full);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: var(--er-text-on-dark);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    transition: var(--er-transition);
}

    .er-cat-nivel:hover {
        background: rgba(255, 255, 255, 0.26);
    }

.er-cat-nivel-numar {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--er-color-accent);
}

/* Nivelul după care e filtrată deja lista */
.er-cat-nivel-activ {
    background: var(--er-color-accent);
    border-color: var(--er-color-accent);
    color: var(--er-warning-ink);
}

    .er-cat-nivel-activ .er-cat-nivel-numar {
        color: var(--er-warning-ink);
    }

/* Nivel fără nicio unitate: se arată, pentru că nomenclatorul e complet, dar nu e
   link — ar fi dus la o listă goală. */
.er-cat-nivel-gol {
    background: rgba(255, 255, 255, 0.06);
    border-style: dashed;
    color: var(--er-text-on-dark-soft);
    cursor: default;
}

    .er-cat-nivel-gol .er-cat-nivel-numar {
        color: var(--er-text-on-dark-soft);
    }


/* ============================================================
   3. CAPUL PAGINII DE LISTĂ
   ============================================================ */

.er-cat-lista-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--er-space-md);
    margin-bottom: var(--er-space-lg);
}

.er-cat-lista-numar {
    font-size: 0.92rem;
    color: var(--er-text-muted);
    font-weight: 600;
}

.er-cat-lista-plafon {
    display: block;
    margin-top: var(--er-space-lg);
    padding: var(--er-space-md);
    background: var(--er-bg-muted);
    border-radius: var(--er-radius-sm);
    font-size: 0.88rem;
    color: var(--er-text-muted);
    text-align: center;
}

.er-cat-filtre-active {
    display: flex;
    flex-wrap: wrap;
    gap: var(--er-space-sm);
    margin-bottom: var(--er-space-md);
}

.er-cat-filtru-marca {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--er-radius-full);
    background: var(--er-bg-muted);
    color: var(--er-text-soft);
    font-size: 0.85rem;
    font-weight: 600;
}

.er-cat-filtru-sterge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--er-radius-full);
    border: 1px solid var(--er-border-strong);
    background: var(--er-bg-surface);
    color: var(--er-color-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

    .er-cat-filtru-sterge:hover {
        background: var(--er-bg-muted);
    }