/**
 * post-card.css — karta wpisu: zdjęcie, kategoria, tytuł, „Czytaj →".
 *
 * KOMPONENT, NIE SEKCJA (reguła 18): ta sama karta stoi w pasie wpisów
 * na stronie głównej (shared/blog-carousel), w siatce listy wpisów
 * (home.php / archive.php), pod wpisem jako „powiązane" (single.php)
 * i jako podpowiedź przy braku wyników (search.php) — cztery miejsca.
 * Przepis wyjęty z blog-carousel.css sekcje 4–6 (2026-08-31) CO DO
 * DEKLARACJI; karuzela zostawia u siebie wyłącznie to, czym jej wystąpienie
 * się różni: szerokość karty w pasie i przystanek scroll-snap.
 *
 * Wymaga tokens.css i base.css. Znacznik: template-parts/components/post-card.php.
 * Cała karta jest JEDNYM odnośnikiem <a class="dc-post-card">; w środku
 * same <span>, bo <a> nie przyjmuje treści blokowej.
 *
 * WYSOKOŚĆ RÓWNA W RZĘDZIE: karta jest kolumną flex, a .dc-post-card__body
 * bierze resztę wysokości (flex: 1) i spycha „Czytaj →" na dół
 * (margin-block-start: auto). Rodzic (siatka albo <li> pasa) rozciąga kartę
 * do najwyższej w rzędzie — komponent sam liczby nie zna.
 *
 * TYTUŁ UCIĘTY DO DWÓCH WIERSZY (-webkit-line-clamp) — wizualnie; pełny
 * tytuł zostaje w znaczniku dla czytnika i wyszukiwarki (decyzja z karuzeli,
 * decisions.md 2026-08-29).
 *
 * Tło i obwódka: --dc-surface-glass / --dc-border-subtle wprost, NIE alfa
 * z makiety jasnej — makieta ciemna tej samej karty ma tło kryjące, a ta
 * para tokenów jest już nastrojona osobno na motyw (blog-carousel.css).
 * Jedyna alfa spoza tokenów to tło zastępcze pod brakujące zdjęcie
 * (color-mix na --dc-accent, identyczna w obu makietach).
 */

/* ==========================================================================
   1. KARTA
   300 px / r20 makiety scalone do --dc-grid-min-md / --dc-radius-18
   (reguła 15). overflow: hidden kadruje zdjęcie do górnych rogów.
   ========================================================================== */

.dc-post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-18);
  background-color: var(--dc-surface-glass);
  box-shadow: var(--dc-shadow-lg), var(--dc-shadow-inset-top);
  text-decoration: none;
  /* `color` na liście: karta jest <a>, więc a:hover z base.css zmienia jej
     kolor pod kursorem — bez `color` tutaj zmieniał się skokiem. */
  transition:
    box-shadow var(--dc-duration-slow) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease);
}

/* Cała karta jest odnośnikiem, więc reakcja na najazd JEST (reguła 14 nie
   zabrania). Cień rośnie o stopień, bez uniesienia o 5 px z makiety
   (design-audit.md, C.2). */
.dc-post-card:hover {
  box-shadow: var(--dc-shadow-xl), var(--dc-shadow-inset-top);
}

/* ==========================================================================
   2. ZDJĘCIE / TŁO ZASTĘPCZE
   190 px stałej wysokości — kadr z makiety, nie proporcja: karta jest wąska
   i sztywna, a rozmiar dc_blog_card (300×190) jest pod nią zarejestrowany.
   LICZBA KONTROLNA bez tokenu (jak w blog-carousel.css).
   ========================================================================== */

.dc-post-card__figure {
  display: block;
  height: 190px;
  background-color: color-mix(in srgb, var(--dc-accent) 10%, transparent);
}

.dc-post-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   3. TREŚĆ KARTY
   Padding 22/24/24 to trzy dokładne tokeny odstępu.
   ========================================================================== */

.dc-post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--dc-space-22) var(--dc-space-24) var(--dc-space-24);
}

/* Nadtytuł karty: 11 px = --dc-text-xs; złoty TEKST na --dc-accent-strong
   (reguła J). */
.dc-post-card__category {
  display: block;
  margin-block-end: var(--dc-space-10);
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-wider);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
}

/* Tytuł NIE jest nagłówkiem (reguła 6/20): pod nim stoi tylko „Czytaj →".
   17 px = --dc-text-2xl. display: -webkit-box wymaga sama specyfikacja
   line-clamp (Baseline 2023). */
.dc-post-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-block-end: var(--dc-space-14);
  font-family: var(--dc-font-display);
  font-weight: var(--dc-weight-bold);
  font-size: var(--dc-text-2xl);
  line-height: var(--dc-leading-snug);
  color: var(--dc-text);
}

/* „Czytaj →" — odmiana odnośnika z grotem WEWNĄTRZ klikalnej karty (jak
   .dc-fuel-switch__more): złoty tekst bez podkreślenia, rozjazd gapu
   wyzwalany najazdem na CAŁĄ kartę. margin-block-start: auto pcha go na
   dół karty niezależnie od liczby wierszy tytułu. */
.dc-post-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  margin-block-start: auto;
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-accent-strong);
  transition: gap var(--dc-duration-base) var(--dc-ease);
}

.dc-post-card:hover .dc-post-card__more {
  gap: var(--dc-space-14);
}

/* Rusza się SAM grot (reguła 22): ujemny margines ikony o różnicę gapów,
   obrys nie rośnie. */
.dc-post-card__more .dc-icon {
  transition: margin-inline-end var(--dc-duration-base) var(--dc-ease);
}

.dc-post-card:hover .dc-post-card__more .dc-icon {
  margin-inline-end: calc(var(--dc-space-8) - var(--dc-space-14));
}