@charset "UTF-8";
/* ============================================================
   NAGŁÓWEK PODSTRONY - skrócone hero pod przyklejonym nagłówkiem.

   Ten sam ciemny motyw co hero na stronie głównej: `.section--dark` niesie
   tło, siatkę w tle i warianty typografii, `.aurora` i `.grain` z _effects.scss
   niosą żywe tło. Tutaj zostaje wyłącznie struktura - odstępy z tokenów,
   kolory z palety, rozmiary liter z presetów podanych w markupie.

   Bez opakowania w `body { }` (wzorzec z blocks/layout/hero): reguły używają
   `& &__element`, a w środku `body` zagnieżdżony `&` rozwinąłby się na
   `body .tb-naglowek body .tb-naglowek__element`. Specyficzność i tak wystarcza:
   `.tb-naglowek.section` to (0,2,0) przeciw `body .section` (0,1,1).
   ============================================================ */
/* Górny odstęp musi objąć przyklejony nagłówek - inaczej tytuł wchodzi pod
   menu. Ten sam wzorzec co `.tb-hero.section`, tylko o stopień ciaśniejszy:
   podstrona zapowiada treść, nie robi za okładkę. */
.tb-naglowek.section {
  padding-top: calc(var(--hdr-h) + var(--space-2xl));
  padding-bottom: var(--space-2xl);
}
@media only screen and (max-width: 1000px) {
  .tb-naglowek.section {
    padding-top: calc(var(--hdr-h) + var(--space-lg));
    padding-bottom: var(--space-xl);
  }
}

.tb-naglowek {
  /* Sekcja jest kilkakrotnie niższa od hero, więc plamy światła wchodzą w nią
     samymi środkami - najjaśniejszymi. Lekkie przygaszenie wyrównuje to do
     poziomu, który hero ma przy swojej pełnej wysokości. Zejście niżej (0.3)
     gasi kolor do zera i podstrona przestaje wyglądać jak ta sama strona. */
}
.tb-naglowek .aurora__blob {
  opacity: 0.62;
}
.tb-naglowek .aurora__blob--d {
  opacity: 0.48;
}
.tb-naglowek {
  /* Pion: okruszki, tytuł, zajawka. Siatka zamiast marginesów, bo zajawka
     bywa pusta i wtedy odstęp nie miałby po czym zostać. */
}
.tb-naglowek .container {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
}
.tb-naglowek .tb-naglowek__tytul {
  margin: 0;
  max-width: 22ch;
}
.tb-naglowek .tb-naglowek__lead {
  margin: 0;
  max-width: 62ch;
}
@media only screen and (max-width: 1000px) {
  .tb-naglowek .tb-naglowek__tytul {
    max-width: none;
  }
}
.tb-naglowek {
  /* ── okruszki ─────────────────────────────────────────── */
  /* Globalne `body ol` (0,0,2) narzuca numerację i marginesy. Selektor
     z klasą to (0,1,1), więc wygrywa bez podnoszenia czegokolwiek. */
}
.tb-naglowek .tb-naglowek__okruszki {
  color: var(--wp--preset--color--text-on-dark-soft);
}
.tb-naglowek .tb-naglowek__okruszki ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tb-naglowek .tb-naglowek__okruszki li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.tb-naglowek .tb-naglowek__okruszki {
  /* Separator jako pseudoelement pozycji, nie znak w markupie - inaczej
     czytnik ekranu przeczytałby „ukośnik” między każdą parą nazw. */
}
.tb-naglowek .tb-naglowek__okruszki li + li::before {
  content: "/";
  opacity: 0.4;
}
.tb-naglowek .tb-naglowek__okruszki a {
  color: inherit;
  transition: color var(--transition-fast);
}
.tb-naglowek .tb-naglowek__okruszki a:hover {
  color: var(--wp--preset--color--paper);
}
.tb-naglowek .tb-naglowek__okruszki {
  /* Pozycja bieżąca jaśniejsza - to ona mówi „tu jesteś”. */
}
.tb-naglowek .tb-naglowek__okruszki [aria-current=page] {
  color: var(--wp--preset--color--paper);
}