/**
 * single.css — widok pojedynczego wpisu.
 *
 * Warstwa views/ (patrz blog.css): wczytywana wyłącznie, gdy WordPress
 * wybrał single.php. Typografia treści to komponent components/prose.css;
 * karta powiązanego wpisu — components/post-card.css; okruszki —
 * components/breadcrumbs.css. Tu zostaje układ: nagłówek wyśrodkowany,
 * kadr obrazu, kolumna treści, tagi, sekcja powiązanych.
 *
 * Makieta: nagłówek max 820 wyśrodkowany; plakietka pigułka r pill szkło
 * .62 + obwódka .7 + cień 0 8 22 .14 + inset, kółko 22 a14 z sygnetem 13;
 * h1 52/1.06/-0.03em; lead 19/1.62 #5a5a5a; meta 14 #7a7568 z kreskami
 * 1×18; obraz 520 wys., r26, cień 0 30 70 .2 + inset; podpis 13 #9a958a;
 * treść 760; tagi pigułki 13/600 szkło .7; powiązane: nadtytuł + h2 34
 * + „Wszystkie wpisy →", siatka 3 × gap 24.
 *
 * Scalenia (reguła 15): h1 → --dc-display-1 (40→58) bez deklaracji;
 * lead 19 → --dc-text-4xl (20); meta 14 → --dc-text-md, kreski → obwódka
 * --dc-border-line; obraz r26 → --dc-radius-28, cień → --dc-shadow-2xl
 * + inset-top (reguła 13), wysokość 520 → aspect-ratio 12/5 (1176×490;
 * proporcja, nie rozmiar — jak w o-nas.css); plakietka = przepis tagu
 * neutralnego C.8 w wersji pigułki z makiety (szkło + subtle + inset-top);
 * h2 powiązanych 34 → --dc-display-4 (sufit 34, dokładnie); tag →
 * ranga 3 pigułka (C.1) w małym rozmiarze.
 */

/* ==========================================================================
   1. GŁOWA — okruszki, nagłówek, obraz
   Makieta: 52 od nagłówka strony, 44 do obrazu → --dc-space-48 / 40.
   ========================================================================== */

.dc-single__head {
  padding-block-start: var(--dc-space-48);
}

.dc-single__header {
  max-width: var(--dc-measure-2xl);
  margin-inline: auto;
  text-align: center;
}

/* Plakietka kategorii — pigułka: szkło, obwódka subtle, --dc-shadow-md
   + inset-top; tekst 11,5 / 600 / .14em → --dc-text-sm / medium / wider,
   złoty TEKST na accent-strong (reguła J). */
.dc-single__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  margin-block-end: var(--dc-space-24);
  padding: var(--dc-space-6) var(--dc-space-16) var(--dc-space-6) var(--dc-space-10);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-glass);
  -webkit-backdrop-filter: var(--dc-blur-md);
  backdrop-filter: var(--dc-blur-md);
  box-shadow: var(--dc-shadow-md), var(--dc-shadow-inset-top);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-wider);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
}

/* Kółko z sygnetem: 22 px → --dc-space-22, tło a15 (C.8). Sygnet to znak
   marki (rastrowy), więc <img alt="">, nie dc_icon() — jak w nagłówku. */
.dc-single__badge-mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-22);
  height: var(--dc-space-22);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-accent-a15);
}

.dc-single__badge-mark img {
  width: auto;
  height: var(--dc-space-14);
}

/* h1 z base.css (display-1, black, leading-none, tracking-tighter); tu
   tylko odstęp do leadu / meta. */
.dc-single__title {
  margin-block-end: var(--dc-space-22);
}

.dc-single__lead {
  margin-block-end: var(--dc-space-28);
  font-size: var(--dc-text-4xl);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
}

/* Wiersz meta: pozycje rozdzielone pionową kreską — obwódka lewa
   drugiej pozycji zamiast osobnego <span>; przy zawinięciu na wąskim
   ekranie kreska zostaje przy pozycji, więc nie zostaje sierotą. */
.dc-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-10) var(--dc-space-18);
  font-size: var(--dc-text-md);
  color: var(--dc-text-subtle);
}

.dc-single__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
}

.dc-single__meta-item + .dc-single__meta-item {
  padding-inline-start: var(--dc-space-18);
  border-inline-start: var(--dc-border) solid var(--dc-border-line);
}

/* Ikony meta w złocie (makieta: kreska #C9A84C) — dekoracja, ale od
   partii 3 audytu ikony biorą --dc-accent-strong jak tekst. */
.dc-single__meta-item .dc-icon {
  color: var(--dc-accent-strong);
}

/* Obraz wyróżniający: kadr 12/5, r28, --dc-shadow-2xl + inset-top.
   overflow: hidden przycina zdjęcie do rogów; obwódka subtle jak każda
   karta ze zdjęciem. */
.dc-single__figure {
  margin-block-start: var(--dc-space-40);
}

.dc-single__image {
  width: 100%;
  aspect-ratio: 12 / 5;
  object-fit: cover;
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-28);
  background-color: color-mix(in srgb, var(--dc-accent) 10%, transparent);
  box-shadow: var(--dc-shadow-2xl), var(--dc-shadow-inset-top);
}

.dc-single__caption {
  max-width: var(--dc-measure-2xl);
  margin: var(--dc-space-14) auto 0;
  font-size: var(--dc-text-base);
  text-align: center;
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   2. TREŚĆ — kolumna .dc-prose wyśrodkowana
   Makieta: 56 od obrazu, kolumna 760 → --dc-space-56, --dc-measure-2xl
   (900 — najbliższy token; 760 nie istnieje, a 680 łamie zdania z tabelą
   4-kolumnową, którą makieta i tak wypuszcza szerzej, do 860).
   ========================================================================== */

.dc-single__body {
  padding-block-start: var(--dc-space-56);
}

.dc-single__prose {
  margin-inline: auto;
}

/* Stopka wpisu: tagi nad kreską, 40 od treści, 28 pod kreską. */
.dc-single__footer {
  max-width: var(--dc-measure-2xl);
  margin: var(--dc-space-40) auto 0;
  padding-block-start: var(--dc-space-28);
  border-block-start: var(--dc-border) solid var(--dc-border-line);
}

.dc-single__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-8);
}

/* Tag — pigułka rangi 3 w małym rozmiarze (7/14 → 8/14; 13 px = base). */
.dc-single__tag {
  display: inline-flex;
  align-items: center;
  padding: var(--dc-space-8) var(--dc-space-14);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-glass);
  box-shadow: var(--dc-shadow-inset-top);
  font-size: var(--dc-text-base);
  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-single__tag:hover {
  border-color: var(--dc-accent-a50);
  background-color: var(--dc-surface);
  color: var(--dc-text);
}

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

/* ==========================================================================
   3. POWIĄZANE WPISY
   Nagłówek jak w karuzeli: wyrównanie do dołu, nadtytuł + h2, odnośnik
   z grotem po prawej. .dc-section daje 64/64 (makieta 64/72).
   ========================================================================== */

.dc-single__related-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--dc-space-20);
  margin-block-end: var(--dc-space-28);
}

.dc-single__related-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);
}

.dc-single__related-heading {
  font-size: var(--dc-display-4);
}

/* „Wszystkie wpisy →" — kopia .dc-blog-carousel__all (reguła 22). */
.dc-single__related-all {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  padding-block-end: var(--dc-space-4);
  border-block-end: var(--dc-border-heavy) solid var(--dc-accent);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-text);
  text-decoration: none;
  transition:
    gap var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease);
}

.dc-single__related-all:hover {
  gap: var(--dc-space-14);
  color: var(--dc-accent-strong);
}

.dc-single__related-all .dc-icon {
  transition: margin-inline-end var(--dc-duration-base) var(--dc-ease);
}

.dc-single__related-all:hover .dc-icon {
  margin-inline-end: calc(var(--dc-space-8) - var(--dc-space-14));
}

/* Siatka jak w blog.css (auto-fill, żeby dwa wpisy nie rozciągały się
   na pół szerokości każdy). */
.dc-single__related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--dc-grid-min-md), 100%), 1fr));
  gap: var(--dc-space-24);
}

.dc-single__related-item {
  display: flex;
}

.dc-single__related-item .dc-post-card {
  flex: 1;
}