/* ==========================================================================
   Navigație — bară sticky pe Profunzime, 5 intrări + CTA, variantă mobilă
   cu burger. Sub-secțiunile sunt ancore în pagină, nu mega-dropdown.
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface-invers);
  color: var(--on-invers);
  border-bottom: var(--card-border);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 72px;
  padding-block: var(--sp-3);
}

/* --- Logo ---------------------------------------------------------------- */
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--on-invers);
  flex: none;
}
.nav__logo img { width: 34px; height: auto; }
.nav__logo span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.15;
  letter-spacing: .02em;
}

/* --- Linkuri ------------------------------------------------------------- */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
  margin-left: auto;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  color: rgba(255,255,255,.72);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t-btn) var(--ease), background-color var(--t-btn) var(--ease);
}
.nav__link:hover { color: var(--on-invers); background: rgba(255,255,255,.08); }
.nav__link[aria-current="page"] { color: var(--on-invers); background: rgba(255,255,255,.12); }
.nav__link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-invers), 0 0 0 4px var(--impuls-light); }

.nav__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

/* Comutator temă */
.theme-toggle {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--on-invers);
  cursor: pointer;
  transition: border-color var(--t-btn) var(--ease), background-color var(--t-btn) var(--ease);
}
.theme-toggle i { font-size: 18px; line-height: 0; }
.theme-toggle:hover { border-color: var(--impuls); background: rgba(255,255,255,.08); }
.theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-invers), 0 0 0 4px var(--impuls-light); }
.theme-toggle .icon-dark { display: none; }
[data-theme="dark"] .theme-toggle .icon-dark { display: inline-flex; }
[data-theme="dark"] .theme-toggle .icon-light { display: none; }

/* --- Burger --------------------------------------------------------------- */
.nav__burger { display: none; }

@media (max-width: 1023px) {
  .nav__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    margin-left: auto;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--r-full);
    background: transparent;
    color: var(--on-invers);
    cursor: pointer;
  }
  .nav__burger i { font-size: 20px; line-height: 0; }
  .nav__burger:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-invers), 0 0 0 4px var(--impuls-light); }
  .nav__burger .icon-close { display: none; }
  .nav__burger[aria-expanded="true"] .icon-close { display: inline-flex; }
  .nav__burger[aria-expanded="true"] .icon-open { display: none; }

  /* Panoul deschis trece pe rândul lui, sub bară. Fără wrap ar rămâne al
     treilea element din rândul flex și s-ar strânge lângă logo, cu etichetele
     tăiate. */
  .nav__inner { flex-wrap: wrap; }

  .nav__panel {
    display: none;
    width: 100%;
    padding-bottom: var(--sp-5);
  }
  /* Pe ecrane scurte (telefon în peisaj), meniul se derulează în locul lui,
     fără să împingă pagina. */
  .nav__panel.is-open {
    display: block;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
    margin-left: 0;
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .nav__link { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); }

  /* Butonul de acțiune ocupă rândul, iar comutatorul de temă rămâne în
     dreapta, unde stă și în bară pe desktop. */
  .nav__actions {
    margin-top: var(--sp-4);
    gap: var(--sp-3);
  }
  .nav__actions .btn { flex: 1; order: -1; }
}

@media (min-width: 1024px) {
  .nav__panel {
    display: contents;
  }
}

/* --- Ancore de sub-secțiune ---------------------------------------------- */
.subnav {
  position: sticky;
  top: 72px;
  z-index: calc(var(--z-sticky) - 1);
  background: var(--claritate);
  border-bottom: var(--hairline);
}
.subnav__list {
  display: flex;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3) 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  color: var(--reflectie);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-btn) var(--ease), background-color var(--t-btn) var(--ease);
}
.subnav__link:hover { color: var(--impuls-text); background: var(--impuls-wash); }
.subnav__link.is-active { color: var(--impuls-text); background: var(--impuls-wash); }

/* Cu bara de ancore în pagină, ținta unui link nu mai ajunge ascunsă sub bara
   de sus și sub bara de ancore, ambele lipite de marginea ecranului. */
html:has(.subnav) { scroll-padding-top: calc(var(--sp-10) + var(--sp-4)); }

/* --- Footer --------------------------------------------------------------- */
.footer {
  background: var(--surface-invers);
  color: rgba(255,255,255,.7);
  padding-block: var(--sp-8) var(--sp-6);
}
.footer h4 {
  color: var(--on-invers);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.footer__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-7); }
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.footer__list a {
  color: rgba(255,255,255,.7);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--t-btn) var(--ease);
}
.footer__list a:hover { color: var(--on-invers); }
.footer__list a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-invers), 0 0 0 4px var(--impuls-light); border-radius: var(--r-sm); }

.footer__brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.footer__brand img { width: 40px; }
.footer__brand span { font-family: var(--font-display); font-weight: 600; color: var(--on-invers); font-size: var(--fs-sm); }
.footer__note { font-size: var(--fs-sm); max-width: 42ch; }

/* Rând cu imagine într-o coloană (2026-09-30): logo-urile instituțiilor
   (ANPC, SOL), legate. Imaginea nu depășește coloana și nici înălțimea unui
   banner. */
.footer__logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--sp-6);
}

/* Profilurile sociale, sub descriere: butoane doar cu glifă (.btn-icon--ghost).
   Marginea negativă aduce prima glifă pe aceeași verticală cu textul. */
.footer__social { gap: var(--sp-1); margin-top: var(--sp-4); margin-inline-start: calc(var(--sp-3) * -1); }
.footer .btn-icon--ghost { color: rgba(255,255,255,.7); }
.footer .btn-icon--ghost:hover { background: rgba(255,255,255,.1); color: var(--on-invers); }
.footer .btn-icon:focus-visible { box-shadow: 0 0 0 2px var(--surface-invers), 0 0 0 4px var(--impuls-light); }

.footer__bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  font-size: var(--fs-xs);
}

/* ==========================================================================
   Megamenu
   Un singur panou pe toată lățimea, deschis sub bară. Toată structura unei
   destinații se vede dintr-o privire: liste de programe pe coloane, plus
   două carduri care scot în față ce e imediat util. Înlocuiește cascada de
   patru niveluri, în care al patrulea nivel nu era descoperibil.
   ========================================================================== */

/* Elementul de meniu NU e poziționat: panoul se raportează la bară, ca să
   se întindă pe toată lățimea ferestrei, nu doar cât intrarea de meniu. */
.has-mega { position: static; }

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: rgba(255, 255, 255, .72);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--t-btn) var(--ease), background-color var(--t-btn) var(--ease);
}
.nav__trigger i {
  font-size: 14px;
  line-height: 0;
  transition: transform var(--t-btn) var(--ease);
}
.nav__trigger:hover { color: var(--on-invers); background: rgba(255, 255, 255, .08); }
.nav__trigger[aria-expanded="true"] { color: var(--on-invers); background: rgba(255, 255, 255, .12); }
.nav__trigger[aria-expanded="true"] i { transform: rotate(180deg); }
.nav__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-invers), 0 0 0 4px var(--impuls-light);
}

/* Intrare cu pagină proprie: numele e link, săgeata deschide panoul.
   Pe desktop panoul se deschide și la hover pe toată intrarea. */
.nav__split { display: flex; align-items: center; }
.nav__split .nav__link { padding-right: var(--sp-1); }
.nav__trigger--icon {
  justify-content: center;
  min-width: 44px;
  padding: var(--sp-2);
}

/* Pe desktop, numele și săgeata se văd ca o singură pastilă: fundalul de
   hover, de pagină curentă și de panou deschis stă pe .nav__split, nu pe
   fiecare copil. Focusul rămâne pe fiecare control în parte. */
@media (min-width: 1024px) {
  .nav__split {
    border-radius: var(--r-full);
    transition: background-color var(--t-btn) var(--ease);
  }
  .nav__split > :is(.nav__link, .nav__trigger) { background: transparent; }
  .nav__split:hover { background: rgba(255, 255, 255, .08); }
  .nav__split:hover > :is(.nav__link, .nav__trigger) { color: var(--on-invers); }
  .nav__split:has(.nav__link[aria-current="page"]),
  .nav__split:has(.nav__trigger[aria-expanded="true"]) { background: rgba(255, 255, 255, .12); }
  .nav__split:has(.nav__trigger[aria-expanded="true"]) > .nav__link { color: var(--on-invers); }
}

.megamenu {
  display: none;
  background: var(--prezenta);
  border-top: var(--hairline);
  box-shadow: var(--shadow-card);
}
.megamenu.is-open { display: block; }

.megamenu__grid {
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
}

@media (min-width: 1024px) {
  .megamenu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: var(--z-dropdown);
    border-bottom-left-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-lg);
    /* Intrarea și ieșirea (decizia clientului, 2026-09-30). Panoul nu se
       mișcă: se desfășoară din marginea de jos a barei, cu clip-path, deci
       nimic nu trece peste bară. Conținutul coboară puțin în interior, ca
       ochiul să citească direcția. Deschiderea ia --t-btn, închiderea mai
       puțin: ieșirea nu trebuie să țină pe loc următorul gest. Laturile și
       baza rămân la -sp-9 în afara panoului, ca umbra să nu fie tăiată.
       display intră în tranziție cu allow-discrete, @starting-style dă
       punctul de plecare; browserele fără suport și mișcarea redusă
       (--t-btn 1ms) deschid pe loc. */
    clip-path: inset(0 calc(var(--sp-9) * -1) 100%);
    transition:
      clip-path calc(var(--t-btn) * .7) var(--ease),
      display calc(var(--t-btn) * .7) allow-discrete;
  }
  .megamenu.is-open {
    clip-path: inset(0 calc(var(--sp-9) * -1) calc(var(--sp-9) * -1));
    transition-duration: var(--t-btn);
  }
  .megamenu > .container {
    opacity: 0;
    transform: translateY(calc(var(--sp-2) * -1));
    transition:
      opacity calc(var(--t-btn) * .7) var(--ease),
      transform calc(var(--t-btn) * .7) var(--ease);
  }
  .megamenu.is-open > .container {
    opacity: 1;
    transform: none;
    transition-duration: var(--t-btn);
  }
  @starting-style {
    .megamenu.is-open { clip-path: inset(0 calc(var(--sp-9) * -1) 100%); }
    .megamenu.is-open > .container { opacity: 0; transform: translateY(calc(var(--sp-2) * -1)); }
  }
  /* De la un meniu la altul panoul se schimbă pe loc (components.js pune
     .is-instant pe ambele panouri): bara rămâne deschisă, doar conținutul
     se înlocuiește. */
  .megamenu.is-instant,
  .megamenu.is-instant > .container { transition: none; }
  .megamenu__grid {
    grid-template-columns: 1.15fr 1.15fr 1.7fr;
    gap: var(--sp-7);
    padding-block: var(--sp-7);
  }
}

.megamenu__title {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--reflectie);
  margin: 0 0 var(--sp-4);
}

.megamenu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.megamenu__link {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  border-radius: var(--r-sm);
  color: var(--profunzime);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background-color var(--t-btn) var(--ease), color var(--t-btn) var(--ease);
}
.megamenu__link:hover { background: var(--impuls-wash); color: var(--impuls-text); }
.megamenu__link:focus-visible { outline: 2px solid var(--impuls); outline-offset: -2px; }
.megamenu__link[aria-current="page"] { background: var(--impuls-wash); color: var(--impuls-text); }

.megamenu__link .icon-duo { width: 34px; height: 34px; border-radius: var(--r-sm); box-shadow: none; }
.megamenu__link .icon-duo i { font-size: 16px; }

.megamenu__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.3;
  padding-block: 3px;
}
.megamenu__label small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--reflectie);
}

/* Al treilea nivel — variantele unui program — stau vizibile sub părinte,
   nu într-un submeniu care se deschide lateral. */
.megamenu__sub {
  list-style: none;
  margin: 0 0 var(--sp-2) var(--sp-7);
  padding: 0;
  display: grid;
  gap: 0;
}
.megamenu__sub a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: var(--sp-1) var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  border-radius: var(--r-sm);
  color: var(--reflectie);
  font-size: var(--fs-xs);
  text-decoration: none;
}
.megamenu__sub a:hover { color: var(--impuls-text); background: var(--impuls-wash); }
.megamenu__sub a:focus-visible { outline: 2px solid var(--impuls); outline-offset: -2px; }

.megamenu__featured {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .megamenu__featured { grid-template-columns: 1fr 1fr; }
}

/* Cardul „Următorul curs”: rândul de calendar (.calendar__row, course.css),
   așezat pe verticală în coloana îngustă a panoului, oricare ar fi ecranul.
   Sus, banda cu eticheta, ca pe cardurile de alături (.card__band--thin,
   întinsă până la marginile rândului); prețul și butonul stau jos. */
.megamenu__featured .calendar__row {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto 1fr;
  gap: var(--sp-3);
  padding: 0 var(--sp-5) var(--sp-5);
  overflow: hidden;
}
.megamenu__featured .calendar__row > .card__band {
  grid-column: 1 / -1;
  margin-inline: calc(var(--sp-5) * -1);
  margin-bottom: var(--sp-2);
  padding-inline: var(--sp-5);
}
.megamenu__featured .calendar__side {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  align-self: end;
}

/* Un singur card ocupă toată coloana din dreapta, cu înălțimea lui, nu cât
   coloanele de linkuri. Rândul de calendar revine atunci la data în stânga,
   cu prețul și butonul dedesubt. */
.megamenu__featured > :only-child { grid-column: 1 / -1; align-self: start; }
.megamenu__featured > .calendar__row:only-child {
  grid-template-columns: 92px 1fr;
  grid-template-rows: auto auto auto;
  gap: var(--sp-4) var(--sp-5);
  padding: 0 var(--sp-6) var(--sp-5);
}
.megamenu__featured > .calendar__row:only-child > .card__band {
  margin-inline: calc(var(--sp-6) * -1);
  margin-bottom: 0;
  padding-inline: var(--sp-6);
}
.megamenu__featured > .calendar__row:only-child .calendar__side { grid-column: 1 / -1; }

.megamenu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-top: var(--hairline);
}
.megamenu__foot p { margin: 0; font-size: var(--fs-sm); color: var(--reflectie); }
/* Butonul principal rămâne în dreapta și când subsolul are trei grupuri. */
.megamenu__foot > .btn:last-child { margin-left: auto; }

/* --- Echipa în subsolul megamenu-ului (.team-strip) --------------------------
   Câteva fotografii rotunde din echipă, apoi linkul spre toată echipa
   (decizie a clientului, 2026-09-30). Numele apare într-o etichetă la hover
   și la focus; cititoarele de ecran îl primesc din textul alternativ al
   fotografiei, deci eticheta e aria-hidden. Pe ecranele cu mouse cercurile
   se suprapun puțin; la atingere stau separat, ca fiecare să păstreze
   zona întreagă de 44px. „+N” spune câți oameni mai sunt: nu e link,
   linkul e „Vezi toată echipa”, alături. */
.team-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.team-strip__faces {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.team-strip__face,
.team-strip__count {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  box-shadow: 0 0 0 2px var(--prezenta);
}
/* Fotografiile stau deasupra lui „+N”: inelul lui trece sub ultima fotografie. */
.team-strip__face {
  z-index: 1;
  transition: transform var(--t-btn) var(--ease);
}
.team-strip__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-full);
}
/* Fără fotografie: inițialele pe Liniște. Placeholderul din media.css nu e
   încărcat pe fiecare pagină, iar panoul apare peste tot. */
.team-strip__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--r-full);
  background: var(--liniste);
  color: var(--profunzime);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.team-strip__count {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--impuls-text);
  background: var(--impuls-wash);
}
.team-strip__tip {
  position: absolute;
  bottom: calc(100% + var(--sp-2));
  left: 50%;
  z-index: 1;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--profunzime);
  color: var(--claritate);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: var(--lh-tight);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, var(--sp-1));
  transition: opacity var(--t-btn) var(--ease), transform var(--t-btn) var(--ease);
}
.team-strip__face:focus-visible { outline: 0; box-shadow: var(--focus-ring); z-index: 2; }
.team-strip__face:focus-visible .team-strip__tip {
  opacity: 1;
  transform: translate(-50%, 0);
}
a.team-strip__face:focus-visible { transform: translateY(calc(var(--sp-1) * -1)); }

@media (hover: hover) and (pointer: fine) {
  .team-strip__faces { gap: 0; }
  .team-strip__faces > li + li { margin-left: calc(var(--sp-2) * -1); }
  .team-strip__face:hover { z-index: 2; }
  a.team-strip__face:hover { transform: translateY(calc(var(--sp-1) * -1)); }
  .team-strip__face:hover .team-strip__tip {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* --- Megamenu pe mobil — acordeon în panoul burgerului -------------------- */
@media (max-width: 1023px) {
  .megamenu {
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .megamenu .container { padding-inline: 0; }
  .megamenu__grid { gap: var(--sp-5); padding-block: var(--sp-4); }
  .megamenu__title { color: rgba(255, 255, 255, .55); }
  .megamenu__link { color: var(--on-invers); }
  .megamenu__link:hover { background: rgba(255, 255, 255, .08); color: var(--on-invers); }
  .megamenu__label small { color: rgba(255, 255, 255, .6); }
  .megamenu__sub a { color: rgba(255, 255, 255, .65); }
  .megamenu__sub a:hover { color: var(--on-invers); background: rgba(255, 255, 255, .08); }
  .megamenu__featured { display: none; }
  .megamenu__foot { border-top-color: rgba(255, 255, 255, .12); }
  .megamenu__foot p { color: rgba(255, 255, 255, .6); }
  /* Pe fundalul închis al acordeonului, linkurile rapide trec pe capătul
     deschis al portocaliului: varianta de text închisă nu atinge pragul. */
  .megamenu__foot .btn--ghost { color: var(--impuls-light); }
  .megamenu__foot .btn--ghost:hover { color: var(--on-invers); background: rgba(255, 255, 255, .08); }
  .megamenu .team-strip__face,
  .megamenu .team-strip__count { box-shadow: 0 0 0 2px var(--surface-invers); }
  .megamenu .team-strip__count { color: var(--impuls-light); background: rgba(255, 255, 255, .08); }
  .nav__trigger { width: 100%; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); }
  /* Pe mobil numele ocupă rândul și duce la pagină; săgeata din dreapta
     deschide acordeonul, cu zona ei de atingere de 44px. */
  .nav__split .nav__link { flex: 1; padding-right: var(--sp-4); }
  .nav__trigger--icon { flex: none; width: 44px; height: 44px; padding: 0; justify-content: center; }
}

/* ==========================================================================
   Căutare
   O lupă în bară, lângă comutatorul de temă. Sub 1024px lupa rămâne în bară,
   lângă burger, nu intră în meniu: căutarea e o scurtătură, nu o destinație,
   și nu trebuie să coste două atingeri. Lupa deschide un panou sub bară, ca
   megamenu-ul, cu un singur câmp mare, focalizat direct; rezultatele apar
   sub câmp pe măsură ce se scrie. Fără JavaScript, lupa e un link către
   pagina de căutare.
   ========================================================================== */

.search-toggle {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--on-invers);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-btn) var(--ease), background-color var(--t-btn) var(--ease);
}
.search-toggle i { font-size: 18px; line-height: 0; }
.search-toggle:hover { border-color: var(--impuls); background: rgba(255,255,255,.08); }
.search-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface-invers), 0 0 0 4px var(--impuls-light); }
.search-toggle[aria-expanded="true"] { border-color: var(--impuls); background: rgba(255,255,255,.12); }
.search-toggle .icon-close { display: none; }
.search-toggle[aria-expanded="true"] .icon-close { display: inline-flex; }
.search-toggle[aria-expanded="true"] .icon-open { display: none; }

/* Două lupe, un singur panou: pe desktop lupa stă în acțiuni, înaintea
   comutatorului de temă; sub 1024px stă în bară, lângă burger. Doar una e
   vizibilă, deci doar una e în ordinea de tab. */
.search-toggle--bar { display: none; }

@media (max-width: 1023px) {
  .search-toggle--bar { display: inline-flex; margin-left: auto; }
  .search-toggle--bar + .nav__burger { margin-left: calc(var(--sp-3) - var(--sp-5)); }
  .nav__actions .search-toggle { display: none; }
}

/* --- Bara, cu lupa în ea ------------------------------------------------------
   Șase intrări, lupa, comutatorul de temă și butonul de acțiune trebuie să
   încapă pe un rând. O etichetă nu se rupe niciodată pe două rânduri
   („Online / Academy”): spațiul se ia din padding, nu din text. Pastilele
   de hover se ating între ele, fără gol, iar padding-ul lor devine distanța. */
.nav__link,
.nav__trigger { white-space: nowrap; }

@media (min-width: 1024px) {
  .nav__links { gap: 0; }
  .nav__link,
  .nav__trigger { padding-inline: var(--sp-3); }
  .nav__split .nav__link { padding-right: var(--sp-1); }
  .nav__trigger--icon { padding-inline: var(--sp-2); }
  .nav__actions { gap: var(--sp-2); }
}

/* Între 1024 și 1279px containerul e mai îngust: intrările se strâng încă o
   treaptă. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__inner { gap: var(--sp-4); }
  .nav__link,
  .nav__trigger { padding-inline: var(--sp-2); }
  .nav__split .nav__link { padding-right: 0; }
}

/* Sub 1152px rămâne doar semnul logo-ului. Numele scris rămâne în pagină,
   ascuns vizual: e numele accesibil al linkului către prima pagină. */
@media (min-width: 1024px) and (max-width: 1151px) {
  .nav__logo span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* --- Panoul de sub bară ---------------------------------------------------- */
.nav-search {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: var(--z-dropdown);
  background: var(--prezenta);
  color: var(--profunzime);
  border-top: var(--hairline);
  border-bottom-left-radius: var(--r-lg);
  border-bottom-right-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.nav-search[hidden] { display: none; }

.nav-search__inner {
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-6);
}
.nav-search__hint {
  margin: 0;
  padding-inline: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--reflectie);
}
.nav-search__hint[hidden] { display: none; }

/* Rezultatele se derulează în panou, nu împing pagina. */
.nav-search__live {
  max-height: 60vh;
  max-height: 60dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-1);
  margin: calc(var(--sp-1) * -1);
}
.nav-search__live[hidden] { display: none; }

@media (max-width: 767px) {
  .nav-search {
    border-bottom-left-radius: var(--r-md);
    border-bottom-right-radius: var(--r-md);
  }
  .nav-search__inner { padding-block: var(--sp-4) var(--sp-5); }
  .nav-search__hint { padding-inline: var(--sp-4); }
  .nav-search__live {
    max-height: calc(100vh - 72px - var(--sp-10));
    max-height: calc(100dvh - 72px - var(--sp-10));
  }
}

/* --- Câmpul de căutare -------------------------------------------------------
   O singură pastilă: lupa decorativă, câmpul și butonul, pe Claritate cu
   hairline, ca orice câmp din sistem. Focusul se desenează pe pastilă, nu pe
   input, ca inelul să înconjoare tot controlul. Eticheta e ascunsă vizual:
   lupa și butonul „Caută” spun deja ce e câmpul. */
.search-form {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1);
  padding-left: var(--sp-4);
  border: 1px solid var(--liniste);
  border-radius: var(--r-full);
  background: var(--claritate);
  transition: border-color var(--t-btn) var(--ease), box-shadow var(--t-btn) var(--ease),
              background-color var(--t-btn) var(--ease);
}
.search-form:hover { border-color: var(--reflectie-light); }
.search-form:focus-within {
  border-color: var(--impuls);
  box-shadow: 0 0 0 2px var(--impuls);
  background: var(--prezenta);
}

.search-form__icon {
  flex: none;
  color: var(--reflectie);
  font-size: 18px;
  line-height: 0;
  transition: color var(--t-btn) var(--ease);
}

.search-form__input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--profunzime);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  appearance: none;
}
.search-form__input:focus { outline: none; }
.search-form__input::placeholder { color: var(--reflectie-light); opacity: 1; }
.search-form__input::-webkit-search-decoration { appearance: none; }

.search-form .btn { flex: none; }

/* Căutare în curs: lupa devine cercul care se rotește, cu forma și ritmul
   butonului în încărcare. Cercul stă în locul lupei, deci câmpul nu se mișcă. */
.search-form__spinner {
  display: none;
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--impuls);
  border-top-color: transparent;
  border-radius: var(--r-full);
  animation: search-spin 700ms linear infinite;
}
.search-form.is-loading .search-form__icon { display: none; }
.search-form.is-loading .search-form__spinner { display: block; }
.search-form--lg .search-form__spinner { width: 22px; height: 22px; }

@keyframes search-spin { to { transform: rotate(360deg); } }

/* Varianta mare: panoul din bară și capul paginii de rezultate. */
.search-form--lg {
  padding: var(--sp-2);
  padding-left: var(--sp-5);
}
.search-form--lg .search-form__icon { font-size: 22px; }
.search-form--lg .search-form__input {
  min-height: 52px;
  font-size: var(--fs-lead);
}

/* Pe telefon câmpul mare rămâne la 16px: sub atât, iOS mărește pagina la
   focus. */
@media (max-width: 767px) {
  .search-form--lg { padding-left: var(--sp-4); }
  .search-form--lg .search-form__input { min-height: 44px; font-size: var(--fs-body); }
}

/* --- Rezultatele în timp real (.search-live) ----------------------------------
   Sub câmp, grupate pe tipuri, cel mult opt rânduri; pe desktop grupurile
   stau pe două coloane. Jos, linkul către pagina cu toate rezultatele. */
.search-live {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-2);
}
.search-live__groups { display: grid; gap: var(--sp-4); }

@media (min-width: 1024px) {
  .search-live__groups {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-7);
    align-items: start;
  }
}

.search-live__title {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--reflectie);
}

.search-live__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-3);
  border-top: var(--hairline);
}
.search-live__foot p,
.search-live__empty {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--reflectie);
}
.search-live__empty { padding: var(--sp-2) var(--sp-5); }

/* Rezultatele de dinainte rămân pe loc, estompate, până sosesc cele noi:
   lista nu sare, iar vizitatorul vede că se lucrează. */
.search-live { transition: opacity var(--t-btn) var(--ease); }
.nav-search__live[aria-busy="true"] .search-live { opacity: .5; }

/* Scheletul primei căutări: trei rânduri cu forma rândului mic (pătrat de
   48px, titlu, meta), care pulsează până vin rezultatele. Decorativ. */
.search-skeleton {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: var(--sp-2) 0 0;
  list-style: none;
}
.search-skeleton__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  animation: search-pulse 1.2s var(--ease) infinite alternate;
}
.search-skeleton__row:nth-child(2) { animation-delay: 150ms; }
.search-skeleton__row:nth-child(3) { animation-delay: 300ms; }
.search-skeleton__media {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  background: var(--liniste);
}
.search-skeleton__lines { flex: 1; display: grid; gap: var(--sp-2); }
.search-skeleton__line {
  display: block;
  width: 60%;
  height: var(--sp-3);
  border-radius: var(--r-full);
  background: var(--liniste);
}
.search-skeleton__line--short { width: 35%; height: var(--sp-2); }

@keyframes search-pulse { from { opacity: 1; } to { opacity: .45; } }

/* Cu mișcare redusă: cercul se rotește încet, scheletul nu mai pulsează. */
@media (prefers-reduced-motion: reduce) {
  .search-form__spinner { animation-duration: 2s; }
  .search-skeleton__row { animation: none; }
}

/* --- Rândul de rezultat (.search-result) --------------------------------------
   Același rând în panou (--sm) și pe pagina de rezultate. Tot rândul e
   clickabil, cu un singur tab stop (.search-result__link::after). Imaginea
   e decorativă: titlul spune deja ce e. Fără imagine, rândul are iconița
   tipului; persoana fără fotografie are inițialele. */
.search-results {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-result {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  margin-inline: calc(var(--sp-4) * -1);
  border-radius: var(--r-md);
  transition: background-color var(--t-btn) var(--ease);
}
.search-result + .search-result::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--sp-4);
  right: var(--sp-4);
  border-top: var(--hairline);
  transition: opacity var(--t-btn) var(--ease);
}
.search-result:hover { background: var(--profunzime-wash); }
.search-result:hover::before,
.search-result:hover + .search-result::before { opacity: 0; }

.search-result__media {
  position: relative;
  flex: none;
  width: 96px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--liniste);
}
.search-result__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.search-result__media--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--impuls-wash-strong);
  color: var(--impuls);
}
.search-result__media--icon i { font-size: 24px; line-height: 0; }
.search-result__initials {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--impuls-text);
}

/* Episodul are coperta pătrată (Spotify), persoana are portret rotund. */
.search-result--square .search-result__media { width: 72px; aspect-ratio: 1; }
.search-result--round .search-result__media { width: 72px; aspect-ratio: 1; border-radius: var(--r-full); }

.search-result__body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--sp-1);
}

.search-result__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-heading);
}
.search-result__link {
  color: var(--profunzime);
  text-decoration: none;
  transition: color var(--t-btn) var(--ease);
}
.search-result__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.search-result:hover .search-result__link { color: var(--impuls-text); }
.search-result__link:focus-visible { outline: none; }
.search-result:has(.search-result__link:focus-visible) { box-shadow: var(--focus-ring); }

@supports not selector(:has(a)) {
  .search-result__link:focus-visible { outline: 2px solid var(--impuls); outline-offset: 2px; }
}

.search-result__meta {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--reflectie);
}

.search-result__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--reflectie);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Termenul căutat, marcat în titlu și în fragment. */
.search-result mark {
  background: var(--implinire-wash);
  color: var(--profunzime);
  font-weight: 600;
}

@media (max-width: 767px) {
  .search-result {
    gap: var(--sp-3);
    padding: var(--sp-3);
    margin-inline: calc(var(--sp-3) * -1);
  }
  .search-result + .search-result::before { left: var(--sp-3); right: var(--sp-3); }
  .search-result__media { width: 72px; }
  .search-result--square .search-result__media,
  .search-result--round .search-result__media { width: 56px; }
}

/* Rândul mic, din panou: imagine pătrată de 48px, titlu și un rând de meta,
   fără fragment. Fără linii între rânduri: grupul e scurt. */
.search-result--sm {
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  border-radius: var(--r-sm);
}
.search-result--sm + .search-result--sm::before { display: none; }
.search-result.search-result--sm .search-result__media { width: 48px; aspect-ratio: 1; }
.search-result--sm.search-result--round .search-result__media { border-radius: var(--r-full); }
.search-result--sm .search-result__media--icon i { font-size: 18px; }
.search-result--sm .search-result__initials { font-size: var(--fs-xs); }
.search-result--sm .search-result__body { gap: 0; }
.search-result--sm .search-result__title { font-size: var(--fs-sm); }

/* ==========================================================================
   Breadcrumbs
   Arată unde e pagina curentă în structura site-ului și dă drumul înapoi cu
   un singur click. Ultimul element e pagina curentă și nu e link.
   ========================================================================== */

.breadcrumb-bar {
  background: var(--claritate);
  border-bottom: var(--hairline);
}

/* În bandă („Traseul sus” pe ma/banda, 2026-10-05): fără suprafață proprie,
   stă peste fundalul benzii. Pe benzile închise (.on-dark) textul și linia
   trec pe alb transparent, ca restul textului secundar din bandă. */
.breadcrumb-bar--overlay { position: relative; z-index: 1; background: none; }
.on-dark > .breadcrumb-bar--overlay { border-bottom-color: rgba(255, 255, 255, .14); }
.on-dark > .breadcrumb-bar--overlay .breadcrumb a { color: rgba(255, 255, 255, .7); }
.on-dark > .breadcrumb-bar--overlay .breadcrumb a:hover { color: #FFFFFF; background: rgba(255, 255, 255, .1); }
.on-dark > .breadcrumb-bar--overlay .breadcrumb a:focus-visible { outline-color: var(--impuls-light); }
.on-dark > .breadcrumb-bar--overlay .breadcrumb__sep { color: rgba(255, 255, 255, .5); }
.on-dark > .breadcrumb-bar--overlay .breadcrumb [aria-current="page"] { color: var(--on-invers); }

.breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding-block: var(--sp-3);
  font-size: var(--fs-xs);
}

.breadcrumb li { display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; }

/* Traseul stă pe un singur rând: titlul paginii curente (ultimul element)
   se scurtează cu „…” când nu încape; textul întreg rămâne în title. */
.breadcrumb li:last-child { flex: 0 1 auto; min-width: 0; }

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--reflectie);
  text-decoration: none;
  transition: color var(--t-btn) var(--ease), background-color var(--t-btn) var(--ease);
}
.breadcrumb a:hover { color: var(--impuls-text); background: var(--impuls-wash); }
.breadcrumb a:focus-visible { outline: 2px solid var(--impuls); outline-offset: -2px; }
.breadcrumb a i { font-size: 14px; line-height: 0; }

/* Separatorul e decorativ: nu trebuie citit de cititoarele de ecran. */
.breadcrumb__sep {
  color: var(--reflectie-light);
  font-size: 12px;
  line-height: 0;
  display: inline-flex;
}

.breadcrumb [aria-current="page"] {
  padding: var(--sp-2);
  color: var(--profunzime);
  font-weight: 600;
  font-family: var(--font-display);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pe ecran îngust, linkurile din față se derulează orizontal dacă nici
   titlul scurtat nu le mai lasă loc. */
@media (max-width: 767px) {
  .breadcrumb {
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    padding: 0;
  }
  .breadcrumb::-webkit-scrollbar { display: none; }
}