@charset "UTF-8";
/* ============================================================
   LISTA WPISÓW - blog, archiwa kategorii, tagów i dat.

   KARTA JEST TA SAMA CO W CAŁYM MOTYWIE. Wzór przepisany z
   `blocks/single/opinia` - jedynej karty tekstowej, jaką ten projekt już ma:

       padding: clamp(1.6rem, 2.8vw, 2.4rem)
       border: 1px solid var(--line-l)
       border-radius: var(--radius-xl)
       background: var(--wp--preset--color--paper)
       box-shadow: var(--shadow-md)

   Stąd też pomysł na wyróżnienie: opinia na wierzchu stosu dostaje obrys
   w gradiencie marki, złożony z dwóch teł (`padding-box` + `border-box`),
   bo `border-image` nie idzie z promieniem narożnika. Najnowszy wpis dostaje
   dokładnie ten sam obrys - to już jest język tego motywu, nie nowy pomysł.

   Karty są `paper`, więc sekcja musi być `--tint` (paper-1). Tak samo stoją
   opinie w sekcji `acf/marki`. Na białym tle biała karta to sam obrys.

   Układ wiersza karty przepisany z opinii: elastyczny wiersz `1fr` na zajawkę,
   dzięki czemu kreska i stopka stoją przy dole niezależnie od długości tytułu.

   Kontener jest TEN SAM co wszędzie (`container--wide`).
   ============================================================ */
.tb-wpisy {
  /* Miejsce pod przyklejony nagłówek robi sobie `.tb-naglowek` z header.php,
     więc tutaj zostaje zwykły odstęp sekcji. */
}
.tb-wpisy.section {
  padding-top: var(--space-2xl);
  padding-bottom: var(--sect-y-tight);
}
.tb-wpisy {
  /* ── pasek kategorii ──────────────────────────────────── */
}
.tb-wpisy .tb-wpisy__filtry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xl);
}
.tb-wpisy .tb-wpisy__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
@media only screen and (max-width: 1100px) {
  .tb-wpisy .tb-wpisy__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 700px) {
  .tb-wpisy .tb-wpisy__lista {
    grid-template-columns: minmax(0, 1fr);
  }
}
.tb-wpisy .tb-wpisy__pusto {
  margin: 0;
}

/* ── pigułka kategorii ────────────────────────────────────── */
/* Ten sam kształt co pigułki wyboru w formularzu kontaktu: pełny promień,
   obrys hairline, wersaliki z rozstrzeleniem. Aktywna wypełniona gradientem
   marki, tak jak przycisk `typ-1` i bieżąca strona w paginacji. */
/* Krój, wersaliki i rozstrzelenie niesie klasa `.label-tech` z markupu,
   stopień pisma preset `has-text-xs-font-size`. Tutaj zostaje sam KSZTAŁT
   pigułki - to jedyne, czego nie ma w typografii. */
.tb-filtr {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding-inline: var(--space-md);
  border: 1px solid var(--line-l);
  border-radius: var(--radius-full);
  background: var(--wp--preset--color--paper);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.tb-filtr:hover {
  border-color: var(--wp--preset--color--iris);
  color: var(--wp--preset--color--iris);
}
.tb-filtr {
  /* Stan aktywny, nie wariant tekstu - stąd kolor tutaj, a nie w typografii.
     Selektor z dwiema klasami, żeby przebić `body .label-tech` (0,1,1). */
}
.tb-filtr.is-aktywny.is-aktywny {
  border-color: transparent;
  background: var(--grad-brand);
  color: var(--wp--preset--color--paper);
}

/* ── karta wpisu ──────────────────────────────────────────── */
.tb-wpis {
  position: relative;
  /* Pięć wierszy: kategoria, tytuł, zajawka (elastyczna), kreska, stopka.
     Elastyczny `1fr` na zajawce trzyma kreskę i datę przy dole, więc karty
     w rzędzie kończą się równo mimo tytułów o różnej długości i mimo wpisów
     bez zajawki. Wzorzec z `single/opinia`. */
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: var(--space-md);
  padding: clamp(1.6rem, 2.8vw, 2.4rem);
  border: 1px solid var(--line-l);
  border-radius: var(--radius-xl);
  background: var(--wp--preset--color--paper);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
}
.tb-wpis:hover, .tb-wpis:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.tb-wpis .tb-wpis__kat, .tb-wpis .tb-wpis__swiezy {
  grid-row: 1;
  margin: 0;
}
.tb-wpis .tb-wpis__tytul {
  grid-row: 2;
  margin: 0;
}
.tb-wpis .tb-wpis__tytul a {
  color: inherit;
  transition: color var(--transition-fast);
}
.tb-wpis .tb-wpis__tytul {
  /* Stretched link: warstwa klikalna rozciągnięta na całą kartę.
     Karta ma `position: relative`, więc `inset: 0` łapie jej pudełko. */
}
.tb-wpis .tb-wpis__tytul a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.tb-wpis:hover .tb-wpis__tytul a {
  color: var(--wp--preset--color--iris);
}
.tb-wpis .tb-wpis__zajawka {
  grid-row: 3;
  margin: 0;
}
.tb-wpis {
  /* Kreska nad stopką, tak jak nad podpisem w opinii. */
}
.tb-wpis .tb-wpis__kreska {
  grid-row: 4;
  height: 1px;
  background: var(--line-l);
}
.tb-wpis .tb-wpis__stopka {
  grid-row: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: 0;
}
.tb-wpis .tb-wpis__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}
.tb-wpis {
  /* Wygląd napisu to `.label-accent` + preset z markupu - tu tylko układ
     napisu ze strzałką. */
}
.tb-wpis .tb-wpis__wiecej {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.tb-wpis .tb-wpis__wiecej svg.icon {
  width: 16px;
  height: 16px;
  transition: transform var(--transition);
}
.tb-wpis:hover .tb-wpis__wiecej svg.icon {
  transform: translateX(4px);
}

/* ── karta wyróżniona: najnowszy wpis ─────────────────────── */
/* Ten sam obrys co opinia na wierzchu stosu (`.tb-opinia.is-aktywna`):
   gradient marki z dwóch teł, bo `border-image` nie idzie z promieniem
   narożnika i róg wychodziłby prosty. Karta zostaje biała i zachowuje
   wszystkie proporcje pozostałych - zmienia się obrys, poświata i układ
   na dwie kolumny.

   UWAGA: w bloku modyfikatora elementy piszemy pełną nazwą bazową.
   `& &__stopka` dałoby tu `.tb-wpis--glowny .tb-wpis--glowny__stopka`,
   czyli klasę, której nie ma w markupie. */
.tb-wpis--glowny {
  grid-column: 1/-1;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-rows: auto auto 1fr auto auto;
  column-gap: clamp(1.6rem, 3.4vw, 3.4rem);
  border-color: transparent;
  background: linear-gradient(var(--wp--preset--color--paper), var(--wp--preset--color--paper)) padding-box, var(--grad-brand) border-box;
  box-shadow: 0 34px 70px -26px rgba(74, 99, 196, 0.45);
}
.tb-wpis--glowny:hover, .tb-wpis--glowny:focus-within {
  box-shadow: 0 40px 82px -24px rgba(74, 99, 196, 0.55);
}
.tb-wpis--glowny {
  /* Lewa kolumna: nadnagłówek i tytuł, wyśrodkowane w pionie względem
     całej karty. Prawa: zajawka, kreska i stopka. */
}
.tb-wpis--glowny .tb-wpis__swiezy {
  grid-area: 1/1;
  align-self: end;
  margin: 0;
}
.tb-wpis--glowny .tb-wpis__tytul {
  grid-area: 2/1/4/2;
  align-self: start;
}
.tb-wpis--glowny .tb-wpis__zajawka {
  grid-area: 1/2/4/3;
  align-self: center;
}
.tb-wpis--glowny .tb-wpis__kreska {
  grid-area: 4/2;
}
.tb-wpis--glowny .tb-wpis__stopka {
  grid-area: 5/2;
}
@media only screen and (max-width: 900px) {
  .tb-wpis--glowny {
    grid-template-columns: minmax(0, 1fr);
  }
  .tb-wpis--glowny .tb-wpis__swiezy {
    grid-area: auto;
    align-self: auto;
  }
  .tb-wpis--glowny .tb-wpis__tytul,
  .tb-wpis--glowny .tb-wpis__zajawka,
  .tb-wpis--glowny .tb-wpis__kreska,
  .tb-wpis--glowny .tb-wpis__stopka {
    grid-area: auto;
    align-self: auto;
  }
}

/* ── paginacja ────────────────────────────────────────────── */
/* Klasa z `get_the_posts_pagination(['class' => 'tb-strony'])`. Rdzeń dokłada
   obok niej `navigation` i `pagination` - stylujemy własną, żeby archiwa CPT
   mogły mieć kiedyś inną bez odkręcania tej. */
.tb-strony {
  margin-top: var(--space-2xl);
}
.tb-strony .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}
.tb-strony {
  /* Ten sam kształt co pigułka kategorii - pełny promień, obrys hairline,
     tło `paper`, bo sekcja jest `--tint`. */
}
.tb-strony .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: var(--space-sm);
  border: 1px solid var(--line-l);
  border-radius: var(--radius-full);
  background: var(--wp--preset--color--paper);
  font-family: var(--ffont);
  font-weight: 700;
  color: inherit;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.tb-strony a.page-numbers:hover {
  border-color: var(--wp--preset--color--iris);
  color: var(--wp--preset--color--iris);
}
.tb-strony {
  /* Bieżąca strona: pełne wypełnienie gradientem marki, tak jak przycisk
     typ-1 i aktywna pigułka kategorii. */
}
.tb-strony .page-numbers.current {
  border-color: transparent;
  background: var(--grad-brand);
  color: var(--wp--preset--color--paper);
}
.tb-strony {
  /* Wielokropek nie jest przyciskiem, więc traci ramkę, tło i szerokość. */
}
.tb-strony .page-numbers.dots {
  min-width: 0;
  padding-inline: 0;
  border-color: transparent;
  background: none;
  color: var(--wp--preset--color--text-soft);
}
.tb-strony {
  /* Strzałki są szersze, bo mają napis zamiast cyfry. */
}
.tb-strony .prev.page-numbers,
.tb-strony .next.page-numbers {
  padding-inline: var(--space-md);
}
@media only screen and (max-width: 620px) {
  .tb-strony .prev.page-numbers,
  .tb-strony .next.page-numbers {
    padding-inline: var(--space-sm);
  }
}