/* ==========================================================================
   ACADEMIA · stratul de site
   Peste brand/tokens.css. Aici stau DOAR aranjarea în pagină și secțiunile.
   Butoanele, cardurile, tag-urile, sticla și tentele vin din tokeni.
   Dacă ai nevoie de o componentă nouă, se adaugă acolo, nu aici.
   ========================================================================== */

/* --- Structura paginii --------------------------------------------------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-8); }
.wrap-text { max-width: var(--container-text); }
section { padding-block: var(--sp-24); }
section + section { padding-top: 0; }

.sec-head { margin-bottom: var(--sp-10); }
.sec-head .eyebrow { margin-bottom: var(--sp-3); }
.sec-head h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
/* `:not(.eyebrow)`: supratitlul e tot un <p>, iar regula asta, fiind mai
   specifică decât `.eyebrow`, îi fura auriul.                             */
.sec-head p:not(.eyebrow) { color: var(--text-secondary); }

.grid { display: grid; gap: var(--sp-6); }
/* patru carduri: 2×2, ca să nu rămână al patrulea singur pe un rând */
/* `min(...)` nu e decor: pe un ecran de 393px, `minmax(380px, 1fr)` cere o
   coloană de 380px într-un container de 353px, iar cardurile ies în afară pe
   dreapta. Cu `min()`, coloana coboară la lățimea containerului.           */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
/* Materii și cursuri speciale: cardul e pătrat, fiindcă poartă numele
   materiei scris în poză și cercul trebuie să încapă întreg. Patru coloane
   în container dau 261px de card, deci un nume de vreo 12px: se citește,
   dar mai jos de atât nu se mai poate coborî.                             */
.grid-materie { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
/* Profesori: două pe rând. Cardul e orizontal, poza lângă nume, iar citatul
   ține toată lățimea; sub 460px de card se rupe la patru cuvinte pe rând.  */
.grid-profesori { grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.row   { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* --- Antet: bleumarinul mărcii, plin ------------------------------------
   Bara nu mai e de sticlă. Motivele, în ordine: e culoarea butonului primar,
   deci antetul și acțiunea principală vorbesc aceeași limbă; și, scoțând
   `backdrop-filter`, dispare capcana care făcea din antet blocul de
   referință pentru meniul `fixed` de pe telefon (vezi blocul de 560px).
   `theme-color` din cele patru pagini e deja #121B52, deci bara browserului
   se potrivea cu o bară care abia acum devine bleumarin.                  */
.site-head {
  position: sticky; top: 0; z-index: 50;
  padding-block: var(--sp-3);
  background: var(--navy-700);
  border-bottom: var(--stroke);
}
.site-head::before {
  content: ""; position: absolute; bottom: -1px; left: 6%; right: 6%; height: 1px;
  background: var(--glass-sheen); pointer-events: none;
}
.head-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }

/* sigla: bleumarin, deci mereu pe cardul ei alb (vezi manualul, plata 01) */
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--text); }
.brand-mark {
  width: 46px; height: 46px; flex: none; padding: 4px;
  background: #fff; border: var(--stroke); border-radius: var(--r-md);
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Numele mărcii, caligrafic, în Gwendolyn, ca restul caligrafiei. Se scrie
   legat, deci urcă în corp și nu se rărește.                              */
.brand-name { font-family: var(--font-accent); font-size: var(--fs-xl);
  font-weight: 400; letter-spacing: 0; line-height: 1.05; -webkit-text-stroke: 0; }
.brand-sub { display: block; font-family: var(--font-secondary); font-size: 11px;
  font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 3px; }

/* Marca pe bleumarin: același auriu care e deja pe banda de CTA. Măsurat:
   --brass-300 pe --navy-700 dă 8.29:1, --brass-200 dă 10.6:1. Subtitlul ia
   tonul mai deschis fiindcă are 11px, unde pragul contează cel mai mult.
   Subtitlul rămâne Montserrat: caligrafia are ochiul foarte mic și la 11px
   nu se mai citește. Caligrafia rămâne doar pe „Academia".                */
.site-head .brand      { color: var(--brass-300); }
.site-head .brand-name { color: var(--brass-300); }
.site-head .brand-sub  { color: var(--brass-200); }
.site-head .burger     { color: var(--brass-300); }

/* Linkurile primesc sticla pe care o avea bara până acum, cu cerneala peste
   ea. Măsurat: alb 62% peste --navy-700 compune #A5A8BD, iar --navy-900
   peste el dă 7.41:1. La 52% ar fi 5.67:1, tot peste prag, dar bara ar
   rămâne prea închisă pe sub linkuri; la 82% s-ar albi și n-ar mai citi
   nimeni bleumarinul de dedesubt.
   La hover transparența dispare de tot: alb plin, 17.4:1.
   Conturul rămâne --navy-900 și pe bleumarin: se vede ca o muchie închisă,
   iar regula sistemului e că el nu dispare niciodată.                     */
.site-head .navlink { background: var(--glass-fill); color: var(--text); }
.site-head .navlink:hover { background: var(--white); }
.site-head .navlink[aria-current="page"] {
  background: var(--white); color: var(--navy-700);
}

/* Comutatorul de limbă (`.lang-comutator`, componenta e în tokens.css) iese
   din bară pe telefon și intră în meniu, unde e loc: la 393px bara are deja
   siglă, hamburger și WhatsApp.                                            */
/* În bară, versiunea din meniu ar fi un al doilea comutator: se ascunde. */
.lang-meniu { display: none; }

.burger { display: none; }
/* Hamburgerul e desenat din trei linii, nu dintr-o imagine: o iconiță de 16px
   dintr-un fișier ar fi încă o cerere de rețea pentru ceva ce CSS-ul știe să
   deseneze. Se deschide în X când meniul e deschis.                        */
/* Fără ramă și fără umbră: e o iconiță, nu o pastilă. Suprafața de atins
   rămâne întreagă, doar că nu se mai vede conturul.                        */
.burger { gap: 0; padding: 9px 10px; border: 0; box-shadow: none;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.burger::before { display: none; }   /* dunga speculară n-are pe ce sta */
.burger:hover { box-shadow: none; }
.burger-linii, .burger-linii::before, .burger-linii::after {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger-linii { position: relative; }
.burger-linii::before, .burger-linii::after { content: ""; position: absolute; left: 0; }
.burger-linii::before { top: -6px; }
.burger-linii::after  { top: 6px; }
.burger[aria-expanded="true"] .burger-linii { background: transparent; }
.burger[aria-expanded="true"] .burger-linii::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-linii::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding-top: var(--sp-20); padding-bottom: var(--sp-16); }
/* Titlul de hero: o propoziție întreagă, nu cuvinte în cutii.
   clamp ține linia lizibilă de la telefon la ecran mare; max-width în ch
   o oprește să se întindă pe toată lățimea, unde ochiul pierde rândul. */
.hero h1 {
  font-size: clamp(2.125rem, 5.4vw, 4rem);
  line-height: 1.1;
  max-width: 19ch;
  margin-bottom: var(--sp-6);
}
.hero-lede { font-size: var(--fs-md); color: var(--text-secondary);
  max-width: 54ch; margin-bottom: var(--sp-8); }
.hero-actions { gap: var(--sp-5); }
.hero-note { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-5); }
/* Afilierile: etichete, nu butoane. Linkul rămâne subliniat, ca să se vadă
   că duce undeva; eticheta se rupe pe două rânduri pe telefon.            */
.hero-afiliere { gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }
.hero-afiliere .tag { line-height: 1.35; white-space: normal; }
.hero-afiliere a { color: inherit; }

.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--sp-6); margin-top: var(--sp-16); }
/* Linia de lângă cifre e aurie, ca filetele din afiș. */
.proof-item { border-left: 2px solid var(--accent); padding-left: var(--sp-5); }
/* tabular-nums: cifrele au aceeași lățime, deci numărul nu tresare cât urcă */
.proof-num { font-family: var(--font-primary); font-size: var(--fs-2xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight); line-height: 1.05; display: block;
  -webkit-text-stroke: var(--poiret-stroke) currentColor; paint-order: stroke fill; }
.proof-label { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 6px; }

/* Cardul cu fotografie (`.foto-card`, `.reason`, `.materie`) a trecut în
   brand/tokens.css, lângă celelalte componente: are culori, umbre și un voal,
   deci nu era aranjare în pagină. Aici nu mai rămâne nimic din el.         */

/* --- Video --------------------------------------------------------------- */
/* Fișierul stă pe site, nu pe YouTube: 720p, 14 MB, și nu se descarcă nimic
   până la clic (`preload="none"`), deci până atunci se vede doar posterul.
   Rama și umbra stau pe un <div>, nu pe <video>: browserul desenează videoul
   pe un strat separat, care ignoră `border-radius`, și colțul drept ieșea
   pe lângă ramă. `clip-path` pe video îl taie cu adevărat; pe <div> ar fi
   tăiat și umbra, de asta sunt două elemente.                              */
.video {
  width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border: var(--stroke); border-radius: var(--r-2xl); box-shadow: var(--sh-3);
  background: var(--navy-800);
}
.video video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(0 round calc(var(--r-2xl) - 2px));
}

/* --- Caruselul de recenzii ----------------------------------------------- */
.carusel { position: relative; }
.carusel-track {
  display: flex; gap: var(--sp-6); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sp-1); padding-block: var(--sp-2) var(--sp-6);
  scrollbar-width: none; -ms-overflow-style: none;
}
.carusel-track::-webkit-scrollbar { display: none; }
.carusel-track > * { scroll-snap-align: start; flex: 0 0 min(100%, 420px); }
/* Fără `height: 100%`: pe un element flex, procentul față de o pistă fără
   înălțime fixă îl oprea din întins, iar cardurile scurte lăsau o gaură
   între ele și butoane. Întinse, toate au înălțimea celei mai lungi.      */
.recenzie { display: flex; flex-direction: column; gap: var(--sp-4); }
.recenzie blockquote { margin: 0; font-size: var(--fs-md); line-height: var(--lh-snug); }
.recenzie figcaption { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.recenzie .who { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.recenzie .when { font-size: var(--fs-xs); color: var(--text-muted); }
.carusel-nav { display: flex; align-items: center; gap: var(--sp-4); }
.carusel-dots { display: flex; gap: var(--sp-2); flex: 1; flex-wrap: wrap; }
/* „3 / 17": pe telefon ține locul punctelor, care la 17 recenzii treceau pe
   două rânduri. Cititorul de ecran are deja propoziția din `data-live`.   */
.carusel-numar { display: none; flex: 1; font-size: var(--fs-sm); color: var(--text-secondary);
  font-variant-numeric: tabular-nums; }
.carusel-dot {
  width: 10px; height: 10px; padding: 0; border-radius: var(--r-full);
  border: 1.5px solid var(--stroke-color); background: transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.carusel-dot[aria-current="true"] { background: var(--navy-700); }
.carusel .btn-arrow:disabled { opacity: .35; cursor: default; box-shadow: none; transform: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* linkul de salt: ascuns pentru ochi, dar vizibil de îndată ce primește focus */
a.sr-only:focus {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  width: auto; height: auto; margin: 0; padding: 9px var(--sp-4);
  overflow: visible; clip: auto; white-space: nowrap;
  border: var(--stroke); background: var(--surface); box-shadow: var(--sh-2);
}

/* --- Despre: textul și omul, unul lângă altul -----------------------------
   Textul rămâne pe măsura lui de citit, portretul ia coloana din dreapta și
   stă lipit cât timp textul curge pe lângă el. Sub 900px coloanele se pun una
   sub alta, iar portretul urcă primul: e mai bine să vezi omul înainte să
   începi să citești despre el.                                             */
.despre-sus { display: grid; gap: var(--sp-10) var(--sp-12);
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  align-items: start; }
/* Antetul e lipicios și acoperă 74px. Portretul se oprește sub el, nu sub
   marginea ferestrei, altfel intră pe dedesubt la derulare.                */
.despre-sus .portret { position: sticky; top: calc(var(--inaltime-antet) + var(--sp-5)); }

/* Textul paginii „Despre" curge pe toată lățimea coloanei, ca într-un
   document scris: doar spațiere și aliniere. Regula generală care ține
   paragrafele la 60 de caractere nu se aplică aici.                        */
.despre-hero h1, .despre-hero .hero-lede { max-width: none; }
/* `.articol.despre-text`, nu `.despre-text`: regula generală `.articol` are
   aceeași specificitate și e scrisă mai jos în fișier, deci ar câștiga ea și
   ar recentra a doua parte a paginii pe măsura de citit.                   */
.articol.despre-text, .despre-sus .articol { max-width: none; margin-inline: 0; }
.articol.despre-text p, .despre-sus .articol p,
.articol.despre-text li, .despre-sus .articol li,
.articol.despre-text blockquote, .despre-sus .articol blockquote { max-width: none; }
/* Pe „Despre" citatul e text, nu obiect: fără chenar, fără fundal, fără colț
   rotunjit și fără bara de accent. Rămâne doar ritmul din jur, adică aceeași
   distanță ca între două paragrafe, și aceeași mărime de literă.          */
.articol.despre-text blockquote, .despre-sus .articol blockquote {
  padding: 0; border: 0; background: none; border-radius: 0;
  font-size: inherit; color: var(--text-secondary);
  /* `.articol blockquote` pune `margin: 0`, ceea ce avea sens cât timp
     citatul era o cutie cu padding propriu. Fără cutie, ar sta lipit de
     paragraful de deasupra: îi dăm exact distanța dintre două paragrafe. */
  margin-top: var(--sp-6);
}
.despre-sus .articol h2:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .despre-sus { grid-template-columns: 1fr; }
  .despre-sus .portret { position: static; order: -1; max-width: 420px; }
}

/* --- Blog ---------------------------------------------------------------- */
/* Fiecare card stă într-un <article>, ca motorul de căutare să vadă trei
   articole separate; cardul se întinde cât celula grilei, ca înainte.      */
.articole > article { display: flex; }
.articole > article > .articol-card { flex: 1; }
.articole { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); }
.articol-card { display: flex; flex-direction: column; gap: var(--sp-3);
  align-items: flex-start; text-decoration: none; color: inherit; }
.articol-card h3 { font-size: var(--fs-lg); }
.articol-card p { font-size: var(--fs-sm); color: var(--text-secondary); }
.articol-meta { display: flex; gap: var(--sp-3); align-items: center; font-size: var(--fs-xs);
  color: var(--text-muted); margin-top: auto; padding-top: var(--sp-3); width: 100%; }

.articol { max-width: var(--container-text); margin-inline: auto; }
.articol > * + * { margin-top: var(--sp-6); }
.articol h2 { font-size: var(--fs-xl); margin-top: var(--sp-12); }
.articol h3 { font-size: var(--fs-lg); margin-top: var(--sp-10);
  font-family: var(--font-secondary); font-weight: var(--fw-semibold); -webkit-text-stroke: 0; }
.articol p, .articol li { color: var(--text-secondary); }
.articol ul, .articol ol { padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.articol blockquote {
  margin: 0; padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--accent); background: var(--glass-fill-soft);
  border-radius: var(--r-md); font-size: var(--fs-md);
}

/* --- Subsol -------------------------------------------------------------- */
/* Numele mărcii în subsol: bleumarinul siglei, nu cerneala și nu gri.
   --navy-700 pe hârtie dă 16.1:1, deci și subtitlul de 11px trece.      */
.site-foot .brand-name, .site-foot .brand-sub { color: var(--navy-700); }
.site-foot { padding-block: var(--sp-16) var(--sp-12); margin-top: var(--sp-24);
  border-top: var(--stroke); }
/* Coloana de contact e `auto`: adresa de Gmail e un singur cuvânt lung și
   nu are unde să se rupă, deci coloana ia lățimea ei, iar celelalte trei
   împart ce rămâne. Între tabletă și telefon, pe două coloane, e posibil
   să nu încapă, și atunci adresa se rupe, în loc să iasă din pagină.     */
.foot-grid { display: grid; gap: var(--sp-10);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto minmax(0, 1fr); }
.foot-col [data-email] { overflow-wrap: anywhere; }
.foot-col h2 { font-family: var(--font-secondary); font-weight: var(--fw-semibold);
  font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--sp-4); -webkit-text-stroke: 0; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
/* Butoanele și linkurile de navigație din subsol își păstrează culoarea
   proprie: regula de mai jos e mai specifică decât `.btn` sau `.navlink`,
   deci le-ar decolora textul și l-ar duce spre albastru la hover.          */
/* textul simplu din coloane (adresa, programul) are aceeași mărime ca
   linkurile de lângă el; înainte doar linkurile erau micșorate          */
.foot-col li { font-size: var(--fs-sm); color: var(--text-secondary); }
.foot-col a:not(.btn):not(.navlink) { color: var(--text-secondary); text-decoration: none; font-size: var(--fs-sm); }
.foot-col a:not(.btn):not(.navlink):hover { text-decoration: underline; }
.foot-bottom { margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
  font-size: var(--fs-xs); color: var(--text-muted); }

/* --- AOS: animația, scrisă aici ------------------------------------------
   `aos.css` de pe CDN era încă o foaie de stil care blochează randarea, pe al
   treilea server, 750 ms pe telefon la PageSpeed, și conținea reguli pentru
   fiecare durată și fiecare întârziere între 50 și 3000 ms. Site-ul folosește
   un singur efect, `fade-up`, și cinci întârzieri. Scriem chiar acele reguli
   și scăpăm de fișier; `aos.js` doar pune clasele, atât.
   -------------------------------------------------------------------------- */
[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 550ms;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
[data-aos="fade-up"] { transform: translate3d(0, 24px, 0); }
[data-aos].aos-animate { opacity: 1; transform: none; }
[data-aos][data-aos-delay="70"]  { transition-delay: 70ms; }
[data-aos][data-aos-delay="90"]  { transition-delay: 90ms; }
[data-aos][data-aos-delay="140"] { transition-delay: 140ms; }
[data-aos][data-aos-delay="210"] { transition-delay: 210ms; }
@media (prefers-reduced-motion: reduce) {
  [data-aos] { opacity: 1; transform: none; transition: none; }
}

/* --- AOS: plasa de siguranță ----------------------------------------------
   `aos.css` ascunde din start tot ce poartă `data-aos` și arată abia când
   scriptul vede elementul intrând în ecran. Dacă scriptul nu ajunge, fiindcă
   CDN-ul e blocat sau rețeaua cade, jumătate de pagină ar rămâne invizibilă.
   Clasa `fara-aos` se pune pe `<html>` din `onerror`-ul etichetei `<script>`
   sau din site.js, dacă `window.AOS` lipsește, și readuce totul la vedere. */
html.fara-aos [data-aos] { opacity: 1 !important; transform: none !important; }

/* elementele care așteaptă date reale se văd că așteaptă */
[data-nedefinit] { position: relative; }
[data-nedefinit]::after {
  content: attr(data-nedefinit) " de completat";
  position: absolute; top: -10px; right: -6px; z-index: 2;
  font-family: var(--font-secondary); font-size: 10px; font-weight: 600;
  letter-spacing: .04em; padding: 2px 7px; border-radius: var(--r-full);
  background: var(--p-blush); color: var(--navy-900);
  border: 1.5px solid var(--navy-900); white-space: nowrap;
}

/* în antet nu are loc deasupra: coboară sub buton */
.site-head [data-nedefinit]::after { top: auto; bottom: -11px; right: 0; }

/* în rândul de jos al subsolului, linkul se rupe pe rândul lui, iar
   eticheta de deasupra ar călca peste afirmația precedentă: coboară sub el */
.foot-bottom [data-nedefinit]::after { top: auto; bottom: -18px; right: 0; }

/* --- Sub 1040px -----------------------------------------------------------
   Pragul era 860px, dar `.nav` are `flex-wrap: wrap`, deci linkul „Cursuri"
   și comutatorul „EN" adăugate mai târziu nu ieșeau din ecran, se împachetau
   pe un al doilea rând: antetul ajungea la 114px între 861 și ~1030px, cât
   bara stă fără hamburger. Măsurat: în engleză bara nu mai încape pe un rând
   până la ~1032px, cu vreo 6px mai târziu decât în română, fiindcă „Home",
   „About", „Subjects", „Courses" plus pastila „RO" sunt puțin mai late decât
   echivalentul românesc. Pragul de aici e cel mai mic la care bara stă pe un
   rând în ambele limbi, cu o marjă de vreo 8px peste măsurătoare.          */
@media (max-width: 1040px) {
  .wrap { padding-inline: var(--sp-5); }
  section { padding-block: var(--sp-16); }
  .burger { display: inline-flex; }
  /* închis din CSS, nu din JS: altfel prima încărcare arată meniul peste hero */
  #meniu { display: none; }
  #meniu.is-open { display: flex; }
  #meniu {
    position: absolute; left: var(--sp-5); right: var(--sp-5); top: calc(100% + 10px);
    flex-direction: column; align-items: stretch; gap: var(--sp-2);
    padding: var(--sp-4); border: var(--stroke); border-radius: var(--r-xl);
    background: var(--navy-700); box-shadow: var(--sh-3);
  }
  #meniu .navlink { text-align: center; }
  .head-inner { position: relative; }
  /* Regula ascunde etichetele din butoanele antetului, dar nu și liniile
     hamburgerului, care sunt tot un span.                                  */
  .head-actions .btn span:not(.burger-linii):not(.ico-wa) { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
/* --- Telefon: sub 560px ---------------------------------------------------
   Reperul e iPhone 16, 393px lățime. Regulile de aici sunt doar pentru
   telefon; pe desktop nu se schimbă nimic.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; }

  /* Cardul de profesor: poza deasupra, textul dedesubt. La 393px, cercul de
     152px lasă coloanei de text 120px, iar un nume în Poiret la 33px nu are
     unde să se rupă și iese din card pe dreapta.                           */
  .person-foto { grid-template-columns: 1fr; gap: var(--sp-4); }
  .person-foto .avatar { width: 116px; height: 116px; }

  /* Antetul: sigla și cele două butoane, fără text de marcă. Pe 393px,
     „Studium Generale by Denisa" se rupea pe trei rânduri și împingea
     butoanele.                                                             */
  .brand-text { display: none; }

  /* Comutatorul de limbă nu mai are loc în bară: iese de acolo și apare în
     meniu, unde fiecare etichetă are un rând întreg pentru ea.            */
  .head-actions .lang-comutator { display: none; }
  #meniu .lang-meniu { display: block; }

  /* Meniul: ecran plin, lipit sub antet.

     `fixed`, nu `absolute`. Menit ca meniul să se raporteze la ecran, nu la
     antet. O capcană ocolită aici, a rupt varianta dinainte:

     `overflow: hidden` pe `<html>` blochează derularea, dar taie și lipirea
     antetului: dacă pagina era derulată, bara se întorcea la locul ei din
     document, adică deasupra ecranului, iar meniul pleca odată cu ea.
     Rezultatul: meniu invizibil și pagină înțepenită. Meniul acoperă acum
     tot ecranul, deci n-are nevoie de blocaj.

     Regula care stingea `backdrop-filter` pe antet cât era meniul deschis a
     dispărut: bara nu mai are filtru de șters, e opacă din capul locului.  */
  #meniu.is-open {
    position: fixed; top: var(--inaltime-antet); left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: var(--sp-6) var(--sp-5) var(--sp-10);
    border: 0; border-radius: 0; box-shadow: none;
    background: var(--navy-700);
    overflow-y: auto; overscroll-behavior: contain;
  }

  #meniu .navlink {
    text-align: left; border: 0; border-radius: 0; background: none;
    /* `.navlink` din tokens.css are `backdrop-filter: saturate(170%) blur(20px)`.
       Fără resetul ăsta, fundalul „none" e transparent, dar filtrul saturează
       bleumarinul meniului de dedesubt și rândul iese vizibil mai albastru. */
    -webkit-backdrop-filter: none; backdrop-filter: none;
    font-family: var(--font-primary); font-size: var(--fs-xl);
    font-weight: var(--fw-regular); letter-spacing: var(--ls-snug);
    padding: var(--sp-4) 0;
    /* Aurul de pe bară, 8.29:1 pe bleumarin. Linia despărțitoare trece de la
       --border, o piatră deschisă care ar dispărea, la un bleumarin mai
       deschis, care se vede fără să taie.                                 */
    color: var(--brass-300);
    border-bottom: 1.5px solid var(--navy-500);
  }
  #meniu .navlink:hover { transform: none; box-shadow: none; }
  /* --accent-text (#9C6304) era ales pentru hârtie și dă 1.86:1 pe bleumarin,
     adică invizibil. Albul dă 16.10:1 și marchează pagina curentă mai clar
     decât o nuanță de auriu lângă alt auriu.                              */
  #meniu .navlink[aria-current="page"] { background: none; color: var(--white); }

  /* Recenziile: una pe ecran, dintr-o margine în alta. Caruselul iese din
     padding-ul paginii, iar cardul îl primește înapoi ca gutieră.           */
  #recenzii .carusel { margin-inline: calc(-1 * var(--sp-5)); }
  #recenzii .carusel-track { padding-inline: var(--sp-5); scroll-padding-inline: var(--sp-5); }
  /* 100% din cutia de conținut a pistei, care e exact lățimea textului de
     deasupra. `100vw` ar fi inclus și bara de derulare și ar fi lăsat
     gutiere inegale.                                                       */
  #recenzii .carusel-track > * { flex: 0 0 100%; }
  #recenzii .carusel-nav { padding-inline: var(--sp-5); }
  .carusel-dots { display: none; }
  .carusel-numar { display: block; }

  /* Opțiunile formularului: două pe rând, fiecare cât jumătate de ecran, cu
     textul la stânga. Pastilele mici, așezate trei pe rând, arătau ca niște
     etichete, nu ca ceva de apăsat cu degetul.                              */
  .formular { padding: var(--sp-6) var(--sp-5); }
  .formular-optiuni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .formular-optiuni .optiune {
    width: 100%; justify-content: flex-start; text-align: left;
    padding: 15px var(--sp-4); border-radius: var(--r-md);
  }
  /* Trei opțiuni sau mai puține: una pe rând, textele sunt lungi.           */
  .formular-optiuni.putine { grid-template-columns: 1fr; }

  /* Spațiere: pe un ecran de 393px, aerul desenat pentru desktop devine gol.
     Secțiunile și hero-ul se strâng, distanțele dintre blocuri rămân în
     aceeași scară, doar cu o treaptă mai jos.                               */
  .hero { padding-top: var(--sp-12); padding-bottom: var(--sp-10); }
  section { padding-block: var(--sp-12); }
  .sec-head { margin-bottom: var(--sp-8); }
  .despre-sus { gap: var(--sp-8); }
  .despre-sus .portret { max-width: none; }
  .articol h2 { margin-top: var(--sp-10); }
  .articol h3 { margin-top: var(--sp-8); }
  .site-foot { margin-top: var(--sp-16); padding-block: var(--sp-12) var(--sp-10); }

  /* Totul la stânga: nimic nu se centrează pe telefon.                      */
  .ctaband { text-align: left; padding: var(--sp-8) var(--sp-6); }
  .ctaband h2, .ctaband h3 { max-width: none; }
}