/* ===================================================================
   Elewacje aluminiowe (/elewacje-aluminiowe/) - kolorystyka i typografia
   wg księgi znaku STRAMA PANELS, wrzesień 2026.

   WSZYSTKIE reguły są zawężone do body.page-slug-elewacje-aluminiowe,
   bo szablon home/templates/home/content_page.html jest WSPÓLNY dla
   wszystkich podstron produktowych (/panele-scienne/, /panele-lazienkowe/,
   /galeria/ itd.). Nic tutaj nie może wyciec na inną stronę.
   Bliźniaczy arkusz dla łazienek: home/static/css/lazienki.css.

   Arkusz ładowany PO nowa.css, więc zmienne (--nieb, --granat, --chlod,
   --n50, --linia, --szary, --tekst) i wzorce .btn/.etyk są już dostępne.

   Co ten plik naprawia (strona dziedziczyła stary wzorzec "premium"):
   - kremowe tła #F4F1EA / #F0EDE6 / #F4F2EC  -> biel, --chlod, --n50
   - granat #11375F i cyjan #157CA8 z akcentów -> --nieb / --nieb-800
   - nagłówki "Noto Sans Display" 300-520      -> Poppins 600 (h1 700)
   - ramki i pudełka w kremie                  -> hairline --linia
   - .button w starym kroju                    -> wygląd .btn / .btn--kontur

   Kolejność bloków w StreamField po skrypcie
   narzedzia/nowa-glowna/elewacje_tresc.py:
    1 image_text (Alu Design)      2 image_text (ekologia)
    3 image_text (montaż, wideo)   4 mounting_options (sposoby montażu)
    5 decor_explorer (ukryty=True, nie renderuje się)
    6 section_heading (parametry)  7 stats
    8 technical_table              9 mounting_options (akcesoria)
   10 image_text (zastosowania)   11 image_text (dekory i kolorystyka)
   12 sampler                     13 gallery
   14 image_text (cena)           15 faq            16 cta
   =================================================================== */

/* ---- 1. Typografia strony ---------------------------------------- */
body.page-slug-elewacje-aluminiowe #main h1,
body.page-slug-elewacje-aluminiowe #main h2,
body.page-slug-elewacje-aluminiowe #main h3,
body.page-slug-elewacje-aluminiowe #main h4{
  font-family:Poppins,Arial,sans-serif;
  color:var(--granat);
  letter-spacing:-.015em;
  text-wrap:balance;
}
body.page-slug-elewacje-aluminiowe #main h1{font-weight:700}
body.page-slug-elewacje-aluminiowe #main h2,
body.page-slug-elewacje-aluminiowe #main h3,
body.page-slug-elewacje-aluminiowe #main h4{font-weight:600}
body.page-slug-elewacje-aluminiowe #main p,
body.page-slug-elewacje-aluminiowe #main li,
body.page-slug-elewacje-aluminiowe #main dd{font-family:Roboto,Arial,sans-serif}
body.page-slug-elewacje-aluminiowe #main .eyebrow{
  font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--nieb);
}

/* przyciski: wygląd .btn / .btn--kontur z księgi znaku */
body.page-slug-elewacje-aluminiowe #main .button{
  gap:12px;padding:15px 26px;border:1px solid var(--nieb);background:var(--nieb);color:#fff;
  font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:15px;letter-spacing:0;
  border-radius:0;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
body.page-slug-elewacje-aluminiowe #main .button:hover{background:var(--nieb-800);border-color:var(--nieb-800);color:#fff}
body.page-slug-elewacje-aluminiowe #main .button--ghost{background:transparent;color:var(--granat);border-color:var(--szary)}
body.page-slug-elewacje-aluminiowe #main .button--ghost:hover{background:var(--granat);color:#fff;border-color:var(--granat)}

/* ---- 2. Okruszki + hero ------------------------------------------ */
body.page-slug-elewacje-aluminiowe #main .p-subpage-top{background:#fff}
body.page-slug-elewacje-aluminiowe #main .p-hero{
  background:#fff;border-bottom:1px solid var(--linia);padding:18px 0 76px;
}
body.page-slug-elewacje-aluminiowe #main .p-breadcrumbs{padding:26px 0 8px;color:var(--szary);font-size:12px}
body.page-slug-elewacje-aluminiowe #main .p-breadcrumbs a{color:var(--szary)}
body.page-slug-elewacje-aluminiowe #main .p-breadcrumbs a:hover{color:var(--nieb)}
body.page-slug-elewacje-aluminiowe #main .p-breadcrumbs [aria-current="page"]{color:var(--granat)}

/* kreska marki nad nadtytułem - taka sama jak na stronie głównej */
body.page-slug-elewacje-aluminiowe #main .p-hero-rule{
  display:block;width:56px;height:2px;background:var(--nieb);margin:0 0 22px;border:0;
}
body.page-slug-elewacje-aluminiowe #main .p-hero-title{
  font-family:Poppins,Arial,sans-serif;font-weight:700;color:var(--granat);
  font-size:clamp(36px,4.2vw,58px);line-height:1.06;letter-spacing:-.02em;
  margin:10px 0 18px;max-width:16ch;
}
body.page-slug-elewacje-aluminiowe #main .p-hero-text{
  color:var(--szary);font-size:18px;line-height:1.55;max-width:52ch;
}
body.page-slug-elewacje-aluminiowe #main .p-hero-actions{margin-top:26px;gap:12px}

/* Nagłówek strony: grafika marki (bryła domu w kresce z prawdziwą teksturą
   paneli Alu Design i przekrojem podkonstrukcji) zamiast fotografii z CMS.
   Wstawiona bezpośrednio ścieżką, bo rendition fill-... przyciąłby kadr 16:9
   do 1,37:1 i zabrał biel przeznaczoną na nagłówek. Pole hero_image w CMS
   zostaje nietknięte, tylko go tu nie renderujemy: powrót = skasowanie tych
   reguł. Ten sam wzorzec działa na /galeria/ (galeria.css). */
body.page-slug-elewacje-aluminiowe #main .p-hero-media{
  /* strama.css wypuszcza media hero poza siatkę do prawej krawędzi okna;
     grafika ma zostać w kolumnie, żeby przekrój nie kleił się do brzegu */
  box-shadow:none;border:0;min-height:420px;margin-right:0;
  background:#fff url("/media/konfigurator/znaki/naglowki/elewacje.webp?v=1")
    center center / contain no-repeat;
}
body.page-slug-elewacje-aluminiowe #main .p-hero-media img,
body.page-slug-elewacje-aluminiowe #main .p-hero-shade{display:none}
body.page-slug-elewacje-aluminiowe #main .p-hero-media::after,
body.page-slug-elewacje-aluminiowe #main .page-hero-media::after{display:none}
body.page-slug-elewacje-aluminiowe #main .p-hero-grid{align-items:center;gap:56px}

/* ---- 3. Rytm tła sekcji ------------------------------------------
   Tła są naprzemienne: biel / --chlod / --n50, liczby i CTA na --granat. */
body.page-slug-elewacje-aluminiowe #main .stream-content{background:#fff}
body.page-slug-elewacje-aluminiowe #main .stream-content > *{background:#fff}
body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(1),
body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(4),
body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(11),
body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(14){background:var(--chlod)}
body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(2),
body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(9),
body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(12){background:var(--n50)}
body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(7),
body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(16){background:var(--granat)}
/* sekcje wewnątrz bloków są przezroczyste, żeby tło bloku było widoczne */
body.page-slug-elewacje-aluminiowe #main .stream-content > * > section{background:transparent}
/* nagłówek "Parametry" i liczby czytają się jak jedna sekcja */
body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(6) .section-heading{padding-bottom:24px}

/* ---- 4. image_text: bez kremowych kart --------------------------- */
body.page-slug-elewacje-aluminiowe #main .h-imgtext-panel::before{display:none}   /* kremowa ramka wewnętrzna */
body.page-slug-elewacje-aluminiowe #main .h-imgtext-mark{display:none}            /* znak wodny w ciepłym tle */
body.page-slug-elewacje-aluminiowe #main .h-imgtext-panel{
  background:transparent;border:0;box-shadow:none;padding:0;color:var(--tekst);
}
body.page-slug-elewacje-aluminiowe #main .h-imgtext-panel h2{
  font-size:clamp(26px,2.8vw,38px);line-height:1.14;letter-spacing:-.015em;margin:10px 0 16px;max-width:20ch;
}
body.page-slug-elewacje-aluminiowe #main .h-imgtext-body{color:var(--tekst);font-size:16.5px;line-height:1.62}
body.page-slug-elewacje-aluminiowe #main .h-imgtext-body p{margin:0 0 14px}
body.page-slug-elewacje-aluminiowe #main .h-imgtext-body p:last-child{margin-bottom:0}
body.page-slug-elewacje-aluminiowe #main .h-imgtext-body strong,
body.page-slug-elewacje-aluminiowe #main .h-imgtext-body b{font-family:Poppins,Arial,sans-serif;font-weight:600;color:var(--granat)}
body.page-slug-elewacje-aluminiowe #main .h-imgtext-body ul{margin:0 0 14px;padding-left:20px}
body.page-slug-elewacje-aluminiowe #main .h-imgtext-body li{margin-bottom:7px}
body.page-slug-elewacje-aluminiowe #main .h-imgtext-body li::marker{color:var(--nieb)}
body.page-slug-elewacje-aluminiowe #main .h-imgtext-body a{color:var(--nieb);border-bottom:1px solid rgba(0,110,182,.45);transition:border-color .18s}
body.page-slug-elewacje-aluminiowe #main .h-imgtext-body a:hover{border-color:var(--nieb)}
body.page-slug-elewacje-aluminiowe #main .h-imgtext-media img{background:var(--chlod)}
body.page-slug-elewacje-aluminiowe #main .h-imgtext-media--video iframe{border:0;background:var(--granat)}
body.page-slug-elewacje-aluminiowe #main .image-text{background:transparent;gap:64px;align-items:center}

/* ---- 5. section_heading ------------------------------------------ */
body.page-slug-elewacje-aluminiowe #main .section-heading h2{
  font-size:clamp(28px,3.2vw,42px);line-height:1.12;letter-spacing:-.018em;max-width:22ch;
}
body.page-slug-elewacje-aluminiowe #main .section-heading p:not(.eyebrow){
  color:var(--szary);font-size:17px;line-height:1.6;max-width:52ch;
}

/* ---- 6. stats: liczby Poppins 600, kreska --nieb ------------------ */
body.page-slug-elewacje-aluminiowe #main .stats-section{background:transparent;color:#fff;overflow:hidden}
body.page-slug-elewacje-aluminiowe #main .stats-section .h-stats-watermark{opacity:.05;filter:none}
body.page-slug-elewacje-aluminiowe #main .stats-section .eyebrow{color:#7fc0ea}
body.page-slug-elewacje-aluminiowe #main .stats-section h2{color:#fff;font-size:clamp(26px,2.8vw,38px)}
body.page-slug-elewacje-aluminiowe #main .stats-grid{border-top:1px solid rgba(255,255,255,.16)}
body.page-slug-elewacje-aluminiowe #main .stats-grid article{border-right:1px solid rgba(255,255,255,.12);padding-top:34px}
body.page-slug-elewacje-aluminiowe #main .stats-grid article:last-child{border-right:0}
body.page-slug-elewacje-aluminiowe #main .stats-grid article::before{
  content:"";display:block;width:34px;height:2px;background:var(--nieb);margin:0 0 22px;
}
body.page-slug-elewacje-aluminiowe #main .stats-grid strong{
  font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:clamp(26px,2.5vw,34px);line-height:1.02;
  letter-spacing:-.03em;color:#fff;margin-bottom:14px;display:block;
}
body.page-slug-elewacje-aluminiowe #main .stats-grid h3{
  font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:12px;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:6px;
}
body.page-slug-elewacje-aluminiowe #main .stats-grid p{color:#9fb6c9;font-size:13.5px;line-height:1.5}

/* ---- 7. technical_table: hairline, etykiety w --nieb -------------- */
body.page-slug-elewacje-aluminiowe #main .technical-section{background:transparent}
body.page-slug-elewacje-aluminiowe #main .technical-layout header h2{
  font-size:clamp(28px,3.2vw,42px);line-height:1.12;letter-spacing:-.018em;
}
body.page-slug-elewacje-aluminiowe #main .technical-layout header>p:not(.eyebrow){
  color:var(--szary);font-size:16.5px;line-height:1.6;
}
body.page-slug-elewacje-aluminiowe #main .technical-table{border-top:1px solid var(--granat)}
body.page-slug-elewacje-aluminiowe #main .technical-table>div{border-bottom:1px solid var(--linia);transition:background .22s var(--ease)}
body.page-slug-elewacje-aluminiowe #main .technical-table>div:hover{background:rgba(0,110,182,.045)}
body.page-slug-elewacje-aluminiowe #main .technical-table dt{
  font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--nieb);
}
body.page-slug-elewacje-aluminiowe #main .technical-table dd{color:var(--tekst);font-size:15.5px;line-height:1.55}
body.page-slug-elewacje-aluminiowe #main .technical-footnote{
  background:var(--chlod);border-left:2px solid var(--nieb);color:var(--szary);
  font-size:12.5px;line-height:1.6;padding:16px 20px;
}

/* ---- 8. mounting_options: rysunki warstw ------------------------- */
body.page-slug-elewacje-aluminiowe #main .mt-section{background:transparent;padding:96px 0}
body.page-slug-elewacje-aluminiowe #main .mt-h{
  font-size:clamp(26px,2.8vw,38px);line-height:1.14;letter-spacing:-.018em;color:var(--granat);margin:0;
}
body.page-slug-elewacje-aluminiowe #main .mt-intro{color:var(--szary);font-size:16.5px;line-height:1.6;max-width:60ch;margin:12px 0 0}
/* karty w hairline zamiast kreski z prześwitu siatki: niepełny rząd nie zostawia szarej dziury */
body.page-slug-elewacje-aluminiowe #main .mt-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px;background:transparent;align-items:stretch}
body.page-slug-elewacje-aluminiowe #main .mt-item{background:#fff;border:1px solid var(--linia);padding:26px 24px 28px}
/* stały box rysunku: bez niego obrazy loading="lazy" nie mają wysokości i się nie doczytują */
body.page-slug-elewacje-aluminiowe #main .mt-media{
  aspect-ratio:3/4;background:#fff;border:0;border-radius:0;
}
body.page-slug-elewacje-aluminiowe #main .mt-media img{width:100%;height:100%;object-fit:contain}
body.page-slug-elewacje-aluminiowe #main .mt-body{margin-top:20px;padding-top:18px;border-top:1px solid var(--linia)}
body.page-slug-elewacje-aluminiowe #main .mt-title{
  font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:17px;line-height:1.25;
  letter-spacing:-.005em;color:var(--granat);
}
/* opisy warstw są zapisane w CMS jako lista w kolejnych wierszach,
   szablon bloku wypisuje je w jednym <p> - stąd pre-line */
body.page-slug-elewacje-aluminiowe #main .mt-text{
  white-space:pre-line;color:var(--tekst);font-size:14.5px;line-height:1.75;
  max-width:none;margin-top:10px;
}
/* lista warstw pod rysunkiem: ten sam niebieski znacznik co na przekroju,
   dzięki temu numer 4 w opisie i numer 4 na rysunku to widocznie ta sama rzecz */
body.page-slug-elewacje-aluminiowe #main .mt-warstwy{
  list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;
}
body.page-slug-elewacje-aluminiowe #main .mt-warstwy li{
  display:flex;align-items:flex-start;gap:10px;
  color:var(--tekst);font-size:14.5px;line-height:1.45;
}
body.page-slug-elewacje-aluminiowe #main .mt-nr{
  flex:0 0 auto;width:21px;height:21px;background:var(--nieb);color:#fff;
  font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:11.5px;line-height:21px;
  text-align:center;letter-spacing:0;
}

/* akcesoria: rysunki przekrojow profili.
   Byly cztery kadry 16/6 obok siebie (ok. 274x103 px) - w takim pasku nie
   dalo sie pokazac ksztaltu profilu. Teraz dwie kolumny i kadr 2/1, czyli
   ok. 617x308 px, w ktorym przekroj J / H / K jest czytelny. */
body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(9) .mt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(9) .mt-item{background:#fff;border-color:rgba(1,58,108,.16)}
body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(9) .mt-media{aspect-ratio:2/1}
body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(9) .mt-body{border-top-color:rgba(1,58,108,.16)}
body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(9) .mt-text{
  white-space:normal;color:var(--szary);font-size:14px;line-height:1.55;margin-top:8px;
}

/* ---- 9. sampler (.wz-): biały wzornik na hairline ---------------- */
body.page-slug-elewacje-aluminiowe #main .wz-section{background:transparent}
body.page-slug-elewacje-aluminiowe #main .wz-head h2{
  font-family:Poppins,Arial,sans-serif;font-weight:600;color:var(--granat);
  font-size:clamp(26px,2.8vw,38px);letter-spacing:-.018em;line-height:1.14;
}
body.page-slug-elewacje-aluminiowe #main .wz-lede{color:var(--szary);font-size:16.5px;line-height:1.6}
body.page-slug-elewacje-aluminiowe #main .wz-ramka{background:#fff;border:1px solid var(--linia);border-radius:0}
body.page-slug-elewacje-aluminiowe #main .wz-nawig{
  border:1px solid var(--linia);background:#fff;color:var(--granat);border-radius:0;
}
body.page-slug-elewacje-aluminiowe #main .wz-nawig:hover:not(:disabled){background:var(--nieb);border-color:var(--nieb);color:#fff}
body.page-slug-elewacje-aluminiowe #main .wz-licznik{color:var(--szary)}
body.page-slug-elewacje-aluminiowe #main .wz-licznik span{color:var(--nieb);font-family:Poppins,Arial,sans-serif;font-weight:600}
body.page-slug-elewacje-aluminiowe #main .wz-note{color:var(--szary);font-size:13px;line-height:1.6}
body.page-slug-elewacje-aluminiowe #main .wz-pobierz{
  font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:15px;color:var(--nieb);
  border-bottom:1px solid transparent;transition:border-color .18s;
}
body.page-slug-elewacje-aluminiowe #main .wz-pobierz:hover{color:var(--nieb-800);border-color:var(--nieb-800)}

/* ---- 10. gallery ------------------------------------------------- */
body.page-slug-elewacje-aluminiowe #main .gallery-section{background:transparent}
body.page-slug-elewacje-aluminiowe #main .gallery-section h2{
  font-size:clamp(26px,2.8vw,38px);line-height:1.14;letter-spacing:-.018em;margin-bottom:28px;
}
body.page-slug-elewacje-aluminiowe #main .h-gallery-cell{overflow:hidden;background:var(--chlod)}
body.page-slug-elewacje-aluminiowe #main .h-gallery-cell img{transition:transform .5s var(--ease)}
body.page-slug-elewacje-aluminiowe #main .h-gallery-cell:hover img{transform:scale(1.04)}
body.page-slug-elewacje-aluminiowe #main .lb-zoom{background:rgba(23,27,43,.55);color:#fff;border-radius:0}
body.page-slug-elewacje-aluminiowe #main .h-gallery-caption{
  font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:13px;color:#fff;
}

/* ---- 11. faq: hairline, znak + / - w --nieb, bez pudełek --------- */
body.page-slug-elewacje-aluminiowe #main .faq-section{background:transparent}
body.page-slug-elewacje-aluminiowe #main .faq-section h2{font-size:clamp(26px,2.8vw,38px);line-height:1.14}
body.page-slug-elewacje-aluminiowe #main .faq-list{border-top:1px solid var(--linia)}
body.page-slug-elewacje-aluminiowe #main .faq-list details{
  border-bottom:1px solid var(--linia);background:transparent;padding:0;box-shadow:none;
}
body.page-slug-elewacje-aluminiowe #main .faq-list summary{
  font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:18px;line-height:1.35;
  letter-spacing:-.005em;color:var(--granat);padding:20px 0;gap:24px;
  transition:color .18s var(--ease);
}
body.page-slug-elewacje-aluminiowe #main .faq-list summary:hover{color:var(--nieb)}
/* znak w szablonie to "＋"; podmieniamy go na + / - w kolorze marki */
body.page-slug-elewacje-aluminiowe #main .faq-list summary span{
  font-size:0;line-height:0;color:var(--nieb);transform:none;flex:none;align-self:center;
}
body.page-slug-elewacje-aluminiowe #main .faq-list summary span::before{
  content:"+";font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:24px;line-height:1;color:var(--nieb);
}
body.page-slug-elewacje-aluminiowe #main .faq-list details[open] summary{color:var(--nieb)}
body.page-slug-elewacje-aluminiowe #main .faq-list details[open] summary span{transform:none}
body.page-slug-elewacje-aluminiowe #main .faq-list details[open] summary span::before{content:"\2212"} /* minus */
body.page-slug-elewacje-aluminiowe #main .faq-list details > div{
  color:var(--tekst);font-size:15.5px;line-height:1.6;padding:0 56px 22px 0;
}
body.page-slug-elewacje-aluminiowe #main .faq-list details > div a{color:var(--nieb)}

/* ---- 12. cta: granat, biały tekst, przycisk .btn--jasny ---------- */
body.page-slug-elewacje-aluminiowe #main .cta-section{background:transparent;padding:0}
body.page-slug-elewacje-aluminiowe #main .cta-panel{
  background:var(--granat);box-shadow:none;border-radius:0;color:#fff;
}
body.page-slug-elewacje-aluminiowe #main .cta-panel .eyebrow{color:#7fc0ea}
body.page-slug-elewacje-aluminiowe #main .cta-panel h2{
  font-family:Poppins,Arial,sans-serif;font-weight:600;color:#fff;
  font-size:clamp(28px,3vw,42px);line-height:1.12;letter-spacing:-.02em;margin:8px 0 14px;max-width:18ch;
}
body.page-slug-elewacje-aluminiowe #main .cta-panel p:not(.eyebrow){color:#c9d3dc;font-size:17px;line-height:1.55;max-width:46ch}
body.page-slug-elewacje-aluminiowe #main .cta-panel .button{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.55);margin-top:24px;
}
body.page-slug-elewacje-aluminiowe #main .cta-panel .button:hover{background:#fff;color:var(--granat);border-color:#fff}
/* Zdjęcie było tłem sekcji pod granatową zasłoną: prawa połowa robiła się ciemną pustką,
   render elewacji ledwo majaczył, tekst kończył się na krawędzi gradientu, a znak wodny
   wychodził poza kadr. Teraz CTA to dwie kolumny: treść po lewej, render po prawej
   w pełnym kolorze na własnej płycie. Zasłona i znak wodny są tu zbędne. */
body.page-slug-elewacje-aluminiowe #main .cta-panel{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);align-items:center;
  gap:clamp(28px,4vw,72px);min-height:0;overflow:hidden;
  padding:clamp(44px,5vw,76px) clamp(26px,7vw,120px);
}
body.page-slug-elewacje-aluminiowe #main .cta-panel::after,
body.page-slug-elewacje-aluminiowe #main .cta-panel::before{content:none;display:none}
body.page-slug-elewacje-aluminiowe #main .cta-panel-copy{position:relative;z-index:2;max-width:none;padding:0}
body.page-slug-elewacje-aluminiowe #main .cta-panel p:not(.eyebrow){max-width:40ch}
body.page-slug-elewacje-aluminiowe #main .cta-panel-akcje{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
body.page-slug-elewacje-aluminiowe #main .cta-panel .button{margin-top:0}
/* przy dwóch kolumnach lewa kolumna bywa wąska: gdy przyciski się zawijają,
   mają zajmować pełną szerokość, żeby nie stały schodkami */
@media (max-width:1100px){
  body.page-slug-elewacje-aluminiowe #main .cta-panel-akcje .button{flex:1 1 100%;justify-content:center}
}
body.page-slug-elewacje-aluminiowe #main .cta-panel-media{
  position:relative;z-index:2;inset:auto;margin:0;max-width:none;width:auto}
body.page-slug-elewacje-aluminiowe #main .cta-panel-media img{
  width:100%;height:auto;object-fit:cover;aspect-ratio:16/10;display:block;
  opacity:1;filter:none;background:#fff}

/* ---- 13. decor_explorer (.kf-) -----------------------------------
   Blok jest dziś ukryty (pole "ukryty"), reguły są gotowe na powrót sekcji. */
body.page-slug-elewacje-aluminiowe #main .kf-sekcja .eyebrow{color:var(--nieb)}
body.page-slug-elewacje-aluminiowe #main .kf-filtry button[aria-pressed="true"]{
  background:var(--nieb);border-color:var(--nieb);color:#fff;
}

/* ---- 14. Responsywność ------------------------------------------- */
@media (max-width:1000px){
  /* premium-pages.css od 1000px składa hero w kolumnę i zeruje odstępy;
     grafika idzie pod tekst na pełną szerokość, cała widoczna (contain) */
  body.page-slug-elewacje-aluminiowe #main .p-hero-grid{gap:0}
  body.page-slug-elewacje-aluminiowe #main .p-hero-media{
    min-height:0;aspect-ratio:16/9;background-size:contain;background-position:center center;
  }
}
@media (max-width:1100px){
  body.page-slug-elewacje-aluminiowe #main .p-hero{padding:12px 0 56px}
  body.page-slug-elewacje-aluminiowe #main .image-text{gap:36px}
  body.page-slug-elewacje-aluminiowe #main .stats-grid article{border-right:0}
  body.page-slug-elewacje-aluminiowe #main .mt-section{padding:72px 0}
  body.page-slug-elewacje-aluminiowe #main .mt-section .shell{max-width:100%}
}
@media (max-width:900px){
  body.page-slug-elewacje-aluminiowe #main .mt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(9) .mt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  body.page-slug-elewacje-aluminiowe #main .faq-list details > div{padding-right:0}
  body.page-slug-elewacje-aluminiowe #main .h-imgtext-panel h2{max-width:none}
}
@media (max-width:720px){
  body.page-slug-elewacje-aluminiowe #main .p-hero{padding:8px 0 44px}
  body.page-slug-elewacje-aluminiowe #main .p-hero-rule{margin-bottom:16px}
  body.page-slug-elewacje-aluminiowe #main .p-hero-title{font-size:clamp(30px,8.4vw,40px);max-width:none}
  body.page-slug-elewacje-aluminiowe #main .p-hero-text{font-size:16.5px}
  body.page-slug-elewacje-aluminiowe #main .p-hero-actions .button{flex:1 1 100%;justify-content:center}
  body.page-slug-elewacje-aluminiowe #main .h-imgtext-panel{padding:0}
  body.page-slug-elewacje-aluminiowe #main .h-imgtext-body{font-size:16px}
  body.page-slug-elewacje-aluminiowe #main .stats-grid article::before{margin-bottom:14px}
  body.page-slug-elewacje-aluminiowe #main .stats-grid strong{font-size:30px;margin-bottom:10px}
  body.page-slug-elewacje-aluminiowe #main .mt-section{padding:56px 0}
  body.page-slug-elewacje-aluminiowe #main .mt-grid,
  body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(9) .mt-grid{grid-template-columns:1fr}
  body.page-slug-elewacje-aluminiowe #main .mt-item{padding:22px 18px 24px}
  /* rysunki przekrojow sa pionowe (600x800), wiec na telefonie tez pion:
     w kadrze 4/3 zostawaly biale pasy po bokach i rysunek robil sie maly */
  body.page-slug-elewacje-aluminiowe #main .mt-media{aspect-ratio:3/4}
  body.page-slug-elewacje-aluminiowe #main .stream-content > *:nth-child(9) .mt-media{aspect-ratio:2/1}
  body.page-slug-elewacje-aluminiowe #main .faq-list summary{font-size:16.5px;gap:16px;padding:16px 0}
  body.page-slug-elewacje-aluminiowe #main .faq-list summary span::before{font-size:22px}
  body.page-slug-elewacje-aluminiowe #main .cta-panel{grid-template-columns:1fr;gap:24px;
    padding:clamp(36px,7vw,52px) 26px}
  body.page-slug-elewacje-aluminiowe #main .cta-panel .button{width:100%;justify-content:center;margin-top:0}
  body.page-slug-elewacje-aluminiowe #main .cta-panel-media img{aspect-ratio:16/9}
}
@media (max-width:420px){
  body.page-slug-elewacje-aluminiowe #main .p-breadcrumbs{overflow:auto;white-space:nowrap}
  body.page-slug-elewacje-aluminiowe #main .technical-table dd{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  body.page-slug-elewacje-aluminiowe #main .h-gallery-cell img,
  body.page-slug-elewacje-aluminiowe #main .c-row-media img{transition:none}
  body.page-slug-elewacje-aluminiowe #main .h-gallery-cell:hover img{transform:none}
}

/* --- proporcja zdjec w blokach image_text (2026-09) -------------------------
   Zdjecia budynkow sa PANORAMICZNE (zrodlo 2000x1111, rendition fill-1000x760).
   Globalna regula `.image-text img{height:100%;min-height:500px}` razem z
   `.image-text>div:last-child{height:100%}` rozciaga je na wysokosc kolumny
   TEKSTU. Przy dlugim tekscie kadr robil sie pionowym paskiem - zmierzone
   648x1171 px, proporcja 0,55 - i z calego domu zostawal jeden rog.
   Tutaj zdjecie trzyma proporcje renditionu i stoi w pionowym srodku kolumny.
   Zakres celowo waski: tylko ta strona, zeby nie ruszac innych podstron.
   Blok z filmem ma wlasna proporcje 16/9 z nowa.css i nie jest tu dotykany. */
body.page-slug-elewacje-aluminiowe #main .block-image_text .image-text>.h-imgtext-media{
  height:auto;align-self:center}
body.page-slug-elewacje-aluminiowe #main .block-image_text .h-imgtext-media img{
  height:auto;min-height:0;aspect-ratio:1000/760;object-fit:cover}