/**
 * help-cta.css — ciemny pas z wezwaniem do kontaktu.
 *
 * Wymaga tokens.css, base.css i components/ring.css. Wszystko pod prefiksem
 * .dc-help-cta__, nic stąd nie wycieka na cudze znaczniki.
 *
 * Zero wartości zahardkodowanych: kolory, odstępy, promienie i czasy
 * pochodzą wyłącznie z var(--dc-*). WYJĄTEK opisany w sekcji 1: jedna
 * reguła [data-theme='dark'] na kolorze tła panelu — nie wpisuje koloru,
 * przełącza między dwoma prawdziwymi tokenami o zbieżnej wartości
 * (patrz komentarz w help-cta.php i w sekcji 1 niżej).
 *
 * PIERWSZE UŻYCIE color-mix() W PROJEKCIE (sekcje 4 i 5). Panel jest ciemny
 * w OBU motywach strony, więc potrzebne tu odcienie bieli z alfą (tekst,
 * tło i obwódka drugiego przycisku) muszą być NIEZMIENNE między motywami —
 * a żaden istniejący token rgba(255,255,255,…) taki nie jest (wszystkie
 * z rodziny --dc-surface-glass/--dc-border-subtle są podmieniane).
 * color-mix(in srgb, var(--dc-text-on-dark) N%, transparent) daje dokładnie
 * te odcienie z ISTNIEJĄCEGO tokenu (jasnego w obu motywach), bez nowego
 * tokenu i bez wpisanego koloru — grep po hex/rgb go nie widzi. Wsparcie
 * przeglądarek: Safari 16.2+/Chrome 111+/Firefox 113+, zgodne z resztą
 * motywu (brak deklarowanego zakresu wsparcia w CLAUDE.md). Do potwierdzenia
 * jako technika, nie tylko dla tej sekcji.
 */

/* ==========================================================================
   1. PANEL
   ========================================================================== */

/* .dc-help-cta nie ma tu żadnej deklaracji — szerokość, marginesy boczne
   i pionowy oddech dają .dc-container i .dc-section z base.css bez
   modyfikacji (reguła 8). Klasa zostaje w znaczniku jako nazwa bloku. */

/* Tło: PANEL JEST CIEMNY W OBU MOTYWACH STRONY (patrz docblock help-cta.php).
   Żaden pojedynczy token nie jest ciemny w obu motywach — ten sam problem,
   na który trafiły hero.css (.dc-hero__cert-mark) i volume-picker.css
   (.dc-volume-picker__flag). Tu jednak istnieje para PRAWDZIWYCH tokenów
   o zbieżnej wartości: --dc-surface-inverse w jasnym motywie i --dc-surface
   w ciemnym dają ten sam #1C1A17 — a #1a160c z makiety jest dokładnie
   wartością, którą tokens.css już wchłonął w scalenie przy --dc-surface
   (komentarz „scala: #1a160c / …"). Reguła niżej NIE wpisuje koloru — wybiera
   między dwoma istniejącymi tokenami, których wartości akurat się pokrywają.
   To pozornie łamie regułę 10 („jeśli piszesz regułę dark dla koloru — użyłeś
   złego tokenu”), ale w tym jednym przypadku nie ma jednego właściwego
   tokenu do wybrania — stąd zgłoszenie w raporcie jako kandydat na regułę. */
/* RANGA 1 NA CIEMNYM PANELU — wariant przez zmienne, nie przez klasę.
   Panel jest ciemny w obu motywach, więc dla przycisku na nim jest tym,
   czym motyw ciemny dla całej strony: podstawia inne wartości pod te same
   tokeny, a reguła przycisku zostaje identyczna z rangą 1 wszędzie indziej
   (.dc-help-cta__cta--primary niżej nie wie, że stoi na czerni). Zmienna
   na PANELU, nie na przycisku — reguła 18: pokrętło stoi tam, gdzie opisany
   jest powód. Ten sam zapis w loyalty-cta.css (design-audit.md, partia 3). */
.dc-help-cta__panel {
  --dc-shadow-accent: var(--dc-shadow-accent-on-dark);
  --dc-shadow-inset-top: var(--dc-shadow-inset-top-on-dark);

  position: relative;
  isolation: isolate;
  padding-block: var(--dc-space-64);
  padding-inline: var(--dc-space-56);
  border-radius: var(--dc-radius-28);
  background-color: var(--dc-surface-inverse);
  box-shadow: var(--dc-shadow-xl), var(--dc-shadow-inset-top);
}

[data-theme='dark'] .dc-help-cta__panel {
  background-color: var(--dc-surface);
}

/* ==========================================================================
   2. OBWÓDKA — FAZA I ZWROT
   Tempo: makieta kręci łukiem tym samym kierunkiem i tempem w obu motywach
   (home.html i home-dark.html mają identyczne 5s), więc karta zostaje przy
   domyślnym --dc-duration-ring komponentu (7s) — scalenie zgodne z regułą 15
   (patrz komentarz w help-cta.php).

   Faza i zwrot z rejestru w components/ring.css: numer 0, czyli start bez
   przesunięcia i parzysty numer = obrót w prawo. To są wartości domyślne
   komponentu, wypisane jawnie, żeby każda sekcja pokazywała swój numer
   u siebie, a nie tylko w rejestrze. Liczba jest umowna: znaczy tylko, że
   żadna inna sekcja jej nie ma; nie zależy od miejsca sekcji na stronie
   (partia 5 audytu). Pokrętła na panelu, nie na warstwie — zmienne własne
   dziedziczą się w dół.
   ========================================================================== */

.dc-help-cta__panel {
  --dc-ring-spin: dcRingSpin;
  --dc-ring-delay: 0s;
}

/* ==========================================================================
   3. UKŁAD WIERSZA
   Gap 56px to dokładne trafienie w --dc-space-56, bez scalania.
   ========================================================================== */

.dc-help-cta__row {
  position: relative;
  z-index: var(--dc-z-raised);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-56);
}

.dc-help-cta__copy {
  flex: 1 1 var(--dc-grid-min-md);
}

/* ==========================================================================
   4. TREŚĆ — nadtytuł, nagłówek, akapit
   Złoto bierze --dc-accent (niepodmieniane między motywami, patrz tokens.css
   sekcja 11), pełny biały tekst bierze --dc-text-on-dark (jasny w obu
   motywach), półprzezroczysty biały tekst bierze color-mix() na tym samym
   tokenie (patrz plik nagłówkowy) — panel jest ciemny w obu motywach, więc
   żadna z tych deklaracji nie potrzebuje reguły [data-theme='dark'].
   ========================================================================== */

/* Kreska przed nadtytułem — czysta dekoracja, ::before zamiast znacznika:
   nie niesie treści, więc nie potrzebuje aria-hidden ani miejsca w DOM-ie.
   Pismo 12 px / 600 i odstęp 14 do h2 jak każdy nadtytuł sekcji
   (design-audit.md, C.8; partia 6) — makietowe 10 / 700 / 20 było
   najmniejszym z siedmiu wariantów nadtytułu na stronie. */
.dc-help-cta__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--dc-space-12);
  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);
}

.dc-help-cta__eyebrow::before {
  content: '';
  display: block;
  flex: none;
  width: var(--dc-space-32);
  height: var(--dc-border-thick);
  background-color: var(--dc-accent);
}

/* font-size/letter-spacing jawne: domyślne h2 z base.css biorą --dc-display-3
   (sufit 40px, tracking -0,02em) — ta sekcja w makiecie ma większy sufit
   (48px) i tracking jak h1 (-0,03em). Bez tej deklaracji nagłówek renderował
   się o 8px mniejszy niż w makiecie — przeoczenie znalezione przy porównaniu
   ze zrzutem 1440px, nie decyzja projektowa. */
/* Odstęp do leadu 14 jak w każdej sekcji (design-audit.md, C.10; partia 6). */
.dc-help-cta__heading {
  margin-block-end: var(--dc-space-14);
  color: var(--dc-text-on-dark);
  font-size: var(--dc-display-2);
  letter-spacing: var(--dc-tracking-tighter);
}

/* Kolor: color-mix(), nie rgba() literal ani stały token. Makieta ma tu
   rgba(255,255,255,.5) w OBU motywach (panel jest ciemny w obu, patrz
   docblock help-cta.php) — żaden istniejący token nie trafia dokładnie
   w .5 w obu motywach naraz (na-dark-muted to .6/.58, na-dark-subtle to
   .4/.5). color-mix() z var(--dc-text-on-dark) (jasny w obu motywach)
   daje dokładnie wartość makiety bez nowego tokenu i bez wpisanego koloru —
   grep po hex/rgb go nie widzi, bo to funkcja na tokenach, nie literał.
   Zmierzone na tle panelu (#1C1A17): 5,21:1, próg 4,5:1 — makietowa wartość
   przechodzi bez korekty. */
.dc-help-cta__lead {
  max-width: var(--dc-measure-sm);
  font-size: var(--dc-text-lg);
  color: color-mix(in srgb, var(--dc-text-on-dark) 50%, transparent);
}

/* ==========================================================================
   5. PRZYCISKI
   Kolumna, nie wiersz: makieta stawia oba wezwania jedno pod drugim
   (flex-direction:column), obok kolumny tekstu — „dwa przyciski obok siebie"
   ze zlecenia opisywało układ WZGLĘDEM TREŚCI (dwie kolumny: tekst | CTA),
   nie wzajemne ustawienie przycisków. Potwierdzone przez Andrew 2026-08-28.
   ========================================================================== */

/* flex: 0 0 auto, NIE 1 1 …. Pierwsza wersja miała flex-grow:1 i kolumna
   rosła razem z .dc-help-cta__copy, wypełniając cały wolny wiersz —
   przyciski wychodziły 504px szerokie zamiast 288px z makiety. Bez
   flex-grow szerokość wyznacza treść (align-items: stretch równa oba
   przyciski do szerszego, „Porozmawiaj z asystentem"), dokładnie jak
   w makiecie. Zmierzone po poprawce w przeglądarce: 288px, zgodnie
   z makietą co do piksela. */
.dc-help-cta__actions {
  position: relative;
  z-index: var(--dc-z-raised);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--dc-space-12);
}

/* Wspólna geometria obu przycisków — patrz hero.css, ten sam wzorzec,
   łącznie z line-height: bez niej przycisk dziedziczy 1,6 z body i robi
   się wyższy, niż ma w makiecie (zmierzone: 62–63px zamiast 58px). */
.dc-help-cta__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-12);
  padding-block: var(--dc-space-18);
  padding-inline: var(--dc-space-32);
  border-radius: var(--dc-radius-16);
  font-family: var(--dc-font-display);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-none);
  text-decoration: none;
  /* `color` na liście: drugi przycisk nie deklaruje koloru na najeździe,
     więc dostaje go z a:hover w base.css — bez `color` tutaj zmieniał się
     skokiem. */
  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),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

/* Kliknięcie = nacisk: zmniejszenie plus cień wciśnięcia zamiast
   rozjaśnienia od góry — jedyna transformacja dozwolona na elementach
   klikalnych (design-audit.md, C.2). .97, nie .96 — najmniejszy przycisk
   ma 42 px i przy .96 traci 1,7 px na krawędź, widać drżenie tekstu. */
.dc-help-cta__cta:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-inset-press);
}

/* Pierścień fokusu: globalny domyślny z base.css (--dc-accent-strong),
   bez nadpisania koloru — tylko promień dopasowany do kształtu przycisku,
   jak w hero.css. Zmierzone na tle panelu (#1C1A17): 3,06:1 w motywie
   jasnym / wysoki w ciemnym — obie wartości nad progiem 3:1 dla elementu
   interfejsu (WCAG 1.4.11), więc nie ma tu powodu do odstępstwa od reguły
   (wcześniejsza wersja nadpisywała outline-color na --dc-accent bez
   sprawdzenia, czy globalny token faktycznie zawodzi — nie zawodził). */
.dc-help-cta__cta:focus-visible {
  border-radius: var(--dc-radius-16);
}

/* Główne wezwanie — RANGA 1 (design-audit.md, C.1): obwódka a50, poświata
   --dc-shadow-accent, rozjaśnienie od góry i krój Inter 700 15 jak każde
   główne wezwanie na stronie. Pełne złoto zostaje (identyczne w obu
   motywach, dlatego var(--dc-accent) wprost, nie --dc-gradient-cta: ten
   token w jasnym jest tintem pod przezroczyste tło strony, a nasze tło jest
   zawsze ciemne i nieprzezroczyste). Makieta miała tu PJS 800 17 bez
   obwódki i bez cienia — numer telefonu nie jest tekstem wystawowym, tylko
   etykietą przycisku, więc bierze krój przycisków (decyzja z partii 2).
   Obwódka dokłada 2 px wysokości: 54 -> 56, drugi przycisk ma 60. */
.dc-help-cta__cta--primary {
  border: var(--dc-border) solid var(--dc-accent-a50);
  background-color: var(--dc-accent);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-top);
  color: var(--dc-on-accent);
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
}

/* Najazd: złoto ciemnieje o 12 % w stronę tuszu — bez uniesienia. Tło jest
   pełne i nieprzezroczyste, więc mechanizm „a50 pod tintem" z hero nic by
   tu nie zmienił (po partii 1 najazd nie miał żadnej reakcji); domieszka
   --dc-on-accent ciemnieje w OBU motywach. Ten sam zapis w loyalty-cta.css
   (stopka od poprawek po audycie ma tint jak ai-assistant, więc to już
   tylko DWA wystąpienia — kandydat na token dopiero przy trzecim, reguła 18).
   Deklaracja koloru obowiązkowa — a:hover z base.css, jak w hero. */
.dc-help-cta__cta--primary:hover {
  background-color: color-mix(in srgb, var(--dc-accent) 88%, var(--dc-on-accent));
  color: var(--dc-on-accent);
}

/* Nacisk zachowuje poświatę: wspólna reguła .dc-help-cta__cta:active kładzie
   sam cień wciśnięcia (drugi przycisk nie ma poświaty), tu dochodzi
   --dc-shadow-accent, żeby przy kliknięciu nie gasła. */
.dc-help-cta__cta--primary:active {
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-press);
}

/* Drugie wezwanie — szkło bez wypełnienia, biały tint jak w makiecie
   (rgba(255,255,255,.1) / obwódka .22 w OBU motywach — panel jest ciemny
   w obu, więc biel jest tu tak samo niezmienna jak złoto: nie ma pod nią
   jasnego tła, które mogłoby się zmienić). Pierwsza wersja zastąpiła biel
   złotem (--dc-accent-a10), bo --dc-surface-glass/--dc-border-subtle są
   PODMIENIANE i w jasnym motywie dałyby nieprzezroczystą białą pigułkę —
   ale to argument przeciw TYM DWÓM tokenom, nie przeciw bieli jako takiej.
   color-mix() z var(--dc-text-on-dark) (jasny w obu motywach, patrz sekcja 4)
   daje dokładnie biel makiety bez nowego tokenu i bez wpisanego koloru. */
.dc-help-cta__cta--secondary {
  border: var(--dc-border) solid color-mix(in srgb, var(--dc-text-on-dark) 22%, transparent);
  background-color: color-mix(in srgb, var(--dc-text-on-dark) 10%, transparent);
  color: var(--dc-text-on-dark);
  font-size: var(--dc-text-lg);
}

/* Najazd rangi 2 (design-audit.md, C.1: „szkło jaśnieje, obwódka → a50"),
   przełożony na czarny panel: szkło biel .10 → .18, obwódka biel .22 →
   --dc-accent-a50, tekst BEZ ZMIANY. Kolor zadeklarowany wprost, bo bez
   niego przychodził z a:hover w base.css — w jasnym motywie
   --dc-accent-strong (#7c6420) na #1C1A17, zmierzone 3,06:1 przy 15 px (próg 4,5:1) — ciemne
   złoto na czerni, wskazane przez Andrzeja jako „źle po najechaniu"
   (poprawki po audycie, 2026-08-30). Obwódka na złoto zamiast jaśniejszej
   bieli: reakcja kolorem, tym samym, którym reaguje każda ranga 2 na stronie;
   biel .36 była trzecim stopniem alfy bieli w tym pliku. Bez uniesienia,
   bez poświaty (C.2, C.4). */
.dc-help-cta__cta--secondary:hover {
  border-color: var(--dc-accent-a50);
  background-color: color-mix(in srgb, var(--dc-text-on-dark) 18%, transparent);
  color: var(--dc-text-on-dark);
}

/* Sygnet w drugim przycisku: znak marki jest wielobarwny, więc filter
   wybiela go do jednej sylwetki, tak jak w makiecie (filter, nie kolor —
   grep po hex/rgb/px go nie widzi, bo to nie wartość projektowa z tokenów,
   tylko przetworzenie obrazu, identyczne w obu motywach). */
.dc-help-cta__cta-mark {
  opacity: 0.75;
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   6. STATUS INFOLINII
   ========================================================================== */

/* KOREKTA KONTRASTU (wzór z tokens.css). Makieta ma tu rgba(255,255,255,.34)
   w obu motywach — na tle panelu (#1C1A17) to 3,12:1, poniżej progu 4,5:1
   dla tekstu 12px. Podbite do tej samej wartości .5, którą bierze
   .dc-help-cta__lead (5,21:1, z zapasem) — nie do minimum, tylko do już
   użytego w sekcji stopnia, żeby nie dokładać trzeciej wartości alfy tam,
   gdzie wystarczą dwie. */
.dc-help-cta__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-8);
  padding-block-start: var(--dc-space-2);
  font-size: var(--dc-text-sm);
  color: color-mix(in srgb, var(--dc-text-on-dark) 50%, transparent);
}

/* Zieleń motywu ciemnego w OBU motywach — --dc-success-on-dark, z tej samej
   rodziny co --dc-text-on-dark: panel jest ciemny zawsze, a --dc-success
   przełącza się z motywem i w jasnym dawał na #1C1A17 2,96:1 — kropka
   gasła (design-audit.md, partia 3). */
.dc-help-cta__status-dot {
  flex: none;
  width: var(--dc-space-6);
  height: var(--dc-space-6);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-success-on-dark);
}