/**
 * page.css — widok strony treściowej (page.php).
 *
 * Warstwa views/ (patrz blog.css): wczytywana wyłącznie, gdy WordPress
 * wybrał page.php — NIE na page-kontakt.php, page-o-nas.php ani stronach
 * z Template Name. Typografia treści to components/prose.css z pokrętłem
 * --dc-prose-size ustawionym tu na 16 px (makieta regulaminu: 16/1,72,
 * nie 18,5 jak wpis).
 *
 * Makieta: panel r28 szkło .46 + blur(20) + obwódka .65 + cień 0 12 44
 * .08 + inset (bez obwódki obrotowej — i tu też jej nie ma: obwódka to
 * ozdobnik stron produktowych, decyzja 2026-08-31); siatka 288 / 1fr, gap
 * 48; aside przyklejony top 24, r20, szkło .62; pozycja spisu 9/12 r11
 * 14 px, wybrana z tintem; karta treści r24 padding 44/48 szkło .72.
 * Scalenia (reguła 15): 288 → --dc-grid-min-md (280); gap 48 → 48;
 * aside r20 → --dc-radius-22, top 24 → 96 (nagłówek strony jest
 * przyklejony, 66 px — 24 z makiety chowałoby spis pod nim); pozycja
 * r11 → --dc-radius-12, 9/12 → 8/12; karta treści r24 → --dc-radius-22
 * (karta w panelu, C.9), padding 44/48 → 40/48.
 *
 * Breakpoint 60em (960 px) dla dwóch kolumn: minmax(0,1fr) + 280 + 48
 * + 2 × 32 kontenera = 952 px to najwęższe okno, w którym kolumna treści
 * ma jeszcze 560 px (ok. 70 znaków przy 16 px). Warunku @media nie da się
 * zapisać przez var() — ten sam zapis co 719 px w o-nas.css.
 */

/* ==========================================================================
   1. PANEL NAGŁÓWKA — kopia .dc-blog__panel (origin / wholesale / o-nas)
   ========================================================================== */

.dc-page__panel {
  position: relative;
  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 — patrz blog.css (ozdobnik stron produktowych). */
.dc-page__intro {
  position: relative;
  z-index: var(--dc-z-raised);
  max-width: var(--dc-measure-xl);
}

.dc-page__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 42 px makiety → --dc-display-1 z base.css bez deklaracji rozmiaru. */
.dc-page__title {
  margin-block-end: var(--dc-space-16);
}

/* „Ostatnia aktualizacja: …" — 14 px #7a7568, ikona zegara złota. */
.dc-page__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-6);
  font-size: var(--dc-text-md);
  color: var(--dc-text-subtle);
}

.dc-page__meta .dc-icon {
  color: var(--dc-accent-strong);
}

/* ==========================================================================
   2. UKŁAD — spis z boku + treść
   ========================================================================== */

.dc-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dc-space-48);
  align-items: start;
  margin-block-start: var(--dc-space-40);
}

@media (min-width: 60em) {
  .dc-page__layout--toc {
    grid-template-columns: var(--dc-grid-min-md) minmax(0, 1fr);
  }

  /* Przyklejony pod nagłówkiem strony (66 px sticky) — 80 + 16 = 96. */
  .dc-page__aside {
    position: sticky;
    top: calc(var(--dc-space-80) + var(--dc-space-16));
  }
}

/* ==========================================================================
   3. SPIS TREŚCI — karta w panelu (r22), pozycje jak menu
   ========================================================================== */

.dc-page__aside {
  padding: var(--dc-space-24) var(--dc-space-22);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-22);
  background-color: var(--dc-surface-glass);
  -webkit-backdrop-filter: var(--dc-blur-lg);
  backdrop-filter: var(--dc-blur-lg);
  box-shadow: var(--dc-shadow-lg), var(--dc-shadow-inset-top);
}

/* Etykieta spisu — nadtytuł karty z C.8 (12 / 600 / wider / subtle). */
.dc-page__toc-label {
  margin-block-end: var(--dc-space-16);
  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-page__toc-list {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-2);
  counter-reset: dc-toc;
}

/* Pozycja: 14 px, r12, padding 8/12; najazd tłem --dc-surface i tuszem
   (C.2 — kolorem, bez ruchu). Numer § z treści zostaje w etykiecie
   (nie dublujemy licznika, gdy nagłówek sam go niesie). */
.dc-page__toc-link {
  display: block;
  padding: var(--dc-space-8) var(--dc-space-12);
  border: var(--dc-border) solid transparent;
  border-radius: var(--dc-radius-12);
  font-size: var(--dc-text-md);
  line-height: var(--dc-leading-snug);
  color: var(--dc-text-muted);
  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);
}

.dc-page__toc-link:hover {
  background-color: var(--dc-surface);
  color: var(--dc-text);
}

/* „Masz pytanie…" pod kreską; odnośnik z grotem (reguła 22). */
.dc-page__ask {
  margin-block-start: var(--dc-space-20);
  padding-block-start: var(--dc-space-18);
  border-block-start: var(--dc-border) solid var(--dc-border-line);
}

.dc-page__ask-text {
  margin-block-end: var(--dc-space-12);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-subtle);
}

.dc-page__ask-link {
  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-base);
  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-page__ask-link:hover {
  gap: var(--dc-space-14);
  color: var(--dc-accent-strong);
}

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

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

/* ==========================================================================
   4. KARTA TREŚCI
   Treść 16 px (pokrętło komponentu), kolumna bez limitu — limit daje
   siatka. Pusta treść: komunikat notice.css stoi bez karty (karta wokół
   jednego komunikatu byłaby ramką w ramce).
   ========================================================================== */

.dc-page__content {
  min-width: 0;
}

.dc-page__prose {
  --dc-prose-size: var(--dc-text-xl);
  --dc-prose-measure: none;

  padding: var(--dc-space-40) var(--dc-space-48);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-22);
  background-color: var(--dc-surface-glass);
  -webkit-backdrop-filter: var(--dc-blur-lg);
  backdrop-filter: var(--dc-blur-lg);
  box-shadow: var(--dc-shadow-xl), var(--dc-shadow-inset-top);
}

/* Pierwszy nagłówek w karcie nie potrzebuje 48 px nad sobą — padding
   karty już daje odstęp. */
.dc-page__prose > h2:first-child,
.dc-page__prose > h3:first-child {
  margin-block-start: 0;
}

/* Uwaga G (karta w karcie): przy 390 px kontener 2 × 32 + karta 2 × 48
   = 160 px z 390. Ten sam pomiar co panel „O nas"; padding karty schodzi
   do 24 poniżej 40em, żeby wiersz regulaminu miał więcej niż 230 px. */
@media (max-width: 40em) {
  .dc-page__prose {
    padding: var(--dc-space-24);
  }
}