/* ==========================================================================
   /produkty/ — grupa B „Systemy wokół firmy”
   R11, 2026-08-10

   Dlaczego osobny plik: subpages-r07.css ładuje 36 plików HTML. Zakres reguł
   jest celowo zawężony do .craft__group--b, żeby zmiana nie dotknęła kart
   grupy A ani żadnej innej podstrony.

   Co naprawia:
   1. Wiersz miał dwie kolumny (etykieta | treść), a treść kończyła się na
      64ch — prawa połowa ekranu zostawała pusta. Teraz trzy strefy:
      kontekst | co to jest | co z tego masz.
   2. Chip statusu miał border bez paddingu na elemencie inline; przy
      łamaniu na dwa wiersze ramka rozpadała się na urwane prostokąty.
   3. „WYNIK: …” szedł w całości wersalikami z letter-spacingiem — całe
      zdanie kapitalikami czyta się wolniej. Wersaliki zostają na etykiecie.
   ========================================================================== */

.craft__group--b .sysrow--sys {
  grid-template-columns: minmax(220px, 264px) minmax(0, 1fr) minmax(240px, 320px);
  column-gap: clamp(20px, 3vw, 56px);
  align-items: start;
}

/* Chip statusu — ramka obejmuje całą etykietę, także dwuwierszową.
   Prawy padding jest mniejszy o letter-spacing (0.2em ≈ 3px przy 14px),
   który odziedziczony z .sysrow__meta dokleja pusty odstęp za ostatnią
   literą i inaczej rozjeżdżałby ramkę optycznie w prawo. */
.craft__group--b .sysrow__chip {
  display: inline-block;
  width: fit-content;
  border: 1px solid var(--line-strong);
  color: var(--gold);
  padding: 5px 7px 5px 10px;
  line-height: 1.45;
}

/* Strefa wyniku — to, co klient dostaje, przestaje ginąć w środku akapitu */
.craft__group--b .sysrow__out {
  border-left: 2px solid var(--gold);
  padding-left: clamp(12px, 1.2vw, 18px);
}
.craft__group--b .sysrow__result {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-dim);
}
.craft__group--b .sysrow__result b {
  display: block;
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.craft__group--b .sysrow__out .more-link {
  display: inline-block;
}
.craft__group--b .sysrow__out .more-link--stack {
  display: block;
  margin-top: 8px;
}

/* Miara wiersza w środkowej strefie — 64ch było liczone dla układu,
   w którym kolumna zajmowała całą pozostałą szerokość.
   FALA 2: `ch` w Onest kłamie — znak „0" jest szerszy od średniej, więc 52ch dawało
   82 znaki, nie 52. Zmierzona szerokość znaku to 0,5113 em, czyli 72 znaki = 36em. */
.craft__group--b .sysrow__text {
  max-width: 36em;
}

/* Próg 1180 px policzony, nie zgadnięty: przy trzech strefach kolumna
   treści ma szerokość kontenera (0,92 × viewport) minus 264 px etykiety,
   320 px wyniku i dwa gapy. Przy 1024 px zostaje jej 297 px, czyli ok. 35
   znaków w wierszu — za ciasno. Przy 1180 px jest to ok. 430 px i to jest
   granica, poniżej której trzecia strefa schodzi pod treść. */
@media (max-width: 1180px) {
  /* 264 px, nie mniej: zmierzony chip „PROJEKT INDYWIDUALNY” ma 247 px.
     Węższa kolumna łamie go na dwa wiersze bez żadnego zysku miejsca. */
  .craft__group--b .sysrow--sys {
    grid-template-columns: minmax(200px, 264px) minmax(0, 1fr);
    /* .sysrow ma gap: clamp(16px, 3vw, 48px) — przy jednym wierszu dotyczy
       tylko kolumn, ale tu wiersze są dwa i row-gap dokłada się do marginesów,
       robiąc ok. 60 px wyrwy między treścią a wynikiem. */
    row-gap: 0;
  }
  .craft__group--b .sysrow__out {
    grid-column: 2;
    margin-top: 18px;
  }
  .craft__group--b .sysrow__text {
    /* FALA 2: 62ch dawało 82 znaki (znak „0" w Onest jest szerszy od średniej).
       To DRUGA reguła tej pary — pierwsza stoi poza media query. Poprawienie tylko
       tamtej nic nie dało, bo ta jest później i aktywna od 1180 px w dół. */
    max-width: 36em;
  }
}

/* ≤720 px .sysrow przechodzi na flex-column (subpages-r07.css), więc
   o kolejności decyduje order, nie grid-column. */
@media (max-width: 720px) {
  .craft__group--b .sysrow__out {
    order: 3;
    margin-top: 6px;
  }
}

/* ── PRZEGLĄD 2026-08-17 ─────────────────────────────────────────────────────
   Na /produkty/ .kbgroup jest WSTĘPEM grupy katalogu (nagłówek+opis), nie kartą
   — a wspólna lista karciana subpages-r07 dawała mu tło/ramkę/docięty róg
   („duch karty" za nagłówkami grup A/B). Arkusz ładowany tylko przez /produkty/. */
.kbgroup { background: none; border: 0; clip-path: none; padding: 0; }
/* D13: pasek WYNIK kończył się w połowie wiersza „Kombajn social media" —
   jedyny wiersz z 4-liniowym tekstem obok 2-liniowego wyniku. */
.craft__group--b .sysrow--sys .sysrow__out { align-self: stretch; }
