/* ============================================================
   PODSTRONA: about (wersja 2)
   Tylko komponenty, których nie ma we wspólnym adp-v2.css.
   Prefiks .ab- = "about". Jeden nowy efekt: trasa rysowana scrollem
   (.ab-route, silnik w assets/pages/about.js), pinowanie jak .fx-draw.
   Stan końcowy pod html.fx-static i .no-js na dole pliku.
   ============================================================ */

/* Hero: jasne zdjęcie kuchni, cień tylko góra (nav) i dół (copy); środek kadru zostaje jasny */
.ab-hero{min-height:100vh;min-height:100svh}
.ab-hero .phero__shade{display:none} /* 2026-10-13: bez scrimu */
@media(max-width:860px){.ab-hero .phero__shade{display:none} /* 2026-10-13: bez scrimu */}

/* ---- Trasa: sekcja wysoka na 300vh, scena przypięta na 100svh; lewa strona lista przystanków, prawa plansza SVG ---- */
.ab-route{position:relative;height:300vh;background:var(--ink);color:#fff}
.ab-route__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center;gap:clamp(24px,4vw,64px);padding:var(--navh) var(--gutter) clamp(32px,6vh,72px)}
.ab-route__side{display:grid;gap:24px;max-width:480px}
.ab-route__stops{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.12)}
.ab-route__stops li{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.34);font-size:15px;transition:color .4s var(--ease)}
.ab-route__stops li b{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.14em;padding-top:4px;color:rgba(255,255,255,.34);transition:color .4s var(--ease)}
.ab-route__stops li span{display:block;font-size:13px;line-height:1.5;margin-top:4px;color:rgba(255,255,255,.3);transition:color .4s var(--ease)}
.ab-route__stops li.on{color:#fff}
.ab-route__stops li.on b{color:var(--cyan)}
.ab-route__stops li.on span{color:rgba(255,255,255,.6)}
.ab-route__pct{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.5)}
.ab-route__pct b{font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
/* plansza: hairline rama jak reszta systemu, pod spodem siatka kropek zamiast linii (linie ma sekcja drzwi) */
.ab-route__board{position:relative;border:1px solid var(--line-2);background:var(--ink-2);overflow:hidden}
.ab-route__svg{width:100%;height:auto;max-height:84vh;display:block}
.ab-route__dot{fill:rgba(255,255,255,.28)}
.ab-route__under{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.5;stroke-dasharray:3 9;stroke-linecap:round}
.ab-route__line{fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ab-route__pin circle{fill:var(--ink);stroke:#F4F4F1;stroke-width:2.5}
.ab-route__pin.on circle{stroke:var(--cyan)}
.ab-route__chip{fill:#F4F4F1}
.ab-route__pin text{font-family:var(--f-mono);font-size:13px;font-weight:500;letter-spacing:.08em;fill:var(--ink)}
.ab-route__head{fill:var(--cyan)}
.ab-route__aura{fill:rgba(34,202,214,.22)}
/* Niskie okno (laptop ze skalowaniem Windows): lista musi zmieścić się nad dolną krawędzią przypiętej sceny */
@media(min-width:861px) and (max-height:880px){
  .ab-route__side{gap:16px}
  .ab-route__side .h2{font-size:clamp(28px,4.2vh,48px)} /* 2026-10-13: -20% */
  .ab-route__stops li{padding:8px 0;font-size:14px}
  .ab-route__stops li span{font-size:12px;margin-top:2px}
  .ab-route__svg{max-height:70vh}
}
@media(min-width:861px) and (max-height:720px){
  .ab-route__stops li span{display:none}
}
@media(max-width:860px){
  .ab-route{height:260vh}
  .ab-route__sticky{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:20px;padding-top:calc(var(--navh) + 8px);padding-bottom:calc(var(--mbarh,72px) + 16px)}
  .ab-route__side{gap:12px;max-width:none}
  .ab-route__side .h2{font-size:30px}
  .ab-route__stops{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .ab-route__stops li{grid-template-columns:48px 1fr;padding:8px 0;font-size:13px}
  .ab-route__stops li span{display:none}
  .ab-route__pct{display:none}
  .ab-route__svg{max-height:46vh}
  .ab-route__pin text{font-size:16px}
}

/* Mikrohistoria: krótsza sekcja, sam nagłówek i lead */
.ab-honest{padding-block:clamp(72px,9vw,128px)}

/* FAQ obok nagłówka na desktopie (ten sam układ co .cs-faq) */
.ab-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.ab-faq .faq{border-top:1px solid var(--line)}
@media(max-width:860px){.ab-faq{grid-template-columns:1fr}}

/* ---- Stan końcowy (reduced-motion, ?static=1, brak JS): trasa narysowana, wszystkie przystanki zapalone, nic nie przypięte ---- */
.fx-static .ab-route,.no-js .ab-route{height:auto}
.fx-static .ab-route__sticky,.no-js .ab-route__sticky{position:relative;height:auto;min-height:100vh;padding-block:var(--section)}
.fx-static .ab-route__stops li,.no-js .ab-route__stops li{color:#fff}
.fx-static .ab-route__stops li b,.no-js .ab-route__stops li b{color:var(--cyan)}
.fx-static .ab-route__stops li span,.no-js .ab-route__stops li span{color:rgba(255,255,255,.6)}
.fx-static .ab-route__pin circle,.no-js .ab-route__pin circle{stroke:var(--cyan)}
.fx-static .ab-route__line,.no-js .ab-route__line{stroke-dasharray:none!important;stroke-dashoffset:0!important}

/* 2026-10-13 (Dominik): tło mapy = ta sama kratka co .fx-draw__grid + kula cyanowego światła za kursorem (.fx-draw__glow); tylko mysz, wyłączone w static/reduced-motion */
.ab-route__board{position:relative;isolation:isolate;border:1px solid var(--line)}
.ab-route__grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:48px 48px;opacity:.5;-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 34%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 50%,#000 34%,transparent 80%)}
.ab-route__glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);background-image:linear-gradient(rgba(34,202,214,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(34,202,214,.6) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(240px circle at var(--mx,-999px) var(--my,-999px),#000 0%,rgba(0,0,0,.35) 45%,transparent 72%);mask-image:radial-gradient(240px circle at var(--mx,-999px) var(--my,-999px),#000 0%,rgba(0,0,0,.35) 45%,transparent 72%)}
.ab-route__glow::after{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--mx,-999px) var(--my,-999px),rgba(34,202,214,.16),transparent 70%)}
.ab-route.is-lit .ab-route__glow{opacity:1}
.ab-route__svg{position:relative;z-index:1}
.fx-static .ab-route__glow{display:none}