/* ===========================================================================
   Accesibilitate — corecții WCAG 2.1 AA (EN 301 549 / Legea 232/2022).
   Se încarcă după responsive.css, deci are ultimul cuvânt.
   =========================================================================== */

/* --- Contrast de text ----------------------------------------------------
   Vechile valori nu treceau pragul AA de 4,5:1 pe fundalul crem al site-ului:
     --b-accent   #C39A3A → 2,4:1   (folosit la .eyebrow, pe fiecare pagină)
     --b-ink-mute #7C8094 → 3,55:1  (folosit la metadate, subtitluri, note)
   Le închidem exact cât să treacă, păstrând aceeași familie cromatică.        */
body[data-palette="B"] {
  --accent: #7F6014;      /* auriu închis — 5,3:1 pe fundal, 5,9:1 pe alb */
  --accent-soft: #EBD38A; /* rămâne pentru fundaluri, nu pentru text */
  --ink-mute: #5E6377;    /* 6,2:1 pe #F6F4EE */
}
body[data-palette="A"] { --accent: #8A6218; --ink-mute: #6B6154; }
body[data-palette="C"] { --accent: #7A5A18; --ink-mute: #7A5C3E; }

/* Auriul pal e lizibil DOAR pe navy. Banda CTA are fundalul deschis al paginii,
   deci acolo rămâne auriul închis — altfel contrastul cade la 1,3:1. */
.topbar .eyebrow, footer .eyebrow,
[data-on-dark] .eyebrow { color: var(--accent-soft); }
.topbar :focus-visible, footer :focus-visible,
[data-on-dark] :focus-visible { outline-color: var(--accent-soft); }

/* Supratitlul e mic și spațiat — îl aducem la o greutate care se citește */
.eyebrow { font-size: 11.5px; letter-spacing: .18em; }

/* --- Focus vizibil -------------------------------------------------------
   Inelul auriu pe fundal deschis avea 2,6:1 (minim cerut: 3:1 pentru
   componente non-text). Trecem pe navy, cu un halou alb care îl face
   vizibil și peste suprafețe închise.                                       */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--surface) 85%, transparent);
  border-radius: var(--r-sm);
}
body[data-mode="dark"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--accent-soft);
}
/* pe benzile navy inelul navy ar dispărea */
.hero-dark :focus-visible { outline-color: var(--accent-soft); }

/* Câmpurile de formular aveau `outline: none` fără înlocuitor */
.form-row input, .form-row select, .form-row textarea { outline: revert; }
.form-row input:focus-visible,
.form-row select:focus-visible,
.form-row textarea:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}
.doc-search input:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }

/* --- Skip link -----------------------------------------------------------
   `left: -9999px` îl ascundea, dar la focus rămânea în afara ecranului în
   unele browsere din cauza containerelor cu overflow. Îl facem fix.         */
.skip-link {
  position: fixed;
  left: 0;
  top: 0;
  transform: translateY(-120%);
  transition: transform .15s ease;
  z-index: 500;
  font-weight: 600;
  box-shadow: var(--shadow-md);
}
.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); left: 0; outline-offset: -3px; }

/* Elementele ascunse pentru cititoarele de ecran, dar focusabile, redevin vizibile */
.screen-reader-text:focus,
.screen-reader-text:focus-visible {
  position: fixed !important;
  top: 8px; left: 8px;
  width: auto; height: auto;
  margin: 0; padding: 8px 14px;
  clip: auto; clip-path: none;
  background: var(--primary);
  color: var(--primary-ink);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  z-index: 500;
}
/* <main> primește focusul de la skip link, dar fără inel vizibil — nu e un control */
main.site-main:focus { outline: none; }

/* --- Submeniuri accesibile de la tastatură -------------------------------
   Dropdown-urile se deschideau doar la :hover — cele 26 de linkuri din ele
   erau inaccesibile fără mouse. Acum se deschid și la focus în interior,
   și la clasa .open pusă de JS pentru Enter/Space.                          */
.nav-item.has-sub:focus-within > .dropdown,
.nav-item.has-sub.open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-item.has-sub:focus-within > a .caret { transform: rotate(225deg) translate(-2px, -2px); }

/* --- Ținte de atingere sub 24×24 CSS px (WCAG 2.2 — 2.5.8) ---------------
   Punctele caruselului au 24×3 px vizual. Păstrăm aspectul de liniuță, dar le
   dăm o suprafață reală de atingere printr-un pseudo-element care le extinde
   pe verticală — degetul nu mai trebuie să nimerească 3 pixeli.             */
.hc-dots { bottom: 12px; }
.hc-dots button {
  position: relative;
  border-radius: 2px;
}
.hc-dots button::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 30px;
  transform: translateY(-50%);
}
.lb-close, .lb-prev, .lb-next, .pagination a, .pagination span {
  min-width: 32px;
  min-height: 32px;
}

/* --- Tabele: antet vizibil, celule lizibile ------------------------------ */
.prose table th, .table-wrap th {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  padding: 11px 14px;
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 25%, var(--line));
}
.prose table td, .table-wrap td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose table tr:last-child td, .table-wrap tr:last-child td { border-bottom: 0; }
.prose table, .table-wrap table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.table-wrap tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }

/* --- <details> folosit pentru arhive (premii pe ani vechi) ---------------- */
.prose details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  margin: 16px 0;
  overflow: hidden;
}
.prose details > summary {
  cursor: pointer;
  padding: 16px 20px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
}
.prose details > summary::-webkit-details-marker { display: none; }
.prose details > summary::before {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
  transition: transform .2s;
  flex: 0 0 auto;
}
.prose details[open] > summary::before { transform: rotate(45deg); }
.prose details > summary:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.prose details > *:not(summary) { padding: 0 20px; }
.prose details > *:last-child { padding-bottom: 18px; }

/* --- Butonul de oprire a caruselului ------------------------------------- */
.hc-pause {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(20,24,38,.55);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.hc-pause:hover { background: rgba(20,24,38,.8); }

/* --- Preferința de mișcare redusă oprește singură caruselul -------------- */
@media (prefers-reduced-motion: reduce) {
  .hc-slide { transition: none !important; }
}

/* --- Linkurile din corpul textului trebuie să se distingă și fără culoare -
   Butoanele de an și de clasă sunt comenzi de navigare, nu legături în text: au
   deja chenar, fundal și stare activă, deci sublinierea le-ar încurca. */
.prose a:not(.btn):not(.doc-row):not(.clasa-buton):not(.an-buton) {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.prose a:not(.btn):not(.doc-row):not(.clasa-buton):not(.an-buton):hover { text-decoration-thickness: 2px; }

/* --- Notă de actualizare -------------------------------------------------
   Pe paginile unde informația publicată se referă la un an școlar încheiat,
   spunem asta explicit, în loc să lăsăm cititorul să creadă că e la zi.     */
.prose .nota-actualizare {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.55;
}
.prose .nota-actualizare strong { color: var(--ink); }

/* --- Cuprinsul paginilor lungi ------------------------------------------- */
.toc {
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin: 0 0 32px;
}
.toc-t {
  font-size: 13px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-family: "Source Sans 3", sans-serif !important;
  font-weight: 600 !important;
  margin: 0 0 12px !important;
}
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 32px;
}
.toc li { margin: 0 0 6px; break-inside: avoid; }
.toc a {
  font-size: 14.5px;
  color: var(--ink-soft);
  text-decoration: none;
  display: inline-block;
  padding: 3px 0;
  line-height: 1.35;
}
.toc a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) {
  .toc { padding: 16px 18px; margin-bottom: 24px; }
  .toc ul { columns: 1; }
  .toc a { padding: 7px 0; }
}

/* ancora nu mai ajunge sub antetul lipicios */
.prose h2[id], .prose summary[id], .prose h3[id] { scroll-margin-top: 90px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* buton „înapoi sus" */
.to-top {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--primary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 90;
}
.to-top.vizibil { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }

/* --- Firul Ariadnei ------------------------------------------------------ */
.breadcrumb {
  padding: 18px 0 0;
  margin-bottom: 0;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.breadcrumb a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line); }
.breadcrumb a:hover { color: var(--primary); text-decoration-color: currentColor; }
.breadcrumb [aria-current="page"] { color: var(--ink-mute); }
.breadcrumb span[aria-hidden] { color: var(--line); }
.page-body .breadcrumb { padding-top: 0; margin-bottom: 20px; }
@media (max-width: 560px) { .breadcrumb { font-size: 12.5px; } }

/* Secțiunea curentă rămâne marcată în meniu și când ești pe o subpagină */
.nav-item > a.active,
.nav-item.current-section > a {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.dropdown a.active { color: var(--primary); font-weight: 600; }

/* --- Imagini în conținutul migrat ---------------------------------------
   Afișele și slide-urile preluate de pe site-ul vechi sunt portret și de mari
   dimensiuni; fără limită de înălțime ocupau tot ecranul. Le încadrăm și le
   grupăm câte două-trei pe rând când vin în serie.                          */
.prose figure { margin: 22px 0; text-align: center; }
/* specificitate mai mare decât  din theme.css,
   care impunea width:100% și, împreună cu max-height, turtea imaginile */
.prose figure img,
.prose figure.wp-block-image img,
.prose .wp-block-image img,
.prose > p > img,
.prose > img {
  max-height: 460px;
  /* AMBELE trebuie `auto`, altfel constrângerile de lățime și de înălțime se
     aplică independent și imaginea iese turtită */
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
}
.prose figure figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-mute); }
/* serie de figuri consecutive → galerie pe rânduri */
.prose figure + figure { margin-top: 12px; }
@media (min-width: 700px) {
  .prose figure:has(+ figure), .prose figure + figure {
    display: inline-block;
    width: calc(50% - 8px);
    margin: 8px 3px;
    vertical-align: top;
  }
  .prose figure:has(+ figure) img, .prose figure + figure img { max-height: 320px; height: auto; }
}
@media (max-width: 560px) {
  .prose figure img, .prose > p > img, .prose > img { max-height: 320px; height: auto; }
}

/* imaginea deschisă la mărime completă */
.img-zoom {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(10, 12, 20, .88);
  backdrop-filter: blur(3px);
}
.img-zoom.open { display: flex; }
.img-zoom img { max-width: 100%; max-height: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.img-zoom-close {
  position: absolute;
  top: 16px; right: 20px;
  width: 46px; height: 46px;
  font-size: 30px; line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  cursor: pointer;
}
.img-zoom-close:hover { background: rgba(255, 255, 255, .24); }

/* --- Tabele ca listă de carduri pe telefon -------------------------------
   Sub 560 px, un tabel cu 4 coloane devine o listă de fișe: fiecare rând e un
   card, fiecare celulă e „Etichetă: valoare". Antetul rămâne accesibil pentru
   cititoarele de ecran, dar nu mai ocupă lățime.                            */
@media (max-width: 560px) {
  .table-cards { display: block; border: 0; }
  .table-cards thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
  }
  .table-cards tbody { display: block; }
  .table-cards tbody tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .table-cards tbody tr:nth-child(even) { background: var(--surface); }
  .table-cards td {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 5px 0;
    border: 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
    font-size: 14.5px;
  }
  .table-cards td:last-child { border-bottom: 0; padding-bottom: 0; }
  .table-cards td:first-child { padding-top: 0; }
  .table-cards td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 38%;
    font-size: 11.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-mute);
    line-height: 1.5;
  }
  /* prima celulă (de regulă numele) e titlul cardului */
  .table-cards td:first-child { font-weight: 600; font-size: 16px; }
  .table-cards td:first-child::before { align-self: center; }
  /* tabelul-card nu mai are nevoie de scroll orizontal */
  .table-wrap:has(.table-cards) { overflow: visible; border: 0; background: none; padding: 0; }
}

/* --- Grila de știri: cardurile trebuie să înceapă la aceeași înălțime -----
   Cardul mare avea raport 16/11 pe o coloană de 1,4fr, iar celelalte 16/10 pe
   1fr — în pixeli ieșeau 318 px față de 207 px, deci titlurile porneau decalat
   cu 120 px și rândul arăta zdrențuit. Fixăm aceeași înălțime de imagine pentru
   toate trei; cardul principal rămâne evidențiat prin lățime, spațiere și
   titlul cu serife.                                                         */
@media (min-width: 901px) {
  .news-card .img,
  .news-card.feature .img {
    aspect-ratio: auto;
    height: 260px;
  }
  /* cardul principal păstrează spațiul lateral mai generos, dar pornește textul
     de la aceeași linie ca vecinii */
  .news-card.feature .body { padding-top: 24px; }
}
/* Sub 901 px cardurile stau unul sub altul, dar tot merită același raport */
@media (max-width: 900px) {
  .news-card.feature .img { aspect-ratio: 16/10; }
}

/* Fotografiile-sursă sunt portret și se decupează în peisaj; centrarea implicită
   tăia oamenii și lăsa pavajul. Păstrăm treimea de sus, unde sunt fețele. */
.news-card .img,
.news-item img,
.gal-cover img { object-position: center 28%; }

/* --- Pagina Profesori: cifrele echipei + căutare după nume --------------- */
.team-sum {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}
.team-sum li { display: flex; flex-direction: column; }
.team-sum b {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
}
.team-sum span { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; }
.team-sum-nota { font-size: 13.5px; color: var(--ink-mute); margin-top: 14px; max-width: 70ch; }

.teachers-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 40px auto 14px;
  padding: 0 14px;
  max-width: 620px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.teachers-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.teachers-search svg { color: var(--ink-mute); flex: 0 0 auto; }
.teachers-search input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent;
  font: inherit; font-size: 16px; padding: 12px 0; color: var(--ink);
}
.teachers-search input:focus { outline: none; }
.teachers-count { flex: 0 0 auto; font-size: 12.5px; color: var(--ink-mute); white-space: nowrap; }
@media (max-width: 560px) {
  .team-sum { gap: 12px 24px; }
  .team-sum b { font-size: 26px; }
  .teachers-search { margin-top: 28px; }
}

/* `hidden` trebuie să învingă orice `display` declarat mai jos (galerie, căutare) */
[hidden] { display: none !important; }

/* --- Galerie pe albume --------------------------------------------------- */
.gal-albums { display: flex; flex-direction: column; gap: 14px; padding-bottom: 72px; }
.gal-album {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: box-shadow .18s, border-color .18s;
}
.gal-album.open { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.gal-album-head {
  display: flex;
  list-style: none;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 14px 18px 14px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.gal-album-head:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.gal-cover {
  flex: 0 0 auto;
  width: 108px;
  height: 78px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.gal-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-cover-plain {
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: var(--ink-mute);
}
.gal-album-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gal-album-t { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; font-weight: 600; }
.gal-album-d { font-size: 14px; color: var(--ink-soft); }
.gal-album-n { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.gal-album-caret {
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
  transition: transform .2s;
  margin-right: 6px;
}
.gal-album.open .gal-album-caret { transform: rotate(225deg); }
.gal-album .gal-grid {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 4px 14px 18px;
}
.gal-album .gal-item { margin: 0; break-inside: auto; }
.gal-album .gal-item a { display: block; border-radius: var(--r-md); overflow: hidden; }
.gal-album .gal-item img { width: 100%; height: 170px; object-fit: cover; display: block; transition: transform .3s; }
.gal-album .gal-item:hover img { transform: scale(1.04); }
.gal-album .gal-item figcaption {
  /* pages2.css le face suprapuneri absolute, vizibile doar la hover — în galeria
     pe albume sunt legende obișnuite, sub fotografie, mereu vizibile */
  position: static;
  opacity: 1;
  background: none;
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 400;
  padding: 6px 2px 0;
  line-height: 1.35;
}
@media (max-width: 560px) {
  .gal-album-head { gap: 12px; padding: 12px; }
  .gal-cover { width: 76px; height: 60px; }
  .gal-album-t { font-size: 18px; }
  .gal-album-d { display: none; }
  .gal-album .gal-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 12px 14px; }
  .gal-album .gal-item img { height: 120px; }
  .gal-album .gal-item figcaption { display: none; }
}

/* --- Conținut de la terți, blocat până la consimțământ ------------------- */
.embed-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 40px 24px;
  min-height: 260px;
  height: 100%;
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.embed-ph-t { font-weight: 600; font-size: 16px; }
.embed-ph-d { color: var(--ink-mute); font-size: 14px; max-width: 46ch; }
.embed-ph-link { font-size: 13.5px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.map-ph[data-embed-loaded] { border: 0; }

/* --- Linkuri legale în subsol ------------------------------------------- */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 22px 0 4px;
  margin-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
}
.footer-legal a {
  color: inherit;
  opacity: .75;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.25);
  padding: 4px 0;
}
.footer-legal a:hover { opacity: 1; text-decoration-color: currentColor; }
@media (max-width: 560px) {
  .footer-legal { flex-direction: column; gap: 2px; }
  .footer-legal a { min-height: 40px; display: flex; align-items: center; }
}

/* --- Contrast ridicat (comutatorul din widgetul de accesibilitate) ------- */
body.a11y-contrast {
  --bg: #ffffff;
  --surface: #ffffff;
  --ink: #000000;
  --ink-soft: #1a1a1a;
  --ink-mute: #333333;
  --line: #000000;
  --primary: #00307a;
  --primary-ink: #ffffff;
  --accent: #6b4a00;
}
body.a11y-contrast * { text-shadow: none !important; }
body.a11y-contrast .btn { border: 2px solid currentColor; }

/* Pagina Contact: blocurile sunt secțiuni de nivel doi, dar arată ca subtitluri */
.contact-h { font-size: clamp(19px, 1.7vw, 23px) !important; font-weight: 600 !important; }

/* Albumele sunt <details>; ascundem marcatorul nativ, păstrăm săgeata proprie */
.gal-album > summary::-webkit-details-marker { display: none; }
.gal-album > summary::marker { content: ""; }
.gal-album[open] .gal-album-caret { transform: rotate(225deg); }
.gal-album[open] { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }

/* Casetă informativă pe pagina de sesizări (neutră, nu de avertizare) */
.ses-warn.ses-info { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 28%, var(--line)); }
.ses-warn.ses-info .ses-warn-ic { background: var(--primary); color: var(--primary-ink); }
.ses-note { display: flex; flex-direction: column; gap: 14px; }

/* Butonul de accesibilitate nu trebuie să stea peste sertarul de meniu */
body.nav-open .a11y-toggle, body.nav-open .a11y-panel { display: none; }

/* Lungimea rândului: sub 75 de caractere, pragul confortabil pentru citit */
.prose > p, .prose > ul, .prose > ol, .prose > blockquote { max-width: 72ch; }
.prose > .table-wrap, .prose > figure, .prose > details, .prose > .toc { max-width: none; }

/* Linkurile către documente din paginile migrate arată ca documente, nu ca linkuri simple */
.prose a[href*="/wp-content/uploads/documente/"] {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.prose a[href*="/wp-content/uploads/documente/"]::before {
  content: "↓";
  font-size: 12px;
  color: var(--accent);
  flex: 0 0 auto;
}

/* Lista de documente inserată în corpul paginilor migrate */
.doc-list-inline { display: flex; flex-direction: column; gap: 4px; margin: 18px 0 26px; max-width: none; }
.doc-list-inline .doc-row { background: var(--surface); }
.prose .doc-list-inline a { text-decoration: none; }
.prose .doc-list-inline a::before { content: none; }
/* insigna din stânga arată deja formatul — coloana din dreapta ar fi o repetare */
.doc-list-inline .doc-ext { display: none; }

/* Bannerul de cookie-uri ocupa un sfert din ecranul telefonului la prima vizită */
@media (max-width: 560px) {
  .cookie-banner { padding: 14px 14px 16px; gap: 10px; }
  .cookie-text b { font-size: 16px; margin-bottom: 2px; }
  .cookie-text p { font-size: 13px; line-height: 1.45; }
  .cookie-actions { gap: 8px; }
  .cookie-actions .btn { padding: 11px 14px; font-size: 14px; }
}

/* Textul de serviciu nu coboară sub 13 px, chiar dacă e „secundar” */
.news-meta, .doc-row .doc-name small, .gal-album-n, .breadcrumb,
.footer-legal, .team-sum span, .sr-kind { font-size: 13px; }

/* Ritm vertical: titlul stă lipit de secțiunea pe care o deschide, nu de cea de dinainte */
.prose h2 { margin-top: 2.2em; margin-bottom: .6em; }
.prose h3 { margin-top: 1.8em; margin-bottom: .5em; }
.prose h2:first-child, .prose h3:first-child, .prose > .toc + h2 { margin-top: 0; }

/* Catalogul de documente:  era gândit pentru grupuri separate, dar acum
   distanța se aplică între bara de căutare, chip-uri, contor și listă — 160 px de gol
   înainte să vezi primul document. */
.doc-wrap { gap: 0; padding-top: 32px; }
.doc-wrap > .doc-themes { margin-top: 48px; }
@media (max-width: 768px) { .doc-wrap { padding-top: 22px; padding-bottom: 64px; } }

/* --- Formularul propriu de sesizare -------------------------------------- */
.ses-form-wrap { padding: 56px 0 8px; max-width: 760px; }
.ses-form-wrap > h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 12px; }
.ses-form-intro { color: var(--ink-soft); margin-bottom: 24px; line-height: 1.6; }
.ses-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 30px 30px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ses-form .form-row { display: flex; flex-direction: column; gap: 6px; }
.ses-form .form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ses-form .form-row.two > div { display: flex; flex-direction: column; gap: 6px; }
.ses-form label { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; letter-spacing: .04em; }
.ses-form small { font-size: 12.5px; color: var(--ink-mute); line-height: 1.45; }
.ses-oblig { color: var(--primary); font-weight: 600; letter-spacing: 0; }
.ses-optional { color: var(--ink-mute); font-weight: 400; letter-spacing: 0; }
.ses-form input[type="text"], .ses-form select, .ses-form textarea, .ses-form input[type="file"] {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  width: 100%;
}
.ses-form textarea { min-height: 130px; resize: vertical; }
/* Formularul de sesizare pe mobil: atingeri de min. 44px și spațiu real de scris. */
@media (max-width: 768px) {
  .ses-form button[type="submit"],
  .ses-form input[type="text"],
  .ses-form select { min-height: 44px; }
  .ses-form textarea { min-height: 160px; }
}
.ses-form input:focus-visible, .ses-form select:focus-visible, .ses-form textarea:focus-visible {
  outline: 3px solid var(--primary); outline-offset: 1px; border-color: var(--primary);
}
.ses-trimite { align-self: flex-start; margin-top: 4px; }
.ses-form-nota { font-size: 12.5px; color: var(--ink-mute); line-height: 1.55; margin-top: 4px; }
.ses-form-nota a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.ses-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ses-rezultat { border-radius: var(--r-md); padding: 18px 22px; margin-bottom: 22px; border: 1px solid; }
.ses-rezultat b { display: block; margin-bottom: 4px; }
.ses-rezultat p { font-size: 14.5px; line-height: 1.55; }
.ses-rezultat-ok { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.ses-rezultat-eroare { background: color-mix(in srgb, #b8452a 8%, var(--surface)); border-color: color-mix(in srgb, #b8452a 35%, var(--line)); }
.ses-rezultat b::before { font-weight: 700; margin-right: 8px; }
.ses-rezultat-ok b::before { content: "✓"; color: var(--primary); }
.ses-rezultat-eroare b::before { content: "!"; color: #8f3520; }

@media (max-width: 640px) {
  .ses-form { padding: 20px 18px 24px; border-radius: var(--r-md); }
  .ses-form .form-row.two { grid-template-columns: 1fr; gap: 18px; }
  .ses-trimite { align-self: stretch; justify-content: center; }
  .ses-form-wrap { padding-top: 36px; }
}

/* trei căi de sesizare în loc de două */
@media (min-width: 901px) { .ses-cards { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------------------
 * Acces rapid pe prima pagină — cele patru intrări cerute de școală
 * ------------------------------------------------------------------------- */
.acces-rapid { background: var(--surface); border-bottom: 1px solid var(--line); }
.ar-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line);
}
.ar-list > li { background: var(--surface); }
.ar-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 22px; min-height: 44px;
  text-decoration: none; color: inherit;
  transition: background .18s ease;
}
.ar-btn:hover, .ar-btn:focus-visible { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.ar-ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px;
  background: color-mix(in srgb, var(--primary) 9%, transparent); color: var(--primary);
}
.ar-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-txt b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.ar-txt span { font-size: 13px; color: var(--ink-mute); line-height: 1.3; }
.ar-ext { font-size: 11px; opacity: .65; }

@media (max-width: 900px) { .ar-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ar-list { grid-template-columns: 1fr; } .ar-btn { padding: 16px 18px; } }

/* ---------------------------------------------------------------------------
 * Bara de meniu cu 12 rubrici (structura cerută de școală)
 *
 * Cele 8 rubrici de dinainte încăpeau lejer; 12 nu mai încap la 1440px cu
 * spațierea veche. Trei ajustări, în ordinea impactului asupra designului:
 *   1. butonul „Înscriere" iese din bara de sus — locul lui e acum în bara de
 *      acces rapid de sub antet, unde e mai vizibil; rămâne în sertarul mobil;
 *   2. spațiere mai strânsă între rubrici;
 *   3. sertarul mobil pornește de la 1180px, nu de la 1024px, ca ecranele
 *      medii să nu primească un meniu înghesuit.
 * ------------------------------------------------------------------------- */
@media (min-width: 1181px) {
  .nav .container { gap: 24px; }
  /* Cu 12 rubrici, lista strânge sigla; numele școlii nu are voie să se rupă. */
  .brand { flex: 0 0 auto; }
  .brand-text b, .brand-text span { white-space: nowrap; }
  .nav-links { gap: 0; }
  .nav-item > a { padding: 10px 9px; font-size: 13.5px; }
  .nav-cta { display: none; }
}

/* Sertarul e definit în theme.css, la același prag de 1180px. Aici nu se mai
 * ascunde nimic: `display: none` ar bate `visibility`/`transform` ale sertarului
 * și l-ar face invizibil chiar și deschis. */

/* ---------------------------------------------------------------------------
 * Submeniurile din bara de sus
 *
 * Vizibilitatea e condusă exclusiv de clasa `.open`, pusă de main.js la
 * mouseenter/focus și scoasă cu o zăbavă la mouseleave. `:hover` rămâne ca
 * rezervă pentru cazul în care JavaScript-ul nu rulează.
 *
 * Două lucruri de care depinde tot: `visibility` NU primește întârziere de
 * tranziție (se animă în trepte, deci o întârziere o ține pur și simplu
 * ascunsă), iar cei 6px dintre rubrică și panou sunt acoperiți de un
 * pseudo-element, altfel cursorul care coboară spre panou iese din zona de
 * hover și meniul se stinge exact când utilizatorul întinde mâna după el.
 * ------------------------------------------------------------------------- */
@media (min-width: 1181px) {
  .nav-item.has-sub > .dropdown {
    transition: opacity .16s ease, transform .16s ease;
    transition-delay: 0s;
  }

  /* Puntea peste spațiul mort dintre rubrică și panou. */
  .nav-item.has-sub > .dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
  }

  .nav-item.has-sub.open > .dropdown,
  .nav-item.has-sub:hover > .dropdown,
  .nav-item.has-sub:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Cu 8 rubrici în loc de 12, bara își permite din nou spațiere normală. */
  .nav-links { gap: 2px; }
  .nav-item > a { padding: 10px 14px; font-size: 14px; }
}

/* ---------------------------------------------------------------------------
 * Panouri late („mega")
 *
 * Rubricile cu multe destinații deschid un panou pe toată lățimea containerului,
 * cu subrubricile grupate pe coloane sub titluri. Panoul se ancorează de bara
 * de meniu, nu de rubrică: altfel rubricile din dreapta l-ar împinge în afara
 * ecranului. De aceea `.has-mega` primește `position: static`, iar containerul
 * barei devine reperul de poziționare.
 * ------------------------------------------------------------------------- */
@media (min-width: 1181px) {
  .nav .container { position: relative; }
  .nav-item.has-mega { position: static; }

  .dropdown.mega {
    left: 0;
    right: 0;
    min-width: 0;
    padding: 26px 30px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 4px 40px;
    align-items: start;
  }

  .mega-col { display: flex; flex-direction: column; }

  .mega-h {
    margin: 0 0 10px;
    padding: 0 12px 9px;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    border-bottom: 1px solid var(--line);
  }

  .mega-links { display: flex; flex-direction: column; gap: 1px; }

  /* Panoul lat păstrează centrarea pe orizontală când se deschide. */
  .nav-item.has-mega > .dropdown.mega { transform: translateY(-6px); }
  .nav-item.has-mega.open > .dropdown.mega,
  .nav-item.has-mega:hover > .dropdown.mega,
  .nav-item.has-mega:focus-within > .dropdown.mega { transform: translateY(0); }
}

/* ---------------------------------------------------------------------------
 * Panourile late în sertarul de pe telefon
 *
 * Acolo nu există coloane: titlurile devin subtitluri, iar linkurile curg sub
 * ele. `.dropdown` e deja `display: none` până la deschiderea grupului.
 * ------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav-item.has-sub.open > .dropdown.mega { display: block; }
  .mega-col { display: block; }
  .mega-h {
    margin: 10px 0 2px;
    padding: 0 12px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .mega-links { display: block; }
  .dropdown.mega a { padding-left: 20px; }
}

/* ---------------------------------------------------------------------------
 * Rubrica „Acasă" ca iconiță
 *
 * Pe desktop se vede doar căsuța; eticheta rămâne în pagină, ascunsă vizual,
 * ca numele accesibil al linkului să fie „Acasă", nu un desen fără nume.
 * În sertarul de pe telefon eticheta reapare lângă iconiță — acolo o listă cu
 * un singur rând fără text ar fi de neînțeles.
 * ------------------------------------------------------------------------- */
.nav-item.nav-home > a { display: flex; align-items: center; gap: 9px; }
.nav-home-ic { flex: 0 0 auto; }

@media (min-width: 1181px) {
  .nav-item.nav-home > a { padding: 10px 12px; }
  .nav-home-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ---------------------------------------------------------------------------
 * Imaginile care se pot deschide mărite
 *
 * Fără un indiciu vizual, nimeni nu încearcă să apese pe o imagine. Cursorul de
 * lupă și ridicarea la trecerea cursorului spun că se poate — iar conturul de
 * focus face funcția vizibilă și pentru cine navighează cu tastatura.
 * ------------------------------------------------------------------------- */
img.zoomabil {
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .18s ease;
}
img.zoomabil:hover {
  transform: scale(1.012);
  box-shadow: var(--shadow-lg);
}
img.zoomabil:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Suprapunerea capătă legendă sub imagine. */
.img-zoom { flex-direction: column; gap: 14px; }
.img-zoom img { flex: 0 1 auto; min-height: 0; }
.img-zoom-cap {
  flex: 0 0 auto;
  margin: 0;
  max-width: 70ch;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}
.img-zoom-cap[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  img.zoomabil { transition: none; }
  img.zoomabil:hover { transform: none; }
}

/* Pe telefon, bordura de 32px fura o treime din lățime. Imaginea are nevoie de
 * tot ecranul; butonul de închidere rămâne la 46px, peste pragul de atingere. */
@media (max-width: 560px) {
  .img-zoom { padding: 60px 10px 16px; gap: 10px; }
  .img-zoom-close { top: 10px; right: 10px; }
  .img-zoom-cap { font-size: 13px; }
}

/* Imaginile late — organigrame, calendare, afișe — pot fi derulate pe orizontală
 * când depășesc ecranul, în loc să fie micșorate până devin ilizibile. */
.img-zoom { overflow: auto; overscroll-behavior: contain; }
.img-zoom img { max-width: min(100%, 1600px); }

/* ---------------------------------------------------------------------------
 * Chevronul rubricilor cu submeniu
 *
 * Era desenat la 10×10px cu contur de 2px — greu lângă un text de 14px, și cu
 * atât mai apăsat cu cât cinci din șase rubrici îl au. Aici e subțiat la 6px cu
 * contur de 1,3px și estompat: se vede că rubrica se deschide, dar nu concurează
 * cu numele ei. La deschidere devine opac și se rotește, deci semnalul rămâne.
 *
 * `font-size: 0` peste tot: glifa ▾ nu trebuie să reapară nicăieri lângă conturul
 * desenat — pe mobil o regulă mai veche o readucea la 13px.
 * ------------------------------------------------------------------------- */
.nav-item.has-sub > a .caret {
  font-size: 0;
  width: 6px;
  height: 6px;
  border-right: 1.3px solid currentColor;
  border-bottom: 1.3px solid currentColor;
  border-radius: 0 0 1px 0;
  opacity: .38;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s ease, opacity .2s ease;
}

.nav-item.has-sub > a:hover .caret,
.nav-item.has-sub:focus-within > a .caret { opacity: .7; }

.nav-item.has-sub:hover > a .caret,
.nav-item.has-sub.open > a .caret,
.nav-item.has-sub:focus-within > a .caret {
  opacity: .85;
  transform: rotate(225deg) translate(-1px, -1px);
}

/* În sertar rubrica ocupă tot rândul, deci chevronul stă în dreapta și are
 * nevoie de puțin mai multă prezență ca să fie observat cu degetul. */
@media (max-width: 1180px) {
  .nav-item.has-sub > a .caret {
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-width: 1.5px;
    opacity: .45;
  }
}

/* ---------------------------------------------------------------------------
 * Carduri fără fotografie
 *
 * Un card arată o imagine doar dacă articolul chiar are una. Înainte, cele fără
 * primeau o fotografie decorativă din temă — pe cardul „Săptămâna Verde"
 * apărea o poză de la o serbare, care în articol nu exista. Acum lipsa e
 * asumată: cardul capătă o bandă de accent și mai mult aer, ca să arate
 * deliberat, nu stricat.
 * ------------------------------------------------------------------------- */
.proj-card.fara-imagine,
.news-card.fara-imagine {
  border-top: 3px solid var(--primary);
}
.proj-card.fara-imagine .proj-body,
.news-card.fara-imagine .body {
  padding-top: 26px;
}
.proj-card.fara-imagine.big .proj-body { padding-top: 36px; }

/* Fotografiile din carduri sunt tăiate în format lat; fără o ancoră, capetele
 * oamenilor ies din cadru. Punctul de interes al fotografiilor de grup e în
 * treimea de sus, nu la mijloc. */
/* Cardurile de proiect arată de obicei afișe, la care titlul e chiar în partea
 * de sus — deci decupajul se ancorează sus, altfel se pierde tocmai numele
 * activității. La știri, unde apar mai ales fotografii de grup, punctul de
 * interes e puțin mai jos. */
.proj-card .img { object-position: center top; }
.news-card .img,
.news-item img { object-position: center 30%; }

/* ---------------------------------------------------------------------------
 * Activități: selectorul de an și stadiul fiecărui proiect
 *
 * Starea nu se introduce de mână — se calculează din perioadă. Proiectele
 * încheiate rămân în tabel, dar mai discret; cele care urmează se evidențiază.
 * ------------------------------------------------------------------------- */
.ani-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
}
.an-buton {
  padding: 7px 15px;
  min-height: 38px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.an-buton:hover { border-color: var(--linie-tare, var(--ink-mute)); color: var(--ink); }
.an-buton.activ {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.an-buton:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.tabel-activitati td small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-mute);
}

/* Stadiul: culoarea spune ce e, dar eticheta rămâne scrisă — culoarea singură
 * nu e un mijloc de informare (WCAG 1.4.1). */
.act-eticheta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.act-viitoare,
.act-eticheta.act-urmeaza {
  color: #1c5c46;
  background: color-mix(in srgb, #1c5c46 12%, transparent);
}
.act-eticheta.act-in-desfasurare {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.act-eticheta.act-incheiata {
  color: var(--ink-mute);
  background: color-mix(in srgb, var(--ink-mute) 12%, transparent);
}

/* Rândurile încheiate se retrag vizual, fără să devină ilizibile. */
.tabel-activitati tr.act-incheiata td { color: var(--ink-mute); }
.tabel-activitati tr.act-incheiata td strong { color: var(--ink-soft); font-weight: 600; }
.tabel-activitati tr.act-viitoare td { background: color-mix(in srgb, #1c5c46 4%, transparent); }

/* Explicația unui document, sub rândul lui. */
.doc-descriere {
  margin: -4px 0 12px;
  padding: 0 14px 0 46px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 74ch;
}

/* ---------------------------------------------------------------------------
 * Fișa unei clase — [stefan_clasa]
 * Clasa e perechea (an școlar, literă): se alege întâi anul, apoi clasa.
 * Butoanele sunt linkuri, deci fiecare clasă are adresa ei, de trimis mai departe.
 * ------------------------------------------------------------------------- */
.ani-selector .an-buton { display: inline-flex; align-items: center; text-decoration: none; }

.clase-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 26px;
  padding: 16px 18px;
  background: var(--surface-alt, color-mix(in srgb, var(--ink) 3%, transparent));
  border: 1px solid var(--line);
  border-radius: 10px;
}
.clase-nivel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.clase-nivel-eticheta {
  flex: 0 0 150px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}
.clase-butoane { display: flex; flex-wrap: wrap; gap: 6px; }
/* Selectorul poartă numele containerului ca să întreacă „.prose a”, care
   subliniază legăturile din text. */
.clase-selector .clasa-buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;          /* ținta de atingere pe telefon */
  padding: 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: background .15s, color .15s, border-color .15s;
}
.clase-selector .clasa-buton:hover { border-color: var(--primary); color: var(--primary); }
.clase-selector .clasa-buton.activ { background: var(--primary); border-color: var(--primary); color: #fff; }
.clase-selector .clasa-buton:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.titlu-clasa { margin: 6px 0 2px; scroll-margin-top: 90px; }
.titlu-clasa .an-clasa { font-weight: 400; color: var(--ink-mute); }
.sub-clasa { margin: 0 0 18px; color: var(--ink-mute); font-size: 15px; }
.fisa-clasa h3 { margin: 28px 0 10px; font-size: 18px; }
.fisa-clasa .nota { color: var(--ink-mute); font-size: 14px; margin: 0 0 8px; }
.fisa-clasa .nota-goala { color: var(--ink-mute); }

.lista-indrumatori, .lista-resurse, .lista-activitati-clasa {
  margin: 0; padding: 0; list-style: none;
}
.lista-indrumatori li, .lista-resurse li, .lista-activitati-clasa li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.lista-indrumatori li:last-child,
.lista-resurse li:last-child,
.lista-activitati-clasa li:last-child { border-bottom: 0; }

/* Motivul pentru care o activitate apare la clasă: legătura trebuie să se vadă,
   ca nimeni să nu creadă că a fost pusă acolo la întâmplare. */
.lista-activitati-clasa .motiv {
  display: block;
  margin-top: 2px;
  color: var(--ink-mute);
  font-size: 13.5px;
}
.link-manual { white-space: nowrap; }

@media (max-width: 640px) {
  .clase-nivel { flex-direction: column; align-items: flex-start; gap: 4px; }
  .clase-nivel-eticheta { flex: none; }
}

/* ---------------------------------------------------------------------------
 * Premii — [stefan_premii] și rubrica din fișa clasei
 * Pe pagina de performanțe sunt tabele, grupate pe competiții. Pe fișa clasei
 * sunt puține și încap într-o listă, unde numele elevului stă în față.
 * ------------------------------------------------------------------------- */
.titlu-concurs {
  margin: 30px 0 10px;
  font-size: 18px;
  font-weight: 600;
  text-wrap: balance;
}
.ani-selector + .nota { margin-top: -6px; }

.lista-premii { margin: 0; padding: 0; list-style: none; }
.lista-premii li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.lista-premii li:last-child { border-bottom: 0; }
.detaliu-premiu {
  display: block;
  margin-top: 2px;
  color: var(--ink-mute);
  font-size: 13.5px;
}
.tabel-activitati .gol, .table-wrap .gol { color: var(--ink-mute); }

/* Numele clasei — „Clasa Zâmbiricilor". Stă sub denumirea oficială, fiindcă e
   numele cu care copiii o știu, nu cel din documente. */
.nume-clasa {
  margin: 2px 0 14px;
  font-size: 17px;
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
 * Orarul clasei
 * Forma pe care o știe toată lumea: orele pe rânduri, zilele pe coloane. Pe
 * ecrane mici tabelul se trage lateral, dar coloana orelor rămâne pe loc —
 * altfel nu mai știi pe ce rând te uiți.
 * ------------------------------------------------------------------------- */
.orar-clasa table { min-width: 640px; }
.orar-clasa th[scope="row"] {
  position: sticky;
  left: 0;
  background: var(--surface);
  font-weight: 600;
  white-space: nowrap;
  text-align: left;
}
.orar-clasa td { vertical-align: top; }
.ora-disciplina { display: block; font-weight: 500; }
.ora-profesor { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-mute); }
.ora-profesor a { color: inherit; }
.orar-clasa .ora-libera { color: var(--ink-mute); }

.lista-examene { margin: 0; padding: 0; list-style: none; }
.lista-examene li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.lista-examene li:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------------------
 * Programele de lucru — [scoala_program]
 * Erau puncte de listă, toate îngroșate: numele, funcția și orele arătau la fel.
 * Acum fiecare program e o fișă: numele iese în față, funcția stă sub el mai
 * discret, iar zilele și orele se citesc pe coloane aliniate.
 * ------------------------------------------------------------------------- */
.prose .lista-program, .lista-program {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.program-intrare {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.program-cine { margin-bottom: 10px; }
.program-nume {
  display: block;
  font-family: var(--font-titlu, "Cormorant Garamond", Georgia, serif);
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
}
.program-rol {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* Zilele și orele: două coloane care se aliniază între rânduri, ca într-un orar. */
.prose .program-ore, .program-ore {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 18px;
}
.program-ore li { display: contents; }
.program-zi { color: var(--ink-soft); }
.program-interval { font-variant-numeric: tabular-nums; color: var(--ink); }
.program-nota {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--ink-mute);
}


@media (min-width: 720px) {
  .prose .lista-program, .lista-program { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}