/**
 * facts.css — sześć faktów o produkcie w jednej szklanej karcie.
 *
 * Wymaga tokens.css i base.css. Każdy plik sekcji ładuje się na KAŻDEJ
 * stronie, więc wszystko siedzi pod prefiksem .dc-facts__ i nic stąd
 * nie może wyciec na cudze znaczniki.
 *
 * Zero wartości zahardkodowanych: kolory, odstępy, promienie i czasy
 * pochodzą wyłącznie z var(--dc-*) — po wyprowadzeniu obwódki do
 * components/ring.css bez ani jednego wyjątku. Kąty gradientu obrotu
 * pojechały razem z nią.
 */

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

/* .dc-facts nie ma tu ani jednej deklaracji i to jest zamierzone.
   Szerokość i marginesy boczne daje .dc-container, pionowy oddech 64 px
   daje .dc-section — obie klasy z base.css, obie użyte BEZ modyfikacji,
   więc nie ma czego przepisywać do sekcji. Sama klasa .dc-facts zostaje
   w znaczniku jako nazwa bloku dla klas potomnych. */

/* Szklana karta obejmująca całą sekcję. isolation: isolate zamyka warstwy
   obwódki we własnym kontekście nakładania — bez tego z-index warstw
   konkurowałby z resztą strony i sąsiednia sekcja mogłaby wjechać między
   obwódkę a treść. */
.dc-facts__card {
  position: relative;
  isolation: isolate;
  padding: var(--dc-space-48);
  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);
}

/* ==========================================================================
   2. OBWÓDKA — FAZA I ZWROT
   Konstrukcja siedzi w assets/css/components/ring.css, warstwy wstawia
   znacznik. Geometria nie wymaga ani jednej linii: warstwy leżące na karcie
   dziedziczą jej promień same, poświata potrzebuje --dc-radius-28 i tyle
   właśnie wynosi domyślna wartość komponentu. Tempo: makieta ma tu 8 s
   wobec 7 s — scalone do --dc-duration-ring (reguła 15).

   Sekcji zostaje jedno — faza i zwrot z rejestru w ring.css: numer 1,
   czyli start o 1/12 obrotu (30°) i nieparzysty numer = obrót W LEWO.
   Liczba jest umowna: znaczy tylko, że żadna inna sekcja jej nie ma; nie
   zależy od miejsca sekcji na stronie (partia 5 audytu). W obu motywach
   tak samo. Pokrętła na karcie, nie na warstwie — zmienne własne dziedziczą
   się w dół.
   ========================================================================== */

.dc-facts__card {
  --dc-ring-spin: dcRingSpinRev;
  --dc-ring-delay: calc(var(--dc-duration-ring) * -1 / 12);
}

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

/* Warstwa nad obwódką — bez position/z-index treść zostałaby przykryta
   przez warstwy obwódki, które są elementami pozycjonowanymi. */
.dc-facts__header {
  position: relative;
  z-index: var(--dc-z-raised);
  max-width: var(--dc-measure-lg);
  margin-inline: auto;
  margin-block-end: var(--dc-space-48);
  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. Powód jest zmierzony: --dc-accent-text (#9a8230) daje na
 * złożonym tle karty 3,52:1, czyli poniżej progu 4,5:1 dla tekstu 12 px.
 * --dc-accent-strong (#7c6420) daje 5,33:1 w tym samym miejscu.
 *
 * To wybór MIEJSCA, nie zmiana palety: złoto marki zostaje nietknięte tam,
 * gdzie jest dekoracją (kreska ikony niżej, tła, obwódki), a tekst dostaje
 * ciemniejszy odcień z tej samej rodziny. Token nie jest ruszany —
 * w motywie ciemnym obie zmienne i tak wskazują na #D8B65E.
 */
.dc-facts__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);
}

/* h2 nie ma tu żadnej reguły. base.css daje mu już krój nagłówkowy,
   --dc-display-3 (clamp 30->40 px, dokładnie tyle co makieta), wagę 800,
   światło międzyliterowe i kolor. Dopisanie tego drugi raz byłoby
   przepisaniem base.css, a nie stylowaniem sekcji. */

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

/* Kolumny wynikają z dostępnej szerokości, nie z breakpointu — tak buduje
   siatki makieta (patrz tokens.css, sekcja 8). Siatka jest deklarowana tutaj,
   a nie brana z .dc-grid: dokładamy jej position i z-index, a base'owa klasa
   ma też inny gap. Klasa użyta i natychmiast poprawiana rozdzieliłaby jeden
   układ na dwa pliki. */
.dc-facts__list {
  position: relative;
  z-index: var(--dc-z-raised);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-md), 100%), 1fr));
  gap: var(--dc-space-20);
}

/* ==========================================================================
   5. KAFEL
   ========================================================================== */

/* Szkło mocniejsze niż karta pod spodem — kafel ma się od niej odcinać.
   Makieta robi to samo, tylko łagodniej (.62 wobec .46); tokeny dają
   ten sam porządek warstw parą glass/glass-soft.

   Makieta dokłada tu jeszcze dwa wewnętrzne rozjaśnienia (poświata od dołu
   i włosowa obwódka). Tokeny cieni ich nie mają, a wymyślanie ich przy
   okazji jednej sekcji dałoby token pod jeden przypadek — zgłoszone
   w „Do uzupełnienia".

   Cień o stopień NIŻSZY niż karta-rodzic (--dc-shadow-lg pod --dc-shadow-xl;
   design-audit.md, C.4): kafel nie może leżeć „na" karcie, jeśli rzuca ten
   sam cień co ona. Do partii 4 audytu oba miały xl. */
.dc-facts__item {
  padding: var(--dc-space-32);
  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-xl);
  backdrop-filter: var(--dc-blur-xl);
  box-shadow: var(--dc-shadow-lg), var(--dc-shadow-inset-top);
}

/* Makieta ma na kaflu style najazdu kursorem (uniesienie o 6 px) razem
   z transition. W kaflu nie da się kliknąć — nie ma tu odnośnika ani
   przycisku — a runtime makiety nigdy tych stylów nie wyrenderował.
   Reakcja na kursor na elemencie nieinteraktywnym jest fałszywą obietnicą,
   więc nie przenosimy ani najazdu, ani samotnego transition. */

.dc-facts__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-48);
  height: var(--dc-space-48);
  margin-block-end: var(--dc-space-18);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-accent-a15);

  /* Ikona rysowana jest stroke="currentColor", więc bierze kolor stąd
     i przełącza się razem z motywem bez drugiego zestawu rysunków.
     Odcień ten sam co złoty tekst (design-audit.md, C.3, partia 3). */
  color: var(--dc-accent-strong);
}

/* ==========================================================================
   6. TEKST KAFLA
   Tytuł JEST tu nagłówkiem (h3), bo zapowiada akapit pod sobą — inaczej
   niż etykiety kafli w trust-badges, pod którymi nie ma treści.
   Z base.css bierze krój, wagę, interlinię i kolor; zostaje rozmiar
   i odstęp do akapitu.
   ========================================================================== */

.dc-facts__title {
  margin-block-end: var(--dc-space-8);
  font-size: var(--dc-text-3xl);
}

/* Interlinia nie jest tu deklarowana: body ma --dc-leading-relaxed (1.6),
   dziedziczone jako liczba, więc akapit liczy ją od własnego rozmiaru.
   To dokładnie ta wartość, którą ma makieta. */
.dc-facts__text {
  font-size: var(--dc-text-md);
  color: var(--dc-text-muted);
}

/* Bloku prefers-reduced-motion ta sekcja nie ma i nie potrzebuje: jedyny
   ruch w niej to obwódka, a ta wyłącza się sama w ring.css (reguła 12 —
   blok dokłada ten, kto animuje). Gdy sekcja dostanie własną animację,
   blok wraca tutaj. */