/**
 * loyalty-rules.css — „Zasady programu": lepka kolumna z nagłówkiem
 * i przyciskiem, obok pięć numerowanych kart.
 *
 * Wymaga tokens.css i base.css. Wszystko pod prefiksem .dc-loyalty-rules__;
 * .dc-icon (rejestr) dostrajana wyłącznie w selektorze potomnym.
 *
 * MAKIETA CIEMNA, MOTYW DWA MOTYWY: karty zasad biorą przepis karty
 * szklanej (fraction-compare.css), tekst tokeny przełączane, złoty numer
 * --dc-accent-strong (reguła J; makieta: złoto .7).
 *
 * SCALENIA (reguła 15), zgłoszone w raporcie:
 *   siatka minmax(320px) = --dc-grid-min-lg, odstęp 56 = --dc-space-56;
 *   lepka kolumna top 110 -> --dc-space-80 (jak scroll-margin kotwic pod
 *   lepkim nagłówkiem); nagłówek clamp(30, 3.6vw, 46) -> --dc-display-3,
 *   odstęp do leadu 18 -> --dc-space-14 (C.10), lead 15,5 -> --dc-text-xl,
 *   odstęp do przycisku 30 -> --dc-space-32; przycisk: pigułka -> r16
 *   rangi 2, padding 14/28 -> przepis hero.css 16/28, 14,5 -> --dc-text-lg;
 *   karty co 14 = --dc-space-14, promień 18 = --dc-radius-18, padding 24/26
 *   -> --dc-space-24, odstęp numer–treść 20 = --dc-space-20; numer 15
 *   = --dc-text-lg, odsunięty 2 = --dc-space-2; tytuł 15,5 -> --dc-text-xl,
 *   odstęp 6 = --dc-space-6; tekst 13,5 -> --dc-text-base.
 *
 * ZDJĘTE Z MAKIETY: rozjaśnienie i złota obwódka kart na najeździe
 * (reguła 14, C.2), plama tła (warstwa atmosfery strony).
 */

/* ==========================================================================
   1. SIATKA — dwie kolumny auto-fit, wyrównane do góry
   ========================================================================== */

/* .dc-loyalty-rules nie ma tu żadnej deklaracji (reguła 8). */

.dc-loyalty-rules__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-lg), 100%), 1fr));
  gap: var(--dc-space-56);
  align-items: start;
}

/* ==========================================================================
   2. KOLUMNA LEPKA
   Przy jednej kolumnie (poniżej ~700 px) nagłówek stoi nad listą i lepkość
   nie ma czego trzymać — sticky w siatce jednokolumnowej nie ma skutku,
   bo element i tak przewija się razem z zawartością własnej komórki.
   ========================================================================== */

.dc-loyalty-rules__intro {
  position: sticky;
  inset-block-start: var(--dc-space-80);
}

.dc-loyalty-rules__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-rules__heading {
  margin-block-end: var(--dc-space-14);
  font-size: var(--dc-display-3);
}

.dc-loyalty-rules__lead {
  margin-block-end: var(--dc-space-32);
  font-size: var(--dc-text-xl);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
}

/* ==========================================================================
   3. PRZYCISK — RANGA 2 (C.1), przepis .dc-hero__cta--secondary
   Ikona pobrania w złocie jak w makiecie; tekst --dc-text. Na najeździe
   przycisk odwraca kolory (inverse), ikona zostaje złota — złoto czyta
   się na obu tłach.
   ========================================================================== */

.dc-loyalty-rules__terms {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-10);
  padding: var(--dc-space-16) var(--dc-space-28);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface-glass);
  color: var(--dc-text);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-none);
  text-decoration: none;
  -webkit-backdrop-filter: var(--dc-blur-sm);
  backdrop-filter: var(--dc-blur-sm);
  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),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-loyalty-rules__terms .dc-icon {
  flex: none;
  color: var(--dc-accent-strong);
}

.dc-loyalty-rules__terms:hover {
  border-color: var(--dc-surface-inverse);
  background-color: var(--dc-surface-inverse);
  color: var(--dc-surface);
}

.dc-loyalty-rules__terms:hover .dc-icon {
  color: var(--dc-accent);
}

.dc-loyalty-rules__terms:active {
  transform: scale(0.97);
}

.dc-loyalty-rules__terms:focus-visible {
  border-radius: var(--dc-radius-16);
}

/* ==========================================================================
   4. LISTA ZASAD — pionowy stos kart
   ========================================================================== */

.dc-loyalty-rules__list {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-14);
}

.dc-loyalty-rules__item {
  display: flex;
  gap: var(--dc-space-20);
  padding: var(--dc-space-24);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-18);
  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);
}

/* Numer — dekoracja (aria-hidden w znaczniku), złoto tekstowe --dc-accent-strong. */
.dc-loyalty-rules__numeral {
  flex: none;
  padding-block-start: var(--dc-space-2);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-snug);
  color: var(--dc-accent-strong);
}

.dc-loyalty-rules__body {
  min-width: 0;
}

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

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