/**
 * starter-kit-why.css — otwarcie strony zestawu startowego.
 *
 * Wymaga tokens.css i base.css. Sekcja nie używa components/ — nie ma tu
 * panelu, więc nie ma obwódki .dc-ring; trzy kroki leżą wprost na tle strony.
 *
 * Wszystko pod prefiksem .dc-starter-kit-why__, nic stąd nie wycieka.
 * Zero wartości zahardkodowanych: kolory, odstępy, promienie i czasy
 * pochodzą wyłącznie z var(--dc-*).
 */

/* ==========================================================================
   1. RAMA SEKCJI

   .dc-starter-kit-why nie ma tu żadnej deklaracji — szerokość i marginesy
   boczne daje .dc-container, pionowy oddech .dc-section, obie z base.css
   bez modyfikacji (reguła 8). Klasa zostaje w znaczniku jako nazwa bloku.

   Makieta ma na sekcji padding 72 px u góry i 8 px u dołu zamiast 64/64
   z .dc-section — to domknięcie RYTMU STRONY (sekcja zakupowa zaczyna się
   zaraz pod spodem z własnym odstępem 48 px), a nie własność sekcji.
   Należy do arkusza rytmu strony zestawu, tak jak single-product.css
   domyka dwa wyjątki makiety na karcie produktu. Zgłoszone w raporcie.
   ========================================================================== */

/* ==========================================================================
   2. OKRUSZKI
   Przepis przeniesiony z product-hero.css bez zmian — to ta sama ścieżka
   na drugiej stronie i ma wyglądać identycznie. Makieta zestawu podaje
   13 px zamiast 12,5 px z makiety karty produktu; scalone do wspólnego
   --dc-text-sm (reguła 15), żeby oba okruszki były jednym elementem.
   ========================================================================== */

.dc-starter-kit-why__crumbs {
  /* Makieta: 36 px. Scalone do 32 — najbliższy token, różnica poniżej
     progu widoczności przy odstępie tej wielkości. */
  margin-block-end: var(--dc-space-32);
}

.dc-starter-kit-why__crumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-8);
  font-size: var(--dc-text-sm);
  color: var(--dc-text-subtle);
}

.dc-starter-kit-why__crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
}

/* Ukośnik-separator rysowany ::before, żeby nie mnożyć znaczników.
   Kolor #c9c3b6 z makiety: --dc-text-subtle w połowie krycia. */
.dc-starter-kit-why__crumb + .dc-starter-kit-why__crumb::before {
  content: '/';
  color: color-mix(in srgb, var(--dc-text-subtle) 50%, transparent);
}

/* base.css daje każdemu <a> złoto i podkreślenie — okruszek jest szary
   i bez kreski. Najazd kolorem (C.2), `color` w liście przejść. */
.dc-starter-kit-why__crumb-link {
  color: var(--dc-text-subtle);
  text-decoration: none;
  transition: color var(--dc-duration-base) var(--dc-ease);
}

/* (0,2,0) bije a:hover z base.css (0,1,1) — bez tego okruszek robiłby się
   złoty zamiast atramentowego. */
.dc-starter-kit-why__crumb-link:hover {
  color: var(--dc-text);
}

.dc-starter-kit-why__crumb-current {
  color: var(--dc-text);
  font-weight: var(--dc-weight-medium);
}

/* ==========================================================================
   3. NAGŁÓWEK STRONY

   Makieta ogranicza cały blok do 760 px. Skala --dc-measure-* tej wartości
   nie ma — sąsiedzi to 680 i 900 — więc limit rozchodzi się na dwa
   elementy: blok bierze 900, żeby nagłówek zmieścił się w jednym wierszu,
   a sam lead 680 (patrz niżej), bo to on potrzebuje wąskiej kolumny.
   ========================================================================== */

.dc-starter-kit-why__header {
  max-width: var(--dc-measure-2xl);
  margin-inline: auto;
  margin-block-end: var(--dc-space-40);
  text-align: center;
}

/* Nadtytuł-pigułka. Kształt jest własnością sekcji i zostaje (C.8, partia 6
   — tak samo zostawiono pigułkę fuel-switch); pismo idzie z przepisu
   nadtytułu sekcji: 12 / 600 / --dc-tracking-widest zamiast makietowych
   12 / 700 / .14em, odstęp do nagłówka 14 zamiast 20 (C.10).
   Kolor --dc-accent-strong, nie --dc-accent — reguła J: złoty TEKST
   niosący znaczenie bierze wariant o wyższym kontraście.
   Tło płaskie --dc-accent-a10 zamiast gradientu z makiety: gradient jest
   w systemie tłem sekcji, nie tłem tagu (C.5). */
.dc-starter-kit-why__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  margin-block-end: var(--dc-space-14);
  padding-block: var(--dc-space-8);
  padding-inline: var(--dc-space-16);
  border: var(--dc-border) solid var(--dc-accent-a30);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-accent-a10);
  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-starter-kit-why__eyebrow .dc-icon {
  flex: none;
}

/* h1 bierze krój, wagę, interlinię i światło międzyliterowe z base.css.
   Tu tylko rozmiar: makieta clamp(34px, 4.4vw, 52px) ma minimum i tempo
   identyczne z --dc-display-2, różni się wyłącznie sufitem (52 wobec 48)
   — scalone regułą 15. --dc-display-1 z base.css (40 / 5vw / 58) byłby
   o klasę większy niż makieta. */
.dc-starter-kit-why__title {
  margin-block-end: var(--dc-space-14);
  font-size: var(--dc-display-2);
}

.dc-starter-kit-why__title-accent {
  color: var(--dc-accent-strong);
}

/* Lead dostaje WŁASNY, węższy limit. Makieta trzyma cały blok w 760 px;
   tej wartości skala nie ma, a z dwóch sąsiadów 680 jest bliżej niej niż
   900. Nagłówek limitu nie chce (przy 680 łamałby się na dwa wiersze —
   zmierzone 678 px na jeden), akapit chce, więc każde z nich dostaje to,
   czego potrzebuje, zamiast wspólnego kompromisu. */
.dc-starter-kit-why__lead {
  max-width: var(--dc-measure-xl);
  margin-inline: auto;
  font-size: var(--dc-text-xl);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
}

/* ==========================================================================
   4. SIATKA KROKÓW

   min(var(--dc-grid-min-md), 100%) — ta sama osłona przed przepełnieniem
   co w how-to-order i facts: bez niej pojedyncza kolumna na wąskim ekranie
   wymuszałaby 280 px nawet tam, gdzie dostępne jest mniej.

   Makieta ogranicza siatkę do 1080 px, czyli kontener bez 80 px z każdej
   strony. Zapisane działaniem na tokenach, bo 1080 nie jest wartością
   ze skali szerokości — a wynikiem odjęcia, którym w makiecie jest.
   ========================================================================== */

.dc-starter-kit-why__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-md), 100%), 1fr));
  gap: var(--dc-space-14);
  max-width: calc(var(--dc-container) - var(--dc-space-80) * 2);
  margin-inline: auto;
}

/* ==========================================================================
   5. KROK

   Karta leży wprost na tle strony, nie w panelu — dlatego promień 22
   z drabinki C.9 („karta"), a nie 16 („kafelek w panelu") jak
   w how-to-order. Makieta ma 20; różnica 2 px mieści się w regule 15.

   Cień: para z reguły 13. --dc-shadow-lg, nie -xl: xl jest w C.4 stopniem
   PANELU sekcji, a to jest karta.

   Makieta dokłada jeszcze poświatę od dołu i włosową obwódkę wewnętrzną —
   token cieni ich nie ma, pominięte jak w facts i how-to-order
   (uwaga E z section-conventions.md).
   ========================================================================== */

.dc-starter-kit-why__step {
  padding: var(--dc-space-24);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-22);
  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-lg), var(--dc-shadow-inset-top);
}

/* Krok wyróżniony — TYLKO obwódką. Makieta daje mu dodatkowo złoty cień
   (0 12px 34px złota .14), ale poświata jest w systemie zarezerwowana dla
   rangi 1 przycisków (C.4: „--dc-shadow-accent — tylko ranga 1; jedyna
   poświata na stronie"). To samo rozstrzygnięcie, które w partii 4 audytu
   dostał .dc-volume-picker__pack--bestseller: cień jak u rodzeństwa,
   wyróżnia obwódka a50. Makietowe .45 na obwódce i .62 na szkle scalone
   do a50 i wspólnego --dc-surface-glass-soft (reguła 15). */
.dc-starter-kit-why__step--accent {
  border-color: var(--dc-accent-a50);
}

/* ==========================================================================
   6. TREŚĆ KROKU
   ========================================================================== */

.dc-starter-kit-why__step-head {
  display: flex;
  align-items: center;
  gap: var(--dc-space-12);
  margin-block-end: var(--dc-space-12);
}

/* Numer w złotym kole — czysta dekoracja, aria-hidden w znaczniku;
   znaczenie kolejności niesie pozycja w <ol> (patrz docblock szablonu).
   Makieta: koło 34 px, scalone do --dc-space-32. */
.dc-starter-kit-why__numeral {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-32);
  height: var(--dc-space-32);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-accent);
  font-family: var(--dc-font-display);
  font-weight: var(--dc-weight-black);
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-none);
  color: var(--dc-on-accent);
}

/* Nadtytuł karty z C.8: 12 / 600 / --dc-tracking-wider. Makieta ma
   11,5 / 700 / .13em — pismo z przepisu, kolor karty bez zmian (partia 6
   audytu wprost zostawiła kolory nadtytułów kart takimi, jakie są).
   Złoto w wariancie --dc-accent-strong, reguła J. */
.dc-starter-kit-why__step-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-accent-strong);
}

/* h3 bierze krój, wagę i interlinię z base.css — tu tylko odstęp do
   akapitu (C.10: tytuł karty → tekst 8; makieta ma 7). Rozmiar 17 px
   z makiety jest dokładnie --dc-text-2xl, czyli wartością bazową h3,
   więc nie ma czego nadpisywać. */
.dc-starter-kit-why__step-title {
  margin-block-end: var(--dc-space-8);
}

.dc-starter-kit-why__step-text {
  font-size: var(--dc-text-base);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
}

/* ==========================================================================
   7. ODNOŚNIK DO SEKCJI ZAKUPOWEJ — PRZYCISK RANGI 2

   Przepis rangi 2 z design-audit.md C.1: szkło, obrys --dc-border-line,
   BEZ cienia, tekst --dc-text, Inter 600, promień 16. Makieta rysuje
   pigułkę (r99) w PJS 700 — promień idzie z C.9 („jeden promień na rangę:
   r16 dla rang 1–2, pill dla rangi 3"), pismo z C.1. Rozstrzygnięte
   2026-08-31; szczegóły w decisions.md.

   Najazd: wyłącznie kolor, bez uniesienia (C.2). Wciśnięcie: scale(.97)
   plus --dc-shadow-inset-press — jedyna transformacja dozwolona na
   elemencie klikalnym.

   `color` MUSI być w liście przejść i w regule :hover — a:hover z base.css
   ma specyficzność (0,1,1) i bez tego przemalowałby przycisk na złoto.
   ========================================================================== */

.dc-starter-kit-why__actions {
  display: flex;
  justify-content: center;
  /* Makieta: 30 px. Scalone do 32. */
  margin-block-start: var(--dc-space-32);
}

.dc-starter-kit-why__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  padding-block: var(--dc-space-14);
  padding-inline: var(--dc-space-28);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-glass);
  -webkit-backdrop-filter: var(--dc-blur-sm);
  backdrop-filter: var(--dc-blur-sm);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text);
  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),
    box-shadow var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-starter-kit-why__cta:hover {
  border-color: var(--dc-accent-a50);
  background-color: var(--dc-surface);
  color: var(--dc-text);
}

.dc-starter-kit-why__cta:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-inset-press);
}

/* Strzałka w dół to arrow-right obrócony o ćwierć obrotu — rejestr ikon
   nie dostaje duplikatów kierunkowych (uwaga H; ten sam wybór co przy
   przyciskach karuzeli w blog-carousel). Obrót jest stanem spoczynkowym
   ikony, nie reakcją na kursor, więc nie łamie C.2. Grot NIE jedzie na
   najeździe: to przycisk rangi 2, a nie odnośnik z grotem z reguły 22 —
   C.1 mówi wprost, że rangi 1–2 grotem nie ruszają. */
.dc-starter-kit-why__cta .dc-icon {
  flex: none;
  transform: rotate(90deg);
}