/**
 * trust-badges.css — pasek czterech gwarancji sklepu.
 *
 * Wymaga tokens.css i base.css. Każdy plik sekcji ładuje się na KAŻDEJ
 * stronie, więc wszystko siedzi pod prefiksem .dc-trust-badges__ 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-*).
 */

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

/* Szerokość i marginesy boczne bierze z .dc-container w znaczniku.
   Tu zostaje tylko oddech pod paskiem — sekcja siedzi tuż pod hero
   i nie ma nad sobą własnego odstępu. */
.dc-trust-badges {
  padding-block-end: var(--dc-space-8);
}

/* Szklana karta. 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-trust-badges__card {
  position: relative;
  isolation: isolate;
  padding: var(--dc-space-8);
  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-xl), var(--dc-shadow-inset-top);
}

/* ==========================================================================
   2. OBWÓDKA — DOSTROJENIE KOMPONENTU
   Konstrukcja siedzi w assets/css/components/ring.css, warstwy wstawia
   znacznik. Sekcji zostaje jedno: to, czym RÓŻNI SIĘ jej wystąpienie.
   ========================================================================== */

/* Pokrętła ustawiamy na karcie, nie na warstwie: zmienne własne dziedziczą
   się w dół, więc jedna reguła obsługuje wszystkie trzy <span>-y, a czytający
   widzi decyzję tam, gdzie opisany jest wygląd karty.

   FAZA I ZWROT — numer 5 z rejestru w components/ring.css: start o 5/12
   obrotu (150°) i nieparzysty numer, czyli obrót W LEWO. Liczba jest
   umowna — znaczy tylko, że żadna inna sekcja jej nie ma; nie zależy od
   miejsca sekcji na stronie. W OBU motywach tak samo: dawne „w ciemnym
   wolniej i w drugą stronę" (Rev / --dc-duration-ring-slow, z makiety
   ciemnej) zdjęte w partii 5 audytu — tempo jest jedno, --dc-duration-ring,
   a zwrot różnicuje sekcje, nie motywy.

   POŚWIATA Z PROMIENIEM KARTY. Karta ma --dc-radius-22, a domyślna poświata
   komponentu --dc-radius-28 — była bardziej okrągła niż karta, którą
   otacza (audyt, B.5). Rant dziedziczy promień sam; poświata leży poza
   kartą i dziedziczyć nie może, stąd pokrętło. */
.dc-trust-badges__card {
  --dc-ring-spin: dcRingSpinRev;
  --dc-ring-delay: calc(var(--dc-duration-ring) * -5 / 12);
  --dc-ring-halo-radius: var(--dc-radius-22);
}

/* ==========================================================================
   3. SIATKA KAFLI
   ========================================================================== */

/* Kolumny wynikają z dostępnej szerokości, nie z breakpointu — tak buduje
   siatki makieta (patrz tokens.css, sekcja 8). Warstwa nad obwódką. */
.dc-trust-badges__list {
  position: relative;
  z-index: var(--dc-z-raised);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-sm), 100%), 1fr));
  gap: var(--dc-space-14);
}

/* Ikona po lewej, dwa wiersze tekstu po prawej — bez opakowania na tekst.
   Ikona rozpięta na oba wiersze zastępuje zagnieżdżonego diva. */
.dc-trust-badges__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--dc-space-14);
  padding: var(--dc-space-16) var(--dc-space-18);
  border-radius: var(--dc-radius-16);
}

.dc-trust-badges__icon {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  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):
     ikona w studzience nie jest już jaśniejsza od nadtytułu nad nią. */
  color: var(--dc-accent-strong);
}

/* ==========================================================================
   4. TEKST KAFLA
   Tytuł nie jest nagłówkiem: cztery <h3> bez treści pod spodem zaśmieciłyby
   konspekt każdej strony, na której ta sekcja się pojawi. Rangę niesie styl.
   ========================================================================== */

.dc-trust-badges__title {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-tight);
  color: var(--dc-text);
}

.dc-trust-badges__caption {
  margin-block-start: var(--dc-space-2);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-snug);
  color: var(--dc-text-subtle);
}

/* 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. */