/* Bloki partnerskie na podstronach serwisu (partnerzy/bloki.py). Prefiks bp-.
   Ładowany TYLKO na stronach z blokiem (link w szablonie bloku), poza pakiet.css:
   zmiana tego pliku = collectstatic, bez zbuduj_css.py.
   Tokeny z księgi znaku (jak partnerzy.css): --nieb #006EB6, --nieb-800, --n50,
   --granat #171B2B, --chlod #F3F5F7, --szary, --linia. Poppins nagłówki, Roboto tekst.
   Osiem wariantów: pas, wymiar, scena, karta, boks, region, argument, notka. */

.bp{--bp-nieb:var(--nieb,#006EB6);--bp-nieb-800:var(--nieb-800,#013A6C);--bp-n50:var(--n50,#E6F1F8);
  --bp-granat:var(--granat,#171B2B);--bp-chlod:var(--chlod,#F3F5F7);--bp-szary:var(--szary,#5F6368);
  --bp-linia:var(--linia,#DFE4E9);--bp-tekst:#3d4247;--bp-ease:cubic-bezier(.2,.8,.2,1);
  font-family:Roboto,Arial,sans-serif;color:var(--bp-tekst)}
.bp figure{margin:0}
.bp img{display:block;max-width:100%;height:auto}
.bp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* etykieta z kreską, jak p-hero-rule + eyebrow w serwisie */
.bp .bp-etyk{display:flex;align-items:center;gap:12px;margin:0;font:600 12px/1.3 Poppins,Arial,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bp-nieb)}
.bp .bp-etyk:before{content:"";flex:0 0 28px;height:1px;background:currentColor}
.bp .bp-h{margin:16px 0 0;font:600 clamp(25px,2.5vw,36px)/1.14 Poppins,Arial,sans-serif;letter-spacing:-.015em;
  color:var(--bp-granat);text-wrap:balance}
.bp .bp-p{margin:16px 0 0;font-size:17px;line-height:1.6;max-width:56ch;color:var(--bp-tekst)}

/* przyciski: kwadratowe jak .btn w nowa.css; ikona „nowa karta” */
.bp .bp-btn{display:inline-flex;align-items:center;gap:12px;margin-top:28px;min-height:52px;padding:14px 24px;
  border:1px solid var(--bp-nieb);background:var(--bp-nieb);color:#fff;font:500 15px/1.2 Poppins,Arial,sans-serif;
  text-decoration:none;transition:background .18s var(--bp-ease),border-color .18s var(--bp-ease),color .18s var(--bp-ease)}
.bp .bp-btn:hover{background:var(--bp-nieb-800);border-color:var(--bp-nieb-800);color:#fff}
.bp .bp-btn--kontur{background:transparent;color:var(--bp-granat);border-color:var(--bp-granat)}
.bp .bp-btn--kontur:hover{background:var(--bp-granat);border-color:var(--bp-granat)}
.bp .bp-btn--maly{margin-top:0;min-height:44px;padding:10px 16px;font-size:14px;white-space:nowrap}
.bp-ikona{flex:0 0 auto;transition:transform .25s var(--bp-ease)}
.bp a:hover .bp-ikona{transform:translate(2px,-2px)}
.bp a:focus-visible{outline:2px solid var(--bp-nieb);outline-offset:3px}
.bp .bp-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 15px/1.3 Poppins,Arial,sans-serif;
  color:var(--bp-nieb);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;white-space:nowrap}
.bp .bp-link:hover{color:var(--bp-nieb-800)}

/* ---------- 1. pas: kategoria paneli ściennych ---------- */
.bp-pas{background:var(--bp-chlod);padding-block:clamp(56px,7vw,104px)}
.bp-pas-in{display:grid;gap:32px;align-items:center}
.bp-pas-obraz img{width:100%;background:#fff;border:1px solid var(--bp-linia)}
@media (min-width:900px){
  .bp-pas-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,88px)}
}

/* ---------- 2. wymiar: rodziny paneli, na końcu treści (za „Otwórz wizualizator” i „Skontaktuj się”) ---------- */
.bp-wymiar{padding-block:clamp(32px,4vw,64px) clamp(40px,6vw,88px)}
.bp-wymiar-in{display:grid;gap:24px;padding-block:clamp(28px,3.5vw,44px);border-top:1px solid var(--bp-granat);
  border-bottom:1px solid var(--bp-linia)}
.bp-wymiar .bp-h{font-size:clamp(23px,2.1vw,30px)}
.bp-wymiar .bp-btn{margin-top:0}
/* linia wymiarowa jak na rysunku technicznym: znaczniki na końcach, liczba pod linią */
.bp-wymiar-miara{align-self:start;width:min(100%,240px)}
.bp-wymiar-linia{position:relative;display:block;height:18px;border-inline:1px solid var(--bp-granat)}
.bp-wymiar-linia i{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--bp-nieb)}
.bp-wymiar-linia i:before,.bp-wymiar-linia i:after{content:"";position:absolute;top:-3px;width:7px;height:7px;
  border-top:1px solid var(--bp-nieb);border-left:1px solid var(--bp-nieb)}
.bp-wymiar-linia i:before{left:1px;transform:rotate(-45deg)}
.bp-wymiar-linia i:after{right:1px;transform:rotate(135deg)}
.bp-wymiar-liczba{display:block;margin-top:14px;font:400 clamp(52px,5.4vw,80px)/.95 Poppins,Arial,sans-serif;
  letter-spacing:-.03em;color:var(--bp-granat)}
.bp-wymiar-liczba small{margin-left:8px;font-size:.3em;letter-spacing:.02em;color:var(--bp-szary)}
/* telefon i tablet: blok dla ekip ma być cichy (ocena v2: 531 px = cały ekran telefonu). Linia wymiarowa
   z liczbą mała, w jednym wierszu z etykietą; mniejszy nagłówek, tekst i przycisk. */
@media (max-width:899px){
  .bp-wymiar-in{grid-template-columns:auto minmax(0,1fr);gap:14px 18px;padding-block:22px 24px}
  .bp-wymiar-miara{width:92px;grid-row:1}
  .bp-wymiar-linia{height:12px}
  .bp-wymiar-liczba{margin-top:6px;font-size:30px}
  .bp-wymiar-tekst{display:contents}
  .bp-wymiar .bp-etyk{grid-column:2;grid-row:1;align-self:center}
  .bp-wymiar .bp-h{grid-column:1/-1;margin-top:4px;font-size:21px}
  .bp-wymiar .bp-p{grid-column:1/-1;margin-top:-4px;font-size:15px;line-height:1.55}
  .bp-wymiar-akcja{grid-column:1/-1}
  .bp-wymiar .bp-btn{min-height:44px;padding:10px 18px;font-size:14px}
}
@media (min-width:900px){
  .bp-wymiar-in{grid-template-columns:minmax(0,3fr) minmax(0,6fr) auto;gap:clamp(32px,4vw,64px);align-items:center}
  .bp-wymiar-akcja{align-self:end}
}

/* ---------- 3. scena: elewacje aluminiowe ---------- */
.bp-scena{padding-block:clamp(56px,7vw,112px)}
.bp-scena-in{display:grid}
.bp-scena-obraz img{width:100%}
.bp-scena-karta{position:relative;background:#fff;border:1px solid var(--bp-linia);border-top:3px solid var(--bp-nieb);
  padding:clamp(24px,3vw,44px);margin:-48px 12px 0}
@media (min-width:900px){
  .bp-scena-in{grid-template-columns:repeat(12,minmax(0,1fr))}
  .bp-scena-obraz{grid-column:5/13;grid-row:1}
  .bp-scena-karta{grid-column:1/7;grid-row:1;align-self:end;margin:0 0 clamp(24px,4vw,64px)}
}

/* ---------- 4. karta: panele łazienkowe ---------- */
.bp-karta{padding-block:clamp(48px,6vw,96px)}
.bp-karta-in{display:grid;background:var(--bp-n50);border:1px solid #D3E4F0}
.bp-karta-obraz{overflow:hidden;background:#fff}
.bp-karta-obraz img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.bp-karta-tekst{padding:clamp(28px,4.5vw,72px);align-self:center}
@media (min-width:900px){
  .bp-karta-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
}

/* ---------- 5. boks: strefa plików, dla projektantów ---------- */
.bp-boks{padding-block:0 clamp(48px,6vw,88px)}
.bp-boks-in{display:grid;gap:24px;align-items:center;background:#fff;border:1px solid var(--bp-linia);
  border-left:4px solid var(--bp-nieb);padding:clamp(24px,3.5vw,52px)}
.bp-boks-obraz{order:-1;width:min(62%,230px)}
@media (min-width:760px){
  .bp-boks-in{grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,80px)}
  .bp-boks-obraz{order:0;width:clamp(180px,19vw,270px)}
}

/* ---------- 6. region: ostatni wiersz przedstawicieli na kontakcie ---------- */
.bp-region .bp-region-flaga{display:block;width:26px;height:20px;border:1px dashed var(--bp-szary,#5F6368);box-sizing:border-box}
.bp-region .rp-region{color:var(--nieb,#006EB6)}
.bp-region .bp-region-akcja{display:flex;align-items:center;justify-content:flex-start;justify-self:start}
.bp-region .bp-btn{margin-top:0}
.bp-region .bp-btn,.bp-region .bp-btn:hover{color:#fff}
/* wiersz stoi w siatce .rp-row z material-precision.css; bez .bp na przodku zmienne bierzemy z :root */
.bp-region .bp-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;border:1px solid var(--nieb,#006EB6);
  background:var(--nieb,#006EB6);font:500 14px/1.2 Poppins,Arial,sans-serif;text-decoration:none;white-space:nowrap;transition:background .18s}
.bp-region .bp-btn:hover{background:var(--nieb-800,#013A6C);border-color:var(--nieb-800,#013A6C)}
.bp-region .bp-btn:hover .bp-ikona{transform:translate(2px,-2px)}

/* ---------- 7. argument: wizualizator jako narzędzie sprzedaży ---------- */
.bp-argument{padding-block:clamp(56px,7vw,112px) clamp(24px,3vw,40px);background:#fff}
.bp .bp-argument-h{margin:18px 0 0;max-width:19ch;font:600 clamp(32px,4.4vw,62px)/1.05 Poppins,Arial,sans-serif;
  letter-spacing:-.022em;color:var(--bp-granat);text-wrap:balance}
.bp-argument-dol{display:grid;gap:32px;margin-top:clamp(32px,4vw,56px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--bp-linia)}
.bp-argument-obraz img{width:100%;border:1px solid var(--bp-linia)}
@media (min-width:900px){
  .bp-argument-dol{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,5vw,96px);align-items:start}
  .bp-argument .bp-p{margin-top:0}
}

/* ---------- 8. notka: koniec artykułu ---------- */
.bp-notka{display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px 16px;align-items:start;
  width:min(720px,calc(100% - 40px));margin:0 auto clamp(48px,6vw,72px);padding-block:22px 16px;
  border-top:1px solid var(--bp-linia);border-bottom:1px solid var(--bp-linia)}
.bp-notka-znak{width:28px;height:28px;margin-top:2px}
.bp .bp-notka-tekst{margin:0;font-size:16px;line-height:1.55;color:var(--bp-tekst)}
.bp-notka-tekst strong{font-family:Poppins,Arial,sans-serif;font-weight:600;color:var(--bp-granat)}
.bp-notka .bp-link{grid-column:2;justify-self:start}
@media (min-width:760px){
  .bp-notka{grid-template-columns:28px minmax(0,1fr) auto;align-items:center;padding-block:20px}
  .bp-notka .bp-link{grid-column:auto}
  .bp-notka-znak{margin-top:0}
}

@media (prefers-reduced-motion:reduce){.bp *{transition:none!important}}
/* długie złożenia w tłumaczeniach (hu, et, lv: „Paigaldusbrigaadidele”, „Fürdőszoba-szalonoknak”):
   tylko łamanie awaryjne, gdy słowo nie mieści się w 390 px. BEZ hyphens:auto: dzieliło nazwę marki
   („STRAMA PA-NELS”) i zwykłe słowa w nagłówkach („Fassa-den”). */
.bp .bp-h,.bp .bp-etyk,.bp .bp-p,.bp-region .rp-region,.bp-region .rp-role{overflow-wrap:anywhere}