/* Lokamo :: strony dla/ i problemy/ (segmenty lokali i problemy).
   Buduje na home.css (ch, faq, cta, btn, lnk) i szablon.css (sub-hero,
   sub-facts, plans, tp-*). Tu tylko klocki tych stron: lista skokow w hero
   indeksu, karta diagnozy w hero problemu, karty modulow z mini-scenami
   z assets/site/podglady.* (wstawia je segmenty.js), kroki, sekcja
   rozwiazania na ciemnym tle i powiazane linki. */

/* ---------- Hero indeksu: lista skokow zamiast makiety ---------- */
.sg-hub .sub-hero__grid{align-items:end}
.sg-jump{display:grid;gap:10px}
.sg-jump a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;padding:24px 26px;border:1px solid var(--d-line2);border-radius:18px;background:rgba(255,255,255,.03);color:#fff;text-decoration:none;transition:background-color .25s,border-color .25s}
.sg-jump a:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.26)}
.sg-jump a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sg-jump span{grid-column:1;font-size:12.5px;color:var(--mist)}
.sg-jump b{grid-column:1;font-size:clamp(24px,2.4vw,32px);font-weight:560;letter-spacing:-.03em;line-height:1.1}
.sg-jump small{grid-column:1;font-size:15px;line-height:1.5;color:var(--d-text)}
.sg-jump svg{grid-column:2;grid-row:1 / span 3;width:22px;height:22px;transition:transform .3s var(--ease-out)}
.sg-jump a:hover svg{transform:translateX(4px)}

/* ---------- Hero problemu: karta diagnozy ---------- */
.sg-diag{width:min(100%,480px);margin-inline:auto;padding:26px 26px 22px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid var(--d-line2);box-shadow:0 2em 3.4em -1.6em rgba(0,0,0,.8)}
.sg-diag__k{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mist)}
.sg-diag__k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 0 3px rgba(46,75,255,.25)}
.sg-diag__h{margin-top:14px;font-size:22px;font-weight:560;letter-spacing:-.02em;line-height:1.25;color:#fff}
.sg-diag__cols{display:flex;justify-content:space-between;margin-top:18px;padding-bottom:10px;border-bottom:1px solid var(--d-line);font-size:12px;color:var(--mist)}
.sg-diag__list{list-style:none}
.sg-diag__list li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--d-line);font-size:16px;color:#fff}
.sg-diag__list li>span{font-size:12px;color:var(--mist)}
.sg-diag__list em{font-style:normal;font-size:13px;padding:6px 11px;border-radius:999px;border:1px solid var(--d-line2);color:var(--d-text);white-space:nowrap}
.sg-diag__list em.is-go{background:rgba(46,75,255,.2);border-color:rgba(143,160,255,.5);color:#fff}
.sg-diag__f{margin-top:16px;font-size:14.5px;line-height:1.5;color:var(--d-text)}
.sg-diag__f b{color:#fff;font-weight:560}
.sg-path{margin-top:14px;padding:16px 16px 18px;border-radius:14px;border:1px solid var(--d-line2)}
.sg-path.is-go{border-color:rgba(143,160,255,.5);background:rgba(46,75,255,.14)}
.sg-path__h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;color:#fff}
.sg-path__h b{font-weight:560}
.sg-path__h span{font-size:12.5px;color:var(--mist)}
.sg-path__s{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin-top:12px;list-style:none}
.sg-path__s li{display:inline-flex;align-items:center;font-size:13px;color:var(--d-text)}
.sg-path__s li+li::before{content:"";width:12px;height:1px;margin:0 4px;background:var(--mist)}
.sg-path__s span{padding:6px 10px;border-radius:999px;border:1px solid var(--d-line2)}
.is-go .sg-path__s span{border-color:rgba(143,160,255,.55);color:#fff}

/* ---------- Naglowek sekcji z przyciskiem pauzy ---------- */
.sg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.sg-pause{flex:none;border-color:var(--line);background:#fff;color:var(--ink)}
.sg-pause:hover{background:var(--paper)}

/* ---------- Karty modulow z mini-scena ---------- */
.sg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:56px}
.sg-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sg-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden;transition:border-color .25s,box-shadow .35s}
.ch--alt .sg-card{background:var(--paper);border-color:transparent}
.sg-card:hover{border-color:#D4D4DA;box-shadow:var(--float)}
.sg-card:has(.sg-card__go:focus-visible){outline:2px solid var(--cobalt);outline-offset:3px}
.sg-card__vis{padding:8px 8px 0}
.sg-card__b{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.sg-card__k{font-size:12.5px;color:var(--steel)}
.sg-card h3{margin-top:10px;font-size:21px;font-weight:580;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.sg-card__d{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--text2);text-wrap:pretty}
.sg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;list-style:none}
.sg-chips li{padding:6px 10px;border-radius:999px;background:var(--paper);font-size:13px;color:var(--text2)}
.ch--alt .sg-chips li{background:#fff}
.sg-card__go{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:18px;font-weight:560;font-size:15px;color:var(--ink);text-decoration:none;outline:none}
.sg-card__go::after{content:"";position:absolute;inset:0;border-radius:inherit}
.sg-card__go svg{transition:transform .3s var(--ease-out)}
.sg-card:hover .sg-card__go svg{transform:translateX(3px)}
.sg-card--big .sg-card__vis{display:flex;justify-content:center;margin:8px 8px 0;padding:0;border-radius:14px;background:#EEEEF1 radial-gradient(circle at 1px 1px,rgba(13,13,15,.08) 1px,transparent 1.3px) 0 0/20px 20px}
.sg-card--big .sg-pv{width:min(100%,400px)}
.sg-card--row{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);margin-top:12px}
.sg-card--row .sg-card__vis{padding:8px}
.sg-card--row .sg-card__b{justify-content:center;padding:32px 36px}
.sg-card--row h3{font-size:clamp(22px,2.2vw,28px)}
.sg-card--row .sg-card__go{margin-top:0}

/* Pudelko mini-sceny: te same zmienne co naglowek (--k-*), bo podglady.css ich uzywa */
.sg-pv{--k-ink:#0D0D0F;--k-steel:#6C6C72;--k-mute:#8C8C92;--k-mist:#A6A6AB;--k-line:#E6E6EA;--k-paper:#F5F5F7;--k-text2:#45454B;--k-dtext:#C9C9CD;--k-cobalt:#2E4BFF;--k-cobalt-l:#8FA0FF;--k-ok:#1B9E5A;--k-warn:#D98A0B;--k-font:"Lokamo Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--k-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;--k-out:cubic-bezier(.16,1,.3,1);--k-ease:cubic-bezier(.2,.7,.2,1);font-family:var(--k-font);text-align:left}
.sg-pv.nvp{min-height:0;aspect-ratio:380 / 402;border-radius:14px;overflow:hidden}
.sg-pv .nvp__bg{bottom:0}
.sg-pv .nvp__cap{display:none}
.sg-pv__fb{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--steel)}
.sg-pv:has(.nvp__s) .sg-pv__fb{display:none}

/* ---------- Kroki i przewodnik ---------- */
.sg-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:56px;list-style:none}
.sg-steps>li{display:flex;flex-direction:column;padding:26px 24px 28px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.ch--alt .sg-steps>li{background:var(--paper);border-color:transparent}
.sg-steps__n{font-size:12.5px;color:var(--cobalt)}
.sg-steps h3{margin-top:14px;font-size:20px;font-weight:580;letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.sg-steps p{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--text2);text-wrap:pretty}
.sg-steps a{color:var(--ink);text-underline-offset:3px}
.sg-steps__go{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:auto;padding-top:18px}
.sg-steps__go a{display:inline-flex;align-items:center;gap:6px;font-weight:560;font-size:15px;text-decoration:none}
.sg-steps__go a:hover{text-decoration:underline}

/* ---------- Koszt problemu: trzy kolumny ---------- */
@media (min-width:1000px){.sg-f3 .sub-facts__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Rozwiazanie na ciemnym tle (scena aparatu z /opinie) ---------- */
.sg-sol{position:relative;background:var(--ink);color:var(--paper);padding:136px 0;overflow:clip}
.sg-sol__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:64px;align-items:center}
.sg-sol .ch__label{color:var(--mist)}
.sg-sol .ch__t{color:#fff}
.sg-sol .ch__lead{color:var(--d-text)}
.sg-sol__steps{margin-top:36px;list-style:none;border-top:1px solid var(--d-line)}
.sg-sol__steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 10px;padding:18px 0;border-bottom:1px solid var(--d-line)}
.sg-sol__steps .mono{grid-row:1 / span 2;padding-top:4px;font-size:12.5px;color:#8FA0FF}
.sg-sol__steps b{font-size:17px;font-weight:560;color:#fff}
.sg-sol__steps p{font-size:15px;line-height:1.55;color:var(--d-text)}
.sg-sol__links{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:32px}
.sg-sol .oh__scene{width:100%;max-width:600px;margin-inline:auto}

/* ---------- Powiazane ---------- */
.sg-rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:40px;list-style:none}
.sg-rel a{display:flex;flex-direction:column;gap:8px;height:100%;padding:22px 22px 20px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .25s,box-shadow .35s}
.ch--alt .sg-rel a{background:var(--paper);border-color:transparent}
.sg-rel a:hover{border-color:#D4D4DA;box-shadow:var(--float)}
.sg-rel a:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.sg-rel span{font-size:12px;color:var(--steel)}
.sg-rel b{font-size:17.5px;font-weight:580;letter-spacing:-.015em;line-height:1.25}
.sg-rel small{font-size:14.5px;line-height:1.5;color:var(--text2)}
.sg-rel svg{margin-top:auto;padding-top:6px;box-sizing:content-box;transition:transform .3s var(--ease-out)}
.sg-rel a:hover svg{transform:translateX(3px)}

@media (max-width:999px){
  .sg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-cards--2{grid-template-columns:1fr}
  .sg-steps{grid-template-columns:1fr}
  .sg-sol{padding:104px 0}
  .sg-sol__grid{grid-template-columns:1fr;gap:48px}
}
@media (max-width:640px){
  .sg-cards{grid-template-columns:1fr;margin-top:40px}
  .sg-head{flex-direction:column;align-items:flex-start}
  .sg-card--row{grid-template-columns:1fr}
  .sg-card--row .sg-card__vis{padding:8px 8px 0}
  .sg-card--row .sg-card__b{padding:20px 22px 22px}
  .sg-steps{margin-top:40px}
  .sg-sol{padding:80px 0}
  .sg-diag{padding:20px 18px 18px;border-radius:18px}
  .sg-diag__h{font-size:19px}
  .sg-diag__list li{gap:10px;font-size:15px}
  .sg-jump a{padding:20px}
}
.sg-cards--one{grid-template-columns:minmax(0,1fr);margin-top:48px}
.sg-cards--one .sg-card--row{margin-top:0}
.sg-diag{margin:0 auto}