/**
 * wholesale.css — oferta dla firm: węgiel luzem i big-bag.
 *
 * Wymaga tokens.css, base.css i components/ring.css. Wszystko pod prefiksem
 * .dc-wholesale__, nic stąd nie wycieka na cudze znaczniki.
 *
 * Zero wartości zahardkodowanych: kolory, odstępy, promienie, rozmiary pisma
 * i czasy pochodzą wyłącznie z var(--dc-*). Plik nie ma ani jednego
 * breakpointu — siatka kart zwija się sama przez auto-fit (reguła 9),
 * a pasek pod nimi przez flex-wrap.
 */

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

/* .dc-wholesale 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-wholesale__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. Wartości makiety trafiają w domyślne pokrętła komponentu co do
   jednej: poświata inset -4px (--dc-ring-halo-spread), grubość 6px
   (--dc-ring-halo-thickness), rant 1.5px (--dc-ring-inset). Czas w motywie
   ciemnym — 8,5 s wobec 7 s w jasnym — scalony do domyślnych 7 s zgodnie
   z regułą 15.

   Sekcji zostaje jedno — faza i zwrot z rejestru w ring.css: numer 7,
   czyli start o 7/12 obrotu (210°) i nieparzysty numer = obrót W LEWO
   (makieta kręci w prawo; zwrot różnicuje sekcje między sobą, nie odtwarza
   makiety — partia 5 audytu). Liczba jest umowna: znaczy tylko, że żadna
   inna sekcja jej nie ma; nie zależy od miejsca sekcji na stronie. W obu
   motywach tak samo. Pokrętła na karcie, nie na warstwie — zmienne własne
   dziedziczą się w dół.
   ========================================================================== */

.dc-wholesale__card {
  --dc-ring-spin: dcRingSpinRev;
  --dc-ring-delay: calc(var(--dc-duration-ring) * -7 / 12);
}

/* ==========================================================================
   3. NAGŁÓWEK SEKCJI
   Wyrównany DO LEWEJ i ograniczony do 680 px, inaczej niż wyśrodkowany
   nagłówek w origin i facts — tak rysuje makieta (max-width:680px z
   margin:0 0 36px, bez auto po bokach).
   ========================================================================== */

.dc-wholesale__header {
  position: relative;
  z-index: var(--dc-z-raised);
  max-width: var(--dc-measure-xl);
  margin-block-end: var(--dc-space-40);
}

/* Kolor to --dc-accent-strong, a NIE --dc-accent-text — reguła J
   (section-conventions.md): złoty TEKST niosący znaczenie bierze mocniejszy
   odcień, bo obowiązuje go próg kontrastu 4,5:1. --dc-accent-text zostaje
   przy kresce ikony niżej, gdzie złoto jest dekoracją. */
.dc-wholesale__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ę, rozmiar i interlinię z base.css (--dc-display-3 to
   dokładnie clamp z makiety) — tu tylko odstęp do akapitu pod spodem. */
.dc-wholesale__header h2 {
  /* Odstęp do leadu 14 jak w każdej sekcji (design-audit.md, C.10; partia 6). */
  margin-block-end: var(--dc-space-14);
}

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

/* ==========================================================================
   4. SIATKA DWÓCH KART
   auto-fit z minimalną szerokością kolumny, bez breakpointu (reguła 9).
   Makietowe minmax(300px) scalone na --dc-grid-min-md (280px) zgodnie
   z regułą 15 (skala tokenu obejmuje 260/280/300). Te 20 px decydują
   o układzie przy 768 px: wnętrze karty ma tam zmierzone 608 px, a dwie
   kolumny po 300 px z odstępem 22 px potrzebowałyby 622 px — przy wartości
   makietowej wyszłaby JEDNA kolumna zamiast dwóch. Liczba kolumn na trzech
   szerokościach zmierzona — tabela w raporcie zadania.

   min(..., 100%) jest tu OBOWIĄZKOWE, tak samo jak w .dc-grid z base.css:
   bez niego ścieżka minimalna toru (280 px) jest większa niż wnętrze karty
   przy 390 px (zmierzone 230 px) i kafle wychodzą poza prawy padding karty,
   a nawet poza jej obrys. Sam auto-fit tego nie chroni — zwija liczbę
   kolumn, nie ich minimalną szerokość.
   ========================================================================== */

.dc-wholesale__grid {
  position: relative;
  z-index: var(--dc-z-raised);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-md), 100%), 1fr));
  gap: var(--dc-space-22);
  margin-block-end: var(--dc-space-32);
}

/* ==========================================================================
   5. KARTA OFERTY
   Szkło MOCNIEJSZE niż karta sekcji pod spodem — ten sam porządek warstw
   co .dc-facts__item i .dc-origin__table-card: kafel ma się odcinać od karty.
   ========================================================================== */

.dc-wholesale__offer {
  position: relative;
  padding: var(--dc-space-40);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-22);
  background-color: var(--dc-surface-glass);
  box-shadow: var(--dc-shadow-lg), var(--dc-shadow-inset-top);
}

/* Reakcja na najazd kursorem NIE jest przenoszona z makiety (reguła 14):
   atrybut style-hover nigdy się w makiecie nie wyrenderował, a karta nie
   jest elementem interaktywnym — klikalny jest wyłącznie odnośnik w środku.
   Uniesienie całej karty obiecywałoby kliknięcie, którego nie ma. */

.dc-wholesale__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-56);
  height: var(--dc-space-56);
  margin-block-end: var(--dc-space-20);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-accent-a15);

  /* Ikona rysowana jest stroke="currentColor", więc bierze kolor stąd
     i przełącza się razem z motywem bez drugiego zestawu rysunków.
     Odcień ten sam co złoty tekst (design-audit.md, C.3, partia 3);
     --dc-accent-text w motywie jasnym nie istnieje. */
  color: var(--dc-accent-strong);
}

/* Nadtytuł karty ma ciaśniejszy trakt niż nadtytuł sekcji (.12em wobec
   .16em w makiecie) — to nie szum, tylko konsekwentna różnica poziomu:
   etykieta w kaflu jest mniejszą jednostką niż etykieta sekcji. */
.dc-wholesale__offer-eyebrow {
  margin-block-end: var(--dc-space-8);
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-wider);
  text-transform: uppercase;
  color: var(--dc-accent-strong);
}

/* h3 z base.css ma --dc-text-2xl (17px); makieta daje tu 22px, czyli
   --dc-text-5xl. Waga i krój zostają z base.css. */
.dc-wholesale__offer-title {
  margin-block-end: var(--dc-space-12);
  font-size: var(--dc-text-5xl);
}

.dc-wholesale__offer-text {
  margin-block-end: var(--dc-space-24);
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
}

/* ==========================================================================
   6. ODNOŚNIKI
   Wszystkie trzy dzielą jeden wzorzec, przeniesiony z .dc-origin__more-link:
   złota kreska pod tekstem, strzałka odjeżdżająca przy najeździe.

   DRUGIE wystąpienie w projekcie (po origin), więc jeszcze NIE komponent —
   reguła 18 każe wydzielać przy trzecim albo gdy drugie wystąpienie różni
   się czymś więcej niż prefiksem klasy. Tu różni się wyłącznie prefiksem
   (jedyny dodatek, white-space na wariancie paska, jest sprawą układu, nie
   wyglądu odnośnika). Kandydat zgłoszony w raporcie.
   ========================================================================== */

.dc-wholesale__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. Odnośnik JEST klikalny, więc reguła 14
   nie zabrania przeniesienia. Bloku prefers-reduced-motion nie trzeba:
   to przejście, nie ruch ciągły, a globalny wyłącznik w base.css tnie jego
   czas do 0.01ms, czyli robi dokładnie to, co powinien (reguła 12). */
.dc-wholesale__link:hover {
  gap: var(--dc-space-14);
}

/* Rusza się SAM grot, tekst i podkreślenie stoją (reguła 22 w
   section-conventions.md; poprawki po audycie, 2026-08-30). gap rośnie
   8 → 14, a ikona dostaje w tej samej chwili ujemny margines o tę samą
   różnicę — obrys odnośnika nie zmienia szerokości, więc o tym, w którą
   stronę rozejdzie się przyrost, NIE decyduje wyrównanie rodzica. Zmierzone
   przed poprawką: w karcie (do lewej) tekst 0 / grot +6 px, ale w pasku
   __bar (space-between, odnośnik przy prawej krawędzi) tekst −6 / grot 0 —
   ten sam CSS, dwa zachowania. Dotyczy obu wariantów, __bar dziedziczy. */
.dc-wholesale__link .dc-icon {
  transition: margin-inline-end var(--dc-duration-base) var(--dc-ease);
}

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

/* ==========================================================================
   7. PASEK POD KARTAMI
   Linia oddzielająca, tekst po lewej, odnośnik po prawej. Bez breakpointu:
   flex-wrap przenosi odnośnik pod tekst sam, gdy zabraknie miejsca.
   ========================================================================== */

.dc-wholesale__bar {
  position: relative;
  z-index: var(--dc-z-raised);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-20);
  padding-block-start: var(--dc-space-28);
  border-block-start: var(--dc-border) solid var(--dc-border-line);
}

.dc-wholesale__bar-text {
  font-size: var(--dc-text-lg);
  color: var(--dc-text-secondary);
}

/* Wyróżnienie pierwszego zdania: krój nagłówkowy i mocniejszy kolor.
   Wagę (700) daje już base.css regułą na <strong>. */
.dc-wholesale__bar-text strong {
  font-family: var(--dc-font-display);
  color: var(--dc-text);
}

/* Odnośnik paska nie łamie się na dwa wiersze — tak rysuje makieta
   (white-space:nowrap). Przy braku miejsca schodzi w całości pod tekst,
   bo cały pasek ma flex-wrap. */
.dc-wholesale__link--bar {
  white-space: nowrap;
}