/**
 * o-nas.css — arkusz strony „O nas”. Jedna strona, jeden plik.
 *
 * WARSTWA pages/ (piąta): dc_enqueue_assets() dobiera arkusz po slugu
 * strony i wczytuje wyłącznie na /o-nas/. Wszystko pod prefiksem
 * .dc-about-us__ (angielski; nazwa pliku po slugu, bo tak dobiera WordPress).
 * Sąsiad .dc-about to CIEMNY PANEL ze strony głównej — inna rzecz.
 *
 * PRZEBUDOWA 2026-08-31 — uzasadnienie w docblocku page-o-nas.php.
 * W skrócie: panele szklane dla elementów graficznych (jak sekcje strony
 * głównej), panel liczb nachodzący na zdjęcie wejściowe, zdjęcia w kadrach
 * 21/9 · 4/3 · 3/2 zamiast kwadratów 1200 px, oś czasu pozioma, rytm 64
 * zamiast 128 między blokami.
 *
 * Zero wartości zahardkodowanych: kolory, odstępy, promienie i cienie
 * z var(--dc-*). Poza drabinką stoją wyłącznie: `aspect-ratio` kadrów
 * (proporcja, nie rozmiar), `object-position` (sposób kadrowania)
 * i warunki @media (nie da się zapisać przez var()).
 *
 * WARTOŚĆ UJEMNA: `calc(var(--dc-space-N) * -1)`, nigdy
 * `calc(var(--dc-space-0) - …)` — --dc-space-0 to zero bez jednostki
 * i deklaracja przepada po cichu (section-conventions.md, uwaga).
 */

/* ==========================================================================
   1. RYTM STRONY
   Blok = 64 px NAD sobą (nie .dc-section 64/64: dwa sąsiednie bloki
   dawały 128). Ilustracja stoi 32 px pod swoim akapitem; ostatni blok
   zamyka strona paddingiem 80.
   ========================================================================== */

.dc-about-us {
  padding-block-end: var(--dc-space-80);
}

.dc-about-us__head {
  padding-block-start: var(--dc-space-48);
}

.dc-about-us__block {
  padding-block-start: var(--dc-space-64);
}

.dc-about-us__block--illustration {
  padding-block-start: var(--dc-space-32);
}

/* ==========================================================================
   2. NADTYTUŁ, NAGŁÓWKI, AKAPITY
   ========================================================================== */

/* Nadtytuł sekcji — czwórka z C.8. */
.dc-about-us__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);
}

/* Akapity w kolumnie. Własny flex (nie .dc-stack): inny gap i max-width
   (reguła 8). Kolumna 680 = --dc-measure-xl. */
.dc-about-us__prose {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-18);
  max-width: var(--dc-measure-xl);
}

/* h2 bierze rozmiar i wagę z base.css (display-3). Nagłówek stoi bliżej
   pierwszego akapitu (gap 18 → 14 przez ujemny margines). */
.dc-about-us__heading {
  margin-block-end: calc(var(--dc-space-14) - var(--dc-space-18));
  font-size: var(--dc-display-4);
}

.dc-about-us__prose p {
  font-size: var(--dc-text-xl);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-secondary);
  text-wrap: pretty;
}

/* ==========================================================================
   3. WEJŚCIE — panel, przyciski, zdjęcie 21/9, panel liczb na zdjęciu
   ========================================================================== */

/* Panel jak .dc-blog__panel / .dc-origin__card (r28, glass-soft, blur-lg,
   xl + inset-top). Bez obwódki .dc-ring (2026-08-31) — ozdobnik premium
   zostaje na stronach produktowych. */
.dc-about-us__intro-panel {
  position: relative;
  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);
}

.dc-about-us__intro-copy {
  max-width: var(--dc-measure-2xl);
}

/* h1 z base.css (display-1); zostaje odstęp i szerokość wiersza. */
.dc-about-us__title {
  max-width: var(--dc-measure-2xl);
  margin-block-end: var(--dc-space-20);
}

.dc-about-us__lead {
  max-width: var(--dc-measure-xl);
  font-size: var(--dc-text-2xl);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
  text-wrap: pretty;
}

.dc-about-us__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-12);
  margin-block-start: var(--dc-space-28);
}

/* Przyciski rang 1 i 2 (C.1) — ten sam przepis co hero strony głównej
   (.dc-hero__cta): padding 16/28, r16, 15 px. */
.dc-about-us__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-8);
  padding: var(--dc-space-14) var(--dc-space-28);
  border: var(--dc-border) solid transparent;
  border-radius: var(--dc-radius-16);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-none);
  text-decoration: none;
  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),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-about-us__cta--primary {
  border-color: var(--dc-accent-a50);
  background-image: var(--dc-gradient-cta);
  color: var(--dc-on-accent);
  -webkit-backdrop-filter: var(--dc-blur-md);
  backdrop-filter: var(--dc-blur-md);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-top);
}

.dc-about-us__cta--primary:hover {
  background-color: var(--dc-accent-a50);
  color: var(--dc-on-accent);
}

.dc-about-us__cta--primary:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-press);
}

.dc-about-us__cta--secondary {
  border-color: var(--dc-border-line);
  background-color: var(--dc-surface-glass);
  color: var(--dc-text);
  font-weight: var(--dc-weight-medium);
}

.dc-about-us__cta--secondary:hover {
  border-color: var(--dc-accent-a50);
  background-color: var(--dc-surface);
  color: var(--dc-text);
}

.dc-about-us__cta--secondary:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-inset-press);
}

/* Zdjęcie wejściowe: 40 pod panelem. Kadr 21/9 (1176 × 504) zamiast 16/9
   (661 px) — zdjęcie ma być tłem dla liczb, nie osobną planszą. */
.dc-about-us__hero {
  margin-block-start: var(--dc-space-40);
}

/* ==========================================================================
   4. PANELE ELEMENTÓW GRAFICZNYCH
   Ten sam przepis co panel wejściowy, bez obwódki; padding 40.
   ========================================================================== */

.dc-about-us__panel {
  padding: var(--dc-space-40);
  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);
}

/* Nadtytuł panelu: odstęp 24 do treści (panel nie ma h2 pod nadtytułem). */
.dc-about-us__panel-label {
  margin-block-end: var(--dc-space-24);
}

/* PANEL LICZB NACHODZI NA ZDJĘCIE: ujemny margines o 64 wciąga go na
   dolną krawędź kadru; z boków 32, żeby zdjęcie wystawało zza panelu.
   Tło KRYJĄCE (--dc-surface-glass, .86 /
   w ciemnym .05 na ciemnym zdjęciu — patrz komentarz w blog-carousel.css
   o tej parze tokenów), nie glass-soft: liczby leżą na fotografii. */
.dc-about-us__panel--stats {
  position: relative;
  z-index: var(--dc-z-raised);
  margin-block-start: calc(var(--dc-space-64) * -1);
  margin-inline: var(--dc-space-32);
  padding: var(--dc-space-32) var(--dc-space-40);
  background-color: var(--dc-surface-glass);
}

@media (max-width: 40em) {
  .dc-about-us__panel--stats {
    margin-inline: var(--dc-space-12);
    padding: var(--dc-space-24);
  }

  .dc-about-us__panel {
    padding: var(--dc-space-24);
  }

  .dc-about-us__intro-panel {
    padding: var(--dc-space-28) var(--dc-space-24);
  }
}

/* ==========================================================================
   5. ZDJĘCIA — kadry
   Kwadraty 1200 × 1200 w bazie; każdy kadr to proporcja + object-fit.
   ========================================================================== */

.dc-about-us__figure {
  overflow: hidden;
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-22);
  background-color: color-mix(in srgb, var(--dc-accent) 10%, transparent);
  box-shadow: var(--dc-shadow-lg), var(--dc-shadow-inset-top);
}

.dc-about-us__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Wejście 21/9, r28 jak panel nad nim. Kadr przesunięty w górę (30 %):
   w zdjęciu portu panorama miasta leży na 13–20 % wysokości — przy
   „center" wypadała poza kadr (pomiar 2026-08-30). */
.dc-about-us__figure--hero {
  aspect-ratio: 21 / 9;
  border-radius: var(--dc-radius-28);
  box-shadow: var(--dc-shadow-2xl), var(--dc-shadow-inset-top);
}

.dc-about-us__figure--hero .dc-about-us__image {
  object-position: center 30%;
}

/* Pas na całą szerokość kontenera (plac składowy): 21/9, kadr 30 % —
   hala, ciężarówka i przenośnik siedzą w górnej połowie. */
.dc-about-us__figure--wide {
  aspect-ratio: 21 / 9;
}

.dc-about-us__figure--wide .dc-about-us__image {
  object-position: center 30%;
}

/* Zdjęcie obok tekstu: 4/3. Kwadrat w naturalnej proporcji robił z bloku
   pełny ekran; 4/3 trzyma wysokość kolumny tekstu (zmierzone
   w decisions.md). */
.dc-about-us__figure--aside {
  aspect-ratio: 4 / 3;
}

/* Kadr PIONOWY 3/4 dla bloków o pięciu akapitach (2026-08-31, Andrzej:
   „jak sekcja jest długa, zdjęcie może być prostokątem w pionie").
   Kolumna pięciu akapitów jest wyraźnie wyższa niż szeroka — kadr 4/3
   zostawiał pod zdjęciem pustkę wysokości dwóch akapitów. Modyfikator
   nadaje szablon przez 'frame' => 'tall' w $dc_page. */
.dc-about-us__figure--aside.dc-about-us__figure--tall {
  aspect-ratio: 3 / 4;
}

/* ==========================================================================
   6. BLOK ZE ZDJĘCIEM — dwie równe kolumny od 60em, wyśrodkowane w pionie
   Poniżej: zdjęcie pod tekstem. `order` przestawia tylko obraz wzrokowy —
   w znaczniku tekst stoi pierwszy.
   ========================================================================== */

.dc-about-us__block--media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dc-space-32);
  align-items: center;
}

@media (min-width: 60em) {
  .dc-about-us__block--media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--dc-space-56);
  }

  .dc-about-us__block--start .dc-about-us__figure--aside {
    order: -1;
  }
}

/* ==========================================================================
   7. ODNOŚNIK Z GROTEM — reguła 22
   ========================================================================== */

.dc-about-us__link {
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: var(--dc-space-8);
  border-block-end: var(--dc-border-heavy) solid var(--dc-accent);
  padding-block-end: var(--dc-space-2);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-text);
  text-decoration: none;
  transition:
    gap var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease);
}

.dc-about-us__link .dc-icon {
  transition: margin-inline-end var(--dc-duration-base) var(--dc-ease);
}

.dc-about-us__link:hover {
  gap: var(--dc-space-14);
  color: var(--dc-accent-strong);
}

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

/* ==========================================================================
   8. GALERIA — siatka kafli
   Dwa zdjęcia → 3/2 (1176: 2 × 577 × 385), trzy → 4/3 (3 × 377 × 283).
   Kwadraty 560 px z poprzedniej wersji dawały jedną galerię na ekran.
   ========================================================================== */

.dc-about-us__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-lg), 100%), 1fr));
  gap: var(--dc-space-22);
}

.dc-about-us__gallery--2 .dc-about-us__figure {
  aspect-ratio: 3 / 2;
}

.dc-about-us__gallery--3 .dc-about-us__figure {
  aspect-ratio: 4 / 3;
}

/* ==========================================================================
   9. ELEMENT 1 — LICZBY W SKRÓCIE (w panelu na zdjęciu)
   ========================================================================== */

/* Pięć liczb w JEDNYM rzędzie przy 1440 (reguła 9 — zmierzone): wnętrze
   panelu to 1176 − 64 (marginesy) − 80 (padding) = 1032 px; przy minimum
   220 wychodziły 4 kolumny + sierota. Minimum 220 − 32 = 188 daje
   5 × 188 + 4 × 16 = 1004 ≤ 1032 → 5 kolumn; 768 → 3 + 2; 390 → 1. */
.dc-about-us__stats-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--dc-grid-min-sm) - var(--dc-space-32)), 100%), 1fr));
  gap: var(--dc-space-20) var(--dc-space-16);
}

.dc-about-us__stat {
  border-inline-start: var(--dc-border) solid var(--dc-border-accent);
  padding-inline-start: var(--dc-space-16);
}

/* Nie nagłówek (docblock stats.php) — rodzina i waga wprost. */
.dc-about-us__stat-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--dc-space-6);
  font-family: var(--dc-font-display);
  font-size: var(--dc-display-5);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-none);
  letter-spacing: var(--dc-tracking-tight);
  color: var(--dc-accent-strong);
}

/* Liczba nie łamie się w środku („3 000 000+"). */
.dc-about-us__stat-number {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Jednostka bez wersalików (reguła 24). */
.dc-about-us__stat-unit {
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-normal);
  color: var(--dc-text-secondary);
}

.dc-about-us__stat-label {
  margin-block-start: var(--dc-space-8);
  font-size: var(--dc-text-base);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-secondary);
}

/* ==========================================================================
   10. ELEMENT 2 — DROGA WĘGLA (oś: węzły z ikonami na złotej szynie)
   PRZEBUDOWA 2026-08-31 (Andrzej: „numer i obok ikonka wygląda słabo —
   zrób nowoczesny, animowany timeline"). Pięć kart zdjęte; każdy etap to
   węzeł z ikoną na szynie, numer-duch nad tytułem, treść pod spodem.

   DWA UKŁADY, JEDEN PRÓG: poniżej 64em oś jest PIONOWA (węzeł po lewej,
   szyna spływa w dół, treść po prawej — klasyczny timeline), od 64em
   POZIOMA (pięć równych kolumn, szyna biegnie przez węzły w prawo).
   Wyjątek od reguły 9 (auto-fit bez progu) świadomy: auto-fit umie zwinąć
   liczbę kolumn, ale nie umie obrócić szyny — a szyna w złym kierunku to
   nie ciaśniejszy układ, tylko zepsuty rysunek. Próg 64em zmierzony:
   wnętrze panelu przy 1024 px okna to ~830 px → 5 × 150 + 4 × 16 = 814 ≤ 830,
   tytuły łamią się na dwa–trzy wiersze, ale kolumny się nie rozsypują.

   SZYNA PER ETAP (segment za węzłem należy do etapu) — segmenty obracają
   się razem z etapami między układami i tor nigdy nie wisi w powietrzu.
   Ostatni etap segmentu nie ma: tor kończy się na węźle dostawy.

   RUCH (sekcja 10a niżej) jedzie w całości na stanach globalnego reveala,
   więc bez JS i pod prefers-reduced-motion (flaga html.dc-reveal wtedy
   nie powstaje) oś stoi narysowana od pierwszego malowania.
   ========================================================================== */

/* Pionowo: odstęp między etapami 32; poziomo: pięć kolumn co 16. */
.dc-about-us__journey-list {
  display: grid;
  gap: var(--dc-space-32);
}

@media (min-width: 64em) {
  .dc-about-us__journey-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--dc-space-16);
  }
}

/* ETAP, układ pionowy (domyślny): kolumna szyny po lewej, treść po
   prawej. Szyna = węzeł + segment w dół; segment ciągnie się do dolnej
   krawędzi etapu, przerwa 32 między etapami zostaje świadomie — segmenty
   są per etap, jak kreski w starej wersji. */
.dc-about-us__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'rail count'
    'rail title'
    'rail text';
  column-gap: var(--dc-space-20);
}

.dc-about-us__stage-rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dc-space-10);
  height: 100%;
}

/* Węzeł: koło 48 na złotym gradiencie przycisków (ranga 1 — oś jest
   głównym rysunkiem panelu), ikona w kolorze na-złocie. */
.dc-about-us__stage-node {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--dc-space-48);
  height: var(--dc-space-48);
  border: var(--dc-border) solid var(--dc-accent-a50);
  border-radius: var(--dc-radius-full);
  background-image: var(--dc-gradient-cta);
  color: var(--dc-on-accent);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-top);
}

/* Segment szyny: 2 px złota (a30 — podkład, nie krzyk), zaokrąglone
   końce. Pionowo pręt w dół (flex: 1 dociąga do dna etapu). */
.dc-about-us__stage-line {
  flex: 1;
  width: var(--dc-border-heavy);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-accent-a30);
  transform-origin: 50% 0;
}

.dc-about-us__stage:last-child .dc-about-us__stage-line {
  display: none;
}

/* NUMER-DUCH: wielka cyfra display w złocie a30 — tło typograficzne,
   tytuł podjeżdża na jej dolną połowę ujemnym marginesem. Dekoracja
   (aria-hidden w znaczniku), kolejność niesie <ol>. */
.dc-about-us__stage-count {
  grid-area: count;
  display: block;
  font-family: var(--dc-font-display);
  font-size: var(--dc-display-3);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-none);
  letter-spacing: var(--dc-tracking-tight);
  color: var(--dc-accent-a30);
}

.dc-about-us__stage-title {
  grid-area: title;
  margin-block-start: calc(var(--dc-space-14) * -1);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-2xl);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-snug);
  color: var(--dc-text);
  text-wrap: balance;
}

.dc-about-us__stage-text {
  grid-area: text;
  margin-block-start: var(--dc-space-8);
  font-size: var(--dc-text-base);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-secondary);
}

/* Poziomo (≥64em): etap wraca do kolumny, szyna kładzie się w rzędzie —
   węzeł po lewej, segment dobiega do lewej krawędzi następnego węzła
   (gap 16 kolumn daje przerwę toru, spójną z układem pionowym). */
@media (min-width: 64em) {
  .dc-about-us__stage {
    display: flex;
    flex-direction: column;
  }

  .dc-about-us__stage-rail {
    flex-direction: row;
    height: auto;
    width: 100%;
  }

  .dc-about-us__stage-line {
    width: auto;
    height: var(--dc-border-heavy);
    transform-origin: 0 50%;
  }

  .dc-about-us__stage-count {
    margin-block-start: var(--dc-space-20);
  }
}

/* ==========================================================================
   10a. DROGA WĘGLA — RUCH
   Właścicielem warunków jest komponent reveal: wszystkie reguły stoją pod
   html.dc-reveal, flagą stawianą TYLKO gdy jest IntersectionObserver i nie
   ma prefers-reduced-motion (functions.php). Stany nadaje reveal.js na
   dzieciach grupy: '' (czeka) → 'in' (wjeżdża) / 'now' (nad zgięciem, bez
   ruchu); krok kaskady niesie --dc-reveal-index z tego samego komponentu.

   Selektor stanu oczekiwania łapie też dziecko PRZED nadaniem atrybutu
   (:not('in'):not('now')) — reveal.css chowa dzieci grupy tym samym
   sposobem, zanim skrypt dopisze data-dc-reveal.

   Choreografia na jednym wywołaniu obserwatora: etap wjeżdża (komponent),
   jego węzeł wskakuje ze skali .4 w tym samym takcie, a segment szyny
   dorysowuje się PO węźle (opóźnienie + duration-base) — tor ciągnie się
   za kaskadą etapów jak kreska za piórem.
   ========================================================================== */

.dc-reveal .dc-about-us__journey-list > :not([data-dc-reveal='in']):not([data-dc-reveal='now']) .dc-about-us__stage-node {
  opacity: 0;
  transform: scale(0.4);
}

.dc-reveal .dc-about-us__journey-list > :not([data-dc-reveal='in']):not([data-dc-reveal='now']) .dc-about-us__stage-line {
  transform: scale(0);
}

.dc-reveal .dc-about-us__journey-list > [data-dc-reveal='in'] .dc-about-us__stage-node {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dc-duration-slower) var(--dc-ease),
    transform calc(var(--dc-duration-slower) + var(--dc-duration-base)) var(--dc-ease-out);
  transition-delay: calc(var(--dc-reveal-index, 0) * var(--dc-duration-fast) / 2);
}

.dc-reveal .dc-about-us__journey-list > [data-dc-reveal='in'] .dc-about-us__stage-line {
  transform: none;
  transition: transform calc(var(--dc-duration-slower) * 2) var(--dc-ease-out);
  transition-delay: calc(var(--dc-reveal-index, 0) * var(--dc-duration-fast) / 2 + var(--dc-duration-base));
}

/* ==========================================================================
   10b. FILM — panel z osadzeniem 16/9
   Ramka jak kadr zdjęcia (r22, subtle, lg + inset); iframe wypełnia kadr.
   ========================================================================== */

.dc-about-us__video {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-22);
  background-color: var(--dc-surface-inverse);
  box-shadow: var(--dc-shadow-lg), var(--dc-shadow-inset-top);
}

.dc-about-us__video-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   11. ELEMENT 3 — OD GEOLOGII DO KOTŁA (tabela w panelu)
   Prawdziwa <table> z display: grid na <tbody> i <tr> (reguła 19).
   ========================================================================== */

.dc-about-us__pairs {
  width: 100%;
}

.dc-about-us__pairs tbody {
  display: grid;
}

.dc-about-us__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-lg), 100%), 1fr));
  gap: var(--dc-space-12) var(--dc-space-24);
  border-block-start: var(--dc-border) solid var(--dc-border-line);
  padding-block: var(--dc-space-18);
}

.dc-about-us__pairs tbody tr:last-child {
  padding-block-end: 0;
}

.dc-about-us__pair-cause {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-3xl);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-snug);
  text-align: start;
  color: var(--dc-text);
}

.dc-about-us__pair-effect {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-12);
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-secondary);
}

.dc-about-us__pair-arrow {
  flex: none;
  padding-block-start: var(--dc-space-2);
  color: var(--dc-accent-strong);
}

/* Próg zmierzony (2026-08-30): poniżej 719 px wiersz ma jedną kolumnę —
   przy tym samym minimum kolumny; padding panelu (40) zwęża wnętrze, więc
   próg leży wyżej: 719 + 80 = 799 → 800. Grot obraca się w dół. */
@media (max-width: 800px) {
  .dc-about-us__pair-arrow {
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   12. ELEMENT 4 — OŚ CZASU (pozioma, w panelu)
   Cztery daty w rzędzie, każda na własnej szynie z kropką na początku;
   auto-fit zwija do dwóch i do jednej. Pionowa wersja (2026-08-30)
   zostawiała 80 % szerokości pustej i stała obok pięciu kafli drogi
   węgla jako drugi podobny pas — teraz każdy z nich jest osobnym panelem.
   ========================================================================== */

.dc-about-us__timeline-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-sm), 100%), 1fr));
  gap: var(--dc-space-24);
}

.dc-about-us__milestone {
  position: relative;
  border-block-start: var(--dc-border-heavy) solid var(--dc-accent-a30);
  padding-block-start: var(--dc-space-20);
}

/* Kropka na szynie: środkiem na linii (połowa 12 px + grubość 2 px). */
.dc-about-us__milestone::before {
  content: '';
  position: absolute;
  inset-block-start: calc((var(--dc-space-6) + var(--dc-border)) * -1);
  inset-inline-start: 0;
  width: var(--dc-space-12);
  height: var(--dc-space-12);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-accent);
}

.dc-about-us__milestone-date {
  font-family: var(--dc-font-display);
  font-size: var(--dc-display-5);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-tight);
  color: var(--dc-accent-strong);
}

.dc-about-us__milestone-text {
  margin-block-start: var(--dc-space-8);
  font-size: var(--dc-text-base);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-secondary);
}

/* ==========================================================================
   13. ELEMENT 5 — DWA SORTYMENTY (karty; reguła 19 bez progu)
   ========================================================================== */

.dc-about-us__grades-table {
  width: 100%;
}

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

.dc-about-us__grade {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-14);
  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-md);
  backdrop-filter: var(--dc-blur-md);
  box-shadow: var(--dc-shadow-lg), var(--dc-shadow-inset-top);
}

.dc-about-us__grade-name {
  font-family: var(--dc-font-display);
  font-size: var(--dc-display-5);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-tight);
  text-align: start;
  color: var(--dc-text);
}

/* Etykieta parametru przy wartości; wersaliki na SŁOWACH, nie na
   wartościach (reguła 24). Wada data-label w ::before (podwójna nazwa
   dostępna) — otwarta dla trzech tabel naraz, patrz section-conventions.md. */
.dc-about-us__grade-value {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-4);
  border-block-start: var(--dc-border) solid var(--dc-border-line);
  padding-block-start: var(--dc-space-14);
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-secondary);
}

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

/* Komórka z odnośnikiem do karty produktu (2026-08-31): dobita do dna
   karty (margin auto w kolumnie flex), żeby odnośniki obu sortymentów
   stały w jednej linii niezależnie od długości opisów. Bez ::before
   z data-label — odnośnik nazywa się sam. */
.dc-about-us__grade-shop {
  display: flex;
  margin-block-start: auto;
  border-block-start: var(--dc-border) solid var(--dc-border-line);
  padding-block-start: var(--dc-space-18);
}

/* ==========================================================================
   14. KONTAKT — panel: dane obok zdjęcia
   ========================================================================== */

.dc-about-us__panel--contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dc-space-32);
  align-items: center;
}

@media (min-width: 60em) {
  .dc-about-us__panel--contact {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--dc-space-48);
  }
}

.dc-about-us__prose--contact {
  gap: var(--dc-space-24);
}

/* Nagłówek kontaktu to zdanie-lead z materiału (h2 zostaje h2). */
.dc-about-us__prose--contact .dc-about-us__heading {
  margin-block-end: 0;
  font-size: var(--dc-display-5);
}

.dc-about-us__figure--contact {
  aspect-ratio: 4 / 3;
}

.dc-about-us__contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-16);
}

/* Ikona zostaje w wierszu z tekstem także przy długim adresie biur —
   tekst bierze resztę szerokości (flex: 1), nie zawija się pod ikonę. */
.dc-about-us__contact-item {
  display: flex;
  align-items: center;
  gap: var(--dc-space-12);
  font-size: var(--dc-text-lg);
  color: var(--dc-text-secondary);
}

.dc-about-us__contact-item > :not(.dc-about-us__contact-icon) {
  min-width: 0;
}

.dc-about-us__contact-offices {
  flex: 1;
}

.dc-about-us__contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-accent-a15);
  color: var(--dc-accent-strong);
}

.dc-about-us__contact-link {
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  color: var(--dc-text);
  text-decoration: none;
  border-block-end: var(--dc-border-heavy) solid var(--dc-accent);
  transition: color var(--dc-duration-base) var(--dc-ease);
}

.dc-about-us__contact-link:hover {
  color: var(--dc-accent-strong);
}

.dc-about-us__contact-hours,
.dc-about-us__contact-offices {
  font-size: var(--dc-text-base);
  color: var(--dc-text-muted);
}

/* ==========================================================================
   15. PANELE CTA — sklep i Klub Dobrego Ciepła (2026-08-31)
   Treść wyśrodkowana: nadtytuł, h2, akapit, przycisk rangi 1 tym samym
   przepisem co wejście strony (.dc-about-us__cta--primary).
   ========================================================================== */

.dc-about-us__cta-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dc-space-18);
  padding: var(--dc-space-56) var(--dc-space-40);
  text-align: center;
}

/* Flex daje odstępy — marginesy elementów schodzą do zera. */
.dc-about-us__cta-eyebrow,
.dc-about-us__cta-heading {
  margin-block-end: 0;
}

.dc-about-us__cta-heading {
  max-width: var(--dc-measure-xl);
  font-size: var(--dc-display-4);
}

.dc-about-us__cta-text {
  max-width: var(--dc-measure-lg);
  font-size: var(--dc-text-xl);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-secondary);
  text-wrap: pretty;
}

.dc-about-us__cta-panel .dc-about-us__cta {
  margin-block-start: var(--dc-space-10);
}

/* Wariant „sklep": panel bazowy + delikatny złoty podkład, żeby
   zaproszenie odcinało się od szklanych paneli diagramów. */
.dc-about-us__cta-panel--shop {
  background-color: var(--dc-accent-a05);
  border-color: var(--dc-border-accent);
}

/* Wariant „klub": panel CIEMNY W OBU MOTYWACH — ta sama zajawka Klubu,
   który na stronie głównej i stronie /klub/ jest czarno-złoty. Przepis
   przeniesiony z help-cta.css (sekcja 1 tam): jasny motyw bierze
   --dc-surface-inverse, ciemny podstawia --dc-surface (wartości zbieżne,
   wybór między istniejącymi tokenami, nie nowy kolor); tusz z rodziny
   -on-dark, cień akcentu w wersji on-dark. Przycisk rangi 1 zostaje bez
   zmian — wariant przez zmienne na panelu, nie przez klasę przycisku. */
.dc-about-us__cta-panel--club {
  --dc-shadow-accent: var(--dc-shadow-accent-on-dark);
  --dc-shadow-inset-top: var(--dc-shadow-inset-top-on-dark);

  border-color: var(--dc-accent-a30);
  background-color: var(--dc-surface-inverse);
}

[data-theme='dark'] .dc-about-us__cta-panel--club {
  background-color: var(--dc-surface);
}

/* PRZYCISK RANGI 1 NA CIEMNYM PANELU (poprawka 2026-08-31, Andrzej:
   „przycisk jakiś ciemny"): --dc-gradient-cta w motywie jasnym jest
   półprzezroczystym TINTEM pod jasne tło strony — na czerni robi się
   brudny. Ten sam problem rozwiązały help-cta i loyalty-cta: pełne złoto
   var(--dc-accent) wprost (identyczne w obu motywach), najazd ciemnieje
   domieszką tuszu --dc-on-accent zamiast a50 (a50 na pełnym tle nic nie
   zmienia). Zapis przeniesiony z help-cta.css, sekcja przycisku. */
.dc-about-us__cta-panel--club .dc-about-us__cta--primary {
  background-image: none;
  background-color: var(--dc-accent);
}

.dc-about-us__cta-panel--club .dc-about-us__cta--primary:hover {
  background-color: color-mix(in srgb, var(--dc-accent) 88%, var(--dc-on-accent));
}

.dc-about-us__cta-panel--club .dc-about-us__cta-eyebrow {
  color: var(--dc-accent);
}

.dc-about-us__cta-panel--club .dc-about-us__cta-heading {
  color: var(--dc-text-on-dark);
}

.dc-about-us__cta-panel--club .dc-about-us__cta-text {
  color: var(--dc-text-on-dark-muted);
}