.sfx{font-family:'Poppins',Arial,sans-serif;color:#2b2b2b;line-height:1.65;font-size:16px;white-space:normal}
.sfx *{box-sizing:border-box;white-space:normal}
/* ---------------------------------------------------------------------------
TYPOGRAFIA: kazda regula ma wariant KLASOWY (.sfx-h2, .sfx-txt, .sfx-em,
.sfx-sec) obok elementowego. Klasowy ma specyficznosc (0,2,0), wiec bije
reguly motywu oparte na nagich elementach (.post-content h2 = 0,1,1)
NIEZALEZNIE od kolejnosci ladowania arkuszy - a ta na produkcji moze zostac
przestawiona przez laczenie CSS w WP Rocket. Wariant elementowy zostaje dla
stron jeszcze nieprzegenerowanych, ktore maja goly markup.
--------------------------------------------------------------------------- */
.sfx .sfx-em,.sfx strong,.sfx b{display:inline;font-weight:700;margin:0}
.sfx .sfx-h2,.sfx .sfx-h3,.sfx .sfx-h4,.sfx h2,.sfx h3,.sfx h4{font-family:'Teko','Poppins',sans-serif;font-weight:500;line-height:1.04;letter-spacing:.4px;text-transform:uppercase;color:#1f1f1f;margin:0 0 .35em}
.sfx .sfx-h2,.sfx h2{font-size:2.35rem}
.sfx .sfx-h3,.sfx h3{font-size:1.55rem}
.sfx .sfx-h4,.sfx h4{font-size:1.2rem;letter-spacing:.6px}
.sfx .sfx-txt,.sfx p{margin:0 0 1rem}
.sfx .sfx-kicker{font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#ed1c24;margin-bottom:.55rem;display:block}
.sfx .sfx-sec,.sfx section{margin:0 0 2.8rem}
/* ===========================================================================
LEAD - tresc NA zdjeciu hero (tytul + checklista + CTA "Umow montaz")
Layout sterowany szerokoscia KOLUMNY TRESCI (container query), nie viewportu:
motyw ma sidebar, wiec przy oknie 1440px kolumna ma tylko ~870px - media
queries na viewport klamaly. Ponizej progu: pion (lista, pod nia CTA).
Powyzej: lista | CTA obok siebie. Bez container queries (stare przegladarki)
zostaje wariant pionowy - poprawny, tylko wezszy.
=========================================================================== */
.sfx .sfx-lead{position:relative;display:flex;overflow:hidden;min-height:560px;box-shadow:0 16px 42px rgba(0,0,0,.2);container-type:inline-size}
.sfx .sfx-lead-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0}
.sfx .sfx-lead::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(6,6,8,.95) 0%,rgba(6,6,8,.78) 22%,rgba(6,6,8,.4) 46%,rgba(6,6,8,.08) 68%,rgba(6,6,8,0) 100%)}
.sfx .sfx-lead-overlay{position:relative;z-index:2;align-self:flex-end;width:100%;padding:1.7rem;color:#fff;display:flex;flex-direction:column;gap:1.15rem}
.sfx .sfx-lead-title{margin:0;font-family:'Teko','Poppins',sans-serif;font-weight:500;font-size:2.1rem;line-height:.95;letter-spacing:.5px;text-transform:uppercase;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.sfx .sfx-lead-row{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.sfx .sfx-lead-list{margin:0;padding:0;list-style:none;display:grid;gap:.5rem;min-width:0}
.sfx .sfx-lead-list li{position:relative;padding-left:1.6rem;font-size:.98rem;font-weight:500;line-height:1.4;color:#f2f2f2;text-shadow:0 1px 8px rgba(0,0,0,.7)}
/* motyw narzuca .post-content strong{display:block;margin-top:20px} - w checklisci
emfaza MUSI zostac w linii, inaczej kazdy punkt lamie sie na 3 wiersze */
.sfx .sfx-lead-list li strong,.sfx .sfx-lead-list li b{display:inline;margin:0;font-weight:700;color:#fff}
.sfx .sfx-lead-list li::before{content:"";position:absolute;left:.15rem;top:.38em;width:6px;height:11px;border:solid #ff4d54;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.sfx .sfx-lead-act{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;max-width:20rem}
.sfx .sfx-lead-q{font-size:1rem;font-weight:600;line-height:1.35;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.sfx .sfx-lead-act .sfx-btn--primary{font-size:1.05rem;padding:.95rem 1.9rem}
/* jedna wysokosc dla wszystkich szerokosci: element nie odpowiada na WLASNE
container query, wiec min-height nie moze byc progowane tym mechanizmem */
/* prog 760px = szerokosc kolumny, przy ktorej lista i CTA mieszcza sie obok
siebie bez sciskania bulletow (CTA max 20rem + gap + zapas na dlugi punkt) */
@container (min-width:760px){
.sfx .sfx-lead-overlay{padding:2.2rem 2.4rem;gap:1.4rem}
.sfx .sfx-lead-title{font-size:2.75rem}
.sfx .sfx-lead-row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:2rem}
.sfx .sfx-lead-list{flex:1 1 auto}
.sfx .sfx-lead-act{flex:0 0 auto;align-items:flex-end;text-align:right}
}
@container (max-width:420px){
.sfx .sfx-lead-act{align-self:stretch;max-width:none}
.sfx .sfx-lead-act .sfx-btn--primary{width:100%;justify-content:center}
}
.sfx .sfx-btns{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.sfx .sfx-btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.98rem;padding:.85rem 1.55rem;border-radius:8px;text-decoration:none;transition:.18s;cursor:pointer;border:2px solid transparent}
.sfx .sfx-btn{white-space:nowrap;font-weight:500}
.sfx .sfx-btn--primary{background:#ed1c24;color:#fff;box-shadow:0 6px 16px rgba(237,28,36,.28)}
.sfx .sfx-btn--primary:hover{background:#c8151c;color:#fff}
.sfx .sfx-btn--ghost{background:#fff;color:#1f1f1f;border-color:#1f1f1f}
.sfx .sfx-btn--ghost:hover{background:#1f1f1f;color:#fff}
.sfx .sfx-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.35rem}
.sfx .sfx-chip{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid #e4e4e4;border-radius:999px;padding:.42rem .95rem;font-size:.83rem;font-weight:500;color:#3a3a3a}
.sfx .sfx-chip b{color:#ed1c24;font-weight:800}
/* galeria jednokolumnowa - pelna szerokosc kolumny, podpisy NA zdjeciu */
.sfx .sfx-gallery{display:flex;flex-direction:column;gap:1.6rem}
.sfx .sfx-gallery figure{position:relative;margin:0;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.sfx .sfx-gallery img{display:block;width:100%;height:auto}
.sfx .sfx-gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.4rem 1rem;font-size:1rem;font-weight:500;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.45) 55%,rgba(0,0,0,0))}
/* zakres */
.sfx .sfx-scope{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:.4rem}
.sfx .sfx-scope-item{background:#fff;border:1px solid #ececec;border-radius:12px;padding:1.1rem 1.2rem;display:flex;gap:.85rem;align-items:flex-start}
.sfx .sfx-scope-item .ic{flex:0 0 54px;width:54px;background:none;color:#ed1c24;display:flex;align-items:center;justify-content:center}
.sfx .sfx-scope-item .ic svg{width:42px;height:42px;display:block}
.sfx .sfx-scope-item h4{margin:.1rem 0 .25rem}
.sfx .sfx-scope-item p{margin:0;font-size:.92rem;color:#555}
/* ---------------------------------------------------------------------------
BIBLIOTEKA IKON ZAKRESU - SVG w CSS, nie w tresci wpisu.
Markup: (bez inline