@charset "UTF-8";
/* ============================================================
   POJEDYNCZY WPIS - metryczka, treść redakcyjna, tagi, sąsiedzi.

   Kontener jest ten sam co wszędzie (`container--wide`). Miarę wiersza trzyma
   `max-width` w znakach na kolumnie tekstu - zwężanie kontenera rozjeżdżałoby
   blog z resztą serwisu.

   Zero sztywnych wartości: odstępy z tokenów, kolory z palety, rozmiary liter
   z presetów. Poprzednia wersja tego pliku pochodziła z motywu startowego
   (sztywne px, ramki `1px solid #000`, nieistniejąca zmienna `--dgreen`).
   ============================================================ */
.tb-wpis-tresc {
  /* Ten sam powód co przy liście: nagłówek podstrony niesie już górny odstęp. */
}
.tb-wpis-tresc.section {
  padding-top: var(--space-2xl);
}
.tb-wpis-tresc {
  /* Jedna kolumna czytania dla całego wpisu: metryczka, treść, tagi
     i sąsiedzi stoją w tej samej osi. Kontener zostaje szeroki
     (`container--wide`, jak wszędzie), a to kolumna jest węższa - miara
     wiersza to sprawa tekstu, nie kontenera.

     Wyśrodkowana, nie dosunięta do lewej: przy 1560 px kontenera kolumna
     przy krawędzi zostawiała po prawej pół ekranu pustki.

     Wartość siedzi w theme.json (`settings.custom.layout.read`) obok
     `narrow`, `content` i `wide` - miara wiersza to metryka układu, więc
     ma być tokenem, a nie liczbą wpisaną w plik bloku.

     W `rem`, NIE w `ch`: `ch` liczy się od stopnia pisma DANEGO elementu,
     więc nagłówek na 30 px dostawał kolumnę dwa razy szerszą niż akapit
     na 16 px i tekst nie trzymał wspólnej osi. */
  --kolumna: var(--layout-read);
}
.tb-wpis-tresc .container {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
}
.tb-wpis-tresc .container > * {
  width: 100%;
  max-width: var(--kolumna);
}
.tb-wpis-tresc {
  /* Dwa wyjątki od kolumny czytania:
     - treść wpisu, bo w środku ma bloki `alignwide` i `alignfull`
       (ograniczenie schodzi na jej dzieci, niżej),
     - wezwanie na końcu, które idzie na pełną szerokość kontenera. */
}
.tb-wpis-tresc .container > .tb-wpis-tresc__tekst,
.tb-wpis-tresc .container > .tb-cta-wpis {
  max-width: none;
}
.tb-wpis-tresc .tb-tresc > * {
  max-width: var(--kolumna);
  margin-inline: auto;
}
.tb-wpis-tresc .tb-wpis-tresc__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
}
.tb-wpis-tresc .tb-wpis-tresc__kat {
  color: var(--wp--preset--color--iris);
  transition: opacity var(--transition-fast);
}
.tb-wpis-tresc .tb-wpis-tresc__kat:hover {
  opacity: 0.75;
}
.tb-wpis-tresc {
  /* ── tagi ─────────────────────────────────────────────── */
}
.tb-wpis-tresc .tb-wpis-tresc__tagi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tb-wpis-tresc .tb-wpis-tresc__tagi a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding-inline: var(--space-md);
  border: 1px solid var(--line-l);
  border-radius: var(--radius-full);
  color: var(--wp--preset--color--text-muted);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.tb-wpis-tresc .tb-wpis-tresc__tagi a:hover {
  border-color: var(--wp--preset--color--iris);
  color: var(--wp--preset--color--iris);
}
.tb-wpis-tresc {
  /* ── sąsiednie wpisy ──────────────────────────────────── */
}
.tb-wpis-tresc .tb-wpis-tresc__sasiedzi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg);
  width: 100%;
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--line-l);
}
@media only screen and (max-width: 700px) {
  .tb-wpis-tresc .tb-wpis-tresc__sasiedzi {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tb-sasiad {
  display: grid;
  gap: var(--space-xs);
  transition: color var(--transition-fast);
}
.tb-sasiad:hover {
  color: var(--wp--preset--color--iris);
}
.tb-sasiad {
  /* Następny wpis wyrównany do prawej - kierunek czytania mówi wtedy to samo
     co napis, bez rysowania strzałek. Przy jednej kolumnie wraca na lewą. */
}
.tb-sasiad--dalej {
  text-align: right;
  justify-items: end;
}
@media only screen and (max-width: 700px) {
  .tb-sasiad--dalej {
    text-align: left;
    justify-items: start;
  }
}
.tb-sasiad {
  /* Gdy poprzedniego wpisu nie ma, następny nie może zostać w pierwszej
     kolumnie - inaczej „Następny” wisi po lewej pod pustym miejscem. */
}
.tb-sasiad--dalej:only-child {
  grid-column: 2;
}
@media only screen and (max-width: 700px) {
  .tb-sasiad--dalej:only-child {
    grid-column: 1;
  }
}

/* Rytm i typografia treści redakcyjnej (.tb-tresc) są GLOBALNE -
   assets/scss/_tresc.scss. Te same reguły noszą podstrony z tekstem
   (polityka prywatności, regulamin), więc nie mogą siedzieć w arkuszu
   ładowanym tylko na blogu. */
/* ============================================================
   WEZWANIE NA KOŃCU WPISU.

   Ciemna wyspa w jasnej treści - wzorzec z `blocks/layout/nota`: tło `ink`,
   poświata gradientem marki zza krawędzi, klasa `on-dark` w markupie
   przełącza warianty typografii.

   Szerokość zostaje kolumny czytania (`--kolumna` z `.tb-wpis-tresc`), bo to
   dalej część artykułu, nie osobna sekcja. Wyróżnia się kontrastem, nie
   rozmiarem - blok szerszy od tekstu wyglądałby jak doklejony z innej strony.

   Renderuje go SZABLON, nie treść wpisu: ma stać pod każdym wpisem i mówić
   jednym numerem z resztą serwisu.
   ============================================================ */
.tb-cta-wpis {
  position: relative;
  /* Na pełnej szerokości kontenera treść nie może stać w jednej kolumnie -
     po prawej zostawałoby pół pudełka pustki. Napisy po lewej, przyciski
     po prawej, wyrównane w pionie do środka. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-2xl);
  row-gap: var(--space-md);
  padding: clamp(1.8rem, 3.4vw, 3rem) clamp(1.6rem, 3vw, 3rem);
  border-radius: var(--radius-xl);
  background: var(--wp--preset--color--ink);
  overflow: hidden;
  /* Poświata ma ocieplić czerń, nie rysować kształtu. */
}
.tb-cta-wpis::after {
  content: "";
  position: absolute;
  inset: auto -20% -80% 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--grad-brand);
  filter: blur(90px);
  opacity: 0.34;
  pointer-events: none;
}
.tb-cta-wpis {
  /* Treść nad poświatą: pseudoelement jest pozycjonowany, więc bez tego
     przykryłby napisy i przyciski. */
}
.tb-cta-wpis > * {
  position: relative;
  margin: 0;
}
.tb-cta-wpis {
  /* Lewa kolumna: etykieta, tytuł, opis - jedno pod drugim.
     `.eyebrow` jest `display: flex` (kreska + napis), więc rozciągnięta
     na komórkę zajmowałaby całą jej szerokość - `justify-self: start`
     trzyma ją przy tekście. */
}
.tb-cta-wpis .tb-cta-wpis__label {
  grid-area: 1/1;
  justify-self: start;
}
.tb-cta-wpis .tb-cta-wpis__tytul {
  grid-area: 2/1;
}
.tb-cta-wpis .tb-cta-wpis__opis {
  grid-area: 3/1;
  max-width: 58ch;
}
.tb-cta-wpis {
  /* Prawa kolumna: przyciski przez wszystkie trzy wiersze, plus godziny
     tuż pod nimi. */
}
.tb-cta-wpis .wp-block-buttons {
  grid-area: 1/2/4/3;
  /* `end`, nie `center`: godziny stoją w wierszu niżej, więc przy
     wyśrodkowaniu zostawała między nimi a przyciskami dziura na
     wysokość opisu. */
  align-self: end;
  justify-content: flex-end;
}
.tb-cta-wpis .tb-cta-wpis__godziny {
  grid-area: 4/2;
  justify-self: end;
  color: var(--wp--preset--color--text-on-dark-soft);
}
.tb-cta-wpis {
  /* Poniżej 1000 px przyciski nie mieszczą się obok tekstu - wszystko
     wraca do jednej kolumny i wyrównuje się do lewej. */
}
@media only screen and (max-width: 1000px) {
  .tb-cta-wpis {
    grid-template-columns: minmax(0, 1fr);
  }
  .tb-cta-wpis .tb-cta-wpis__label, .tb-cta-wpis .tb-cta-wpis__tytul, .tb-cta-wpis .tb-cta-wpis__opis,
  .tb-cta-wpis .wp-block-buttons, .tb-cta-wpis .tb-cta-wpis__godziny {
    grid-area: auto;
    justify-self: start;
  }
  .tb-cta-wpis .wp-block-buttons {
    justify-content: flex-start;
    margin-top: var(--space-sm);
  }
}
.tb-cta-wpis {
  /* Zachowania przycisków na telefonie NIE dubluj: `_buttons.scss` ma na to
     własną regułę od 575 px w dół (dwa CTA obok siebie w jednym wierszu,
     niższa wysokość, mniejszy stopień). Wcześniej stało tu wymuszenie
     kolumny, które z tamtą regułą walczyło. */
}