/* ============================================================
   STRONY PRODUKTÓW + HUBY (wersja 2) - wspólne dla wszystkich
   stron z tools/build.mjs oraz ręcznych crittall-style-doors
   i aluminium-slim-sliding (siatka zdjęć, karty pokrewne).
   Prefiks .p- = "product", .hub- = huby. Tokeny z adp-v2.css.
   Ruch: tylko wspólne .rv i data-split; stan .fx-static i
   prefers-reduced-motion obsłużone na dole pliku.
   ============================================================ */

/* kotwice (#anchor kart opcji, #spec, #faq, #quote) nie chowają się pod przypiętą nawigacją */
main [id]{scroll-margin-top:calc(var(--navh) + 24px)}

/* ---------- START: zdjęcie w pełnej jasności + dwa przyciski ---------- */
.phero__media picture{display:block;width:100%;height:100%}
.phero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.phero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(10,10,10,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media(max-width:560px){.phero__cta .btn{flex:1 1 100%}}

/* ---------- CO TO JEST + WARIANTY ---------- */
.p-intro{display:grid;gap:14px;color:var(--text-2);font-size:17px;line-height:1.6;max-width:62ch}
.p-opts{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:14px}
.p-opts--2{--n:2}.p-opts--3{--n:3}.p-opts--4{--n:4}.p-opts--1{--n:1}
.p-opt{position:relative;display:grid;gap:14px;align-content:start;background:var(--ink-2);border:1px solid var(--line);padding:clamp(22px,2.4vw,32px);transition:border-color var(--t-mid) var(--ease)}
.p-opt__no{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--cyan)}
.p-opt p{color:var(--text-2);font-size:15px}
.p-opt:target{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)} /* handlowiec linkuje #anchor - karta jest od razu widoczna */
@media(max-width:1060px){.p-opts--4{--n:2}}
@media(max-width:860px){.p-opts--3{--n:2}.p-opts--3 .p-opt:last-child{grid-column:1/-1}}
@media(max-width:760px){.p-opts{grid-template-columns:1fr}.p-opts--3 .p-opt:last-child{grid-column:auto}}

/* ---------- SIATKA ZDJĘĆ (6-8) + lightbox ---------- */
.p-grid{display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:10px}
.p-grid--c3{--c:3}.p-grid--c4{--c:4}
.p-grid__item{position:relative;min-width:0}
.p-grid__btn{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--ink-3);cursor:zoom-in;position:relative}
.p-grid__btn img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.p-grid__btn:hover img{transform:scale(1.04)}
.p-grid__btn:focus-visible{outline-offset:-2px}
.p-grid__item.is-wide-d{grid-column:span 2}
.p-grid__item.is-wide-d .p-grid__btn{aspect-ratio:8/3}
.p-grid__cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0 4px}
.p-grid__cap b{font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.p-grid__cap span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);text-align:right}
@media(max-width:1060px){.p-grid--c4{--c:3}.p-grid--c4 .p-grid__item.is-wide-d{grid-column:auto}.p-grid--c4 .p-grid__item.is-wide-d .p-grid__btn{aspect-ratio:4/3}}
@media(max-width:760px){
  .p-grid{--c:2!important;gap:8px}
  .p-grid__item.is-wide-d{grid-column:auto}
  .p-grid__item.is-wide-d .p-grid__btn{aspect-ratio:4/3}
  .p-grid__item.is-wide-m{grid-column:1/-1}
  .p-grid__item.is-wide-m .p-grid__btn{aspect-ratio:8/3}
  .p-grid__cap{display:grid;gap:2px;padding-top:8px}
  .p-grid__cap b{font-size:15px}
  .p-grid__cap span{text-align:left;font-size:9.5px}
}
/* stopka sekcji galerii na stronach ręcznych: link do realizacji i portfolio */
.p-gal__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:clamp(32px,4vw,56px);padding-top:24px;border-top:1px solid var(--line)}
.p-gal__foot p{font-family:var(--f-display);font-weight:700;font-size:clamp(19px,1.8vw,24px);letter-spacing:-.015em;max-width:34ch}
.p-gal__foot .p-gal__links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}

/* lightbox: <dialog> (Esc zamyka natywnie, fokus zamknięty w oknie, tło inert) */
html.lbx-open{overflow:hidden}
.lbx{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(6,6,7,.94);color:#fff;
  opacity:0;transition:opacity var(--t-mid) var(--ease)}
.lbx[open]{display:grid;place-items:center;opacity:1}
.lbx::backdrop{background:transparent}
.lbx__fig{display:grid;gap:14px;justify-items:center;max-width:min(1600px,100vw - 140px);padding:72px 0 28px}
.lbx__img{max-width:100%;max-height:calc(100svh - 170px);width:auto;height:auto;object-fit:contain;background:#111113}
.lbx__cap{display:flex;gap:24px;justify-content:space-between;width:100%;font-size:14px;color:rgba(255,255,255,.78)}
.lbx__no{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.5);flex:none}
.lbx__btn{position:absolute;width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);background:rgba(10,10,10,.6);color:#fff;transition:border-color var(--t-fast),color var(--t-fast)}
.lbx__btn:hover{border-color:var(--cyan);color:var(--cyan)}
.lbx__btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.lbx__close{top:14px;right:14px}
.lbx__prev{left:14px;top:50%;transform:translateY(-50%)}
.lbx__next{right:14px;top:50%;transform:translateY(-50%)}
.lbx--one .lbx__prev,.lbx--one .lbx__next{display:none}
@media(max-width:760px){
  .lbx__fig{max-width:100vw;padding:64px 0 84px}
  .lbx__img{max-height:calc(100svh - 190px)}
  .lbx__cap{padding-inline:16px;font-size:13px}
  .lbx__prev,.lbx__next{top:auto;bottom:14px;transform:none}
  .lbx__prev{left:16px}.lbx__next{right:16px}
}

/* ---------- SPECYFIKACJA: broszura pod tabelą ---------- */
.p-dl{margin-top:clamp(28px,3vw,40px);display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.spec dd{overflow-wrap:anywhere}

/* ---------- FAQ: nagłówek obok listy na desktopie ---------- */
.p-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
@media(max-width:860px){.p-faq{grid-template-columns:1fr}}

/* ---------- KARTY (pokrewne w sekcji końcowej, produkty na hubie) ---------- */
.p-rel{margin-top:clamp(64px,8vw,112px);display:grid;gap:22px}
.final .wrap.p-rel{grid-template-columns:minmax(0,1fr);align-items:start} /* .final .wrap ma 2 kolumny (tekst + karta CTA); pasek pokrewnych idzie na całą szerokość */
.p-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.p-cards--1{grid-template-columns:minmax(0,1fr);max-width:440px}
.p-cards--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
.p-card{display:grid;grid-template-rows:auto 1fr;background:var(--ink-2);border:1px solid var(--line);transition:border-color var(--t-mid) var(--ease)}
.final .p-card{background:#111113;border-color:rgba(255,255,255,.12)}
.p-card__ph{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ink-3)}
.p-card__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.p-card__body{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px 20px}
.p-card__body b{font-family:var(--f-display);font-weight:700;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.015em;line-height:1.2}
.p-card__go{flex:none;display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.final .p-card__go{color:rgba(255,255,255,.55)}
.p-card__go .btn__arrow{transition:transform var(--t-mid) var(--ease)}
.p-card:hover{border-color:var(--cyan)}
.p-card:hover img{transform:scale(1.04)}
.p-card:hover .p-card__go{color:var(--cyan)}
.p-card:hover .btn__arrow{transform:translateX(4px)}
@media(max-width:960px){.p-cards,.p-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.p-cards,.p-cards--2{grid-template-columns:1fr}.p-card__ph{aspect-ratio:16/10}}

/* ---------- HUB: grupy jak w menu ---------- */
.hub-g{display:grid;gap:26px}
.hub-g+.hub-g{margin-top:clamp(56px,7vw,96px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line)}
.hub-g__head{display:grid;gap:12px}
.p-cards--hub{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}

/* ---------- stan końcowy bez ruchu ---------- */
.fx-static .lbx,.fx-static .p-grid__btn img,.fx-static .p-card img{transition:none}
@media(prefers-reduced-motion:reduce){.p-grid__btn:hover img,.p-card:hover img{transform:none}}

/* siatka z przewagą zdjęć pionowych (np. stalowe drzwi): kafle 4:5 */
.p-grid--tall .p-grid__btn{aspect-ratio:4/5}
.p-grid--tall .p-grid__item.is-wide-d .p-grid__btn{aspect-ratio:8/5}
@media(max-width:1060px){.p-grid--tall.p-grid--c4 .p-grid__item.is-wide-d .p-grid__btn{aspect-ratio:4/5}}
@media(max-width:760px){.p-grid--tall .p-grid__item.is-wide-d .p-grid__btn{aspect-ratio:4/5}.p-grid--tall .p-grid__item.is-wide-m .p-grid__btn{aspect-ratio:8/5}}
html.lbx-open .ck{visibility:hidden} /* baner zgody nie prześwituje pod otwartym zdjęciem */