/* sections/course_teacher.php — „Kto poprowadzi Twój kurs".
   Tło białe (.m-sec), bez slaba — sekcja domyka landing i ma być spokojna,
   cała uwaga idzie na kartę i CTA. Chrom (typografia .text-*, marker listy
   .list-check, badge'e .badge-success/.badge-count/.subj-badge, placeholder
   .ph, przycisk .btn-solar) pochodzi z design-system.css — tu tylko rytm
   sekcji, karta, siatka dwukolumnowa i reveal.

   Jeden DOM, trzy zakresy (mobile-first):
     <576px   jedna kolumna, karta ograniczona do 480px
     576px+   karta dwukolumnowa, kolumna zdjęcia płynna (40%)
     1024px+  pełny wariant desktop: zdjęcie 420px, checklista w 2 kolumnach,
              CTA w wierszu z gwarancją
   Referencja projektowa miała tylko breakpoint 1024px i zakładała kontener
   1200px. W tym repo kontener to .container-ms (1320px), więc między ~500px
   a 1023px karta rozciągała się na całą szerokość, a kadr 4:5 puchł do
   ~750×940px. Stąd dodatkowy próg 576px (breakpoint `sm` Bootstrapa) i limit
   szerokości karty poniżej niego. */
.cth { padding: 32px 0 48px; }
@media (min-width: 1024px) { .cth { padding: 56px 0 80px; } }

/* ── Nagłówek ───────────────────────────────────────────────────────────── */
/* Blok nagłówka wyśrodkowany na wszystkich szerokościach — lead centruje się
   jako blok przez margin-inline: auto (samo text-align nie wystarcza, bo ma
   max-width węższy niż kontener). */
.cth-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cth-eyebrow { color: var(--subj-deep); }
.cth-title { margin: 0; color: var(--ds-color-ink); text-wrap: pretty; }
.cth-lead { margin: 0 auto; max-width: 46ch; color: var(--ds-color-ink-secondary); text-wrap: pretty; }

@media (min-width: 1024px) {
  .cth-head { gap: 10px; max-width: 680px; margin-inline: auto; }
}

/* ── Karta prowadzącego ──────────────────────────────────────────────────
   Cięższa niż .card z DS: radius-xl + shadow-md, bez ramki. Karta NIE jest
   klikalna, więc świadomie bez .card-hoverable — jedynym celem kliknięcia
   w tej sekcji jest CTA. */
.cth-card {
  margin-top: 20px;
  background-color: var(--ds-color-surface);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-md);
  overflow: hidden;
}

/* Poniżej progu dwukolumnowego karta jest jedną kolumną, więc bez limitu
   rozlałaby się na całą szerokość .container-ms — a razem z nią kadr 4:5.
   480px to szerokość, przy której portret dalej czyta się jak zdjęcie
   w karcie, a nie jak baner. Przy 360px limit nie robi nic (kontener jest
   węższy), więc na telefonie nic się nie zmienia. */
@media (max-width: 575.98px) {
  .cth-card { max-width: 480px; }
}

@media (min-width: 1024px) { .cth-card { margin-top: 40px; } }

/* ── Zdjęcie ─────────────────────────────────────────────────────────────
   Kadr 4:5 wymuszony przez aspect-ratio, żeby wysokość karty była znana
   przed wczytaniem pliku (bez przeskoku layoutu). */
.cth-photo { position: relative; margin: 0; }
/* <picture> wchodzi między figure a img, gdy sekcja dostanie photo.src_webp.
   Domyślnie jest elementem liniowym, więc `height: 100%` na <img> nie miałoby
   się do czego odnieść i kadr przestałby rozciągać się na wysokość karty. */
.cth-photo picture { display: block; height: 100%; }
.cth-photo img,
.cth-photo .ph {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
}
/* Tylko na <img> — .ph z design systemu jest gridem i musi nim zostać,
   inaczej jego podpis ucieka do góry kadru zamiast stać w środku. */
.cth-photo img { display: block; object-fit: cover; }

/* Badge przedmiotu leży NA zdjęciu, więc zamiast tła --subj-tint z .subj-badge
   dostaje półprzezroczystą biel z lekkim rozmyciem — jedyne miejsce w systemie
   z przezroczystością i blurem (tak w referencji projektowej). Kolor tekstu
   i kropka zostają z .subj-badge/.subj-dot, czyli z mechanizmu przedmiotu. */
.cth-subject {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--ds-radius-full);
  padding: 6px 12px 6px 11px;
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cth-subject .subj-dot { width: 6px; height: 6px; flex: none; }

/* W układzie dwukolumnowym kadr 4:5 przestaje obowiązywać — zdjęcie
   rozciąga się na wysokość karty (figure jest elementem grida i domyślnie
   dostaje `align-self: stretch`, więc `height: 100%` ma się do czego odnieść).
   min-height jest tylko zabezpieczeniem, gdyby treść karty kiedyś zmalała. */
@media (min-width: 576px) {
  .cth-photo img,
  .cth-photo .ph { aspect-ratio: auto; height: 100%; min-height: 320px; }
  .cth-subject { left: 16px; top: 16px; }
}
@media (min-width: 1024px) {
  .cth-photo img,
  .cth-photo .ph { min-height: 520px; }
}

/* ── Treść karty ───────────────────────────────────────────────────────── */
.cth-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 12px; }

.cth-idrow { display: flex; flex-direction: column; gap: 12px; }
.cth-id { display: flex; flex-direction: column; gap: 3px; }
.cth-name { margin: 0; color: var(--ds-color-ink); }
.cth-role { margin: 0; color: var(--ds-color-ink-muted); }

/* Badge'e: kolory i typografia z .badge-success/.badge-count, lokalnie tylko
   układ w linii (Bootstrap .badge jest inline-block, więc kropka i gwiazdka
   nie wyrównałyby się do tekstu). */
.cth-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cth-badge { display: inline-flex; align-items: center; gap: 6px; }
/* Obwódka w pełnym solarze wokół tintu — bez niej złoty badge rozpływa się
   na białej karcie (CLAUDE.md, reguła 3). */
.cth-badge-solar { box-shadow: inset 0 0 0 1px var(--ds-color-cta-solar); }
.cth-badge-solar svg { width: 13px; height: 13px; flex: none; }

/* ── Pasek dowodów ───────────────────────────────────────────────────────
   Liczby w kolorze marki, podpisy w metadanych. Wartości są parametrami
   sekcji — patrz „UWAGA PRAWNA" w nagłówku course_teacher.php. */
.cth-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--ds-color-hairline);
}
.cth-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cth-stat-value {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ds-color-primary);
}
.cth-stat-label { margin: 0; line-height: 1.35; color: var(--ds-color-ink-muted); }

/* ── Akapity „od siebie" (parametr `bio`) ────────────────────────────────
   Wariant dla stron, na których prowadzący mówi własnym głosem zamiast
   wyliczać korzyści (dziś: /webinar). Pierwszy i ostatni akapit stoją
   w pełnym atramencie i wadze 500 — otwierają i domykają wypowiedź, reszta
   jest tłem. Waga 600 byłaby tu za mocna: to wciąż akapit, nie nagłówek. */
.cth-bio { display: flex; flex-direction: column; gap: 10px; }
.cth-bio-p { margin: 0; color: var(--ds-color-ink-secondary); text-wrap: pretty; }
.cth-bio-p:first-child,
.cth-bio-p:last-child { color: var(--ds-color-ink); font-weight: var(--ds-weight-medium); }

/* ── Checklista ──────────────────────────────────────────────────────────
   Marker rysuje ::before z .list-check; dosunięty o 1px, żeby kółko 22px
   stanęło w optycznej osi pierwszej linii tekstu (15/1.55). */
.cth-list { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cth-list > li::before { margin-top: 1px; }
.cth-item { color: var(--ds-color-ink-secondary); text-wrap: pretty; }

/* ── CTA ─────────────────────────────────────────────────────────────────
   Jedyne mocne CTA w kadrze tej sekcji; sticky bar niesie tylko .btn-sm. */


/* ── Od 576px: karta dwukolumnowa ────────────────────────────────────────
   Kolumna zdjęcia płynna (40%), żeby przy 576–1023px portret nie zjadał
   ekranu. Reszta układu (checklista, CTA) zostaje w wariancie mobilnym —
   w kolumnie ~300px dwie kolumny listy nie mają sensu. */
@media (min-width: 576px) {
  .cth-card { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .cth-body { padding: 20px; gap: 16px; }
}

/* ── Desktop: pełny wariant 2a ───────────────────────────────────────────
   420px zdjęcia + reszta na treść. Ten sam DOM co na mobile. */
@media (min-width: 1024px) {
  .cth-card { grid-template-columns: 420px minmax(0, 1fr); }

  /* Treść wyśrodkowana w pionie względem zdjęcia: po zdjęciu CTA z tej sekcji
     kolumna jest niższa niż portret 4:5 i przy wyrównaniu do góry zostawiała
     pustą płachtę pod checklistą. */
  .cth-body { padding: 40px; gap: 24px; justify-content: center; }

  .cth-idrow { flex-direction: row; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
  .cth-badges { justify-content: flex-end; }
  .cth-role { font-size: 15px; }

  .cth-stats { gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--ds-color-hairline); }
  .cth-stat-value { font-size: 34px; line-height: 1; letter-spacing: -0.03em; }
  .cth-stat-label { font-size: 14px; }

  .cth-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
  .cth-list > li:last-child { grid-column: 1 / -1; }
  .cth-item { font-size: 15.5px; line-height: 1.6; }

  /* Ten sam stopień co checklista obok — oba warianty treści karty mają
     czytać się jak jedno pismo, nie jak dwa. */
  .cth-bio { gap: 12px; }
  .cth-bio-p { font-size: 15.5px; line-height: 1.6; }


}

/* Zapas na wąskie telefony (<=340px): „średni wynik kursantów" w trzech
   kolumnach łamie się na pojedyncze litery. */
@media (max-width: 340px) {
  .cth-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
}

/* ── Reveal na wejściu w kadr ─────────────────────────────────────────────
   Klasę .cth-reveal dopina JS (assets/js/course_teacher.js) — bez JS treść
   jest po prostu widoczna. Animujemy wyłącznie opacity i transform, czasy
   i krzywa z tokenów DS; stagger przez --i. */
.cth-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--ds-duration-slow) var(--ds-ease-out-soft),
    transform var(--ds-duration-slow) var(--ds-ease-out-soft);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.cth-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cth-reveal { opacity: 1; transform: none; transition: none; }
}