/**
 * loyalty-compare.css — „Porównanie": dwie karty (wiersze tabeli) — bez
 * karty i z kartą — po cztery warunki każda.
 *
 * Wymaga tokens.css, base.css i components/ring.css. Wszystko pod prefiksem
 * .dc-loyalty-compare__; .dc-icon (rejestr) i .dc-ring (komponent)
 * dostrajane wyłącznie w selektorach potomnych pod prefiksem sekcji.
 *
 * KONSTRUKCJA Z fraction-compare.css: <tbody> siatką kart, <tr> kartą
 * (display: grid zachowuje semantykę table/row/cell), <thead> wypada
 * z toku przez .dc-sr-only. Jeden układ, bez progu (docblock .php).
 *
 * KARTA „Z KARTĄ" CIEMNA W OBU MOTYWACH — ten sam przepis co najwyższy próg
 * w loyalty-tiers.css: para --dc-surface-inverse / --dc-surface (jedna reguła
 * [data-theme] na kolor), złota poświata z drabinki alfy, obwódka
 * --dc-border-accent, tekst -on-dark.
 *
 * SCALENIA (reguła 15), zgłoszone w raporcie:
 *   szerokość siatki 960 -> --dc-measure-2xl (900), minmax(320px)
 *   = --dc-grid-min-lg, odstęp 20 = --dc-space-20; karta: promień 22
 *   = --dc-radius-22, padding 34/32 -> --dc-space-32; nazwa 18
 *   = --dc-text-3xl, odstęp pod nią 26 -> --dc-space-24; warunki co 18
 *   = --dc-space-18, ikona 17 -> 16, odstęp 12 = --dc-space-12; tytuł 14
 *   = --dc-text-md, odstęp 3 -> --dc-space-4; opis 12,5 -> --dc-text-sm;
 *   okienko sygnetu 34 -> --dc-space-32 z r8 (mała studzienka C.8);
 *   nagłówek clamp(30, 3.6vw, 46) -> --dc-display-3, odstęp 52 ->
 *   --dc-space-56 (jak reszta nagłówków strony).
 *
 * KOLORY TEKSTU „BEZ KARTY": makieta przygasza całą kartę (nazwa .6,
 * tytuły .65, opisy .38). W motywie: nazwa i tytuły --dc-text-secondary,
 * opisy --dc-text-subtle, kreska --dc-text-subtle — hierarchia z makiety
 * na tokenach z kontrastem powyżej progu.
 */

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

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

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

.dc-loyalty-compare__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-compare__heading {
  font-size: var(--dc-display-3);
}

/* ==========================================================================
   2. STRUKTURA TABELI
   ========================================================================== */

.dc-loyalty-compare__table {
  width: 100%;
  max-width: var(--dc-measure-2xl);
  margin-inline: auto;
}

.dc-loyalty-compare__table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-lg), 100%), 1fr));
  gap: var(--dc-space-20);
}

/* ==========================================================================
   3. KARTA (wiersz tabeli) — szkło jak w fraction-compare.css
   position + isolation: gospodarz łuku obwódki w karcie wyróżnionej.
   ========================================================================== */

.dc-loyalty-compare__card {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  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);
}

/* Nagłówek karty: nazwa po lewej, okienko sygnetu po prawej.
   font-weight: 400 na komórce — przeglądarka pogrubia <th>, a wagę ma nieść
   sama nazwa (reset jak w origin i fraction-compare). */
.dc-loyalty-compare__cell--name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-12);
  margin-block-end: var(--dc-space-24);
  font-weight: 400;
  text-align: left;
}

.dc-loyalty-compare__name {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-3xl);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-text-secondary);
}

/* ==========================================================================
   4. WARUNEK — ikona i tekst
   ========================================================================== */

.dc-loyalty-compare__cell--value {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-12);
  text-align: left;
}

.dc-loyalty-compare__cell--value + .dc-loyalty-compare__cell--value {
  margin-block-start: var(--dc-space-18);
}

/* Ikona schodzi o 2 px, żeby jej środek stał na linii pierwszego wiersza
   tytułu (makieta: margin-top 2). Kreska przygaszona, ptaszek złoty. */
.dc-loyalty-compare__icon {
  flex: none;
  display: flex;
  margin-block-start: var(--dc-space-2);
  color: var(--dc-text-subtle);
}

.dc-loyalty-compare__cell--ok .dc-loyalty-compare__icon {
  color: var(--dc-accent-strong);
}

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

.dc-loyalty-compare__title {
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-snug);
  color: var(--dc-text-secondary);
}

.dc-loyalty-compare__text {
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   5. KARTA WYRÓŻNIONA — ciemna w obu motywach, z łukiem i sygnetem
   ========================================================================== */

.dc-loyalty-compare__card--highlight {
  border-color: var(--dc-border-accent);
  background-color: var(--dc-surface-inverse);
  background-image: radial-gradient(
    ellipse 130% 90% at 25% -5%,
    var(--dc-accent-a20),
    var(--dc-accent-a05) 50%,
    var(--dc-accent-a00) 100%
  );
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--dc-shadow-xl);
}

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

/* ŁUK STOI W KOMÓRCE, NIE W KARCIE — wiersz tabeli (<tr>) przyjmuje wyłącznie
   komórki, więc <span class="dc-ring"> mieszka w <th scope="row">. Pozycję
   liczy względem karty (jedyny position: relative w górę drzewa), ale
   komponent bierze promień przez border-radius: inherit — od RODZICA, czyli
   komórki bez promienia: łuk biegł po kwadracie (zgłoszone 2026-08-31).
   Komponent celowo nie ma pokrętła promienia (ring.css, sekcja 1), bo
   warstwa leżąca w karcie zawsze ma jej promień — tu jest o poziom głębiej,
   więc promień karty podaje sekcja. Wartość ta sama co na .dc-loyalty-compare__card. */
.dc-loyalty-compare__card--highlight .dc-ring {
  border-radius: var(--dc-radius-22);
}

/* Faza i zwrot łuku — numer 1 z rejestru (start o 1/12 obrotu,
   nieparzysty = w lewo; makieta też kręci tu w lewo, dcRingSpinRev).
   Numer należy do facts, która na stronie klubu nie stoi — rejestr
   zgłoszony w raporcie. */
.dc-loyalty-compare__card--highlight {
  --dc-ring-spin: dcRingSpinRev;
  --dc-ring-delay: calc(var(--dc-duration-ring) * -1 / 12);
}

.dc-loyalty-compare__card--highlight .dc-loyalty-compare__name,
.dc-loyalty-compare__card--highlight .dc-loyalty-compare__title {
  color: var(--dc-text-on-dark);
}

/* --dc-text-on-dark-muted, nie biel 50 %: na tle --dc-surface w motywie
   ciemnym 50 % dawało 4,50:1 na granicy progu (zmierzone 2026-08-31);
   ten sam wybór co w savings-calculator i w progu Max. */
.dc-loyalty-compare__card--highlight .dc-loyalty-compare__text {
  color: var(--dc-text-on-dark-muted);
}

.dc-loyalty-compare__card--highlight .dc-loyalty-compare__icon {
  color: var(--dc-accent);
}

/* Okienko sygnetu — mała studzienka (28–32 px = r8, C.8), prawie czarne
   tło parą tokenów jak w loyalty-cta (aside-mark). */
.dc-loyalty-compare__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-32);
  height: var(--dc-space-32);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-8);
  background-color: var(--dc-surface-inverse);
}

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