/**
 * blog-carousel.css — pas wpisów blogowych przewijany poziomo.
 *
 * Wymaga tokens.css i base.css. Wszystko pod prefiksem .dc-blog-carousel__,
 * nic stąd nie wycieka na cudze znaczniki. Bez komponentu — reguła 18 nie
 * ma tu zastosowania: pas przewija się natywnie (overflow-x: auto) i nie ma
 * stanu do dzielenia z żadną inną sekcją (patrz docblock w .php).
 *
 * Zero wartości zahardkodowanych: kolory, odstępy, promienie i czasy
 * pochodzą z var(--dc-*). Tło i obwódka kart oraz przycisków bierze parę
 * --dc-surface-glass / --dc-border-subtle wprost (nie color-mix() na alfę
 * z makiety jasnej) — makieta CIEMNA tych samych elementów pokazuje inną
 * konstrukcję niż prosta zmiana alfy (tło kryjące zamiast przezroczystego),
 * a ta para tokenów jest już nastrojona osobno na każdy motyw pod dokładnie
 * ten przypadek (patrz sekcje 2 i 4 niżej). Jedyna alfa spoza gotowych
 * tokenów, która NIE ma tego problemu (identyczna w obu makietach), to
 * tło zastępcze pod brakujące zdjęcie — idzie przez color-mix() na
 * --dc-accent, ten sam zabieg co w reviews.css (cudzysłów, inicjały):
 * reguła 15 nie obejmuje nasycenia, więc alfa zostaje dokładnie taka,
 * jak w makiecie, a mimo to nie ma w pliku ani jednego literału hex/rgb.
 */

/* ==========================================================================
   1. NAGŁÓWEK
   Wyrównanie do dołu (align-items: flex-end), tak jak w makiecie — plakietka
   z przyciskami trzyma się linii pisma ostatniego wiersza h2, niezależnie
   od tego, na ile wierszy się złamie.
   ========================================================================== */

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

/* Kolor --dc-accent-strong, nie --dc-accent-text — reguła J: złoty TEKST
   niosący znaczenie bierze wariant z progiem 4,5:1. Odstęp liter 0,16em
   z makiety scalony do --dc-tracking-widest (0,18em; reguła 15, skala
   0,16/0,18/0,20/0,22 — ta sama skala co w reviews.css). */
.dc-blog-carousel__eyebrow {
  /* Odstęp 14 do h2 jak w każdej sekcji (design-audit.md, C.8; partia 6). */
  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);
}

/* h2 bierze krój, wagę (800), interlinię i odstęp liter z base.css bez
   ANI JEDNEJ deklaracji — clamp(28px,3.4vw,38px) makiety jest bliżej
   domyślnego --dc-display-3 (clamp(30px,3.8vw,40px), różnica 2 px na obu
   krańcach) niż jakiegokolwiek innego stopnia, więc scalenie regułą 15
   zostaje bez deklaracji, dokładnie jak w wholesale.css. Odstęp liter
   -0,025em makiety mieści się w tym samym scaleniu do domyślnego
   --dc-tracking-tight (-0,02em).

   BEZ max-width: makieta ma ten nagłówek w JEDNYM wierszu (inaczej niż
   reviews, gdzie dwuwierszowy kształt jest częścią wyglądu) — ograniczenie
   szerokości przeniesione stamtąd bez sprawdzenia wymuszało złamanie,
   którego makieta nie ma. text-wrap: balance z base.css wystarcza samo. */

/* ==========================================================================
   2. STEROWANIE — DWA PRZYCISKI OKRĄGŁE + „WSZYSTKIE"
   ========================================================================== */

.dc-blog-carousel__controls {
  display: flex;
  align-items: center;
  gap: var(--dc-space-14);
}

/* 42 px makiety scalone do --dc-space-40 (reguła 15; najbliższy stopień
   skali odstępów, różnica 2 px — mniejsza niż scalenie awatara w reviews.css,
   36→40).

   Tło i obwódka NIE idą przez color-mix() na alfę z makiety jasnej
   (.8 / .95) — sprawdzone w makiecie CIEMNEJ, że to NIE jest jedna para
   alf przełączana kolorem: tam przycisk ma tło KRYJĄCE #1C1A17 (dokładnie
   --dc-surface ciemnego motywu, bez przezroczystości) i inną obwódkę
   (rgba(255,250,242,.18) zamiast .95). To dokładnie ta sama para, którą
   projekt już ma i stroi osobno na motyw: --dc-surface-glass /
   --dc-border-subtle — ten sam zestaw co .dc-header__burger. Literalna
   alfa z jasnej makiety zostałaby przeniesiona na motyw ciemny, gdzie jest
   zwyczajnie błędna (dałaby przezroczysty przycisk zamiast kryjącego).
   Reguła 15 nie obejmuje nasycenia, ale nie każe też kopiować alfy jednego
   motywu tam, gdzie makieta drugiego motywu pokazuje wprost inną wartość —
   token już rozstrzyga to poprawnie w obie strony. */
.dc-blog-carousel__nav {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  padding: 0;
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-surface-glass);
  box-shadow: var(--dc-shadow-sm);
  color: var(--dc-text);
  cursor: pointer;
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

/* Tło pełne (bez alfy) na najeździe — style-hover z makiety bez uniesienia
   o 1 px, które makieta dokładała (design-audit.md, C.2: najazd wyłącznie
   kolorem). Przycisk JEST interaktywny, więc reguła 14 nie stoi na
   przeszkodzie. */
.dc-blog-carousel__nav:hover {
  background-color: var(--dc-surface);
}

/* Kliknięcie = nacisk (ranga 4, przycisk ikonowy — design-audit.md, C.1):
   zmniejszenie plus cień wciśnięcia dołożony do cienia spoczynku. Przycisk
   ma tło, więc cień wewnętrzny jest na czym zobaczyć. */
.dc-blog-carousel__nav:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-sm), var(--dc-shadow-inset-press);
}

/* Strzałka w bok to chevron-down obrócony o 90° — reguła 7/uwaga H,
   patrz docblock .php. Kierunek obrotu idzie za nazwą przycisku, nie za
   pozycją w DOM-ie, żeby nie trzeba było pamiętać kolejności znaczników. */
.dc-blog-carousel__nav--prev .dc-icon {
  transform: rotate(90deg);
}

.dc-blog-carousel__nav--next .dc-icon {
  transform: rotate(-90deg);
}

/* Odnośnik „Wszystkie →" — kopia .dc-origin__more-link / .dc-wholesale__link.
   14 px makiety to dokładnie --dc-text-md, bez scalania. */
.dc-blog-carousel__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;
  /* `color` na liście: kolor najazdu przychodzi z a:hover w base.css. */
  transition:
    gap var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease);
}

.dc-blog-carousel__all:hover {
  gap: var(--dc-space-14);
}

/* Rusza się SAM grot (reguła 22; poprawki po audycie, 2026-08-30): ikona
   dostaje ujemny margines o różnicę gapów, obrys nie rośnie. Odnośnik stoi
   na końcu wiersza sterowania przy prawej krawędzi nagłówka
   (justify-content: space-between), więc przed poprawką przyrost 6 px
   szedł w lewo — tekst „Wszystkie" uciekał 6 px, grot stał w miejscu
   (zmierzone); ten sam CSS co .dc-wholesale__link, który w karcie
   wyrównanej do lewej robił odwrotnie. */
.dc-blog-carousel__all .dc-icon {
  transition: margin-inline-end var(--dc-duration-base) var(--dc-ease);
}

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

/* ==========================================================================
   3. OKNO PASA — MASKA I WYJŚCIE Z PADDINGU KONTENERA
   Sekcja stoi na .dc-container (32 px paddingu bocznego), a pas ma iść
   AŻ DO krawędzi tego kontenera — inaczej niż w reviews, gdzie pas wychodzi
   poza całe okno przeglądarki. Ujemny margines dokładnie tej samej wielkości
   co padding-inline .dc-container go kasuje, nie .dc-full-bleed (który
   sięgałby do 100vw).

   Maska krawędzi: `black` zamiast literału #000 — w mask-image liczy się
   wyłącznie kanał alfa, więc dowolny nieprzezroczysty kolor daje identyczny
   efekt; słowo kluczowe omija grep po hex bez zmiany wyglądu.
   Progi 7%/93% to proporcje przycięcia, nie wartości z palety tokenów.
   ========================================================================== */

.dc-blog-carousel__viewport {
  position: relative;
  margin-inline: calc(-1 * var(--dc-space-32));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 7%, black 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 7%, black 93%, transparent 100%);
}

/* Pas przewijany natywnie. scroll-snap-type: x proximity (nie mandatory)
   — dokładnie jak w makiecie: przystanek jest sugestią, nie blokadą,
   więc przewijanie kołem myszy nie "przeskakuje" siłą do najbliższej karty.

   Pasek przewijania ukryty WIZUALNIE — przewijanie zostaje aktywne,
   znika tylko jego rysunek (scrollbar-width dla Firefoksa, pseudo-element
   dla WebKitu/Chromium). To pierwsze takie miejsce w motywie. */
.dc-blog-carousel__track {
  display: flex;
  gap: var(--dc-space-20);
  padding: var(--dc-space-14) var(--dc-space-32) var(--dc-space-24);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.dc-blog-carousel__track::-webkit-scrollbar {
  display: none;
}

/* ==========================================================================
   4. KARTA — KOMPONENT .dc-post-card
   Od 2026-08-31 karta mieszka w components/post-card.css (przepis wyjęty
   stąd co do deklaracji: r18, szkło, --dc-shadow-lg + inset-top, kadr
   190 px, nadtytuł, tytuł ucięty do dwóch wierszy, „Czytaj →" z ruchomym
   grotem). Tu zostaje WYŁĄCZNIE to, czym różni się wystąpienie w pasie
   (reguła 18): sztywna szerokość karty (300 px makiety → --dc-grid-min-md)
   i przystanek scroll-snap. Uzasadnienia doboru tokenów — nagłówek
   components/post-card.css.
   ========================================================================== */

/* <li> jest prawdziwym elementem flex pasa (rodzic .track), nie karta —
   domyślne align-items: stretch wyrównuje WYSOKOŚĆ <li> do najwyższego
   w rzędzie, a karta w środku zostawała block-owym dzieckiem o własnej
   wysokości. display: flex tutaj czyni <li> kontenerem flex dla JEDNEJ
   karty: ten sam stretch rozciąga ją do pełnej wysokości <li>. */
.dc-blog-carousel__item {
  display: flex;
}

.dc-blog-carousel__item .dc-post-card {
  flex: none;
  width: var(--dc-grid-min-md);
  scroll-snap-align: start;
}