/* Bloki wlasne stron paneli sciennych. Ladowany z szablonu bloku (link w body),
   wiec wchodzi po wszystkich arkuszach z base.html. Zmienne z css/nowa.css.
   Prefiks pb- (pasek do pobrania). NIE mieszac z panele-scienne.css. */

.pb-pas{background:var(--chlod,#F3F5F7);border-top:1px solid var(--linia,#DFE4E9);border-bottom:1px solid var(--linia,#DFE4E9);padding:22px 0}
.p-stream .pb-pas,.stream-content .pb-pas{padding:22px 0}
.pb-in{display:flex;align-items:center;gap:26px}
.pb-znak{flex:none;width:52px;height:52px;display:grid;place-items:center;color:var(--nieb,#006EB6);background:#fff;border:1px solid var(--linia,#DFE4E9)}
.pb-znak svg{width:26px;height:26px;display:block}
.pb-znak img{width:100%;height:100%;object-fit:cover;display:block}
.pb-tresc{flex:1 1 auto;min-width:0}
.pb-etyk{margin:0 0 4px;font-size:11px;letter-spacing:.16em}
.pb-zdanie{margin:0;color:var(--tekst,#2D2D2D);font-size:16.5px;line-height:1.4;max-width:60ch}
.pb-btn{flex:none;padding:13px 22px;font-size:14px}
.pb-btn span{font-size:15px}

@media (max-width:820px){
  .pb-pas{padding:20px 0}
  .pb-in{flex-wrap:wrap;gap:16px}
  .pb-znak{width:44px;height:44px}
  .pb-znak svg{width:22px;height:22px}
  .pb-tresc{flex:1 1 200px}
  .pb-zdanie{font-size:15.5px}
  .pb-btn{width:100%;justify-content:center}
}

/* CTA "Skontaktuj się" na stronach paneli sciennych: miejsce dla grafiki produktu.
   Granatowy panel, biala typografia i przycisk sa dorobkiem css/panele-scienne.css
   i zostaja bez zmian. Zmieniamy TYLKO to, co ukrywa grafike: obraz przestaje byc
   przyciemnionym tlem (opacity .3 pod granatowa zaslona ::after, przez co rysunek
   kreska na bieli znikal) i dostaje wlasna kolumne na bialej plycie.
   Zakres: strony z paskiem .pb-pas, czyli kategoria + szesc stron produktowych.
   Selektory maja #main, bo tyle wymaga specyficznosc regul z panele-scienne.css. */
body:has(.pb-pas) #main .block-cta .cta-panel{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center;
  gap:clamp(28px,4vw,72px);min-height:0;
  padding:clamp(44px,5vw,76px) clamp(26px,7vw,130px);
}
body:has(.pb-pas) #main .block-cta .cta-panel-copy{max-width:none}
body:has(.pb-pas) #main .block-cta .cta-panel-media{position:relative;z-index:2;margin:0;inset:auto}
body:has(.pb-pas) #main .block-cta .cta-panel-media img{
  width:100%;height:auto;object-fit:contain;opacity:1;filter:none;display:block;background:#fff}

@media (max-width:900px){
  body:has(.pb-pas) #main .block-cta .cta-panel{grid-template-columns:1fr;gap:24px;
    padding:clamp(36px,7vw,52px) 26px}
}

/* Newsletter na stronach paneli sciennych: wariant WASKI + MINI (jedno zdanie, samo pole
   e-mail), przeniesiony spod stopki nad teaser wizualizatora. Sasiedztwo to biala sekcja
   montazu i bialy wizualizator, wiec pasek dostaje granatowe tlo - ten sam brandowy
   przerywnik, co CTA nizej i pasek na stronie glownej.
   UWAGA na specyficznosc: panele-scienne.css ma `#main .stream-content > * > section
   {background:transparent}` (1,3,2), wiec samo `.nl--waski` (1,2,1) przegrywalo i sekcja
   zostawala biala z bialym tekstem. Stad pelna sciezka z `section.nl.nl--waski`. */
body:has(.pb-pas) #main .stream-content > * > section.nl.nl--waski{
  background:var(--granat,#171B2B);padding:44px 0}
body:has(.pb-pas) #main .nl--waski .nl-in{grid-template-columns:.42fr 1.58fr;gap:36px;align-items:center}
body:has(.pb-pas) #main .nl--waski .etyk{color:#7fc0ea}
body:has(.pb-pas) #main .nl--waski .nl-tresc h2{color:#fff;font-size:clamp(20px,1.9vw,26px);
  max-width:30ch;margin:6px 0 16px}
body:has(.pb-pas) #main .nl--waski .nl-obraz img{border-color:rgba(255,255,255,.16)}
body:has(.pb-pas) #main .nl--waski .nl-pola{grid-template-columns:minmax(0,1fr) auto;gap:10px;max-width:620px}
body:has(.pb-pas) #main .nl--waski .nl-pole span{color:#fff}
body:has(.pb-pas) #main .nl--waski .nl-pole span small{color:rgba(255,255,255,.6)}
body:has(.pb-pas) #main .nl--waski .nl-pole input{border-color:rgba(255,255,255,.28)}
body:has(.pb-pas) #main .nl--waski .nl-pole input:focus{outline-color:#7fc0ea}
body:has(.pb-pas) #main .nl--waski .nl-slij{background:#fff;border-color:#fff;color:var(--granat,#171B2B)}
body:has(.pb-pas) #main .nl--waski .nl-slij:hover{background:var(--chlod,#F3F5F7);border-color:var(--chlod,#F3F5F7)}
body:has(.pb-pas) #main .nl--waski .nl-status{color:#fff;min-height:0}
body:has(.pb-pas) #main .nl--waski .nl-status.blad{color:#ff9d94}
body:has(.pb-pas) #main .nl--waski .nl-status.ok{color:#8ce0b0}
body:has(.pb-pas) #main .nl--waski .nl-zgoda{color:rgba(255,255,255,.6);font-size:12px}
body:has(.pb-pas) #main .nl--waski .nl-zgoda a{color:#7fc0ea}
body:has(.pb-pas) #main .nl--waski .nl-zgoda a:hover{border-color:#7fc0ea}

@media (max-width:900px){
  body:has(.pb-pas) #main .stream-content > * > section.nl.nl--waski{padding:34px 0}
  body:has(.pb-pas) #main .nl--waski .nl-in{grid-template-columns:1fr;gap:20px}
  body:has(.pb-pas) #main .nl--waski .nl-obraz{max-width:240px}
  body:has(.pb-pas) #main .nl--waski .nl-pola{grid-template-columns:1fr}
}

/* Nawigacja po rodzajach paneli sciennych na koncu strony (dawne miejsce newslettera).
   Sasiedzi to granatowe CTA nad nia i granatowa stopka pod nia, wiec blok jest bialy.
   Kafle maja oddech i hairline zamiast pelnych krawedzi, miniatura to niski, wyciszony
   kadr wizualizacji (tlo, nie bohater), strzalka siedzi w wierszu tytulu, a hover
   robi jedna spokojna rzecz: podkresla tytul i rozjasnia kadr.
   Prefiks pn-; sekcja stoi POZA #main (slot bloku newsletter). */
.pn-rodzaje{background:#fff;padding:clamp(48px,5.5vw,76px) 0}
.pn-rodzaje .etyk{margin:0}
.pn-rodzaje h2{margin:8px 0 34px;font-size:clamp(24px,2.4vw,34px)}
.pn-siatka{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 30px}
.pn-kafel{min-width:0}
.pn-kafel a,.pn-kafel .pn-in{display:block;color:var(--granat,#171B2B);text-decoration:none}
.pn-obraz{display:block;aspect-ratio:8/3;overflow:hidden;background:var(--chlod,#F3F5F7)}
.pn-obraz img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.88) brightness(.96);
  transition:filter .5s var(--ease,ease),transform .7s var(--ease,ease)}
.pn-kafel a:hover .pn-obraz img,.pn-kafel a:focus-visible .pn-obraz img{
  filter:none;transform:scale(1.02)}
.pn-wiersz{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:14px 0 13px;border-bottom:1px solid var(--linia,#DFE4E9);
  transition:border-color .35s var(--ease,ease)}
.pn-kafel a:hover .pn-wiersz,.pn-kafel a:focus-visible .pn-wiersz{border-color:var(--nieb,#006EB6)}
.pn-tytul{font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:16px;line-height:1.25;
  transition:color .3s var(--ease,ease)}
.pn-kafel a:hover .pn-tytul,.pn-kafel a:focus-visible .pn-tytul{color:var(--nieb,#006EB6)}
.pn-znak{flex:none;color:var(--nieb,#006EB6);font-size:15px;line-height:1;opacity:.4;
  transition:opacity .3s var(--ease,ease),transform .35s var(--ease,ease)}
.pn-kafel a:hover .pn-znak,.pn-kafel a:focus-visible .pn-znak{opacity:1;transform:translateX(3px)}
/* biezaca strona: kafel zostaje, ale jest cichy i nieklikalny */
.pn-kafel--tu .pn-obraz img{filter:grayscale(1) brightness(1.06);opacity:.55}
.pn-kafel--tu .pn-tytul{color:var(--szary,#6E7378)}
.pn-tu{flex:none;font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--szary,#6E7378)}
.pn-wszystkie{display:inline-flex;align-items:center;gap:8px;margin-top:32px}

@media (max-width:900px){.pn-siatka{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}}
@media (max-width:520px){
  .pn-rodzaje h2{margin-bottom:26px}
  .pn-siatka{grid-template-columns:1fr;gap:20px}
  .pn-obraz{aspect-ratio:3/1}
}
@media (prefers-reduced-motion:reduce){.pn-obraz img,.pn-wiersz,.pn-tytul,.pn-znak{transition:none}}

/* "Gdzie sprawdzi się najlepiej" na 6 stronach produktowych: trzy zwarte kafle ze zdjeciem.
   Wzorzec c-index (premium-category.css) to wierszowy indeks z folio 46-104px i zdjeciem
   odslanianym na hover (clip-path 60%) - zaprojektowany pod szesc dlugich pozycji na kategorii.
   Przy trzech jednozdaniowych pozycjach robil sie z tego rozstrzelony blok: numer osobno,
   tekst osobno, zdjecie jako pionowy pasek z boku. Tutaj kafel = zdjecie u gory + podpis pod nim.
   Zakres: strony z paskiem .pb-pas BEZ kategorii, czyli tylko strony produktowe -
   indeks rodzajow na /panele-scienne/ zostaje wierszowy, klikalny i z hover-reveal. */
body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-index-section{
  padding:clamp(40px,5vw,66px) 0}
body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid h2.c-index-h{
  padding-top:22px;margin:0;max-width:24ch;font-size:clamp(24px,2.4vw,34px);font-weight:600;
  letter-spacing:-.02em;line-height:1.15}
body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .card-grid.c-index{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:26px;
  background:var(--linia,#DFE4E9);border:1px solid var(--linia,#DFE4E9)}
body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-row{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:0;
  min-height:0;padding:0;border:0;background:#fff;cursor:auto}
body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-row:hover{background:#fff}
/* zdjecie: pelna szerokosc kafla u gory, bez clip-path i bez odbarwienia */
body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-row-media{
  grid-column:1;grid-row:1;order:0;align-self:auto;min-height:0;aspect-ratio:4/3;
  clip-path:none;background:var(--chlod,#F3F5F7);margin:0}
body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-row-media img{
  width:100%;height:100%;object-fit:cover;filter:none;transform:none;
  transition:transform .5s var(--ease,ease)}
body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-row:hover .c-row-media{clip-path:none}
body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-row-scrim{display:none}
body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-row-body{
  grid-column:1;grid-row:2;display:block;padding:18px 20px 22px}
body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-num{margin:0}
body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-num-code{display:none}
body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-num-folio{
  font-family:Poppins,Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;
  line-height:1;opacity:1;color:var(--nieb,#006EB6)}
body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-row:hover .c-num-folio{
  opacity:1;color:var(--nieb,#006EB6)}
body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-row-title{
  grid-column:1;grid-row:auto;margin:10px 0 6px;font-size:20px;font-weight:600;letter-spacing:-.01em;
  line-height:1.2;color:var(--granat,#171B2B)}
body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-row-text{
  grid-column:1;grid-row:auto;margin:0;font-size:15.5px;line-height:1.5;
  color:var(--szary,#6E7378);max-width:none}

@media (max-width:860px){
  body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .card-grid.c-index{
    grid-template-columns:1fr}
  body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-row{
    grid-template-columns:minmax(0,150px) minmax(0,1fr);grid-template-rows:auto}
  body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-row-media{
    grid-row:1;aspect-ratio:1/1}
  body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-row-body{
    grid-column:2;grid-row:1;align-self:center;padding:16px 18px}
}
@media (prefers-reduced-motion:reduce){
  body:has(.pb-pas):not(.page-slug-panele-scienne) #main .block-card_grid .c-row-media img{transition:none}
}

/* /panele-scienne/: blok z filmem montazowym wchodzi w miejsce pelnoszerokosciowej
   mozaiki realizacji, wiec dostaje oprawe sekcji, a nie waskiej ramki w kolumnie:
   naglowek i opis w jednej kolumnie nad filmem, film na calej szerokosci tresci 16:9.
   Regula .h-imgtext-media--video z nowa.css (min-width:0, iframe 100%) zostaje nietknieta. */
body.page-slug-panele-scienne:has(.pb-pas) #main .block-image_text .image-text:has(.h-imgtext-media--video){
  display:block;max-width:1100px;margin-inline:auto}
body.page-slug-panele-scienne:has(.pb-pas) #main .block-image_text .image-text:has(.h-imgtext-media--video) .h-imgtext-panel{
  padding:0 0 22px;background:transparent;border:0;box-shadow:none;max-width:62ch}
body.page-slug-panele-scienne:has(.pb-pas) #main .block-image_text .image-text:has(.h-imgtext-media--video) .h-imgtext-mark{display:none}
body.page-slug-panele-scienne:has(.pb-pas) #main .block-image_text .image-text:has(.h-imgtext-media--video) .h-imgtext-media--video{
  width:100%;margin:0;aspect-ratio:16/9;background:var(--granat,#171B2B)}
body.page-slug-panele-scienne:has(.pb-pas) #main .block-image_text .image-text:has(.h-imgtext-media--video) .h-imgtext-media--video iframe{
  width:100%;height:100%;display:block;border:0}

/* rytm tel po usunieciu galerii: blokow jest dziewiec zamiast dziesieciu, wiec regula
   nth-child(10) z panele-scienne.css juz nie lapie CTA, a nth-child(9) dawalaby mu --chlod.
   Przywracamy granat na ostatniej pozycji, reszta rytmu (3 granat, 5 chlod, 7 n50) sie zgadza. */
body.page-slug-panele-scienne:has(.pb-pas) #main .stream-content > *:nth-child(9).block-cta{
  background:var(--granat,#171B2B)}