/* ==========================================================================
   sekcja „teachers_profiles" — podstrona „Nasi prowadzący" (/prowadzacy)
   ==========================================================================
   Kontrakt DOM: patrz nagłówek sections/teachers_profiles.php.
   Mobile-first: 360px to układ bazowy (jedna kolumna), od 1024px sylwetka
   rozjeżdża się na dwie kolumny, a co druga osoba ma portret po prawej.

   Wszystkie wartości pochodzą z tokenów --ds-* (DESIGN-SYSTEM.md). Paczka
   projektowa nosiła własną kopię tokenów ze starszej wersji systemu
   (#FBF8F3 zamiast krem {canvas-warm}, #EBE5DC zamiast {hairline},
   #EAF1FF zamiast {primary-tint}) — ten blok :root został wyrzucony zgodnie
   z instrukcją wdrożeniową z paczki. Odstępstwa od projektu — każde świadome
   i opisane w miejscu, w którym stoi — wylicza nagłówek sekcji PHP.

   Chrom (typografia .text-*, marker nagłówka .hl-marker, kafel ikony
   .icon-tile + .subj-icon-tile, placeholder .ph, kontener .container-ms,
   pierścień focusu) pochodzi z design-system.css — tu tylko rytm sekcji,
   pasy tła, siatka dwukolumnowa, karta kursu, zwijane bio i panel wyniku.
   ========================================================================== */

.tp {
  font-family: var(--ds-font-body);
  color: var(--ds-color-ink-secondary);
  background-color: var(--ds-color-canvas);
}

/* ── Hero sekcji ─────────────────────────────────────────────────────────
   Standardowy blok nagłówka serwisu: wyśrodkowany eyebrow → H1 → lead,
   ten sam wzorzec i te same stopnie co .ccp-head w course_comparsion.css.
   Padding jest tylko pionowy — poziomy niesie .container-ms w środku, tak
   jak w każdej innej sekcji serwisu.

   --ds-section-y sam przełącza 40px → 72px na 1024px, więc górne światło
   hero nie potrzebuje własnego breakpointu. */
.tp-hero {
  padding: var(--ds-section-y) 0 28px;
  border-bottom: 1px solid var(--ds-color-hairline);
}
.tp-head { text-align: center; }

/* .text-eyebrow z DS jest w kolorze {ink} — nadtytuł i metadane schodzą
   do {ink-muted} (Lc 93 na bieli, czyli w progu dla 13px). */
.tp-eyebrow { color: var(--ds-color-ink-muted); }
.tp-head .tp-eyebrow { margin: 0 0 10px; }

.tp-title { margin: 0 0 var(--ds-space-2); color: var(--ds-color-ink); text-wrap: balance; }
/* margin-inline:auto centruje sam BLOK, nie tylko tekst w nim — potrzebne,
   bo od 1024px lead dostaje węższy max-width niż kontener. */
.tp-lead { margin: 0 auto; color: var(--ds-color-ink-secondary); text-wrap: pretty; }

/* Kreska w wierszu indeksu („01 / 11 ────"); w hero nie występuje. */
.tp-rule { flex: 1; height: 1px; background-color: var(--ds-color-hairline); }

/* ── Sylwetka prowadzącego ───────────────────────────────────────────────
   Pasy tła naprzemiennie: biel → krem → biel … Liczy je :nth-of-type(even)
   na <article>, więc działa dla dowolnej liczby osób bez licznika w PHP
   (hero jest <header>, czyli innym typem — nie wchodzi do numeracji).

   --tp-surface to kolor pasa podany osobno, bo w tym kolorze wygasza się
   gradient nad przyciętym bio. --tp-bio-cap to limit wysokości bio; czyta go
   też JS (getComputedStyle), żeby próg mobile/desktop żył w jednym miejscu. */
.tp-person {
  padding: 26px 0 34px;
  background-color: var(--ds-color-canvas);
  --tp-surface: var(--ds-color-canvas);
  --tp-bio-cap: 348px;
}
.tp-person:nth-of-type(even) {
  background-color: var(--ds-color-canvas-warm);
  --tp-surface: var(--ds-color-canvas-warm);
  border-top: 1px solid var(--ds-color-hairline);
}

/* ── Portret ─────────────────────────────────────────────────────────────
   Kadr 4:5 wymuszony przez aspect-ratio, żeby wysokość sylwetki była znana
   przed wczytaniem pliku (bez przeskoku layoutu). */
.tp-portrait {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--ds-radius-xxl);
  overflow: hidden;
}
.tp-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Placeholder to atom .ph z DS; tu tylko wysokość podpisu w kadrze 4:5. */
.tp-ph { font-size: 12px; }

/* ── Indeks, tytuł naukowy, nazwisko ─────────────────────────────────────
   Kolejność treści jest stała: indeks „01 / 11" → (tytuł) → nazwisko.
   Tytuł naukowy jest osobną linią NAD nazwiskiem i osobnym polem w danych;
   gdy go nie ma, nazwisko po prostu zaczyna blok i układ się nie zmienia. */
.tp-index { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; }

.tp-degree {
  margin: 12px 0 0;
  font-size: var(--ds-text-label);
  font-weight: var(--ds-weight-semi);
  letter-spacing: 0.02em;
  color: var(--ds-color-ink-muted);
}
.tp-name { margin: 12px 0 0; color: var(--ds-color-ink); text-wrap: balance; }
/* Tytuł i nazwisko czytają się jako jeden blok, więc odstęp między nimi
   jest zerowy — górne światło bierze na siebie .tp-degree. */
.tp-degree + .tp-name { margin-top: 1px; }

/* ── Klikalna karta prowadzonego kursu ───────────────────────────────────
   Element konwersyjny sekcji: jeden link na każdy prowadzony kurs, lista
   obsługuje 1, 2 i więcej pozycji. Kolor przedmiotu wchodzi jako ramka,
   kafel ikony i podpis — nie jako duża płaszczyzna, więc reguła „kolory
   przedmiotów tylko jako akcent" zostaje zachowana. To NIE jest przycisk
   CTA: akcję w serwisie niosą wyłącznie .btn-solar/.btn-blue. */
.tp-courses {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

.tp-course {
  display: flex;
  align-items: center;
  gap: 11px;
  /* 60px to minimalny cel dotykowy karty (paczka projektowa) — z zapasem
     nad progiem 44px z design systemu. */
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--subj);
  border-radius: var(--ds-radius-lg);
  /* Karta jest biała także na kremowym pasie — inaczej ramka w kolorze
     przedmiotu traciła kontrast z tłem. */
  background-color: var(--ds-color-surface);
  color: var(--subj-deep);
  transition: transform var(--ds-duration-base) var(--ds-ease-out-soft),
              box-shadow var(--ds-duration-base) var(--ds-ease-out-soft);
}
.tp-course:hover {
  color: var(--subj-deep);
  transform: var(--ds-hover-lift);
  box-shadow: var(--ds-shadow-sm);
}
.tp-course:active { transform: scale(var(--ds-press-scale)); box-shadow: none; }

/* Kafel ikony to .icon-tile z DS (40px); na mobile schodzi do 36px, żeby
   karta zmieściła się w 60px razem z dwiema linijkami tekstu. */
.tp-tile { width: 36px; height: 36px; }
.tp-ic { width: 20px; height: 20px; }

.tp-course-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.tp-subject {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-body);
  font-weight: var(--ds-weight-semi);
  letter-spacing: -0.01em;
  color: var(--ds-color-ink);
}
.tp-level { font-size: var(--ds-text-label); color: var(--ds-color-ink-secondary); }
/* Strzałka dziedziczy {subj-deep} z karty — jedyny sygnał „to jest link"
   poza samą ramką. */
.tp-arrow { flex: none; width: 17px; height: 17px; }

/* ── Bio ze zwijaniem ────────────────────────────────────────────────────
   Trzy stany, wszystkie sterowane klasą na .tp-bio:
     (brak klasy) przycięte do --tp-bio-cap + gradient wygaszający w kolorze pasa
     is-fits      tekst się mieści → bez przycięcia, bez gradientu, bez przycisku
     is-open      użytkownik rozwinął → bez przycięcia, bez gradientu
   `is-fits` i `is-open` dokłada JS — pierwszą po realnym pomiarze, drugą
   na klik. Patrz assets/js/teachers_profiles.js. */
.tp-bio { position: relative; margin-top: var(--ds-space-4); }

/* Przycięcie, gradient i przycisk wchodzą DOPIERO przy działającym skrypcie
   (`data-tp-js` dokłada JS na sekcji). Bez niego bio jest po prostu całe —
   w paczce projektowej przycinało je samo CSS, więc przy wyłączonym JS tekst
   zostawał ucięty, a przycisk martwy. */
.tp[data-tp-js] .tp-bio {
  overflow: hidden;
  max-height: var(--tp-bio-cap);
  transition: max-height var(--ds-duration-slow) var(--ds-ease-out-soft);
}
.tp[data-tp-js] .tp-bio.is-open,
.tp[data-tp-js] .tp-bio.is-fits { max-height: 2400px; }

.tp-bio-inner { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.tp-bio p { margin: 0; font-size: var(--ds-text-body); line-height: 1.6; }
/* Pierwszy akapit dostaje mocniejszy głos — to on musi zatrzymać czytającego. */
.tp-bio p:first-child { color: var(--ds-color-ink); }

/* `transparent` (nie rgba(255,255,255,0)) — przeglądarki interpolują gradient
   w przestrzeni z premultiplikacją alfy, więc na kremowym pasie nie wychodzi
   z tego biała mgła w połowie wysokości. */
.tp-bio-fade {
  display: none;
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 56px; pointer-events: none;
  background: linear-gradient(transparent, var(--tp-surface));
  transition: opacity var(--ds-duration-link) var(--ds-ease-out-soft);
}
.tp[data-tp-js] .tp-bio-fade { display: block; }
.tp[data-tp-js] .tp-bio.is-open .tp-bio-fade,
.tp[data-tp-js] .tp-bio.is-fits .tp-bio-fade { opacity: 0; }

.tp-bio-toggle {
  margin-top: var(--ds-space-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Sam tekst ma 14px, więc bez min-height przycisk zjechałby pod próg
     44px celu dotykowego z design systemu. */
  min-height: 44px;
  padding: var(--ds-space-2) 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-body-sm);
  font-weight: var(--ds-weight-semi);
  color: var(--ds-color-primary-ink);
}
.tp-chev {
  width: 15px; height: 15px;
  transition: transform var(--ds-duration-link) var(--ds-ease-out-soft);
}
.tp-bio-toggle[aria-expanded="true"] .tp-chev { transform: rotate(180deg); }
.tp-bio-toggle[hidden] { display: none; }

/* ── Panel średniego wyniku ──────────────────────────────────────────────
   Panel jest zawsze w PRZECIWNYM kolorze niż pas: na bieli kremowy,
   na kremie biały. */
.tp-score {
  margin-top: var(--ds-space-3);
  padding: var(--ds-space-4) 14px;
  border: 1px solid var(--ds-color-hairline);
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-color-canvas-warm);
}
.tp-person:nth-of-type(even) .tp-score { background-color: var(--ds-color-canvas); }

.tp-score-label { margin: 0; color: var(--ds-color-ink-muted); }
.tp-score-rows { display: flex; flex-direction: column; gap: 11px; margin-top: var(--ds-space-3); }
.tp-score-head {
  margin: 0 0 5px;
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-space-3);
}
.tp-score-name {
  font-size: var(--ds-text-body-sm);
  font-weight: var(--ds-weight-semi);
  line-height: 1.3;
  color: var(--ds-color-ink);
}
.tp-score-name--muted { color: var(--ds-color-ink-muted); }
/* Wynik kursantów jest ZIELONY, nie niebieski: zielień czyta się jako „dobry
   rezultat", a niebieski to w tym serwisie kolor marki i akcji (CTA, linki),
   więc na liczbie mylił rolę. Litera bierze wariant -ink, nie żywy
   {success} — CLAUDE.md, reguła 12: żywa zieleń jest wyłącznie do wypełnień,
   kropek, ramek i ikon, każdy tekst idzie w -ink. Audyt APCA: Lc 87 na bieli
   i 84 na kremie (oba tła panelu) przy progu 65 dla 19px w wadze 600 — czyli
   z dużym zapasem, i czytelniej niż poprzedni {primary}, który dawał 76/73. */
.tp-score-value {
  flex: none;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-h2);
  font-weight: var(--ds-weight-semi);
  letter-spacing: -0.01em;
  color: var(--ds-color-success-ink);
}
.tp-score-value--muted { color: var(--ds-color-ink-muted); }
/* Brak danych NIE jest liczbą, więc nie dostaje ani stopnia, ani koloru
   liczby — patrz komentarz przy .tp-track--unknown. */
.tp-score-value--tbd {
  font-size: var(--ds-text-label);
  font-weight: var(--ds-weight-regular);
  color: var(--ds-color-ink-faint);
}

.tp-track {
  height: 10px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-color-success-tint);
  overflow: hidden;
}
.tp-track--national { background-color: var(--ds-color-hairline); }
/* Gdy średniej krajowej nie znamy, tor idzie w raster, a wartość mówi
   „[DO UZUPEŁNIENIA]" — nigdy zmyślona liczba (wymóg design systemu
   i ryzyko UOKiK). Wiersz da się też w danych wyłączyć w całości. */
.tp-track--unknown {
  background: repeating-linear-gradient(90deg,
    var(--ds-color-hairline) 0 6px,
    var(--ds-color-canvas-soft) 6px 12px);
}
/* Wypełnienie to sygnał, nie tekst — tu żywy {success}, nie wariant -ink. */
.tp-fill {
  display: block; height: 100%;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-color-success);
}
.tp-fill--national { background-color: var(--ds-color-ink-faint); }

.tp-score-source { margin: 11px 0 0; color: var(--ds-color-ink-muted); }

/* ── Desktop (>=1024px) ──────────────────────────────────────────────────
   Próg „desktop" z DESIGN-SYSTEM.md, ten sam co w paczce projektowej. */
@media (min-width: 1024px) {
  .tp-hero { padding: var(--ds-section-y) 0 48px; }
  .tp-title { margin-bottom: var(--ds-space-3); }
  /* Limit linijki leadu — kolumna kontenera ma na 1320px 1280px, a to ponad
     200 znaków w wierszu. 34em to ta sama wartość co w .ccp-lead. */
  .tp-lead { max-width: 34em; }

  .tp-person { padding: var(--ds-space-16) 0; --tp-bio-cap: 430px; }
  .tp-inner {
    display: grid;
    grid-template-columns: 460px minmax(0, 1fr);
    gap: var(--ds-space-16);
    align-items: start;
  }
  /* Co druga osoba ma portret po prawej — rytm strony przestaje być kolumną
     jedenastu identycznych bloków. */
  .tp-person:nth-of-type(even) .tp-inner { grid-template-columns: minmax(0, 1fr) 460px; }
  .tp-person:nth-of-type(even) .tp-media { order: 2; }

  .tp-ph { font-size: 13px; }

  .tp-index { margin-top: 0; gap: var(--ds-space-4); }
  /* Górne światło bloku „tytuł + nazwisko" bierze pierwszy z nich — dzięki
     temu osoba z tytułem i bez tytułu zaczyna blok na tej samej wysokości. */
  .tp-degree { margin-top: var(--ds-space-4); }
  .tp-name { margin-top: var(--ds-space-4); }
  .tp-degree + .tp-name { margin-top: 2px; }

  .tp-courses { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  .tp-course { min-height: 64px; padding: var(--ds-space-3) var(--ds-space-4); gap: var(--ds-space-3); }
  .tp-tile { width: 40px; height: 40px; }
  .tp-ic { width: 22px; height: 22px; }
  .tp-arrow { width: 18px; height: 18px; margin-left: var(--ds-space-1); }

  /* Długość linijki bio ograniczona osobno od kolumny siatki — kolumna
     treści ma na 1320px ~756px, a to już 100+ znaków w wierszu. */
  .tp-bio { margin-top: 22px; max-width: 680px; }
  .tp-bio-inner { gap: 14px; }
  .tp-bio-fade { height: 64px; }
  .tp-bio-toggle { margin-top: 10px; font-size: var(--ds-text-body); }
  .tp-chev { width: 16px; height: 16px; }

  .tp-score {
    margin-top: var(--ds-space-5);
    padding: 22px var(--ds-space-6);
    border-radius: var(--ds-radius-xl);
    max-width: 560px;
  }
  .tp-score-rows { gap: 14px; margin-top: var(--ds-space-4); }
  .tp-score-head { margin-bottom: 6px; }
  .tp-track { height: 12px; }
  .tp-score-source { margin-top: 14px; }
}