/**
 * loyalty-steps.css — „Jak to działa": cztery kroki w rzędzie, numer
 * w kółku, linia łącząca kółka.
 *
 * Wymaga tokens.css i base.css. Wszystko pod prefiksem .dc-loyalty-steps__.
 *
 * MAKIETA CIEMNA, MOTYW DWA MOTYWY: tekst bierze tokeny przełączane.
 * Kółko z numerem to „duża studzienka" z design-audit.md C.8 (tło a15,
 * obwódka a30, złoty numer --dc-accent-strong), w kształcie koła jak
 * w makiecie — makieta rysuje je ciemnym gradientem ze złotą poświatą,
 * a poświata w systemie należy wyłącznie do rangi 1 (C.8), więc kółko jej
 * nie dostaje.
 *
 * SCALENIA (reguła 15), zgłoszone w raporcie:
 *   odstęp pod nagłówkiem 60 -> --dc-space-56 (jak w tiers — jeden rytm
 *   nagłówków na stronie); siatka minmax(240px) -> --dc-grid-min-sm (220),
 *   odstęp 18 = --dc-space-18; kafel padding 20/18 = --dc-space-20 /
 *   --dc-space-18; kółko 64 = --dc-space-64, odstęp pod nim 22 =
 *   --dc-space-22; numer 20 = --dc-text-4xl; tytuł 16,5 -> --dc-text-2xl,
 *   odstęp 10 = --dc-space-10; tekst 13,5 -> --dc-text-base.
 *
 * LINIA ŁĄCZĄCA: położenie 8 % od krawędzi i wysokość w połowie kółka to
 * geometria rysunku, nie odstęp z rytmu — procent z makiety, wysokość
 * z tokenu kółka. Gaśnie do --dc-accent-a00, nie do transparent.
 */

/* ==========================================================================
   1. NAGŁÓWEK SEKCJI — jak w loyalty-tiers.css
   ========================================================================== */

/* .dc-loyalty-steps nie ma tu żadnej deklaracji — .dc-container
   i .dc-section z base.css (reguła 8). */

.dc-loyalty-steps__header {
  max-width: var(--dc-measure-lg);
  margin-inline: auto;
  margin-block-end: var(--dc-space-56);
  text-align: center;
}

.dc-loyalty-steps__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);
}

.dc-loyalty-steps__heading {
  font-size: var(--dc-display-3);
}

/* ==========================================================================
   2. RZĄD KROKÓW I LINIA
   auto-fit bez breakpointu (reguła 9); kolumny zmierzone — tabela
   w raporcie. Linia leży POD kółkami (z-index) i znika, gdy rząd zwija
   się do jednej kolumny — wtedy łączyłaby kółko z tekstem sąsiada.
   ========================================================================== */

.dc-loyalty-steps__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-sm), 100%), 1fr));
  gap: var(--dc-space-18);
}

.dc-loyalty-steps__list::before {
  content: '';
  position: absolute;
  z-index: var(--dc-z-base);
  inset-block-start: calc(var(--dc-space-20) + var(--dc-space-64) / 2);
  inset-inline: 8%;
  height: var(--dc-border);
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    var(--dc-accent-a00),
    var(--dc-accent-a30) 15%,
    var(--dc-accent-a30) 85%,
    var(--dc-accent-a00)
  );
}

/* ==========================================================================
   3. KROK
   ========================================================================== */

.dc-loyalty-steps__item {
  position: relative;
  z-index: var(--dc-z-raised);
  padding-block: var(--dc-space-20);
  padding-inline: var(--dc-space-18);
  text-align: center;
}

/* Kółko — duża studzienka C.8 w kształcie koła; tło nieprzezroczyste
   pod spodem (--dc-bg), żeby linia nie prześwitywała przez tint a15. */
.dc-loyalty-steps__numeral {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-64);
  height: var(--dc-space-64);
  margin-inline: auto;
  margin-block-end: var(--dc-space-22);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-bg);
  background-image: linear-gradient(var(--dc-accent-a15), var(--dc-accent-a15));
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-4xl);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-none);
  color: var(--dc-accent-strong);
}

/* h3 bierze krój, wagę i interlinię z base.css — tu rozmiar i odstęp. */
.dc-loyalty-steps__title {
  margin-block-end: var(--dc-space-10);
  font-size: var(--dc-text-2xl);
}

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