/**
 * origin.css — porównanie jakości węgla wg pochodzenia.
 *
 * Wymaga tokens.css, base.css i components/ring.css. Wszystko pod prefiksem
 * .dc-origin__, nic stąd nie wycieka na cudze znaczniki.
 *
 * Zero wartości zahardkodowanych: kolory, odstępy, promienie i czasy
 * pochodzą wyłącznie z var(--dc-*). Wyjątek jednego rodzaju: proporcje
 * kolumn tabeli (1.6fr/1fr/1fr/1fr/1.2fr) to geometria układu, nie wartość
 * projektowa z palety — tak samo jak repeat(auto-fit, minmax(...)) w base.css
 * nie jest tokenizowane.
 */

/* ==========================================================================
   1. RAMA SEKCJI I KARTA
   ========================================================================== */

/* .dc-origin nie ma tu żadnej deklaracji — szerokość i marginesy boczne
   daje .dc-container, pionowy oddech .dc-section, obie z base.css bez
   modyfikacji (reguła 8). Klasa zostaje w znaczniku jako nazwa bloku. */

.dc-origin__card {
  position: relative;
  isolation: isolate;
  padding: var(--dc-space-48);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-28);
  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 — FAZA I ZWROT
   Konstrukcja siedzi w assets/css/components/ring.css, warstwy wstawia
   znacznik. Tempo i geometria: w makiecie OBIE warstwy (poświata i rant)
   kręcą się w tym samym tempie 7 s w obu motywach — dokładnie domyślne
   --dc-duration-ring komponentu, nie ma czego dostrajać.

   Sekcji zostaje jedno — faza i zwrot z rejestru w ring.css: numer 4,
   czyli start o 4/12 obrotu (120°) i parzysty numer = obrót w prawo
   (domyślny dcRingSpin, wypisany jawnie, żeby rejestr był czytelny
   u siebie). Liczba jest umowna: znaczy tylko, że żadna inna sekcja jej
   nie ma; nie zależy od miejsca sekcji na stronie (partia 5 audytu).
   W obu motywach tak samo. Pokrętła na karcie, nie na warstwie — zmienne
   własne dziedziczą się w dół.
   ========================================================================== */

.dc-origin__card {
  --dc-ring-spin: dcRingSpin;
  --dc-ring-delay: calc(var(--dc-duration-ring) * -4 / 12);
}

/* ==========================================================================
   3. NAGŁÓWEK SEKCJI
   ========================================================================== */

.dc-origin__header {
  position: relative;
  z-index: var(--dc-z-raised);
  max-width: var(--dc-measure-xl);
  margin-inline: auto;
  margin-block-end: var(--dc-space-48);
  text-align: center;
}

/* Kolor to --dc-accent-strong, a NIE --dc-accent-text — reguła J
   (section-conventions.md). Nadtytuł jest tekstem, nie dekoracją, więc
   liczy się dla niego próg kontrastu 4,5:1, którego --dc-accent-text
   (3,52:1 na złożonym tle karty) nie spełnia. */
.dc-origin__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);
}

/* h2 bierze krój, wagę i interlinię z base.css — tu tylko odstęp
   do akapitu pod spodem, którego facts.css nie potrzebował (nie miał
   tam żadnego tekstu pod h2). */
.dc-origin__header h2 {
  margin-block-end: var(--dc-space-14);
}

.dc-origin__lead {
  font-size: var(--dc-text-2xl);
  color: var(--dc-text-muted);
}

/* ==========================================================================
   4. KARTA TABELI
   Szkło MOCNIEJSZE niż karta sekcji pod spodem — ten sam porządek warstw
   co .dc-facts__item (facts.css, sekcja 5): kafel ma się odcinać od karty.
   overflow:hidden i promień żyją na TYM opakowaniu, nie na <table>, żeby
   uniknąć niespójnego zaokrąglania rogów tabeli między przeglądarkami.
   ========================================================================== */

.dc-origin__table-card {
  position: relative;
  z-index: var(--dc-z-raised);
  overflow: hidden;
  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);
  border: var(--dc-border) solid var(--dc-border-subtle);
  box-shadow: var(--dc-shadow-2xl), var(--dc-shadow-inset-top);
}

/* ==========================================================================
   5. STRUKTURA TABELI
   Makieta buduje porównanie z <div> w grid — błąd semantyczny makiety.
   <thead>/<tbody> i <tr> dostają display:grid, żeby zachować dokładnie ten
   układ (kolumny 1.6fr/1fr/1fr/1fr/1.2fr), a mimo to zostać prawdziwą
   strukturą table/row/cell dla czytnika ekranu — sprawdzone snapshotem
   dostępności (patrz raport zadania).
   ========================================================================== */

.dc-origin__table {
  width: 100%;
}

.dc-origin__table thead,
.dc-origin__table tbody {
  display: grid;
}

.dc-origin__table tr {
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  align-items: center;
  padding-inline: var(--dc-space-28);
  padding-block: var(--dc-space-18);
  border-block-end: var(--dc-border) solid var(--dc-border-line);
}

.dc-origin__table tbody tr:last-child {
  border-block-end: none;
}

.dc-origin__cell {
  text-align: center;
}

.dc-origin__table tr > :first-child {
  text-align: left;
}

.dc-origin__cell--head {
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-wide);
  text-transform: uppercase;
  color: var(--dc-text-subtle);
}

/* scope="row": nazwa kraju. font-weight jawnie na 400, bo przeglądarka
   domyślnie pogrubia <th> — bez tego resetu wiersze konkurencji byłyby
   pogrubione, choć makieta ich tak nie rysuje. */
.dc-origin__cell--name {
  display: flex;
  align-items: center;
  gap: var(--dc-space-10);
  font-weight: 400;
  font-size: var(--dc-text-lg);
  color: var(--dc-text-secondary);
}

.dc-origin__cell--value {
  font-size: var(--dc-text-lg);
  color: var(--dc-text-subtle);
}

/* Tylko kolumna kaloryczności — tak robi makieta, popiół i siarka mieszają
   cyfry ze znakami (%, <, ≤) i tabularne wyrównanie im nie służy. */
.dc-origin__cell--tabular {
  font-variant-numeric: tabular-nums;
}

.dc-origin__cell--repeatability {
  font-size: var(--dc-text-md);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   6. WIERSZ WYRÓŻNIONY — KAZACHSTAN
   Wyróżnienie NIE może polegać wyłącznie na kolorze (WCAG 1.4.1) — dlatego
   plakietka tekstowa „Nasz węgiel" w znaczniku, a złoty pasek i tło są tu
   wzmocnieniem, nie jedynym nośnikiem informacji.
   ========================================================================== */

.dc-origin__row--featured {
  padding-block: var(--dc-space-22);
  background-image: linear-gradient(90deg, var(--dc-accent-a15), var(--dc-accent-a05));
  border-block-end-color: var(--dc-accent-a20);
}

/* Pasek 4 px przy lewej krawędzi. Pseudo-element pozycjonowany bezwzględnie
   względem wiersza — nie bierze udziału w jego siatce kolumn (reguła
   pozycjonowania absolutnego w kontenerze grid), więc nie przesuwa reszty. */
.dc-origin__row--featured::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--dc-space-4);
  background-image: var(--dc-gradient-gold-soft);
  -webkit-backdrop-filter: var(--dc-blur-md);
  backdrop-filter: var(--dc-blur-md);
  border: var(--dc-border) solid var(--dc-accent-a50);
  pointer-events: none;
}

.dc-origin__row--featured .dc-origin__cell--name {
  font-family: var(--dc-font-display);
  font-weight: var(--dc-weight-black);
  font-size: var(--dc-text-xl);
  color: var(--dc-text);
}

.dc-origin__row--featured .dc-origin__cell--value {
  font-family: var(--dc-font-display);
  font-weight: var(--dc-weight-black);
  font-size: var(--dc-text-2xl);
  color: var(--dc-text);
}

.dc-origin__row--featured .dc-origin__cell--repeatability {
  font-weight: var(--dc-weight-bold);
  color: var(--dc-success);
}

.dc-origin__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--dc-space-4) var(--dc-space-10);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-pill);
  /* Tło a10 jak każda złota plakietka (design-audit.md, C.8; partia 6);
     makietowe a20 było najciemniejszym z pięciu teł tagów. */
  background-color: var(--dc-accent-a10);
  font-size: var(--dc-text-2xs);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-wide);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
  white-space: nowrap;
}

/* ==========================================================================
   7. ODNOŚNIK „DOWIEDZ SIĘ WIĘCEJ"
   Jedyny element interaktywny sekcji — dlatego, inaczej niż przy kaflu
   w facts (reguła 14), reakcja na najazd kursorem JEST przenoszona.
   ========================================================================== */

.dc-origin__more {
  position: relative;
  z-index: var(--dc-z-raised);
  margin-block-start: var(--dc-space-24);
  text-align: center;
}

.dc-origin__more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-8);
  padding-block-end: var(--dc-space-4);
  border-block-end: var(--dc-border-heavy) solid var(--dc-accent);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-text);
  text-decoration: none;
  /* `color` na liście: kolor najazdu przychodzi z a:hover w base.css. */
  transition:
    gap var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease);
}

/* Skrócone do samego rozjazdu gapu — dokładnie ten sam efekt, co
   style-hover="gap:14px" w makiecie (14 px), reszta atrybutu pominięta
   (reguła 14 nie dotyczy tu treści, bo runtime makiety nigdy w ogóle
   hover nie wyrenderował — sam EFEKT jest jednak uzasadniony, bo link
   jest klikalny). Bloku prefers-reduced-motion nie trzeba: to przejście
   (transition), nie ruch ciągły — globalny wyłącznik w base.css już tnie
   jego czas do 0.01ms, czyli robi dokładnie to, co powinien (reguła 12
   dotyczy animacji zapętlonych, nie krótkich przejść na hover). */
.dc-origin__more-link:hover {
  gap: var(--dc-space-14);
}

/* Rusza się SAM grot (reguła 22; poprawki po audycie, 2026-08-30): ikona
   dostaje ujemny margines o różnicę gapów, obrys nie rośnie. Odnośnik stoi
   w wyśrodkowanym akapicie, więc przed poprawką przyrost 6 px dzielił się
   na pół — tekst uciekał 3 px w lewo, grot szedł 3 px w prawo (zmierzone). */
.dc-origin__more-link .dc-icon {
  transition: margin-inline-end var(--dc-duration-base) var(--dc-ease);
}

.dc-origin__more-link:hover .dc-icon {
  margin-inline-end: calc(var(--dc-space-8) - var(--dc-space-14));
}

/* ==========================================================================
   8. UKŁAD WĄSKI — TABELA W STOS KART

   PRÓG 790 px — JEDYNA WARTOŚĆ W TYM PLIKU SPOZA TOKENÓW

   Dlaczego nie token. Tak samo jak przy progu 1024 px w header.css: warunku
   @media nie da się zapisać przez var() — custom properties rozwiązują się
   w kaskadzie na elemencie, a warunek @media jest oceniany wcześniej, zanim
   taki element w ogóle istnieje.

   Skąd akurat 790. Zmierzone na żywej tabeli (5 kolumn 1.6fr/1fr/1fr/1fr/1.2fr,
   bez żadnej zmiany układu): przy zwężaniu okna od 1440 px w dół pierwsza
   komórka łamie się na dwa wiersze („Bardzo wysoka") przy szerokości 789 px;
   przy 790 px wszystkie komórki mieszczą się w jednym wierszu. 789 to więc
   najszersze okno, w którym którakolwiek komórka już się łamie — zaokrąglone
   w górę do pełnej dziesiątki daje 790.

   Poniżej tego progu tabela NIE dostaje poziomego przewijania — sekcja służy
   porównaniu parametrów, a przewijana tabela pokazywałaby dwie kolumny naraz
   i to porównanie by uniemożliwiła. Zamiast tego każdy wiersz staje się
   samodzielną kartą: nazwa kraju jako nagłówek karty, cztery wartości pod nią
   jako pary etykieta/wartość (etykieta z atrybutu data-label w znaczniku).
   <thead> zostaje w dokumencie — chowany jest wyłącznie WZROKOWO, tą samą
   techniką co .dc-sr-only w base.css (nie samą klasą: potrzebny tu jest
   warunek @media, którego .dc-sr-only nie niesie). Czytnik ekranu nadal
   nawiguje prawdziwą tabelą z nagłówkami kolumn, niezależnie od tego,
   jak wygląda wizualnie.

   Wiersz Kazachstanu zostaje wyróżniony i w tym układzie: plakietka
   (nośnik tekstowy, nie tylko kolor) i grubsza obwódka karty — obie
   niezależne od koloru. Złoty pasek i tło zostają jako wzmocnienie.

   Wartość występuje w projekcie DRUGI RAZ (pierwsza: header.css, 1024 px).
   Obie są literalnymi pikselami z osobnych pomiarów — CSS nie ma jak same
   sprawdzić spójności między nimi, gdyby kiedyś trzeba je było uzgodnić.
   ========================================================================== */
@media (max-width: 790px) {
  .dc-origin__table-card {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  /* Ta sama technika co .dc-sr-only (base.css) zapisana wprost: klasa
     bazowa nie niesie warunku @media, więc nie da się jej tu po prostu
     dołożyć do znacznika. Zawartość zostaje w drzewie dostępności,
     znika tylko wizualnie. */
  .dc-origin__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .dc-origin__table tbody {
    gap: var(--dc-space-16);
  }

  .dc-origin__table tr {
    grid-template-columns: 1fr;
    align-items: stretch;
    row-gap: var(--dc-space-10);
    padding: var(--dc-space-20);
    border-radius: var(--dc-radius-16);
    background-color: var(--dc-surface-glass);
    border: var(--dc-border) solid var(--dc-border-subtle);
    box-shadow: var(--dc-shadow-md);
    overflow: hidden;
  }

  .dc-origin__table tbody tr:last-child {
    border-block-end: var(--dc-border) solid var(--dc-border-subtle);
  }

  .dc-origin__cell {
    text-align: left;
  }

  /* Nagłówek karty: nazwa kraju odcięta cienką linią od listy wartości
     pod spodem — karta czyta się jak mały paragon, nie jak wiersz tabeli. */
  .dc-origin__cell--name {
    padding-block-end: var(--dc-space-10);
    margin-block-end: var(--dc-space-2);
    border-block-end: var(--dc-border) solid var(--dc-border-line);
    font-size: var(--dc-text-xl);
    font-weight: var(--dc-weight-bold);
    color: var(--dc-text);
  }

  /* Para etykieta/wartość. Etykieta to CSS-owy ::before z atrybutu
     data-label — czysto wizualne dopowiedzenie: prawdziwe powiązanie
     wartości z nazwą kolumny niesie już <th scope="col"> w <thead>,
     które sam czytnik ekranu widzi niezależnie od tego układu. */
  .dc-origin__cell--value,
  .dc-origin__cell--repeatability {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dc-space-10);
    font-size: var(--dc-text-md);
  }

  .dc-origin__cell--value::before,
  .dc-origin__cell--repeatability::before {
    content: attr(data-label);
    font-size: var(--dc-text-sm);
    font-weight: var(--dc-weight-medium);
    letter-spacing: var(--dc-tracking-wide);
    text-transform: uppercase;
    color: var(--dc-text-subtle);
  }

  /* Na złotym tle wyróżnionej karty --dc-text-subtle daje w motywie ciemnym
     4,503:1 — mieści się w progu 4,5:1, ale o marne 0,003, zbyt blisko, żeby
     na to polegać (zaokrąglenia renderowania, przybliżenie mieszania barw).
     --dc-text-muted (mocniejsza o jeden stopień) daje w tym samym miejscu
     zapas z dużym marginesem po obu stronach motywu. */
  .dc-origin__row--featured .dc-origin__cell--value::before,
  .dc-origin__row--featured .dc-origin__cell--repeatability::before {
    color: var(--dc-text-muted);
  }

  /* Grubsza obwódka zamiast (lub obok) koloru — wyróżnienie czytelne
     także bez rozróżniania odcieni, zgodnie z tym samym wymogiem
     WCAG 1.4.1 co plakietka. */
  /* Selektor kwalifikowany przez .dc-origin__table tr (nie sama klasa
     modyfikatora) — inaczej przegrywa specyficznością z regułą border
     na .dc-origin__table tr wyżej i grubość obwódki nigdy by się nie
     zmieniła (sprawdzone).
     --dc-border-heavy (2px), nie --dc-border-thick (1,5px): zmierzone,
     że 1,5px przy gęstości 1x przegląda się przez zaokrąglenie do tego
     samego 1 fizycznego piksela co zwykła obwódka — różnica ginie. 2px
     wobec 1px to różnica całopikselowa, widoczna niezależnie od DPR. */
  .dc-origin__table tr.dc-origin__row--featured {
    padding-block: var(--dc-space-20);
    border-width: var(--dc-border-heavy);
  }
}