/**
 * faq.css — najczęstsze pytania, sześć rozwijanych odpowiedzi.
 *
 * Wymaga tokens.css i base.css. Każdy plik sekcji ładuje się na KAŻDEJ
 * stronie, więc wszystko siedzi pod prefiksem .dc-faq__ i nic stąd
 * nie może wyciec na cudze znaczniki.
 *
 * Zero wartości zahardkodowanych: kolory, odstępy, promienie, rozmiary
 * i czasy pochodzą wyłącznie z var(--dc-*). Jedyna liczba w pliku to
 * obrót strzałki o 180 stopni — to geometria rysunku, nie wartość projektowa.
 *
 * ANI JEDNEJ REGUŁY [data-theme='dark']. Karta, obramowanie, cień, tekst
 * i złoto strzałki mają w obu motywach ten sam kształt, a różnią się wyłącznie
 * kolorem — czyli dokładnie to, co tokeny podmieniają same. Zgodnie z regułą 10
 * blok dark w tym pliku oznaczałby, że został użyty zły token.
 */

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

/* Sekcja jest WĘŻSZA niż reszta motywu: makieta daje jej 900 px zamiast
   kontenerowych 1240 px. To nie ozdobnik — pytanie i odpowiedź czyta się
   w jednej kolumnie, a przy 1240 px wiersz odpowiedzi robi się dwa razy
   dłuższy, niż da się wygodnie przeczytać.

   Dlatego NIE używamy tu .dc-container. Klasa dałaby max-width 1240 px,
   który trzeba by natychmiast nadpisać — a wtedy jeden układ mieszkałby
   w dwóch plikach i o wyniku decydowałaby kolejność wczytania (reguła 8).
   Szerokość, wyśrodkowanie i marginesy boczne deklarujemy więc tutaj,
   w całości. .dc-section (pionowy oddech 64 px) zostaje z base.css,
   bo używamy jej bez zmian. */
.dc-faq {
  /* Promień karty pytania. To alias lokalny, a NIE nowy token: wartość
     pochodzi z tokens.css, a nazwa istnieje wyłącznie po to, żeby karta
     i obwódka fokusu czytały jedną liczbę (powód niżej, przy :focus-visible).
     Zmienne własne dziedziczą się normalnie, więc trafia i do <summary>. */
  --dc-faq-radius: var(--dc-radius-16);

  width: 100%;
  max-width: var(--dc-measure-2xl);
  margin-inline: auto;
  padding-inline: var(--dc-space-32);
}

/* ==========================================================================
   2. NAGŁÓWEK SEKCJI
   ========================================================================== */

.dc-faq__header {
  margin-block-end: var(--dc-space-32);
  text-align: center;
}

/* Nadtytuł. Wersaliki i rozstrzelenie robią z niego etykietę, nie zdanie.
 *
 * Kolor to --dc-accent-strong, a NIE --dc-accent-text, choć makieta ma tu
 * to drugie — reguła J: złoty TEKST bierze odcień mocniejszy, bo jaśniejszy
 * nie przechodzi progu 4,5:1 przy rozmiarze 12 px. --dc-accent-text zostaje
 * tam, gdzie złoto jest dekoracją — niżej, na kresce strzałki. */
.dc-faq__eyebrow {
  margin-block-end: var(--dc-space-12);
  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);
}

/* Jedyna właściwość, którą h2 dostaje od sekcji. Krój, wagę, interlinię,
   światło międzyliterowe i kolor ma już z base.css — powtarzanie ich byłoby
   przepisywaniem base.css, a nie stylowaniem sekcji.
   Rozmiar jest wyjątkiem: base.css daje h2 --dc-display-3 (30->40 px),
   a makieta chce w tej sekcji --dc-display-4 (26->34 px). Sześć pikseli
   u sufitu to nie szum eksportu, tylko inna waga nagłówka. */
.dc-faq__heading {
  font-size: var(--dc-display-4);
}

/* Akapit pod nagłówkiem — tylko gdy wołający poda 'lead' przez $args
   (strona „Kontakt", 2026-08-31); odstęp h2 → lead 14 jak w C.10. */
.dc-faq__lead {
  max-width: var(--dc-measure-lg);
  margin: var(--dc-space-14) auto 0;
  font-size: var(--dc-text-xl);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
}

/* ==========================================================================
   3. LISTA PYTAŃ
   ========================================================================== */

/* Jedna kolumna na każdej szerokości — świadomie, nie z zapomnienia.
   Reguła 9 (siatka auto-fit bez breakpointów) dotyczy układów, w których
   liczba kolumn ma wynikać z dostępnego miejsca. Tutaj kolumna jest jedna
   z definicji: dwa pytania obok siebie rozbiłyby porządek czytania
   i zmusiły wzrok do skakania między kolumnami przy każdym rozwinięciu.

   Stos deklarowany tutaj, a nie brany z .dc-stack: base'owa klasa ma
   gap 16 px, a makieta chce 10 px. Klasa użyta i natychmiast poprawiana
   rozdzieliłaby jeden układ na dwa pliki (reguła 8). */
.dc-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-10);
}

/* ==========================================================================
   4. KARTA POJEDYNCZEGO PYTANIA
   ========================================================================== */

/* overflow: hidden pełni tu dwie role naraz. Przycina tło pytania do
   zaokrąglonych rogów przy najeździe kursorem ORAZ przytrzymuje odpowiedź
   w obrysie karty, gdy ta wjeżdża od dołu (sekcja 7). Bez tego akapit
   wystawałby przez sekundę poza dolny róg.

   Cień jest POJEDYNCZY, nie parą jak w facts. Reguła 13 każe brać cienie
   jako gotowe pary tokenów, żeby nie składać ich z liczb — i tak tu jest,
   token jest jeden i wzięty w całości. Pary --dc-shadow-* + inset-top
   nie dokładamy, bo makieta w TEJ sekcji nie ma warstwy wewnętrznej
   (sprawdzone w product.html i product-dark.html), a rolę jasnej krawędzi
   pełni już jawne obramowanie --dc-border-subtle. Druga jasna krawędź
   byłaby dokładaniem czegoś, czego projekt nie ma. */
.dc-faq__entry {
  overflow: hidden;
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-faq-radius);
  background-color: var(--dc-surface-glass);
  box-shadow: var(--dc-shadow-md);
}

/* ==========================================================================
   5. PYTANIE — PRZEŁĄCZNIK
   ========================================================================== */

/* display: block, bo w środku stoi h3, czyli element blokowy. Przy
   domyślnym display: list-item przeglądarka dorysowuje trójkącik ujawnienia;
   zdejmujemy go dwoma zapisami, bo robi to dwoma mechanizmami:
   Firefox i Chrome przez list-style, Safari przez własny pseudoelement. */
.dc-faq__summary {
  display: block;
  padding: var(--dc-space-20) var(--dc-space-22);
  cursor: pointer;
  list-style: none;
}

.dc-faq__summary::-webkit-details-marker {
  display: none;
}

/* PIERWSZY W MOTYWIE STAN :focus W SEKCJI — stąd dłuższe uzasadnienie.
 *
 * base.css daje wszystkiemu obwódkę na zewnątrz elementu (outline-offset 2 px).
 * Tutaj by jej nie było widać: pytanie wypełnia kartę, a karta ma
 * overflow: hidden, więc obwódka narysowana na zewnątrz zostałaby przycięta
 * dokładnie na krawędzi karty. Ujemny offset rysuje ją WEWNĄTRZ elementu,
 * gdzie nic jej nie obcina. Grubość i kolor zostają z base.css — zmieniamy
 * stronę, po której obwódka leży, a nie jej wygląd.
 *
 * Promień musi zgadzać się z promieniem karty, inaczej obwódka ścina rogi.
 * Bierzemy go z aliasu --dc-faq-radius, a NIE przez border-radius: inherit,
 * i to nie jest kwestia gustu — inherit tu NIE DZIAŁA. Zmierzone w Chrome:
 * <details> jest renderowany z wewnętrznym drzewem cienia, a <summary>
 * wpada do tamtejszego <slot>. Dziedziczenie idzie po drzewie płaskim,
 * więc rodzicem <summary> do celów CSS jest ten slot, a nie <details> —
 * a slot ma promień 0, bo border-radius nie jest właściwością dziedziczoną.
 * Wynik: inherit daje 0px, mimo że karta ma 16px. Zwykły <div> w tym samym
 * układzie dziedziczy 16px poprawnie, więc pomyłkę widać dopiero na summary.
 * Zmienne własne dziedziczą się normalnie i tę pułapkę omijają.
 *
 * Zapis bije base'owe --dc-radius-6 wyższą specyficznością (0,2,0 wobec 0,1,0).
 *
 * Pierścień cieniem (.dc-focus-ring) nie wchodzi w grę z tego samego
 * powodu co outline na zewnątrz — box-shadow też przycina overflow. */
.dc-faq__summary:focus-visible {
  border-radius: var(--dc-faq-radius);
  outline-offset: calc(var(--dc-focus-offset) * -1);
}

/* Wiersz pytania. h3 bierze z base.css krój, wagę, interlinię, światło
   międzyliterowe i kolor — zostaje układ i rozmiar. */
.dc-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-16);
  font-size: var(--dc-text-lg);
}

/* Najazd kursorem PRZENOSIMY z makiety, choć reguła 14 każe być tu ostrożnym.
   Jej test wypada pozytywnie po raz pierwszy: <summary> JEST elementem
   interaktywnym, więc złocenie tekstu pod kursorem nie jest fałszywą
   obietnicą klikalności, tylko jej potwierdzeniem.
   Kolor znów --dc-accent-strong, nie --dc-accent-text: to nadal tekst,
   i to ten, który użytkownik akurat czyta (reguła J). */
.dc-faq__question-text {
  transition: color var(--dc-duration-base) var(--dc-ease);
}

.dc-faq__summary:hover .dc-faq__question-text {
  color: var(--dc-accent-strong);
}

/* Kółko ze strzałką. Kreska rysunku bierze kolor stąd (stroke="currentColor"),
   więc jeden zestaw ikon obsługuje oba motywy. Odcień ten sam co złoty
   tekst — od partii 3 audytu (design-audit.md, C.3) --dc-accent-text
   w motywie jasnym nie istnieje.
   flex: none, żeby kółko nie ścisnęło się przy długim pytaniu. */
.dc-faq__marker {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-32);
  height: var(--dc-space-32);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-accent-a10);
  color: var(--dc-accent-strong);
  transition: transform var(--dc-duration-base) var(--dc-ease);
}

/* Makieta podmienia tu dwa rysunki: strzałkę w dół i strzałkę w górę.
   To ten sam kształt obrócony o 180 stopni, więc obracamy jeden rysunek —
   rejestr ikon zostaje mniejszy o jedną pozycję, a stan zmienia się
   płynnie, czego podmiana rysunku dać nie może.
   180deg to geometria obrotu, nie wartość projektowa — dlatego liczba,
   a nie token (tak samo jak kąty gradientu obwódki w facts.css). */
.dc-faq__entry[open] .dc-faq__marker {
  transform: rotate(180deg);
}

/* ==========================================================================
   6. ODPOWIEDŹ
   ========================================================================== */

/* Interlinia nie jest tu deklarowana: body ma --dc-leading-relaxed (1.6),
   dziedziczone jako liczba, więc akapit liczy ją od własnego rozmiaru.
   Brak górnego paddingu jest zamierzony — odstęp od pytania daje już
   jego własny padding dolny. */
.dc-faq__answer {
  padding-inline: var(--dc-space-22);
  padding-block-end: var(--dc-space-20);
  font-size: var(--dc-text-md);
  color: var(--dc-text-muted);
  animation: dcFaqReveal var(--dc-duration-slow) var(--dc-ease-out);
}

/* Wjazd odpowiedzi. Animacja wisi wprost na akapicie, bez selektora [open]:
   zamknięty <details> trzyma swoje dzieci w display: none, a animacja
   startuje dopiero, gdy element zaczyna być wyświetlany. Rozwinięcie
   pytania samo ją więc uruchamia, i to za każdym razem.

   Makietowe dcRise ma jeszcze scale(.97). Pomijamy je: skalowanie akapitu
   rozmywa tekst na czas trwania animacji, a przy 18 px przesunięcia
   i tak nie widać różnicy. */
@keyframes dcFaqReveal {
  from {
    opacity: 0;
    transform: translateY(var(--dc-space-18));
  }
}

/* ==========================================================================
   7. RUCH OGRANICZONY
   ========================================================================== */

/* Sekcja animuje, więc dokłada własny blok (reguła 12) — ale z INNEGO
   powodu niż facts. Tam trwał obrót ciągły i globalne ścięcie czasu do
   0.01 ms znaczyło „doskocz do końca i stój", czyli zamarznięcie w losowym
   miejscu. Tutaj animacja jest jednorazowa, więc globalne ścięcie dałoby
   dokładnie to, o co chodzi: odpowiedź pojawia się natychmiast.

   Zapis zostaje mimo to, bo jest tańszy niż pamiętanie o tej różnicy przy
   każdej lekturze pliku, i dlatego, że animation: none zeruje animation-name,
   którego globalny !important nie obejmuje — czyli mówi wprost, czego chcemy,
   zamiast liczyć na skutek uboczny reguły z base.css. */
@media (prefers-reduced-motion: reduce) {
  .dc-faq__answer {
    animation: none;
  }
}