/* ===========================================================================
   Landing page raportu „Szkoła do życia. O nauczycielach".
   Warstwa własna tej strony. Tokeny, reset i komponenty współdzielone
   z landingiem pierwszego raportu zostają bez zmian — tutaj trafia tylko to,
   czego tamten landing nie miał.
   =========================================================================== */

/* ── Trzeci wiersz tytułu w hero ──────────────────────────────────────────── */
/* Podtytuł raportu stoi pod nazwą serii, turkusowy i lżejszy od niej —
   tak jak na okładce. Wyraźnie mniejszy, żeby „Szkoła do życia" pozostało
   dominantą, a „o nauczycielach" czytało się jako dopowiedzenie. */

.hero__title-sub {
  display: block;
  margin-top: 0.15em;
  font-size: 0.47em;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--teal-300);
}

/* ── Nagłówek-teza otwierający rozdział ───────────────────────────────────── */
/* Ten sam krój co .heading-light z pierwszego raportu: cienki, zwykłe litery,
   stopień 1,5–2,125 rem. Różnica jedna — arkusz bazowy wyrównuje długość
   wierszy nagłówków (text-wrap: balance), przez co dłuższa teza zwężała się
   do połowy kontenera. Tutaj tekst biegnie na całą szerokość, a „pretty"
   pilnuje tylko, żeby w ostatnim wierszu nie zostało samotne słowo. */

.claim {
  width: 100%;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 300;
  color: var(--navy-ink);
  text-wrap: pretty;
}

/* Drugi i każdy kolejny rozdział w tej samej sekcji — potrzebuje odstępu
   od tekstu poprzedniego. */
.claim--kolejny { margin-top: var(--sp-7); }

/* Na ciemnym tle teza musi być biała — granat z jasnych sekcji
   dałby na gradiencie kontrast poniżej progu czytelności. */
.claim--na-ciemnym { color: var(--white); }

/* Wyróżnienia w tekście mają w arkuszu bazowym kolor granatowy, dobrany pod
   jasne tło. W ciemnej sekcji znikały — tutaj wracają jako turkus. */
.section--dark strong { color: var(--teal-300); }

/* ── Para liczb z opisem ──────────────────────────────────────────────────── */
/* Dwie wartości zestawione obok siebie — kontrast między nimi jest treścią,
   więc stoją w jednym rzędzie tak długo, jak starcza miejsca. */

.duet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-6) 0 0;
  max-width: 60rem;
}

.duet__poz {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border: 3px solid var(--teal-500);
  border-radius: var(--radius-lg);
}

.duet__liczba {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--teal-300);
}

.duet__opis {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--white);
}

/* ── Lista zasad z opisem pod tytułem ─────────────────────────────────────── */
/* Wariant .steps: pozycja ma tytuł i zdanie wyjaśniające, więc numer równa się
   z pierwszym wierszem tekstu zamiast ze środkiem całej pozycji. */

.steps--opis li { align-items: flex-start; }

.steps--opis .steps__tytul {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.3;
}

.steps--opis p {
  margin: 0.35em 0 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
}

/* ── Przyciski ────────────────────────────────────────────────────────────── */
/* Kształt zostaje taki jak w pierwszym raporcie — zaokrąglenie idzie
   z komponentu współdzielonego, tutaj nic go nie nadpisuje. */

/* Gradient przycisku był domyślnie rozpinany na polu wewnątrz obramowania
   i dopiero potem rozciągany na jego szerokość, przez co na krawędziach
   powtarzał się skrajny kolor i robił jaśniejszą ramkę. */
.btn--cta { background-origin: border-box; }

/* ===========================================================================
   WYKRESY I GRAFIKI RAPORTU
   Odtworzone z plików graficznych jako HTML: liczby są tekstem (czyta je
   czytnik ekranu i wyszukiwarka), a układ przestawia się na wąskim ekranie
   zamiast się zmniejszać.
   =========================================================================== */

/* ── Kolory wykresów ──────────────────────────────────────────────────────── */
/* Wzięte z grafik raportu. Przy każdym kolorze, na którym stoi liczba,
   podany kontrast napisu (WCAG). */

:root {
  /* Wykres z resztą do 100%: druga seria i część toru bez odpowiedzi. */
  --bar-aqua: #A2EDE7;   /* granatowa liczba: 9,20 */
  --bar-rest: #89A0B1;

  /* Skala zgody: czerwienie po stronie „nie", turkusy po stronie „tak",
     szarość w środku, wrzos dla „nie wiem". */
  --skala-nie-mocno: #CE2152;  /* biel 5,30 */
  --skala-nie:       #E34B71;  /* biel 3,81 — wystarcza tylko dla dużego tekstu */
  --skala-srodek:    #C3D5DB;  /* granat 8,07 */
  --skala-tak:       #5BBCC1;  /* granat 5,48 (biel z grafiki: 2,2) */
  --skala-tak-mocno: #3C9696;  /* biel 3,50 — wystarcza tylko dla dużego tekstu */
  --skala-nie-wiem:  #D4BED4;  /* granat 7,05 */
}

/* ── Numer wykresu ────────────────────────────────────────────────────────── */
/* „Wykres 4." nad tytułem — ten sam numer co w PDF, żeby po pobraniu
   raportu łatwo było odnaleźć pełne dane. */

.wykres-nr {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--navy-ink);
}

.section--dark .wykres-nr { color: var(--white); }

/* ── Wykres słupkowy: wariant z resztą do 100% i grupami ──────────────────── */

.bars--reszta { margin: var(--sp-5) 0; }

/* Tu tytuł nie nazywa części wykresu (jak „Cele" w pierwszym raporcie),
   tylko zadaje pytanie całego wykresu — dlatego dostaje stopień
   .chart-head__title, czyli nagłówka nad wykresami z pierwszego raportu.
   Szerokość 40ch zamiast 30ch, żeby pytanie nie łamało się na trzy wiersze. */
.bars--reszta .bars__title {
  max-width: 40ch;
  font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
  line-height: 1.4;
  letter-spacing: 0.03em;
}

/* Tor wypełniony do końca — słupki serii rosną na nim, a to, co zostaje,
   pokazuje odsetek osób, dla których cecha nie jest ważna. */
.bars--reszta .bars__track { background: var(--bar-rest); }

.section--dark .bars.bars--reszta {
  --bar-soft: var(--bar-aqua);
  --bar-num-soft: var(--navy-700);
}

.section--dark .bars { --bars-group-color: var(--white); }

/* Nagłówek grupy cech zajmuje kolumnę etykiet, w tej samej linii
   wyrównania co etykiety pod nim. */
.bars__row--grupa { padding-top: var(--sp-3); }
.bars__row--grupa:first-child { padding-top: 0; }
.bars__row--grupa:hover { background: none; }

.bars__grupa {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bars-group-color, var(--navy-ink));
}

/* Dopisek „razem" na telefonie miał kolor pomocniczy dobrany pod białe tło —
   na granacie dawał kontrast 3,4. */
.section--dark .bars__total::before { color: rgba(255, 255, 255, 0.72); }

/* ── Skala zgody — jeden słupek 100% ──────────────────────────────────────── */

.skala {
  --skala-title: var(--teal-800);
  --skala-text: var(--text);
  --skala-strong: var(--navy-ink);

  /* Pełny zapis marginesu — figure ma w przeglądarce domyślne 40 px z boków. */
  margin: var(--sp-5) 0;
}

.section--dark .skala {
  --skala-title: var(--teal-500);
  --skala-text: rgba(255, 255, 255, 0.92);
  --skala-strong: var(--white);
}

.skala__header { margin-bottom: var(--sp-4); }

/* Tytuł wykresu jak .chart-head__title z pierwszego raportu („nagłówek
   nad wykresami"), tylko na całą szerokość. */
.skala__title {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--skala-title);
  text-wrap: balance;
}

.skala__pytanie {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--skala-strong);
}

.skala__slupek {
  display: flex;
  height: clamp(2.5rem, 4vw, 3rem);
}

/* 19 px pogrubione to w WCAG już „duży tekst" — dzięki temu biel przechodzi
   także na jaśniejszej czerwieni i ciemnym turkusie. Stopień zostaje ten sam
   na każdym ekranie, a liczby, które się nie mieszczą, chowamy niżej. */
.skala__seg {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w);
  overflow: hidden;
  background: var(--kolor);
  color: var(--napis);
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ton-nie-mocno { --kolor: var(--skala-nie-mocno); --napis: var(--white); }
.ton-nie       { --kolor: var(--skala-nie);       --napis: var(--white); }
.ton-srodek    { --kolor: var(--skala-srodek);    --napis: var(--navy-700); }
.ton-tak       { --kolor: var(--skala-tak);       --napis: var(--navy-700); }
.ton-tak-mocno { --kolor: var(--skala-tak-mocno); --napis: var(--white); }
.ton-nie-wiem  { --kolor: var(--skala-nie-wiem);  --napis: var(--navy-700); }

/* Legenda — sześć kolumn pod słupkiem, w kolejności odcinków. */
.skala__legenda {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--skala-text);
}

.skala__poz {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
}

.skala__probka {
  flex: none;
  width: 1em;
  height: 1em;
  margin-top: 0.15em;
  border-radius: 2px;
  background: var(--kolor);
}

/* Wartość w legendzie: na szerokim ekranie stoi w słupku, więc tutaj
   jest tylko dla czytnika ekranu. */
.skala__liczba {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Poniżej ~990 px odcinki 4% i 6% robią się węższe niż ich liczba.
   Chowamy ją w słupku i pokazujemy wszystkie wartości w legendzie —
   wtedy żadnej nie trzeba szukać w dwóch miejscach. */
@media (max-width: 61.99rem) {
  .skala__seg--waski .skala__wart { display: none; }

  .skala__legenda { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .skala__liczba {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    margin-left: 0.35em;
    font-weight: 700;
    color: var(--skala-strong);
  }
}

@media (max-width: 36rem) {
  .skala__legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Kafle z dwiema liczbami ──────────────────────────────────────────────── */

.kafle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 4vw, 3rem);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}

/* Kafle w rzędzie mają równą wysokość, a treść stoi na środku — kafel
   z krótszym opisem nie zostawia pustego pasa u dołu. */
.kafel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radius-md);
  text-align: center;
}

.kafel--turkus    { background: var(--teal-500); color: var(--navy-700); }
.kafel--niebieski { background: var(--navy-500); color: var(--white); }

.kafel__liczba {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 6.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.kafel__liczba::after {
  content: '';
  display: block;
  width: 4.5rem;
  height: 2px;
  margin: var(--sp-3) auto 0;
  background: currentColor;
}

.kafel__opis {
  max-width: 16em;
  margin: var(--sp-3) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance;
}

/* ── Animacje wejścia wykresów ────────────────────────────────────────────── */
/* Jak w słupkach z pierwszego raportu: tylko gdy działa JS, start od zera,
   rośnie po wejściu w widok. */

.js .skala__seg { width: 0; }

.js .skala.is-visible .skala__seg {
  width: var(--w);
  transition: width 600ms var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  .js .skala__seg { width: var(--w); transition: none; }
}

/* ── Odnośnik do kampanii ─────────────────────────────────────────────────── */
/* Biała pigułka w prawym górnym rogu. Biel z cieniem odcina się i od
   gradientu w hero, i od białych sekcji. Różowa kropka to kolor kampanii —
   jedyny jej ślad na tej stronie.

   Telefon i tablet w pionie: przycisk stoi w rogu hero i odjeżdża razem
   z nim, żeby nie wisiał nad tekstem na wąskim ekranie.
   Od 901 px: przypięty do okna, widoczny przez całą lekturę. */

:root {
  --kampania-roz: #E44B72;   /* róż z materiałów kampanii — tylko jako znak, bez tekstu */
}

.kampania-link {
  position: absolute;
  top: calc(0.75rem + env(safe-area-inset-top, 0px));
  right: calc(0.75rem + env(safe-area-inset-right, 0px));
  z-index: 80;               /* pod banerem cookies (90) */

  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.5rem 0.75rem 0.5rem 0.7rem;
  border: 1px solid rgba(35, 51, 97, 0.1);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(17, 33, 78, 0.18);

  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-700);
  white-space: nowrap;

  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

@media (min-width: 901px) {
  .kampania-link {
    position: fixed;
    top: calc(var(--sp-2) + env(safe-area-inset-top, 0px));
    right: calc(var(--sp-2) + env(safe-area-inset-right, 0px));
    padding: 0.6rem 0.9rem 0.6rem 0.85rem;
  }
}

.kampania-link:hover,
.kampania-link:focus-visible {
  background: var(--white);
  color: var(--navy-700);
  box-shadow: 0 8px 26px rgba(17, 33, 78, 0.26);
}

.kampania-link:focus-visible { border-radius: var(--radius-pill); }

.kampania-link__kropka {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.55em;
  border-radius: 50%;
  background: var(--kampania-roz);
}

/* Zamiana napisów: każdy siedzi w jednokolumnowej siatce, której kolumna
   przechodzi płynnie między 1fr (pełna szerokość tekstu) a 0fr (zero).
   Dzięki temu pigułka rośnie dokładnie o długość tekstu, bez zgadywania
   szerokości w em. */
.kampania-link__napis {
  display: grid;
  grid-template-columns: 1fr;
  transition: grid-template-columns 450ms var(--ease), opacity 300ms var(--ease);
}

.kampania-link__napis > span {
  min-width: 0;
  overflow: hidden;
  overflow-x: clip;          /* tnie tylko w poziomie — ogonki i kreski nad Ś zostają */
  overflow-y: visible;
}

.kampania-link__napis--dlugi {
  grid-template-columns: 0fr;
  opacity: 0;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.kampania-link:focus-visible .kampania-link__napis--krotki { grid-template-columns: 0fr; opacity: 0; }
.kampania-link:focus-visible .kampania-link__napis--dlugi  { grid-template-columns: 1fr; opacity: 1; }

@media (hover: hover) and (min-width: 901px) {
  .kampania-link:hover .kampania-link__napis--krotki { grid-template-columns: 0fr; opacity: 0; }
  .kampania-link:hover .kampania-link__napis--dlugi  { grid-template-columns: 1fr; opacity: 1; }
}

.kampania-link__strzalka {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  margin-left: 0.4em;
  color: var(--teal-800);
}

@media print {
  .kampania-link { display: none; }
}