/**
 * loyalty-tiers.css — „Progi programu": nagłówek i cztery karty progów,
 * ostatnia ciemna z łukiem obwódki i plakietką.
 *
 * Wymaga tokens.css, base.css i components/ring.css. Wszystko pod prefiksem
 * .dc-loyalty-tiers__.
 *
 * MAKIETA JEST CIEMNA, MOTYW MA DWA MOTYWY: trzy zwykłe karty biorą
 * przepis karty szklanej z fraction-compare.css (--dc-surface-glass,
 * --dc-border-subtle, --dc-blur-xl, --dc-shadow-lg + inset-top), więc
 * w jasnym motywie są jasne. Karta NAJWYŻSZEGO progu jest ciemna w obu
 * motywach — makieta wyróżnia ją tak jak kartę klubową. Jej tło to para
 * --dc-surface-inverse / --dc-surface (jedna reguła [data-theme] na kolor,
 * ten sam zapis co panel help-cta) plus złota poświata z drabinki alfy
 * w lewym górnym rogu (makieta: radial #2e1f0c przy 30 % 0 %) — bez
 * literału.
 *
 * SCALENIA (reguła 15), zgłoszone w raporcie:
 *   siatka minmax(240px) -> --dc-grid-min-sm (220), odstęp 18 = --dc-space-18;
 *   karta: promień 20 -> --dc-radius-22 (karta pierwszego rzędu, C.9),
 *   padding 30/26 -> --dc-space-28 / --dc-space-24;
 *   nazwa progu: 11 / 700 / .18em -> nadtytuł karty z C.8 (12 / 600 /
 *   --dc-tracking-wider, --dc-text-subtle), odstęp 18 = --dc-space-18;
 *   procent 52 px -> --dc-numeral-lg (44), odstęp 6 = --dc-space-6;
 *   podpis 13,5 -> --dc-text-base, odstęp 22 = --dc-space-22;
 *   „od 4 t" 20 = --dc-text-4xl, „w sezonie" 12,5 -> --dc-text-sm;
 *   przypis 13 = --dc-text-base, odstęp 26 -> --dc-space-24;
 *   nagłówek: clamp(30, 3.6vw, 46) -> --dc-display-3, odstęp pod
 *   nagłówkiem 56 = --dc-space-56, lead 16 = --dc-text-xl.
 *
 * ZDJĘTE Z MAKIETY: uniesienie kart na najeździe (reguła 14, C.2) oraz
 * migotanie złota na „8%" (motyw nie ma tekstu gradientowego; złoty tekst
 * na ciemnej karcie to --dc-accent, jak w loyalty-cta).
 */

/* ==========================================================================
   1. NAGŁÓWEK SEKCJI
   Wyśrodkowany, do 640 px (--dc-measure-lg trafia w makietę co do piksela).
   ========================================================================== */

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

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

/* Nadtytuł — jedna czwórka z C.8: 12 / 600 / widest, odstęp 14 do h2,
   złoty tekst na jasnym tle bierze --dc-accent-strong (reguła J). */
.dc-loyalty-tiers__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);
}

/* Krój, waga, trakt i interlinia z base.css; tu rozmiar i odstęp do leadu
   (14, C.10). */
.dc-loyalty-tiers__heading {
  margin-block-end: var(--dc-space-14);
  font-size: var(--dc-display-3);
}

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

/* ==========================================================================
   2. SIATKA KART
   auto-fit bez breakpointu (reguła 9); liczba kolumn zmierzona — tabela
   w raporcie. min(..., 100%) chroni przed przepełnieniem przy 390 px.
   ========================================================================== */

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

/* ==========================================================================
   3. KARTA PROGU — szkło jak karta frakcji w fraction-compare.css
   position: relative i isolation: isolate na KAŻDEJ karcie, choć łuk ma
   tylko ostatnia — jedna reguła zamiast dwóch, a warstwa bez gospodarza
   i tak nic nie kosztuje.
   ========================================================================== */

.dc-loyalty-tiers__card {
  position: relative;
  isolation: isolate;
  padding-block: var(--dc-space-28);
  padding-inline: var(--dc-space-24);
  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);
}

.dc-loyalty-tiers__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-10);
  margin-block-end: var(--dc-space-18);
}

/* Nadtytuł karty (C.8): 12 / 600 / wider / subtle. h3 traci tu rozmiar
   i krój nagłówka z base.css — to etykieta, nie tytuł kafla. */
.dc-loyalty-tiers__name {
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-wider);
  text-transform: uppercase;
  line-height: var(--dc-leading-snug);
  color: var(--dc-text-subtle);
}

/* Procent: liczebnik --dc-numeral-lg, trakt -.03em = --dc-tracking-tighter. */
.dc-loyalty-tiers__percent {
  margin-block-end: var(--dc-space-6);
  font-family: var(--dc-font-display);
  font-size: var(--dc-numeral-lg);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-none);
  letter-spacing: var(--dc-tracking-tighter);
  color: var(--dc-text);
}

.dc-loyalty-tiers__unit {
  margin-block-end: var(--dc-space-22);
  font-size: var(--dc-text-base);
  color: var(--dc-text-muted);
}

/* Kreska nad progiem wejścia to górne obramowanie tego wiersza (makieta:
   osobny <div> 1 px z marginesem 18) — jeden element mniej. */
.dc-loyalty-tiers__from {
  display: flex;
  align-items: baseline;
  gap: var(--dc-space-8);
  padding-block-start: var(--dc-space-18);
  border-block-start: var(--dc-border) solid var(--dc-border-line);
}

.dc-loyalty-tiers__tons {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-4xl);
  font-weight: var(--dc-weight-black);
  color: var(--dc-accent-strong);
}

.dc-loyalty-tiers__season {
  font-size: var(--dc-text-sm);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   4. NAJWYŻSZY PRÓG — ciemna karta w obu motywach
   Tekst bierze tokeny -on-dark i --dc-accent (jak wnętrze karty klubowej);
   biele z alfą przez color-mix na --dc-text-on-dark (technika z help-cta).
   ========================================================================== */

.dc-loyalty-tiers__card--max {
  border-color: var(--dc-border-accent);
  background-color: var(--dc-surface-inverse);
  background-image: radial-gradient(
    ellipse 120% 90% at 30% 0%,
    var(--dc-accent-a20),
    var(--dc-accent-a05) 55%,
    var(--dc-accent-a00) 100%
  );
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--dc-shadow-xl), inset 0 var(--dc-border) 0 var(--dc-accent-a20);
}

[data-theme='dark'] .dc-loyalty-tiers__card--max {
  background-color: var(--dc-surface);
}

/* Faza i zwrot łuku — numer 8 z rejestru w components/ring.css (start
   o 8/12 obrotu, parzysty = w prawo). Numer należy do ai-assistant, który
   na stronie klubu nie stoi; rejestr 12 numerów jest cały zajęty —
   zgłoszone w raporcie (decisions.md 2026-08-30, „rejestr 12 -> 24"). */
.dc-loyalty-tiers__card--max {
  --dc-ring-spin: dcRingSpin;
  --dc-ring-delay: calc(var(--dc-duration-ring) * -8 / 12);
}

.dc-loyalty-tiers__card--max .dc-loyalty-tiers__name,
.dc-loyalty-tiers__card--max .dc-loyalty-tiers__percent,
.dc-loyalty-tiers__card--max .dc-loyalty-tiers__tons {
  color: var(--dc-accent);
}

/* --dc-text-on-dark-muted (.6 / .58) — jak podpisy w savings-calculator
   i loyalty-compare na tym samym ciemnym tle; biel 50 % schodziła tam
   w motywie ciemnym do 4,3–4,5:1 (zmierzone 2026-08-31). */
.dc-loyalty-tiers__card--max .dc-loyalty-tiers__unit,
.dc-loyalty-tiers__card--max .dc-loyalty-tiers__season {
  color: var(--dc-text-on-dark-muted);
}

.dc-loyalty-tiers__card--max .dc-loyalty-tiers__from {
  border-block-start-color: var(--dc-accent-a20);
}

/* Plakietka „Max" — flaga z C.8: pełne złoto, --dc-on-accent, bez poświaty,
   ten sam przepis co .dc-volume-picker__flag (tu w toku, nie absolutna). */
.dc-loyalty-tiers__flag {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: var(--dc-space-4) var(--dc-space-10);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-accent);
  color: var(--dc-on-accent);
  font-size: var(--dc-text-2xs);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-wide);
  text-transform: uppercase;
}

/* ==========================================================================
   5. PRZYPIS
   ========================================================================== */

.dc-loyalty-tiers__note {
  margin-block-start: var(--dc-space-24);
  font-size: var(--dc-text-base);
  text-align: center;
  color: var(--dc-text-subtle);
}