/**
 * blog.css — widok listy wpisów: /blog/, kategorie, tagi, zapas index.php.
 *
 * WARSTWA views/ — SIÓDMA, NOWA (2026-08-31). Kolejność wczytania:
 * tokens -> base -> components -> sections -> pages -> views. Arkusz
 * dobiera dc_enqueue_assets() po NAZWIE PLIKU SZABLONU, który WordPress
 * wybrał (dc_view() w inc/blog.php: home / archive / index → „blog"),
 * i wczytuje wyłącznie na tym widoku. Nie sections/ (glob na każdej
 * stronie), nie pages/ (tam slug jednej strony) — pełny zapis decyzji
 * w docs/decisions.md.
 *
 * Wszystko pod prefiksem .dc-blog__. Karta wpisu, okruszki i paginacja
 * są komponentami (components/post-card.css, breadcrumbs.css,
 * pagination.css) — tu tylko układ, w którym stoją.
 *
 * Zero wartości zahardkodowanych. Poza tokenami stoi wyłącznie liczba
 * kolumn w repeat() — geometria siatki, nie wartość projektowa.
 */

/* ==========================================================================
   1. RAMA WIDOKU
   .dc-container + .dc-section z base.css, bez modyfikacji (reguła 8).
   Makieta: górny padding 52, dolny 72 — scalone do 64/64 (.dc-section).
   ========================================================================== */

/* ==========================================================================
   2. PANEL NAGŁÓWKA — szkło z obwódką (kopia .dc-about-us__intro-panel /
   .dc-origin__card: r28, glass-soft, blur-lg, --dc-shadow-xl + inset-top)
   ========================================================================== */

.dc-blog__panel {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--dc-space-32);
  padding: var(--dc-space-40);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-28);
  background-color: var(--dc-surface-glass-soft);
  -webkit-backdrop-filter: var(--dc-blur-lg);
  backdrop-filter: var(--dc-blur-lg);
  box-shadow: var(--dc-shadow-xl), var(--dc-shadow-inset-top);
}

/* BEZ obwódki .dc-ring (2026-08-31, decyzja Andrzeja): obwódka to ozdobnik
   premium stron produktowych; na podstronach treściowych straciłaby
   charakter wyróżnika. Panel zostaje szkłem bez ruchu. */
.dc-blog__intro {
  position: relative;
  z-index: var(--dc-z-raised);
  max-width: var(--dc-measure-xl);
}

/* Nadtytuł sekcji — czwórka z C.8: 12 / 600 / widest / accent-strong,
   odstęp 14 do nagłówka. */
.dc-blog__eyebrow {
  margin-block-end: var(--dc-space-14);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-widest);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
}

/* h1 z base.css: --dc-display-1 (40→58), 800, leading-none, tracking
   -0.03em — makieta ma 44 px / 1.06; scalone do tokenu bez deklaracji
   rozmiaru (jak każdy h1 strony). Zostaje odstęp do leadu. */
.dc-blog__heading {
  margin-block-end: var(--dc-space-14);
}

/* Lead: 17 px / 1,62 / #5a5a5a → --dc-text-2xl / relaxed / text-muted. */
.dc-blog__lead {
  font-size: var(--dc-text-2xl);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
}

/* ==========================================================================
   3. LICZNIK „N wpisów · w tej sekcji"
   Makieta: pigułka r16 szkło .66 + obwódka .9, cień 0 8 24 .1 + inset,
   studzienka 30 r9 a14/a30, ikona 16 → C.8: mała studzienka 32 / r8 /
   a15 + a30, ikona 16 w accent-strong; pigułka → --dc-shadow-md + inset.
   ========================================================================== */

.dc-blog__count {
  position: relative;
  z-index: var(--dc-z-raised);
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-10);
  padding: var(--dc-space-12) var(--dc-space-18);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-glass);
  box-shadow: var(--dc-shadow-md), var(--dc-shadow-inset-top);
  white-space: nowrap;
}

.dc-blog__count-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-32);
  height: var(--dc-space-32);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-8);
  background-color: var(--dc-accent-a15);
  color: var(--dc-accent-strong);
}

.dc-blog__count-value {
  display: block;
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-none);
  color: var(--dc-text);
}

.dc-blog__count-label {
  display: block;
  margin-block-start: var(--dc-space-4);
  font-size: var(--dc-text-xs);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   4. FILTR KATEGORII — pigułki rangi 3 (C.1) na tacy
   Makieta: etykieta „Kategorie" 12 / 600 / .14em subtle; taca r pill,
   padding 5, szkło .42 + obwódka .75 + blur(12); pigułka 9/16, 14 px;
   wybrana: tint CTA + a48 + #7c6420 + poświata. Scalenia: taca →
   --dc-surface-glass-soft / --dc-border-subtle / --dc-blur-sm, padding 4;
   pigułka = ranga 3 co do joty (szkło .86, line, inset-top, pill,
   600 13–14, text-secondary); wybrana = „wybrany" rangi 3 (gradient CTA
   + a50 + --dc-on-accent, BEZ poświaty — poświata jest tylko dla rangi 1).
   ========================================================================== */

.dc-blog__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-14);
  margin-block-start: var(--dc-space-28);
}

.dc-blog__filter-label {
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-wider);
  text-transform: uppercase;
  color: var(--dc-text-subtle);
}

.dc-blog__filter-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-6);
  padding: var(--dc-space-4);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-glass-soft);
  -webkit-backdrop-filter: var(--dc-blur-sm);
  backdrop-filter: var(--dc-blur-sm);
  box-shadow: var(--dc-shadow-inset-top), var(--dc-shadow-sm);
}

.dc-blog__filter-link {
  display: inline-flex;
  align-items: center;
  padding: var(--dc-space-8) var(--dc-space-16);
  border: var(--dc-border) solid transparent;
  border-radius: var(--dc-radius-pill);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-secondary);
  text-decoration: none;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-blog__filter-link:hover {
  border-color: var(--dc-accent-a50);
  background-color: var(--dc-surface);
  color: var(--dc-text);
}

.dc-blog__filter-link:active {
  transform: scale(0.97);
}

/* Wybrana kategoria: nie jest odnośnikiem do siebie samej w sensie akcji,
   ale ZOSTAJE <a aria-current="page"> — klik przeładowuje tę samą listę,
   co jest nieszkodliwe, a spójna lista odnośników czyta się w czytniku
   lepiej niż lista z jedną dziurą. */
.dc-blog__filter-link[aria-current='page'] {
  border-color: var(--dc-accent-a50);
  background-image: var(--dc-gradient-cta);
  color: var(--dc-on-accent);
  font-weight: var(--dc-weight-bold);
}

/* ==========================================================================
   5. SIATKA KART
   auto-FILL, nie auto-fit (reguła 9 mierzona na jednym wpisie: „Dokumenty"
   ma JEDNĄ kartę, a auto-fit rozciągnąłby ją na 1176 px — auto-fill
   zostawia puste ścieżki, więc pojedyncza karta ma szerokość kolumny).
   Makieta: repeat(3, 1fr), gap 24 → minmax(--dc-grid-min-md) liczy kolumny
   sama: 1440 → 3, 768 → 2, 390 → 1 (pomiar w raporcie). Odstęp 36 nad
   siatką z makiety → --dc-space-40.
   ========================================================================== */

.dc-blog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--dc-grid-min-md), 100%), 1fr));
  gap: var(--dc-space-24);
  margin-block-start: var(--dc-space-40);
}

/* <li> jak w karuzeli: kontener flex dla jednej karty, żeby stretch siatki
   dotarł do samej karty (patrz blog-carousel.css, sekcja 4). */
.dc-blog__item {
  display: flex;
}

.dc-blog__item .dc-post-card {
  flex: 1;
}

/* ==========================================================================
   6. BRAK WPISÓW — komunikat informacyjny (components/notice.css)
   ========================================================================== */

.dc-blog__empty {
  margin-block-start: var(--dc-space-40);
}