/* ============================================================
   kregle.bookgame.io — warstwa kręglowa
   ------------------------------------------------------------
   ZASADA (KREGLE-BRIEF.md §4):
   css/style.css jest wspólny z sale_zabaw_www i trzymamy go BAJT W BAJT
   identyczny w obu repo. Każda zmiana wyglądu specyficzna dla kręgli
   idzie TUTAJ. Ten plik ładuje się po style.css, więc nadpisuje reguły
   bez podbijania specyficzności.

   Kontrola rozjazdu:  ./deploy/check-sync.sh ../sale_zabaw_www
   ============================================================ */

:root {
  /* Paleta marki bez zmian (brief §2) — różnicujemy fotografią i mockupami,
     nie nowym systemem kolorów. Nadpisania tokenów wpisuj tutaj. */
}

/* ============================================================
   PROBLEMY — druga linijka „a z BookGame…”
   Brief daje w każdej karcie problem + rozwiązanie. style.css zna
   tylko jeden <p>, więc zdanie z rozwiązaniem dostaje własną klasę.
   ============================================================ */
.problem-card .problem-solution {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border-2);
  color: var(--c-green-dark);
  font-weight: 500;
}

/* ============================================================
   PORÓWNANIE — sześć kroków zamiast czterech, układ pionowy
   ------------------------------------------------------------
   Brief opisuje przepływ strzałkami w dół, a sześć kroków nie zmieściłoby
   się w poziomym rzędzie ze style.css (104 px na krok × 6 + strzałki
   przekracza szerokość panelu w kolumnie 1280 px). Wracamy więc do układu
   pionowego na każdym breakpoincie, a strzałkę „w prawo” obracamy w dół —
   dzięki temu nie trzeba dokładać ikony do sprite'u.
   ============================================================ */
@media (min-width: 768px) {
  .compare-steps {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
  }
  .compare-step {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: auto;
    text-align: left;
  }
  .cs-bubble { width: 52px; height: 52px; margin: 0; }
  .cs-bubble .icon { width: 22px; height: 22px; }
  .cs-label { font-size: 14px; line-height: 1.45; }
  .compare-panel.without .cs-label { color: var(--c-text-55); }
  .compare-panel.with .cs-label { color: var(--c-ink-75); }
  /* strzałka w dół, wyśrodkowana pod kółkiem: (52 − 16) / 2 = 18 px */
  .cs-arrow {
    display: block;
    width: 16px; height: 16px;
    margin: 0 0 0 18px;
    transform: rotate(90deg);
  }
}

/* ============================================================
   KORZYŚCI — cytowane pytanie klienta w karcie „Ogranicz telefony”
   ============================================================ */
.benefit-body em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-weight: 600;
  color: var(--c-ink-75);
}

/* ============================================================
   FUNKCJE DLA KRĘGIELNI (#funkcje) — sekcja, której nie ma na
   bilety.bookgame.io. Wygląd kart zgodny z .problem-card, żeby strona
   pozostała jednym systemem wizualnym.
   ============================================================ */
.lanes-grid { display: flex; flex-direction: column; gap: 12px; }

.lane-card {
  padding: 22px 20px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--c-border);
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
.lane-card .icon { width: 26px; height: 26px; color: var(--c-green); }
.lane-card h3 {
  margin: 14px 0 8px;
  font-size: 16px; font-weight: 600; line-height: 1.4;
  color: var(--c-ink);
}
.lane-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--c-text-55); }

/* pas „Dodatkowe atrakcje” — argument cross-sellowy z briefu §6 */
.lanes-extra {
  margin-top: 12px;
  padding: 22px 20px;
  border-radius: 14px;
  background: var(--c-tint-lime-18);
  border: 1px solid var(--c-border-green);
}
.lanes-extra > .icon { width: 26px; height: 26px; color: var(--c-green-dark); }
.lanes-extra h3 {
  margin: 12px 0 6px;
  font-size: 16px; font-weight: 600; color: var(--c-ink);
}
.lanes-extra p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--c-text-55); }

.lanes-chips {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 14px 0 0; padding: 0;
}
.lanes-chips li {
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--c-border-green);
  font-size: 13px; font-weight: 500;
  color: var(--c-green-dark);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .lanes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); }
  .lane-card { padding: 30px 26px; border-radius: var(--r-card); box-shadow: var(--sh-card); }
  .lane-card:hover { box-shadow: var(--sh-card-hover); border-color: var(--c-green); }
  .lane-card .icon { width: 32px; height: 32px; }
  .lane-card h3 { margin: 20px 0 12px; font-size: 17px; }
  .lane-card p { font-size: 14.5px; line-height: 1.65; }

  .lanes-extra {
    margin-top: var(--grid-gap);
    padding: 28px 30px;
    border-radius: var(--r-card);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 18px;
  }
  .lanes-extra > .icon { width: 32px; height: 32px; margin-top: 2px; }
  .lanes-extra h3 { margin: 0 0 6px; font-size: 17px; }
  .lanes-chips { grid-column: 2; margin-top: 16px; }
}

@media (min-width: 1280px) {
  .lanes-grid { grid-template-columns: repeat(4, 1fr); }
  .lanes-extra { grid-template-columns: auto 1fr auto; align-items: center; }
  .lanes-chips { grid-column: 3; margin-top: 0; justify-content: flex-end; }
}

/* ============================================================
   CASE STUDY — lead pod nagłówkiem, atrybucja cytatu i link do
   pełnej historii na bookgame.io.
   Link jest tu celowo: zasada cytowania z briefu §7 (nie przeklejamy
   całej historii) i jednocześnie linkowanie wewnętrzne z §8.
   ============================================================ */
.case-lead {
  margin: -8px 0 20px;
  font-size: 14.5px; line-height: 1.6;
  color: var(--c-text-55);
}

.case-quote .case-cite {
  margin-top: 10px;
  font-size: 13px; font-weight: 600;
  color: var(--c-ink);
}
.case-quote .case-cite span {
  display: block;
  font-weight: 400;
  color: var(--c-text-45);
}
.case-quote .case-more { margin-top: 12px; }
.case-quote .case-more a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--c-green-dark);
}
.case-quote .case-more .icon { width: 14px; height: 14px; }

/* Karta bez zdjęcia — nie mamy fotografii z kręgielni, a stockowa twarz obok
   imienia i nazwiska realnej osoby czytałaby się jako jej portret.
   Zamiast tego karta idzie na pełną szerokość, a punkty rozkładają się
   na cztery kolumny. Gdyby zdjęcie się kiedyś znalazło, wystarczy przywrócić
   .case-photo w index.html i usunąć te trzy nadpisania. */
@media (min-width: 768px) {
  .case-card { grid-template-columns: 1fr; }
  .case-body { padding: 40px 44px 44px; }
  .case-body h2 { margin-bottom: 12px; }
  .case-lead { margin: 0 0 26px; font-size: 15px; }
}
@media (min-width: 1280px) {
  .case-points { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}


/* ============================================================
   MOCKUPY SYSTEMU — kalendarz i widget są teraz inline'owanym SVG,
   nie <img>. Powód: SVG w <img> nie widzi @font-face strony, więc
   Poppins zamieniłby się na czcionkę systemową.
   style.css ustawia obraz przez `.system-shot img`, co inline SVG
   omija — stąd te dwie reguły.
   Generator: tools/make-mockups.py
   ============================================================ */
.system-shot > svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mock-cal text,
.mock-widget text {
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ============================================================
   PROGRAM PILOTAŻOWY (zamiast case study na stronach branż bez
   referencji). Ten sam .case-card; różnica: przycisk CTA w miejscu
   linku „Przeczytaj całą historię”.
   Uwaga: plik nazywa się kregle.css z przyczyn historycznych — od
   wprowadzenia szablonu (index.php) jest WSPÓLNY dla wszystkich subdomen.
   ============================================================ */
.case-pilot .case-quote .case-more { margin-top: 16px; }
.case-pilot .case-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
}
.case-pilot .case-cta .icon { width: 18px; height: 18px; }

/* ============================================================
   STOPKA — linki do pozostałych stron branżowych (tylko strony z szablonu;
   statyczne kręgle ich nie mają).
   ============================================================ */
.footer-related {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding-top: 0;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.footer-related a { color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 3px; }
.footer-related a:hover { color: #fff; }