/* ==========================================================================
   Card curs
   Un curs se descrie prin patru lucruri, care apar în fiecare variantă:
   trainerul sau trainerii, locația, perioada (sau perioadele, când cursul
   e împărțit în module) și prețul pachetului.
   Fotografia cursului e opțională; fotografia trainerului la fel. Ce nu e
   opțional sunt cele patru informații de mai sus.
   ========================================================================== */

.course { display: flex; flex-direction: column; }

.course__body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1;
}
.course__title { font-size: var(--fs-h4); margin: 0; }
.course .media { border-radius: 0; }

/* --- Trainer ---------------------------------------------------------------- */
.course__trainers {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--reflectie);
}
.course__trainers b {
  color: var(--profunzime);
  font-weight: 600;
  font-family: var(--font-display);
}

/* Avatar simplu, cu inel Impuls */
.avatar {
  position: relative;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--r-full);
  padding: 2px;
  background: var(--gradient-impuls);
  overflow: hidden;
}
.avatar img,
.avatar .media__initial {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-full);
}
.avatar .media__initial { font-size: 1rem; }
.avatar--lg { width: 88px; height: 88px; }
.avatar--lg .media__initial { font-size: 1.5rem; }
.avatar--sm { width: 36px; height: 36px; }
.avatar--sm .media__initial { font-size: .8rem; }

/* Doi traineri care țin cursul împreună: un singur cerc, împărțit în două.
   Nu doi cercuri suprapuși — cursul e ținut de amândoi în același timp,
   iar cercul unic spune asta. */
.avatar-duo {
  position: relative;
  display: flex;
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: var(--r-full);
  padding: 2px;
  gap: 2px;
  background: var(--gradient-impuls);
  overflow: hidden;
}
.avatar-duo > * {
  position: relative;
  width: calc(50% - 1px);
  height: 100%;
  overflow: hidden;
}
.avatar-duo > *:first-child { border-radius: var(--r-full) 0 0 var(--r-full); }
.avatar-duo > *:last-child { border-radius: 0 var(--r-full) var(--r-full) 0; }
.avatar-duo img { width: 100%; height: 100%; object-fit: cover; }
.avatar-duo .media__initial { font-size: 1rem; }
.avatar-duo--sm { width: 56px; height: 56px; }
.avatar-duo--sm .media__initial { font-size: .8rem; }
/* Mărimea din rândul de trainer, alături de nume */
.avatar-duo--xs { width: 36px; height: 36px; gap: 1px; }
.avatar-duo--xs .media__initial { font-size: .7rem; }

/* Avatarul așezat în capul cardului. În varianta cu avatar ieșit peste
   marginea de sus, cardul trebuie să lase conținutul să depășească, deci
   nu mai poate decupa colțurile — de aceea varianta se folosește doar pe
   cardurile fără fotografie de curs. */
.course__avatar {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-2);
}

/* Avatarul iese 44px deasupra cardului, deci rândul din grilă trebuie să
   rezerve spațiul — altfel avatarul intră peste elementul de deasupra. */
.course--hero-avatar { overflow: visible; margin-top: 44px; }
.course--hero-avatar .course__body { padding-top: calc(var(--sp-7) + 44px); }
.course--hero-avatar .course__avatar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  transform: translateY(-50%);
}
.course--hero-avatar.course--dark .avatar,
.course--hero-avatar.course--dark .avatar-duo { box-shadow: 0 0 0 4px var(--surface-invers); }
.course--hero-avatar .avatar,
.course--hero-avatar .avatar-duo { box-shadow: 0 0 0 4px var(--prezenta); }

/* --- Perioade ---------------------------------------------------------------
   Un curs poate avea o singură perioadă sau două-trei module, fiecare cu
   data, numele și prețul lui. Structura e aceeași în ambele cazuri. */
.course__periods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.course__periods li {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
}
.course__periods li > i {
  font-size: 16px;
  line-height: 0;
  color: var(--impuls);
  align-self: center;
}
.course__period-date {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--profunzime);
}
.course__period-name {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--reflectie);
}
.course__period-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--impuls-text);
  white-space: nowrap;
}

/* Când sunt mai multe module, se marchează explicit ca fiind un pachet. */
.course__periods--modules { border-left: 2px solid var(--liniste); padding-left: var(--sp-4); }

.course__note {
  font-size: var(--fs-xs);
  color: var(--reflectie-light);
  margin: 0;
}

/* --- Meta și preț ------------------------------------------------------------ */
.course__footer {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.price--package { flex-direction: column; align-items: flex-start; gap: 0; }
.price--package .price__label {
  font-size: var(--fs-xs);
  color: var(--reflectie);
}
.price--package .price__value { color: var(--impuls-text); }

/* --- Variante ----------------------------------------------------------------
   .course--plain     fără fotografie de curs
   .course--dark      pe suprafață Profunzime, cum apare pe fundal închis
   .course--wide      orizontal, pentru listări
   ---------------------------------------------------------------------------- */
.course--plain { position: relative; }

.course--dark {
  background: var(--surface-invers);
  color: var(--on-invers);
  border: 1px solid rgba(255, 255, 255, .1);
}
.course--dark .course__title,
.course--dark .course__period-date,
.course--dark .course__trainers b { color: var(--on-invers); }
.course--dark .course__trainers,
.course--dark .course__note,
.course--dark .course__period-name,
.course--dark .meta { color: rgba(255, 255, 255, .7); }
.course--dark .course__footer { border-top-color: rgba(255, 255, 255, .12); }
.course--dark .course__periods--modules { border-left-color: rgba(255, 255, 255, .16); }
.course--dark .price__value { color: var(--implinire); }
.course--dark .price--package .price__label { color: rgba(255, 255, 255, .6); }
.course--dark .price__note,
.course--dark .price__old { color: rgba(255, 255, 255, .6); }
.course--dark .card__text { color: rgba(255, 255, 255, .7); }
.course--dark .media--contain { background: rgba(255, 255, 255, .06); }
.course--dark .course__period-price { color: var(--implinire); }
.course--dark .meta__item i,
.course--dark .course__periods li > i { color: var(--impuls-light); }

/* --- Curs online (Online Academy) ------------------------------------------
   Același card, fără dată și loc: cursul se parcurge în ritmul fiecăruia.
   Imaginea e mockup-ul cursului (.media--contain), descrierea e .card__text,
   prețul poate fi redus (.price__old), iar un bundle își listează cursurile
   cu .check-list. Culoarea proprie a unui curs trăiește doar în mockup;
   titlul, prețul și butonul rămân pe paleta sistemului. Bundle-ul
   recomandat, pus lângă cursul singur, e .course--dark. */
.course .check-list { gap: var(--sp-2); }

/* --- Bara de acțiune a cursului online, pe telefon (2026-09-30, decizia
   clientului) -----------------------------------------------------------------
   Pe pagina unui curs online, sub 768px: o bară lipită de marginea de jos a
   ecranului, cu „Vreau cursul” (Knolyx) și „Vezi tematica” în stânga și
   prețul în dreapta. Stă ascunsă sub ecran și urcă (translateY) după ce
   butonul din hero iese din vedere — components.js pune .is-visible. Fără
   JavaScript nu apare deloc: hero-ul are aceleași butoane. De la 768px nu
   există. visibility ține linkurile în afara ordinii de tabulare cât bara e
   ascunsă; body primește loc dedesubt, ca bara să nu acopere finalul paginii. */
.course-bar { display: none; }

@media (max-width: 767px) {
  .js .course-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--margin) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    background: var(--prezenta);
    border-top: var(--hairline);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--t-card) var(--ease), visibility 0s linear var(--t-card);
  }
  .js .course-bar.is-visible {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }
  /* Butoanele rămân pe un rând, pe o linie de text fiecare (2026-09-30):
     pe ecranele înguste treceau unul sub altul și bara acoperea pagina. */
  .course-bar__actions { display: flex; flex-wrap: nowrap; gap: var(--sp-2); min-width: 0; }
  .course-bar .btn { --btn-px: var(--sp-4); white-space: nowrap; }
  .course-bar .price {
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    margin: 0;
    line-height: 1.2;
  }
  .course-bar .price__value { font-size: var(--fs-lead); }
  .js body:has(.course-bar) { padding-bottom: calc(var(--sp-10) + env(safe-area-inset-bottom, 0px)); }
}

/* Sub 420px (telefoanele mici și cele cu „Mărimea afișajului” mărită, ex.
   Pixel 9a) butoanele și prețul nu încap pe un rând: prețul urcă deasupra,
   pe un rând cu prețul întreg, iar butoanele împart lățimea în două. */
@media (max-width: 419px) {
  .js .course-bar {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .course-bar .price {
    order: -1;
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-2);
    width: 100%;
  }
  .course-bar .price__value { font-size: var(--fs-body); }
  .course-bar__actions { width: 100%; }
  .course-bar .btn { flex: 1 1 0; min-width: 0; --btn-px: var(--sp-3); }
}

/* Orizontal — media în stânga, conținutul în dreapta */
@media (min-width: 768px) {
  .course--wide { flex-direction: row; }
  .course--wide .media { width: 38%; flex: none; aspect-ratio: auto; }
  .course--wide .course__body { padding: var(--sp-6) var(--sp-7); }
}

/* --- Fișa de pe pagina cursului ----------------------------------------------
   .course--sheet: aceleași patru informații, în ordinea în care le caută cine
   vrea să se înscrie — cine îl ține, unde și în ce format, când, cât costă.
   Trainerii sunt rânduri .person--row (fotografie cu inelul Impuls, nume,
   rol), nu avatarul ieșit peste margine: fișa stă pe aceeași linie cu
   formularul, deci capul ei trebuie să fie drept. Formatul e scris în .meta,
   nu iconiță în colț. Umplutura e a lui .form-card, ca cele două suprafețe
   alăturate să aibă aceeași margine interioară. */
.course--sheet .course__body { gap: var(--sp-5); }
/* Etichetele de format stau lipite sub adresă, aliniate cu textul ei:
   lățimea iconiței .meta__item (16px) plus spațiul de după ea. */
.course--sheet .meta + .course__tags {
  margin-top: calc(var(--sp-2) - var(--sp-5));
  padding-left: calc(16px + var(--sp-2));
}
@media (min-width: 768px) {
  .course--sheet .course__body { padding: var(--sp-7); }
}

.course__people {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--sp-5);
  border-bottom: var(--hairline);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
}
.course__people .person__photo {
  padding: 2px;
  background: var(--gradient-impuls);
}
.course__people .person__photo img,
.course__people .person__photo .media__initial { border-radius: var(--r-full); }
.course__people .person__name,
.course__people .person__role { display: block; }
.course__people .person__name a { color: inherit; text-decoration-color: var(--liniste); }
.course__people .person__name a:hover { color: var(--impuls-text); text-decoration-color: currentColor; }

.course--dark .course__people { border-bottom-color: rgba(255, 255, 255, .12); }

/* --- Pagina cursului ---------------------------------------------------------
   Patru zone: titlul, fișa, formularul, descrierea. Pe desktop titlul ține
   toată lățimea, iar fișa și formularul pornesc de la aceeași linie — două
   suprafețe cu capetele aliniate, nu un titlu lângă un formular. Descrierea
   continuă sub fișă. Rândul ei e 1fr: formularul, care le cuprinde pe
   amândouă, nu mai lungește rândul fișei. Pe telefon ordinea e titlu, fișă,
   formular, descriere, ca înscrierea să nu ajungă sub tot textul. */
.course-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "sheet" "form" "desc";
  gap: var(--sp-6);
}
.course-page__head { grid-area: head; margin: 0; }
.course-page__sheet { grid-area: sheet; }
.course-page__form { grid-area: form; }
.course-page__desc { grid-area: desc; display: flex; flex-direction: column; gap: var(--sp-4); }
.course-page__contact { justify-content: center; text-align: center; }
/* Titlul stă în banda video de deasupra (2026-10-05): grila pornește direct
   cu fișa și formularul. */
.course-page--hero { grid-template-areas: "sheet" "form" "desc"; }

@media (min-width: 1024px) {
  .course-page {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "head  head"
      "sheet form"
      "desc  form";
    column-gap: var(--sp-8);
    align-items: start;
  }
  .course-page--hero {
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "sheet form"
      "desc  form";
  }
  .course-page__desc { padding-top: var(--sp-4); }
  /* Formularul e alături: butonul care duce la el ar repeta acțiunea. */
  .course-page .course--sheet .course__footer .btn { display: none; }
}

/* ==========================================================================
   Calendarul de cursuri
   O listă, nu o grilă de carduri: cursurile se caută după dată, iar un rând
   pe lățime lasă data, titlul, locul și prețul să se citească pe aceeași
   linie. Lunile grupează rândurile, ca să se vadă ritmul anului.
   ========================================================================== */

.calendar { display: grid; gap: var(--sp-7); }

.calendar__month {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
}
.calendar__month span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--reflectie);
}

.calendar__list { display: grid; gap: var(--sp-3); }

.calendar__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-5);
  background: var(--prezenta);
  border: var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease);
}
.calendar__row:hover,
.calendar__row:focus-within {
  transform: translateY(var(--lift-card));
  box-shadow: var(--shadow-card-hover);
}
.calendar__row:focus-within { outline: 2px solid var(--impuls); outline-offset: 3px; }
.calendar__row:hover .btn { transform: none; }

@media (min-width: 768px) {
  .calendar__row {
    grid-template-columns: 92px 1fr auto;
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-6);
  }
  /* Data, titlul și prețul pe aceeași axă, la mijlocul rândului (2026-09-30,
     decizia clientului): data lipită sus, lângă un text centrat, părea
     decalată. Cardul din megamenu își păstrează așezarea (navigation.css). */
  .calendar__list .calendar__date { align-self: center; }
}

/* Data, ca un bloc de calendar */
.calendar__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-md);
  background: var(--impuls-wash);
  text-align: center;
  min-width: 84px;
  align-self: start;
  justify-self: start;
}
.calendar__day {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--impuls-text);
  letter-spacing: var(--ls-heading);
}
.calendar__mon {
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--impuls-text);
  text-transform: lowercase;
}
.calendar__year { font-size: 11px; color: var(--impuls-text); }

.calendar__main { display: grid; gap: var(--sp-2); min-width: 0; }
.calendar__title { font-size: var(--fs-h4); margin: 0; }
.calendar__title a { color: inherit; text-decoration: none; }
.calendar__title a::after { content: ""; position: absolute; inset: 0; }
.calendar__title a:focus-visible { outline: none; }

.calendar__side {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .calendar__side { flex-direction: column; align-items: flex-end; gap: var(--sp-3); }
}

/* Butonul e un al doilea element interactiv peste rândul clickabil, deci
   stă deasupra suprafeței de click. */
.calendar__side .btn { position: relative; z-index: 1; }
/* Distanța dintre preț și buton o dă doar gap-ul coloanei, nu și marginea
   de paragraf a prețului (2026-09-30, decizia clientului). */
.calendar__side .price { margin-bottom: 0; }

/* Etichetele cursului (2026-10-01, decizia clientului): formatul — „Online”
   (.tag) sau „La sediu” (.tag--neutru) — și eticheta evenimentului, pe un
   rând, pe toate cardurile de eveniment. Pe telefon, în calendar, stau în
   colțul din dreapta sus, lângă blocul datei, unde altfel rămâne gol. */
.course__tags { gap: var(--sp-2); }
/* Pe cardul închis, ca la .meeting: „La sediu” alb translucid, „Online” în
   Impuls deschis, lizibil pe Profunzime. */
.course--dark .course__tags .tag:not(.tag--implinire, .tag--solid, .tag--neutru) { background: var(--impuls-wash-strong); color: var(--impuls-light); }
.course--dark .course__tags .tag--neutru { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); }
@media (max-width: 767px) {
  .calendar__list .calendar__row .course__tags {
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-5);
    max-width: calc(100% - 84px - var(--sp-5) * 3);
    justify-content: flex-end;
  }
}

/* Nu există stare de „locuri epuizate” sau listă de așteptare: un curs care
   a început iese din calendar, iar până atunci e deschis înscrierilor. */

/* --- Filtre ------------------------------------------------------------------ */
.calendar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
/* Un link opțional în rândul filtrelor (ex. „Programe personalizate”):
   la dreapta, pe același rând; când rândul se rupe, trece dedesubt. */
.calendar-filters__action { margin-left: auto; }
/* Filtre pe un singur rând, derulabil pe orizontală (2026-09-30, decizia
   clientului). Sub 768px butoanele nu se mai rup pe mai multe rânduri: rândul
   iese până la marginile ecranului și se trage cu degetul. Padding-ul
   vertical lasă loc inelului de focus, pe care derularea l-ar tăia. */
@media (max-width: 767px) {
  .calendar-filters--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--sp-1) var(--margin);
    margin: calc(var(--sp-1) * -1) calc(var(--margin) * -1) calc(var(--sp-6) - var(--sp-1));
    scroll-padding-inline: var(--margin);
  }
  .calendar-filters--scroll::-webkit-scrollbar { display: none; }
  .calendar-filters--scroll > * { flex: none; white-space: nowrap; }
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid var(--liniste);
  border-radius: var(--r-full);
  background: var(--prezenta);
  color: var(--profunzime);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-btn) var(--ease), background-color var(--t-btn) var(--ease),
              color var(--t-btn) var(--ease);
}
.filter-chip:hover { border-color: var(--impuls); color: var(--impuls-text); }
.filter-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.filter-chip[aria-pressed="true"],
.filter-chip[aria-current="page"] {
  background: var(--impuls);
  border-color: var(--impuls);
  color: #FFFFFF;
}
.filter-chip__count {
  font-size: var(--fs-xs);
  font-weight: 400;
  opacity: .8;
}

.calendar__empty {
  padding: var(--sp-7);
  text-align: center;
  color: var(--reflectie);
  border: 1px dashed var(--liniste);
  border-radius: var(--r-lg);
}

/* --- Format: curs fizic sau curs online ------------------------------------
   Indicator în colțul din dreapta sus, pe fundal propriu. Are doar două
   forme — fizic și online. Un program care se ține în ambele feluri le arată
   pe amândouă, una lângă alta.
   Fundalul e wash-ul Impuls așezat peste Prezență, deci e opac: arată la fel
   pe corpul cardului și peste o fotografie. Iconița poartă informație, așa că
   folosește culoarea de text a portocaliului, care trece pragul de 3:1. */
.course__formats {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 2;
  display: flex;
  gap: var(--sp-2);
  pointer-events: none;
}

.course__format {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-sm);
  background:
    linear-gradient(var(--impuls-wash-strong), var(--impuls-wash-strong)),
    var(--prezenta);
  color: var(--impuls-text);
  box-shadow: var(--shadow-icon);
}
.course__format i { font-size: 18px; line-height: 0; }

/* Peste fotografie, umbra crește ca indicatorul să se desprindă de imagine. */
.course__formats--on-media .course__format { box-shadow: var(--shadow-card); }