/* polish.css - balticmed bootscore-child.
   Warstwa POLERSKA redesignu (Opus, 2026-07-03). Ladowana OSTATNIA (po theme.css,
   templates.css) - nadpisuje przez kaskade. NIE jest generowana z makiet, wiec
   gen_theme.py jej nie tknie. Tu trzymamy poprawki wizualne fazy poprzedzajacej
   cutover: rozowa Szkola Rodzenia, mobilne menu, ocieplenia, drobne korekty.
   Jesli zmieniasz markup w header/front-page (pliki generowane) - patrz notka
   w session logu 2026-07-03: theme edytowany wprost, generator NIE odpalac na slepo. */


/* =====================================================================
   ZAD. 2 - SZKOLA RODZENIA W ROZOWEJ SZACIE (jak na produkcji balticmed.pl)
   Rdzenny roz produkcji = #cd88ba. Podmieniamy tokeny akcentu na scope
   .p-szkola-rodzenia: btn-fala, ikony, hovery, washe i badge robia sie
   rozowe automatycznie (bo caly system v5 stoi na var(--fala)/var(--wash)).
   Ciemne bandy (deep/ink - plum) zostaja jako kontrast: plum + roz = elegancja.
   ===================================================================== */
.p-szkola-rodzenia{
  --fala:#cd88ba;          /* akcent rozowy (produkcja SR) */
  --wash:#FBEEF6;          /* jasny roz - tla sekcji, chipy */
  --wash2:#F4DCEC;         /* glebszy roz - gradienty ikon */
}
/* przycisk glowny: rozowe tlo, ciemny plum tekst (kontrast AA), rozowy cien */
.p-szkola-rodzenia .btn-fala{box-shadow:0 10px 24px rgba(205,136,186,.42)}
.p-szkola-rodzenia .btn-ghost{border-color:#b46ea0;color:#8f4f7d}
/* hero eyebrow + naglowki w cieplejszym plumie */
.p-szkola-rodzenia .eyebrow{color:#a86593}
/* badge "bezplatnie NFZ" zostaje neutralny (logo NFZ), tylko ramka rozowa akcentem */
/* Plakietka NFZ na zdjęciu w hero: lewy dolny róg zamiast prawego górnego (decyzja
   Michała 28.07). Na górze przykrywała twarze, na dole siada na rozmytym tle.
   Telefon miał to tak od początku (media 900 px niżej), teraz zgadza się na obu. */
.p-szkola-rodzenia .badge-nfz{border:1px solid rgba(205,136,186,.35);
  left:22px;right:auto;top:auto;bottom:22px}
/* typ zajec (weekendowa) - rozowy chip zamiast wash blekit */
.p-szkola-rodzenia .sr-typ{color:#8f4f7d;background:#FBEEF6}
/* termin "nowosc": zostaje zloty akcent (spojnosc z reszta serwisu) - bez zmian.
   termin z brakiem miejsc - lekko przygaszony (jest w templates.css) */
/* gwiazdki/akcenty opinii, linki hover - dziedzicza --fala rozowy automatycznie */
/* delikatny rozowy welon na hero foto (spojne z produkcja, ocieplenie) */
.p-szkola-rodzenia .phero-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,transparent 55%,rgba(205,136,186,.22));pointer-events:none}
/* sekcja "dlaczego warto" - ikony why-ico juz rozowe przez washe; naglowki plum */
.p-szkola-rodzenia .why-card:hover{box-shadow:0 20px 44px rgba(205,136,186,.20)}
/* finalowy band CTA: z plum na gleboki roz - mocniejszy sygnal "zapisz sie" */
.p-szkola-rodzenia .final{background:linear-gradient(135deg,#7d3f6b,#a85a8f)}


/* =====================================================================
   ZAD. 1 - HUB /uslugi-platne/: katalog specjalistow (pogrupowana lista linkow)
   ===================================================================== */
.spec-dir{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.spec-dir-col{background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);
  padding:28px 30px;transition:transform .15s ease, box-shadow .15s ease}
.spec-dir-col:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(51,42,95,.10)}
.spec-dir-col h3{font-size:1.12rem;color:var(--deep);margin-bottom:16px;padding-bottom:12px;
  border-bottom:2px solid var(--wash2)}
.spec-dir-col ul{list-style:none;display:grid;gap:2px}
.spec-dir-col li a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  padding:9px 12px;border-radius:10px;font-size:.98rem;transition:background .12s ease, color .12s ease, padding-left .12s ease}
.spec-dir-col li a::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:50%;
  background:var(--fala);transition:transform .12s ease}
.spec-dir-col li a:hover{background:var(--wash);color:var(--deep);padding-left:16px}
.spec-dir-col li a:hover::before{transform:scale(1.4)}
@media(max-width:900px){.spec-dir{grid-template-columns:1fr;gap:16px}}


/* =====================================================================
   ZAD. 3 - MAPA PLACOWEK na /kontakt/ (Leaflet + kafle OpenStreetMap)
   ===================================================================== */
.bm-map{height:480px;border-radius:calc(var(--r) + 4px);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(51,42,95,.10);position:relative;isolation:isolate;background:var(--wash)}
.bm-map-hint{margin-top:12px;font-size:.85rem;color:var(--muted)}
.bm-pin-wrap{background:none;border:0}
.bm-pin{display:block;filter:drop-shadow(0 4px 6px rgba(35,32,72,.35))}
.bm-pin svg{display:block}
/* popup w jezyku v5 */
.leaflet-popup-content-wrapper{border-radius:14px;box-shadow:0 18px 44px rgba(35,32,72,.22)}
.leaflet-popup-content{margin:14px 18px;font-family:"Source Sans 3",sans-serif;line-height:1.5}
.bm-pop strong{font-family:Jost,sans-serif;font-weight:600;color:var(--deep);font-size:1.02rem;display:block;margin-bottom:4px}
.bm-pop-adr{display:block;color:var(--muted);font-size:.9rem;margin-bottom:8px}
.bm-pop-links a{font-family:Jost,sans-serif;font-weight:500;color:var(--ink);text-decoration:none}
.bm-pop-links a:hover{color:var(--fala);text-decoration:underline}
.leaflet-container a.leaflet-popup-close-button{color:var(--muted)}
.leaflet-bar a{color:var(--deep)}
@media(max-width:640px){.bm-map{height:400px}}


/* =====================================================================
   ZAD. 6 - MOBILNE MENU: pelne, skladane (odzwierciedla mega menu desktopu).
   Nadpisuje domyslny .mob-panel z theme.css. Uwaga: theme.css ma reguly
   .nav .burger[open] summary (ciemne tlo) ktore PRZECIEKAJA na zagniezdzone
   <summary> - punktowo je resetujemy (!important tylko na przecieklych wlasciwosciach).
   ===================================================================== */
/* FIX krytyczny: header.main ma backdrop-filter -> jest blokiem zawierajacym dla
   position:fixed, wiec panel z theme.css (top:76px;bottom:0) liczyl sie wzgledem
   naglowka (76px), nie viewportu -> panel przyciety, sub-linki i tlo nie zakrywaly
   strony. Kotwiczymy panel do DOLU naglowka (top:100%) i dajemy pelna wysokosc ekranu. */
.mob-panel{display:flex;flex-direction:column;gap:0;
  top:100%;bottom:auto;height:calc(100vh - 76px);height:calc(100dvh - 76px)}
.mob-panel > a.mob-top{font-family:Jost,sans-serif;font-weight:600;font-size:1.12rem;color:var(--deep);
  padding:15px 4px;border-bottom:1px solid var(--line)}
.mob-panel > a.mob-top:active{background:var(--wash)}

/* sekcje skladane (NFZ / komercyjne) */
.mob-sec{border-bottom:1px solid var(--line)}
.mob-panel .mob-sec > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  font-family:Jost,sans-serif;font-weight:600;font-size:1.12rem;
  padding:15px 4px !important;border:0 !important;border-radius:0 !important;
  background:transparent !important;color:var(--deep) !important}
.mob-panel .mob-sec > summary::-webkit-details-marker{display:none}
.mob-panel .mob-sec > summary::after{content:"";flex:0 0 auto;width:10px;height:10px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s ease;margin-right:6px}
.mob-panel .mob-sec[open] > summary{color:var(--fala) !important}
.mob-panel .mob-sec[open] > summary::after{transform:rotate(-135deg);border-color:var(--fala)}

/* sub-linki w sekcji */
.mob-sub{display:flex;flex-direction:column;padding:0 2px 14px 8px}
.mob-panel .mob-sub a{padding:11px 10px;font-size:1.02rem;color:var(--ink);border-bottom:0;border-radius:9px}
.mob-panel .mob-sub a:active,.mob-panel .mob-sub a:hover{background:var(--wash);color:var(--deep)}
.mob-panel .mob-sub .mob-more{font-family:Jost,sans-serif;font-weight:500;color:var(--fala)}
.mob-panel .mob-sub .mob-more::after{content:" →"}

/* sekcja "Balticmed" (linki pomocnicze) */
.mob-panel .grp{margin:20px 0 2px}
/* 27.07 (uwaga Michala): plaskie linki panelu maja ten sam font co naglowki sekcji
   skladanych - inaczej "o nas / zespol / zapotrzebowanie" wygladaly na mniejsze */
.mob-panel > a:not(.mob-top):not(.mob-cta-btn){font-family:Jost,sans-serif;font-weight:600;
  font-size:1.12rem;color:var(--deep);padding:15px 4px}

/* przycisk CTA na dole panelu */
.mob-panel a.mob-cta-btn{margin-top:24px;justify-content:center;width:100%;font-size:1.05rem;
  border-bottom:0;color:#fff}
.mob-panel a.mob-cta-btn:active{background:var(--deep)}


/* =====================================================================
   POLERKA 4.07 (Fable) — ocieplenie realnymi zdjeciami, bez AI-stocku.
   ===================================================================== */

/* --- NASZA FILOZOFIA na glownej: split editorial na bandzie deep.
       Zastepuje pas full-bleed z gradientem po twarzach (stary .foto-credo). --- */
.credo-split{background:linear-gradient(135deg,var(--deep),var(--ink));position:relative;overflow:hidden;padding:84px 0}
.credo-split .credo-fala{position:absolute;right:-70px;top:-46px;width:520px;color:#fff;opacity:.06;
  transform:rotate(-6deg);pointer-events:none}
.credo-split .wrap{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center;position:relative}
.credo-split .eyebrow{color:#9fd9f2}
.credo-split h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);margin:.35em 0 .5em;max-width:14em}
.credo-split .credo-copy p:not(.eyebrow){color:rgba(255,255,255,.88);max-width:34em}
.credo-foto{margin:0;aspect-ratio:4/3;border-radius:26px 110px 26px 26px;overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.35)}
.credo-foto img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.credo-split{padding:64px 0}.credo-split .wrap{grid-template-columns:1fr;gap:34px}
  .credo-foto{border-radius:26px 80px 26px 26px;max-width:560px}}

/* --- Karty placowek ze zdjeciem (glowna, /przychodnie/, pillary).
       Bez zdjecia -> kafel monogramowy (zeby siatka byla rowna); Maciej wgrywa
       featured w wp-admin i karta sama dostaje fotografie. --- */
.city.has-foto{padding:0;display:flex;flex-direction:column;overflow:hidden;
  align-items:stretch /* theme.css .city ma align-items:center — scisnalby dzieci do szerokosci tresci */}
.city.has-foto .city-foto{aspect-ratio:16/10;overflow:hidden;flex:none;width:100%}
.city.has-foto .city-foto img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.9,.3,1)}
.city.has-foto:hover .city-foto img{transform:scale(1.045)}
.city-foto.city-mono{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(150deg,var(--wash),var(--wash2));color:var(--deep)}
.city-mono span{font-family:Jost,sans-serif;font-weight:600;font-size:1.9rem;opacity:.8}
.city-mono svg{width:52px;color:var(--fala)}
.city.has-foto .city-body{display:flex;flex-direction:column;gap:4px;padding:18px 22px 20px;flex:1}
.city.has-foto h3{font-size:1.14rem;color:var(--deep)}
.city.has-foto .addr{font-size:.92rem;color:var(--muted)}
.city.has-foto .go{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
  font-family:Jost,sans-serif;font-weight:500;font-size:.9rem;color:var(--ink)}

/* --- Zespol: monogram zamiast kreskowkowego placeholdera z produkcji.
       Ten sam kafel 2:3 co zdjecie -> siatka nie skacze. --- */
.os-foto.os-mono{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(160deg,var(--wash),var(--wash2));color:var(--deep)}
.os-foto.os-mono span{font-family:Jost,sans-serif;font-weight:600;font-size:2.1rem;opacity:.75;letter-spacing:.02em}
.os-foto.os-mono svg{width:52px;color:var(--fala)}

/* =====================================================================
   OPINIE - wolna karuzela 8 opinii (Michal, 2026-07-06).
   Markup: .op-marquee > .op-track > .op-set (8 figur). main.js klonuje
   .op-set (aria-hidden) i dodaje .op-anim -> plynna petla translateX(-50%).
   Hover/focus = pauza. Reduced-motion albo brak JS = przewijanie reczne.
   ===================================================================== */
.op-marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.op-track{display:flex;width:max-content}
.op-set{display:flex;gap:16px;padding-right:16px}
.op-set .op{width:300px;flex:0 0 300px}
.op-track.op-anim{animation:op-plynie 75s linear infinite}
.op-marquee:hover .op-track.op-anim,
.op-track.op-anim:focus-within{animation-play-state:paused}
@keyframes op-plynie{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce),(scripting:none){
  .op-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
@media(max-width:640px){.op-set .op{width:264px;flex-basis:264px}}

/* =====================================================================
   BADGE "W PAKIECIE GRATIS" - delikatny puls (Michal, 2026-07-06).
   Skala 1 -> 1.055 + oddech cienia, 3 s; rotacja -6deg zachowana
   (keyframes nadpisuja transform, wiec rotate musi byc w kazdej klatce).
   ===================================================================== */
@media(prefers-reduced-motion:no-preference){
  .pk-start .badge-gratis{animation:puls-gratis 3s ease-in-out infinite}
  @keyframes puls-gratis{
    0%,100%{transform:rotate(-6deg) scale(1);box-shadow:0 12px 28px rgba(106,193,232,.35)}
    50%{transform:rotate(-6deg) scale(1.055);box-shadow:0 16px 36px rgba(106,193,232,.55)}
  }
}


/* =====================================================================
   W2 "Akcenty" — wybor spotkania 2026-07-08 (Michal + Krzysiek + Maciek).
   Tla zostaja czyste; blekit wchodzi w SLOWA akcentowe, nadtytuly, numery
   placowek, ikony, thumbnaile, ramki kart, chipy i ghost-buttony. Nie ruszamy
   tokena --fala (#6AC1E8) — hovery, gwiazdki opinii, EKG, stopka i badge-gratis
   zostaja na zywym blekicie fal. Klasy sa wspoldzielone przez wszystkie
   szablony (eyebrow x95 w 28 templatkach, chip x42, spec-ico-k, why-card,
   city, faq, edu), wiec akcent wchodzi na CALA strone, nie tylko glowna.
   Kontrast WCAG (memoria project-balticmed-blekit-warianty, progi policzone):
   #1B6E9E na bialym ~5,3:1 (drobny tekst OK), #2E86B8 ~3,8:1 (tylko duze
   naglowki hero em), bialy na #17618F/#1C5A86 ~7:1. Zaladowane ostatnie, wiec
   scope .p-szkola-rodzenia (rozowy) wygrywa specyficznoscia i zostaje nietkniety.
   ===================================================================== */
/* nadtytuly (.eyebrow) na blekit — podbicie specyficznosci warstwami, bo kontenery
   nadpisywaly plain .eyebrow (0,1,0) mocniejszymi regulami i nadtytuly zostawaly szare
   (--muted). Zweryfikowane CSSOM-em na zywym stagingu:
     .sec-head p            (0,1,1)  ->  p.eyebrow (0,1,1) remisuje + kolejnosc; .sec-head .eyebrow (0,2,0)
     .art .copy p           (0,2,1)  ->  .art .copy .eyebrow (0,3,0)              [pillary, ~16 szablonow]
     #kroki .head p         (1,1,1)  ->  #kroki .head .eyebrow (1,2,0)            [sekcja "Zapisy" glownej]
     #kiedy p               (1,0,1)  ->  #kiedy .eyebrow (1,1,0)                  [POZ: lekarz-rodzinny, pediatra] */
.eyebrow,p.eyebrow,.sec-head .eyebrow,.spec-head .eyebrow{color:#1B6E9E}
.art .copy .eyebrow{color:#1B6E9E}
#kroki .head .eyebrow,#kiedy .eyebrow{color:#1B6E9E}
/* ciemne bandy zostaja jasne — re-assert PO podbiciu (rowna/wyzsza specyficznosc + kolejnosc) */
.mega-hero .eyebrow,#pakiety .eyebrow,.credo-split .eyebrow,.final .eyebrow{color:#9fd9f2}
/* SR: rozowy nadtytul MUSI przetrwac podbicia powyzej (SR uzywa .art .copy — linia 105 szablonu) */
.p-szkola-rodzenia .eyebrow,
.p-szkola-rodzenia .sec-head .eyebrow,
.p-szkola-rodzenia .art .copy .eyebrow{color:#a86593}
.hero h1 em{color:#2E86B8}
.city .cn{background:#D6ECF9;color:#17618F}
.mega-list .ico{background:#D6ECF9}
.spec-ico-k{background:#EAF5FC;border-color:#BFDDF0}
.edu .thumb{background:#D6ECF9}
.finder-result{background:#DEEFFA}
.why-card,.finder,.city,.nfz,.op,.edu,.faq details{border-color:#C2DFF1}
.chip{border-color:#C6DFEF}
.chip:hover{border-color:#1B6E9E;background:#1B6E9E;color:#fff}
.btn-ghost{border-color:#1B6E9E;color:#17618F}

/* =====================================================================
   IKONY LINEARNE + LANDINGI SPRZEDAZOWE PILLAROW (Fable, 2026-07-16,
   zlecenie Michala: ikony zamiast liter, pillary bardziej sprzedazowe,
   min. 2 zdjecia na specjalizacje).
   ===================================================================== */
/* ikona inline (bm_ico) — dziedziczy kolor, skaluje sie z kontenerem */
svg.i{width:1em;height:1em;flex:none}
.mega-list .ico svg.i{width:15px;height:15px}
.city-mono svg.i{width:44px;height:44px;opacity:.85}
.os-foto.os-mono svg.i{width:56px;height:56px;opacity:.7}

/* hero pillara: jedna linia prozy zamiast rzedu chipow (Michal 16.07: chipy = slop) */
.phero-note{margin:20px 0 0;font-size:.98rem;color:var(--muted);max-width:34em}

/* "Od telefonu do gabinetu" — editorial split: naglowek+CTA z lewej, sciezka z prawej.
   Zadnych kart; numeracja wisi na marginesie listy jak zywa pagina. */
.umow-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,88px);align-items:start}
.umow-grid h2{font-size:clamp(1.7rem,3.4vw,2.5rem);color:var(--deep);margin:.35em 0 .4em}
.umow-lead{color:var(--muted);margin-bottom:26px;max-width:26em}
.sciezka{list-style:none;margin:0;padding:0;counter-reset:krok}
.sciezka li{counter-increment:krok;position:relative;padding:0 0 26px 58px}
.sciezka li::before{content:counter(krok);position:absolute;left:0;top:-2px;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  font-family:Jost,sans-serif;font-weight:600;font-size:1.05rem;color:var(--deep);
  background:var(--wash);border-radius:50%}
.sciezka li:not(:last-child)::after{content:"";position:absolute;left:18.5px;top:42px;bottom:4px;
  width:1px;background:var(--line)}
.sciezka li:last-child{padding-bottom:0}
.sciezka h3{font-size:1.12rem;color:var(--deep);margin-bottom:6px}
.sciezka p{color:var(--muted);font-size:.97rem;max-width:34em}
@media(max-width:900px){.umow-grid{grid-template-columns:1fr;gap:30px}}

/* drugie zdjecie specjalizacji w kolumnie bocznej — ZAWSZE poziomy kadr 3:2
   (Michal 17.07 wieczor #2: pionowe foto-cisnienie na kardiologu robilo wiezowiec
   w prawej kolumnie i gigantyczna dziure po lewej) */
.pillar-foto2{margin:0 0 22px;border-radius:26px 80px 26px 26px;overflow:hidden;
  box-shadow:0 18px 40px rgba(35,32,72,.14)}
.pillar-foto2 img{display:block;width:100%;height:auto}
/* splity pillara: kolumny srodkowane w pionie — resztkowa roznica wysokosci
   rozklada sie symetrycznie zamiast robic dziure pod krotsza kolumna */
.art .grid:has(> aside .pillar-foto2){align-items:center}
.art .grid-flip{align-items:center}

/* ===== audyt dziur 17.07 wieczor #2 (Michal: "gigantyczna dziura obok zdjecia
   tak nie moze byc" — przemierzone Playwrightem 56 podstron) ===== */
/* karta CTA przeniesiona pod tekst kolumny .copy (pillar split A + huby NFZ/komercyjne) */
.art .copy .kontakt{margin-top:28px;max-width:36em}
/* aside z sama karta kontaktu (np. Szkola Rodzenia) albo samym zdjeciem: srodkuj */
.art .grid:has(> aside > .kontakt:only-child){align-items:center}
.art .grid:has(> aside > .foto:only-child){align-items:center}
/* zdjecia w aside HUBOW w poziomym kadrze (police.webp jest pionowe); tylko
   .foto-kadr — globalny kadr 3:2 zrobilby dziury na POZ (lekarz rodzinny,
   pediatra), gdzie dlugi tekst potrzebuje wlasnie wysokiej kolumny */
.art .grid aside .foto.foto-kadr img{width:100%;height:auto}
/* pd-foto (POZnaj Depresje): sztywna proporcja = zero skoku layoutu przy lazy-load */
.pd-foto{width:100%;height:auto}
/* katalog specjalistow: 4 karty w rzedzie po podziale najdluzszej grupy */
.spec-dir{grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1180px){.spec-dir{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.spec-dir{grid-template-columns:1fr}}
/* pediatra: 8 objawow w dwoch kolumnach zamiast jednej wiezy */
.sympt-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
@media(max-width:640px){.sympt-2col{grid-template-columns:1fr}}

/* mobilny pasek "umow wizyte" na pillarach idzie przez .mob-cta w stopce
   (jeden wspolny pasek; drugi wlasny .call-bar wycofany po recenzji Codexa) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ikony w kaflach placowek (.cn) i na stronie lekarza */
.city .cn svg.i{width:21px;height:21px}
.lek-foto.lek-mono svg.i{width:72px;height:72px;opacity:.65;color:var(--deep)}

/* =====================================================================
   MEGA MENU KOMERCYJNE = PELNA MAPA SPECJALIZACJI (Michal 16.07:
   "za duzo krokow do neurochirurga" — kazdy pillar widoczny od razu,
   panel promo Pakietow zdjety; Pakiety zostaja pozycja listy ze zlotem).
   ===================================================================== */
.mega-inner.mega-full{grid-template-columns:1fr}
.mega-cols-5{grid-template-columns:repeat(5,1fr);gap:18px}
.mega-full .mega-list{gap:3px}
.mega-full .mega-list li a{padding:7px 8px;gap:10px;font-size:.95rem}
.mega-full .mega-list .ico{flex:0 0 24px;width:24px;height:24px}
.mega-full .mega-list .ico svg.i{width:14px;height:14px}
.mega-list a.mega-gold{color:#8a6116;font-weight:500}
.mega-list a.mega-gold .ico{background:var(--gold);color:var(--deep)}
.mega-list a.mega-gold:hover{background:#FBF3E3}
@media(max-width:1180px){.mega-cols-5{grid-template-columns:repeat(3,1fr);gap:14px}}
/* naglowki grup w mobilnym akordeonie komercyjnym */
.mob-sub .mob-grp{font-family:Jost,sans-serif;font-weight:500;font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin:14px 0 4px;padding:0 10px}
/* ikony kart "dlaczego warto" na pillarach (why-ico z glownej + bm_ico) */
.why-ico svg.i{width:30px;height:30px;position:relative;z-index:2}

/* ===== runda 2026-07-17: uwagi Michala (pelna szerokosc, naprzemienny editorial,
   social proof, newsletter, social icons, mega NFZ 2-kol region, przycisk ZL) ===== */

/* sec-head na pelna szerokosc: naglowek lewa, lead prawa (koniec pustych kolumn) */
.sec-head-wide{max-width:none;display:grid;grid-template-columns:1.05fr .95fr;gap:24px 56px;align-items:end}
.sec-head-wide .shw-lead{font-size:1.06rem;line-height:1.65;margin-bottom:.35em}
@media(max-width:900px){.sec-head-wide{grid-template-columns:1fr;align-items:start}}

/* zdjecie-przerywnik miedzy blokami tekstu */
.ed-band-sec{padding:8px 0 0}
.ed-band{margin:0}
.ed-band img{display:block;width:100%;height:clamp(220px,32vw,380px);object-fit:cover;border-radius:calc(var(--r) + 4px)}

/* drugi split editorial: karta z lewej, tekst z prawej */
.art .grid-flip{grid-template-columns:.85fr 1.15fr}
@media(max-width:960px){.art .grid-flip{grid-template-columns:1fr}
  .art .grid-flip aside{order:2}.art .grid-flip .copy{order:1}}

/* pas opinii GBP na pillarach: JEDEN rzad, wolna karuzela .op-marquee jak na
   glownej (Michal 17.07 wieczor: koniec dziur — rzad wyrownany, rotuje) */
.op-sec{padding:56px 0 12px}
.op-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 40px;flex-wrap:wrap;margin-bottom:26px}
.op-sec-head h2{color:var(--deep);margin-top:.2em}
.op-sec-ocena{margin:0 0 6px;color:var(--deep);display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:1.05rem}
.op-stars{color:var(--gold,#d9a441);letter-spacing:2px;font-size:1.05rem}
.op-sec .op-set .op{width:340px;flex:0 0 340px}
.op-sec .op blockquote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden}
.op-sec .op-src a{color:var(--deep);font-weight:600}
@media(max-width:640px){.op-sec .op-set .op{width:280px;flex-basis:280px}}

/* przycisk ZnanyLekarz przy lekarzu */
.os .btn-zl{display:inline-flex;flex-direction:column;align-items:center;gap:1px;margin-top:10px;padding:9px 16px;
  border-radius:999px;background:var(--deep);color:#fff;font-family:Jost,sans-serif;font-weight:500;font-size:.9rem;
  line-height:1.15;text-decoration:none;transition:background .2s}
.os .btn-zl:hover{background:var(--fala,#2E86B8)}
.os .btn-zl .zl-via{font-size:.68rem;font-weight:400;opacity:.75;text-transform:none;letter-spacing:.02em}

/* band newslettera nad stopka */
.nl-band{background:var(--deep);color:#fff;padding:56px 0}
.nl-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px 64px;align-items:center}
.nl-band h2{color:#fff;font-size:clamp(1.4rem,2.6vw,2rem);margin:.3em 0 .35em}
.nl-band .eyebrow{color:var(--fala,#7fd1f0)}
.nl-band p{color:rgba(255,255,255,.82);max-width:46ch}
.nl-row{display:flex;gap:10px;flex-wrap:wrap}
.nl-row input[type=email]{flex:1 1 240px;min-width:0;padding:13px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);color:#fff;font-size:1rem}
.nl-row input[type=email]::placeholder{color:rgba(255,255,255,.55)}
.nl-row input[type=email]:focus{outline:2px solid var(--fala,#7fd1f0);outline-offset:1px;background:rgba(255,255,255,.14)}
.nl-zgoda{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.75)}
.nl-zgoda input{margin-top:3px;accent-color:var(--fala,#53c3e9)}
.nl-zgoda a{color:#fff;text-decoration:underline}
.nl-msg{margin-top:12px;font-size:.92rem;padding:10px 14px;border-radius:10px}
.nl-msg-ok{background:rgba(83,195,233,.18);color:#dff4fc}
.nl-msg-err{background:rgba(233,103,103,.2);color:#ffdada}
@media(max-width:900px){.nl-grid{grid-template-columns:1fr}}

/* social w stopce i menu mobilnym */
.foot-social{display:flex;align-items:center;gap:14px;margin:34px 0 6px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.foot-social span{font-size:.85rem;color:rgba(255,255,255,.6)}
.foot-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);color:#fff;transition:all .2s}
.foot-social a:hover{background:var(--fala,#53c3e9);border-color:var(--fala,#53c3e9);color:var(--deep)}
.foot-social svg.i{width:17px;height:17px}
.mob-social{display:flex;gap:12px;margin-top:16px;justify-content:center}
.mob-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line,#dbe4ec);color:var(--deep)}
.mob-social svg.i{width:18px;height:18px}

/* mega dropdowny nie moga wyjsc poza ekran na niskich oknach (finding Codexa 17.07) */
.mega{max-height:calc(100dvh - 130px);overflow-y:auto}

/* mega NFZ: 4 kolumny — Szczecin + region (2 kol.) + prawa szyna, w ktorej maly
   panel "Zapisy" siedzi NAD kolumna "Dla pacjenta POZ" (Michal 17.07 wieczor) */
.mega-inner-nfz{grid-template-columns:2.9fr 1fr;gap:36px}
.mega-cols-nfz{grid-template-columns:1fr 1.95fr}
.mega-list-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 10px}
.mega-rail{display:flex;flex-direction:column;gap:22px}
.mega-hero-sm{min-height:0;padding:20px 22px;justify-content:flex-start;gap:2px}
.mega-hero-sm h4{font-size:1.05rem;margin:8px 0 12px}
.mega-hero-sm .btn{margin-top:0;padding:.55em 1em;font-size:.88rem}
@media(max-width:1080px){.mega-inner-nfz{grid-template-columns:1fr}
  .mega-cols-nfz{grid-template-columns:1fr 1fr}.mega-list-2col{grid-template-columns:1fr}}
.btn-zl-single{display:flex;flex-direction:column;align-items:center;gap:1px;margin:14px 0 4px;text-align:center}
.btn-zl-single .zl-via{font-size:.7rem;font-weight:400;opacity:.8}

/* Edukacja mieszka w topbarze jako tb-drop (Michal 17.07 wieczor: dropdown w glownym
   menu byl przesuniety i nie dalo sie klikac — zdjety, zero dodatkowego CSS) */


/* =====================================================================
   404 - strona nie znaleziona (pkt 15, 2026-07-24)
   ===================================================================== */
.e404-hero{padding:64px 0 40px;background:linear-gradient(180deg,var(--wash),transparent)}
.e404-hero .e404-copy{max-width:720px;margin:0 auto;text-align:center}
.e404-hero .e404-code{font-family:Jost,sans-serif;font-weight:600;font-size:clamp(4.5rem,10vw,7rem);
  line-height:.9;color:var(--fala);letter-spacing:-.03em;margin-bottom:6px}
.e404-hero h1{color:var(--deep);font-size:clamp(1.7rem,3.4vw,2.4rem);margin:0 0 14px}
.e404-hero .lead{color:var(--ink);opacity:.85;max-width:34em;margin:0 auto 28px;font-size:1.06rem}
.e404-search{display:flex;gap:8px;max-width:520px;margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px;
  box-shadow:0 10px 30px rgba(51,42,95,.08)}
.e404-search input[type=search]{flex:1;border:0;background:transparent;padding:10px 16px;font-size:1rem;
  color:var(--ink);outline:none;font-family:inherit}
.e404-search input[type=search]::placeholder{color:#8a8aa5}
.e404-search button{display:inline-flex;align-items:center;gap:8px;background:var(--deep);color:#fff;
  border:0;border-radius:999px;padding:10px 20px;font-weight:600;cursor:pointer;font-family:Jost,sans-serif;
  transition:background .15s}
.e404-search button:hover{background:var(--ink)}
.e404-skroty{padding:24px 0 72px}
.e404-h2{color:var(--deep);font-size:1.4rem;text-align:center;margin:0 0 28px}
.e404-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:960px;margin:0 auto}
.e404-card{display:block;background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);
  padding:22px 24px;text-decoration:none;color:inherit;transition:transform .15s, box-shadow .15s, border-color .15s}
.e404-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(51,42,95,.10);border-color:var(--fala)}
.e404-card .e404-t{font-family:Jost,sans-serif;font-weight:600;color:var(--deep);font-size:1.06rem;margin-bottom:6px}
.e404-card .e404-d{color:var(--ink);opacity:.7;font-size:.94rem}
@media(max-width:820px){.e404-grid{grid-template-columns:1fr}}


/* =====================================================================
   NEWSLETTER INLINE (pkt 11, 2026-07-24) — pod artykułem + na pillarach.
   Reuzywa backend bandu ze stopki (bm_newsletter_form). Tag zrodla per miejsce.
   ===================================================================== */
.nl-inline-sec{padding:8px 0 40px}
.nl-inline-sec .wrap-tresc{max-width:760px}
.nl-inline{background:linear-gradient(135deg,var(--wash),#fff);border:1px solid var(--line);
  border-radius:calc(var(--r) + 6px);padding:30px 32px;position:relative;overflow:hidden}
.nl-inline::before{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  background:radial-gradient(circle,var(--wash2),transparent 70%);opacity:.6;pointer-events:none}
.nl-inline-head{display:flex;gap:14px;align-items:center;margin-bottom:12px;position:relative}
.nl-inline .nl-ico{flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;color:var(--fala)}
.nl-inline-eyebrow{font-family:Jost,sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fala);margin:0 0 2px}
.nl-inline-h{font-family:Jost,sans-serif;font-weight:600;color:var(--deep);font-size:1.24rem;margin:0;line-height:1.2}
.nl-inline-lead{color:var(--ink);opacity:.82;margin:0 0 18px;max-width:52ch;position:relative}
.nl-inline .nl-form{position:relative}
.nl-inline .nl-row{display:flex;gap:8px;margin-bottom:10px}
.nl-inline .nl-row input[type=email]{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;
  padding:12px 18px;font-size:1rem;font-family:inherit;color:var(--ink);background:#fff;outline:none}
.nl-inline .nl-row input[type=email]:focus{border-color:var(--fala);box-shadow:0 0 0 3px var(--wash2)}
/* 🔴 Podpowiedź w polu była BIAŁA NA BIAŁYM: regułę ::placeholder ustawia ciemny band ze
   stopki, a jasne karty newslettera (pillar, Edukacja, band e-booka) jej nie nadpisywały,
   więc pole wyglądało na puste i nikt nie wiedział, co tam wpisać. */
.nl-inline .nl-row input[type=email]::placeholder{color:var(--muted);opacity:.75}
.nl-inline .nl-row .btn{white-space:nowrap;flex:0 0 auto}
.nl-inline .nl-zgoda{display:flex;gap:9px;align-items:flex-start;font-size:.85rem;color:var(--muted);line-height:1.4}
.nl-inline .nl-zgoda input{margin-top:3px;flex:0 0 auto}
.nl-inline .nl-zgoda a{color:var(--deep);text-decoration:underline}
.nl-inline .nl-msg{margin:10px 0 0;font-size:.9rem;font-weight:600}
.nl-inline .nl-msg[data-state=ok]{color:#1a7a4c}
.nl-inline .nl-msg[data-state=err],.nl-inline .nl-msg[data-state=zgoda],.nl-inline .nl-msg[data-state=email]{color:#b4453a}
.nl-inline-pillar .nl-inline{background:linear-gradient(135deg,#fff,var(--wash))}
@media(max-width:640px){
  .nl-inline{padding:24px 20px}
  .nl-inline .nl-row{flex-direction:column}
  .nl-inline .nl-row .btn{width:100%}
}


/* =====================================================================
   POPRAWKI 2026-07-24 (przegląd Michała): teleporady numeracja, partnerzy,
   mega menu (panel Pakiety + zwężenie panelu zapisów NFZ)
   ===================================================================== */

/* --- zad 3: ciągła numeracja głównych punktów standardu teleporady --- */
.tp-ol{counter-reset:tpz}
.tp-ol ol{list-style:none;padding-left:0;margin:0}
.tp-ol > ol{margin:0}
.tp-ol > ol > li{counter-increment:tpz;position:relative;padding-left:2.4em;margin-bottom:12px}
.tp-ol > ol > li::before{content:counter(tpz) ".";position:absolute;left:0;top:0;
  font-family:Jost,sans-serif;font-weight:600;color:var(--deep)}
.tp-ol ol ul{list-style:disc;padding-left:1.4em;margin:8px 0}
.tp-ol ol ul li{margin-bottom:4px}

/* --- zad 6: partnerzy — logo NAD tekstem w ujednoliconym kadrze, tekst pełna szerokość --- */
.prt{flex-direction:column;gap:0;align-items:stretch}
.prt-logo{flex:0 0 auto;width:100%;height:60px;justify-content:flex-start;align-items:center;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.prt-logo img{max-width:170px;max-height:52px;width:auto;object-fit:contain;object-position:left center}
.prt-body{width:100%}

/* --- zad 8: panel promo Pakiety w mega komercyjnym (ciemny, jak panel Zapisy NFZ) --- */
.mega-promo{position:relative;display:flex;align-items:center;gap:18px;overflow:hidden;
  background:linear-gradient(135deg,var(--deep),var(--ink));border-radius:16px;
  padding:18px 24px;margin-bottom:22px;text-decoration:none;color:#fff;
  transition:transform .15s ease, box-shadow .15s ease}
.mega-promo:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(40,36,98,.28)}
.mega-promo .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.14;pointer-events:none}
.mega-promo-ico{position:relative;flex:0 0 46px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);display:grid;place-items:center;color:#fff}
.mega-promo-ico svg{width:24px;height:24px}
.mega-promo-txt{position:relative;flex:1;min-width:0}
.mega-promo-txt .eyebrow{color:#9fd9f2;margin:0 0 2px}
.mega-promo-txt h4{color:#fff;font-family:Jost,sans-serif;font-weight:600;font-size:1.12rem;margin:0;line-height:1.25}
.mega-promo-cta{position:relative;flex:0 0 auto;font-family:Jost,sans-serif;font-weight:600;font-size:.92rem;
  color:#fff;background:var(--fala);padding:10px 18px;border-radius:999px;white-space:nowrap}
@media(max-width:820px){.mega-promo{flex-wrap:wrap;gap:12px}.mega-promo-cta{width:100%;text-align:center}}

/* --- zad 7: mega NFZ — zwęź panel zapisów, wyrównaj wysokość kolumn --- */
.mega-inner-nfz{align-items:start}
.mega-hero-sm{padding:18px 20px;min-height:0}
.mega-hero-sm .bg{opacity:.16}
.mega-hero-sm .eyebrow{margin-bottom:2px}
.mega-hero-sm h4{font-size:1.02rem;margin:0 0 12px;line-height:1.25}
.mega-hero-sm .btn{padding:9px 16px;font-size:.9rem}


/* =====================================================================
   POPRAWKI 2026-07-24 tura 3+4 (przegląd Michała)
   Odległości między elementami menu ZOSTAJĄ domyślne (były OK) — likwidujemy
   tylko PUSTE SZCZELINE: pas nad/pod panelem w komercyjnym, pustka pod placówkami w NFZ.
   ===================================================================== */

/* --- band newslettera na /edukacja/ — wycentrować wszystko + oddech w input (zostaje z tury 3) --- */
.news-band{text-align:center}
.news-band .eyebrow,.news-band h2,.news-band p{margin-left:auto;margin-right:auto}
.news-band h2{max-width:16em}
.news-band .nl-form{max-width:560px;margin:24px auto 0}
.news-band .nl-row{gap:12px}
.news-band .nl-row input[type=email]{padding:17px 24px}
.news-band .nl-row .btn{padding:15px 26px}
.news-band .nl-zgoda{max-width:520px;margin:14px auto 0;text-align:left}

/* --- szczelina NAD zawartością obu mega: 34px paddingu dropdownu to za dużo --- */
.mega{padding:18px 0}

/* --- KOMERCYJNE: panel Pakiety pływał w pustych pasach ---
   pas pod = gap grida inner (36px) + margin panelu; zerujemy gap, dajemy rozsądny margines. */
.mega-inner.mega-full{gap:0;padding-top:0}
.mega-promo{margin-bottom:18px}

/* --- NFZ: pusta szczelina pod placówkami = prawa szyna (panel+POZ) o 102px wyższa niż lewe.
   Panel "Zapisy NFZ" usunięty z markupu (header.php); zostaje "Dla pacjenta POZ",
   wyśrodkowany w pionie względem placówek — resztkowa różnica rozkłada się symetrycznie. */
.mega-inner-nfz{align-items:center}


/* =====================================================================
   RUNDA 2026-07-27 — TELEFON (uwagi Michała po przeglądzie na smartfonie)
   1. topbar chowamy na mobile, jego zawartość wchodzi do menu głównego
   2. stopka: menu wyśrodkowane tak jak dane adresowe
   3. koniec układów dwukolumnowych na telefonie (hero podstron zwłaszcza)
   4. zdjęcia zachowują własne proporcje zamiast wymuszonego kadru 3:2
   ===================================================================== */

/* --- 1. Secondary menu (topbar) znika tam, gdzie pojawia się burger (980px).
       Na telefonie pokazywał tylko 3 z 6 pozycji (tb-drop miały display:none),
       więc „edukacja / inicjatywy / dokumenty" były nieosiągalne. Całość
       przeniesiona do panelu mobilnego w header.php. --- */
@media(max-width:980px){.topbar{display:none}}

/* --- 2. Stopka na telefonie: menu wyśrodkowane jak blok danych spółki --- */
@media(max-width:640px){
  .foot-grid{text-align:center;gap:32px}
  .foot-grid h4{margin-bottom:4px}
  .foot-grid .sub{margin-left:auto;margin-right:auto}
  footer .foot-grid ul{justify-items:center}
  .foot-social{justify-content:center;flex-wrap:wrap;text-align:center}
  .fine{text-align:center}
}

/* --- 3. Bezpiecznik jednokolumnowości na telefonie.
       Powód: pojedyncza osierocona linia w theme.css potrafiła zjeść media query
       (.phero .wrap zostawał 2-kolumnowy na 39 podstronach, zdjęcie hero ściskało
       się do ~80 px). Ten blok jest ostatni w kaskadzie i nie zależy od generatora. --- */
@media(max-width:980px){
  .phero .wrap,.hero .wrap,.art .grid,.art .grid-flip,.kasz-split,.siec-grid,
  .umow-grid,.credo-split .wrap,.nl-grid,.sec-head-wide,.cop-grid,
  .dekl .wrap,#kiedy .grid,.why,.nfz-grid,.finder,.pm-faq .grid{grid-template-columns:1fr !important}
  .art aside{position:static}
  .phero-foto,.hero-slider{order:-1}
  .art .grid-flip aside{order:2}.art .grid-flip .copy{order:1}
}
/* --- 27.07 (druga paczka uwag Michała) --- */
/* łezka na telefonie: mniejszy promień = więcej miejsca na treść w kadrze
   (130 px na 342 px szerokości zjadało róg zdjęcia razem z twarzą) */
@media(max-width:760px){
  .phero-foto,.hero-slider{border-radius:56px 18px 56px 18px}
  .lek-foto{border-radius:20px 20px 56px 20px}
  .art aside .foto,.pillar-foto2,.pm-faq aside .foto{border-radius:20px 20px 56px 20px}
}
/* zdjęcia zespołu ZAWSZE co najmniej dwie kolumny (w jednej kafel był na pół ekranu) */
@media(max-width:440px){.os-grid{grid-template-columns:repeat(2,1fr) !important;gap:12px}}
/* single lekarza na telefonie: portret nie zajmuje całej szerokości ekranu */
@media(max-width:760px){
  .lek-aside{align-items:center}
  .lek-foto{width:min(62%,240px);align-self:center}
}

/* plakietki na zdjęciu hero: mniejsze i przy krawędzi, żeby nie wychodziły poza ekran */
@media(max-width:640px){
  /* plakietka na DOLE zdjecia: przy gorze siedziala dokladnie tam, gdzie na wiekszosci
     kadrow jest twarz (zmierzone: zaslaniala 11-21% zdjecia, 4% od gory) */
  /* plakietka NFZ: lewy DOLNY rog (przy gorze siadala na twarzach) */
  .badge-nfz{left:16px;right:auto;top:auto;bottom:16px;padding:9px 14px;max-width:calc(100% - 32px)}
  /* licznik pacjentow na glownej: prawy GORNY rog — w lewym dolnym nachodzil na
     plakietke godzin otwarcia (.ekg), ktora tam mieszka (uwaga Michala 27.07) */
  .badge-count{left:auto;right:16px;top:16px;bottom:auto;padding:9px 14px;max-width:calc(100% - 32px)}
  .badge-nfz img{height:26px;width:auto;flex:0 0 auto}
  .badge-nfz span{font-size:.74rem;min-width:0}
  /* napis lamany recznie na dwie linie (<br> w szablonie) — ramka jest przez to
     wezsza i miesci sie w kadrze zdjecia; nie zawijamy dodatkowo w srodku linii */
  .badge-nfz b{font-size:.84rem;line-height:1.3;text-wrap:balance}
  .badge-nfz span{white-space:nowrap}
}

/* Guzik dostępności na telefonie: poprawka mieszka w consent-a11y.css (ładuje się PO tym pliku). */

/* --- 4. Kadrowanie: zdjęcia treściowe zachowują WŁASNE proporcje.
       Wymuszone 3:2 / 4:5 / 5:4 ucinało głowy i górę kadru (uwaga Michała 27.07).
       Wysokość kolumn wyrównujemy centrowaniem (align-items:center), nie cięciem. --- */
.phero-foto{aspect-ratio:auto}
/* TYLKO bezposrednie dziecko: w .phero-foto siedzi tez logo NFZ w plakietce,
   ktoremu "height:auto" rozdmuchiwalo szerokosc do 100% (span wychodzil poza ekran) */
.phero-foto > img{height:auto}
/* Zdjecia LAZY (pillar-foto2, pd-foto): ZERO deklaracji aspect-ratio.
   Sprawdzone empirycznie na stagingu: i 'auto', i 'revert' kasuja regule przegladarki
   img[width][height]{aspect-ratio:attr(width)/attr(height)}, wiec obrazek ma przed
   zaladowaniem wysokosc 0 -> nigdy nie wpada w pole widzenia -> nie doczytuje sie wcale.
   Proporcje niesie para atrybutow width/height z bm_img_wh() w szablonie. */
.pillar-foto2 img,.pd-foto{height:auto}
/* Zdjecia ladowane od razu (bez loading=lazy) moga miec 'auto' - nie ma czego rezerwowac */
.art .grid aside .foto.foto-kadr img,.art aside .foto img,.pm-faq aside .foto img{aspect-ratio:auto;height:auto}
/* BAND pelnej szerokosci ZOSTAJE kadrowany (finding Codexa, zmierzone: pionowe
   1122x1402 rozciagalo pasek do 1414 px na desktopie). To pasek-przerywnik, nie
   zdjecie tresciowe - ale kadrujemy od GORY, zeby nie ucinac twarzy. */
.ed-band img{object-position:center 28%}
@media(max-width:900px){
  /* Kaszubska i mozaika: na desktopie zdjęcie wypełnia kolumnę splitu (tak ma być),
     na telefonie ten sam kadr ucinał 52-61% zdjęcia — tu proporcje własne. */
  .kasz-foto img{height:auto;min-height:0}
  .mozaika{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}
  .mozaika img{height:auto;aspect-ratio:auto}
  .mozaika .m1{grid-row:auto}
}
/* siatki kafli zostają w równym kadrze (inaczej rząd się rozjeżdża), ale kadrujemy
   od GÓRY zdjęcia — tam są twarze i szyldy, a nie sufit/asfalt */
.city.has-foto .city-foto img,.edu .thumb img,.post-figura img{object-position:center 28%}

/* --- SZKOŁA RODZENIA: pas „po porodzie" + zdjęcie w kolumnie kontaktu.
       Ten sam podział co .credo-split na głównej, ale w różowej szacie SR i na jasnym
       tle: ta sekcja ma wzruszać, a nie przejmować stronę (uwaga Michała 28.07,
       „ta strona powinna nieco rozczulać"). --- */
.sr-band{background:linear-gradient(180deg,#F9EFF6,#F2DFEC);padding:76px 0}
.sr-band .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
.sr-band .eyebrow{color:#8C4E7B}
.sr-band h2{color:var(--deep);font-size:clamp(1.7rem,3.4vw,2.4rem);margin:.35em 0 .5em;max-width:15em}
.sr-band p:not(.eyebrow){color:var(--muted);max-width:34em}
.sr-band-foto{margin:0;border-radius:26px 110px 26px 26px;overflow:hidden;
  box-shadow:0 26px 60px rgba(140,78,123,.22)}
.sr-band-foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
@media(max-width:900px){
  .sr-band{padding:56px 0}
  .sr-band .wrap{grid-template-columns:1fr;gap:30px}
  .sr-band-foto{border-radius:26px 80px 26px 26px}
}
/* zdjęcie nad kartą kontaktu w kolumnie bocznej potrzebuje własnego oddechu */
.art .grid aside .foto+.kontakt{margin-top:26px}

/* Nagłówki sekcji na stronie Szkoły Rodzenia idą na pełną szerokość (uwaga Michała
   28.07): odkąd karty terminów, karta danych i pasy ze zdjęciami zajmują całą kolumnę,
   tekst wstępu urwany na 660 px zostawiał pod sobą pustą prawą połowę. */
.p-szkola-rodzenia .sec-head{max-width:none}
/* Skok po kotwicy („Zapisz się na zajęcia" → #zapisy) kończył się na nagłówku schowanym
   pod przyklejonym menu: sekcja lądowała na 40 px, a menu ma 77 px wysokości.
   Zapas liczony od menu, nie na oko. */
.p-szkola-rodzenia main [id]{scroll-margin-top:96px}

/* ==== cennik: linia "co obejmuje" pod nazwa pozycji (produkcja niesie ja jako
   opis pakietu, np. "pakiet obejmuje: wizyte pierwszorazowa + 2 kolejne").
   Uwaga Karola 30.07 przy pozycjach leczenia otylosci. */
.cennik-tab td .poz-obejmuje{display:block;color:var(--muted);font-size:.85rem;margin-top:2px;font-style:italic}

/* ==== kalkulator syropu: rozwijana lista preparatow po nazwie handlowej
   (uwaga Karola 30.07 - rodzic szuka po nazwie z opakowania) */
.sy-preparaty{margin-top:6px;border:1px solid var(--linia,#e6e9f0);border-radius:14px;padding:12px 16px;background:var(--paper,#fff)}
.sy-preparaty summary{cursor:pointer;font-weight:500;color:var(--ink,#241f4d)}
.sy-preparaty ul{margin:12px 0 0;padding-left:18px;display:grid;gap:6px}
.sy-preparaty li{font-size:.94rem;line-height:1.5}
.sy-preparaty p{margin-top:12px;font-size:.9rem;color:var(--muted)}

/* Kafle informacyjne bez linku (programy profilaktyczne na /uslugi-na-nfz/) —
   ten sam wyglad co .nfz, ale bez podnoszenia w hoverze, zeby nie udawaly klikalnych. */
.nfz.nfz-static{cursor:default}
.nfz.nfz-static:hover{transform:none;box-shadow:none}
.nfz.nfz-static:hover .nfz-ico{transform:none}

/* Kotwice na /uslugi-na-nfz/: sekcja nie moze wjezdzac pod przyklejony naglowek
   (bez tego #opieka-koordynowana ladowal z nadtytulem schowanym za belka).
   #zapisy = cel guzika „Zostań pacjentem" z menu (Michał, 2.09 po starcie). */
#opieka-koordynowana,#programy-profilaktyczne,#zapisy{scroll-margin-top:104px}

/* ==== Band e-booka na stronie leczenia otyłości (lead magnet newslettera) ====
   Zapis idzie zwykłym formularzem newslettera (double opt-in), a tag źródła uruchamia
   automatyzację wysyłającą plik. Tutaj tylko oprawa: tekst obok okładki i pola zapisu. */
.ebook-band{background:linear-gradient(180deg,#fff 0%,var(--wash) 100%)}
.ebook-band .ebook-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.ebook-band .ebook-tekst h2{font-size:clamp(1.7rem,3vw,2.35rem);color:var(--deep);margin-bottom:16px}
.ebook-band .ebook-tekst p{color:var(--muted);max-width:54ch;margin-bottom:12px}
.ebook-band .ebook-punkty{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.ebook-band .ebook-punkty li{position:relative;padding-left:30px;color:var(--ink);line-height:1.45}
.ebook-band .ebook-punkty li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:9px;
  border-left:2.5px solid var(--fala);border-bottom:2.5px solid var(--fala);transform:rotate(-45deg)}
.ebook-band .ebook-form{display:grid;gap:22px;justify-items:center}
/* okładka bierze oprawę .pillar-foto2 (zaokrąglenie z łezką + cień), tu tylko rozmiar.
   Szerokość równa karcie zapisu pod spodem: dwa elementy jednej kolumny mają stać
   w jednej linii pionowej, inaczej band wygląda na złożony z przypadkowych klocków. */
.ebook-band .ebook-okladka{width:100%;margin:0}
.ebook-band .ebook-zapis{width:100%;box-shadow:0 18px 40px rgba(51,42,95,.08)}
.ebook-band .ebook-zapis .nl-form{margin:0}
.ebook-band .ebook-fine{margin:12px 0 0;font-size:.86rem;color:var(--muted);line-height:1.45}
@media(max-width:980px){
  .ebook-band .ebook-grid{grid-template-columns:1fr;gap:34px}
  /* w układzie jednokolumnowym ograniczamy CAŁĄ kolumnę, nie samą okładkę:
     inaczej obrazek dostawał własny limit i przestawał się kryć z kartą zapisu */
  .ebook-band .ebook-form{max-width:520px;margin-inline:auto}
}

/* ==== Zespół: kafel z opisem otwiera okno ====
   Kafel z biografią albo linkiem do ZnanegoLekarza jest <button>, więc resetujemy
   domyślne style przycisku i dokładamy sygnał, że da się w niego kliknąć. */
/* 🔴 Przycisk CENTRUJE swoją zawartość w pionie (własny mechanizm układu, którego nie
   widać w align-items), więc kafel z krótszym podpisem dostawał kilkanaście pikseli
   białego pola nad zdjęciem, a sąsiedni z dłuższym nazwiskiem nie. Kolumna flex
   z justify-content:flex-start zdejmuje to raz na zawsze; przy okazji flex ignoruje
   węzły z samą spacją, więc znika też odstęp po wcięciach w szablonie. */
button.os{appearance:none;font:inherit;text-align:left;padding:0;cursor:pointer;
  width:100%;display:flex;flex-direction:column;align-items:stretch;
  justify-content:flex-start;color:inherit}
button.os>.os-foto{flex:0 0 auto}
button.os:focus-visible{outline:3px solid var(--fala);outline-offset:3px}
.os .os-wiecej{display:block;padding:0 16px 14px;margin-top:-6px;font-family:Jost,sans-serif;
  font-weight:600;font-size:.8rem;color:var(--w2,#1B6E9E);letter-spacing:.01em}
.os-klik:hover .os-wiecej{text-decoration:underline}

/* margin:auto trzyma okno na środku ekranu; bez tego dziedziczyło pozycję po
   kontenerze strony i lądowało w lewym górnym rogu */
.os-modal{border:0;padding:0;max-width:640px;width:calc(100% - 32px);margin:auto;
  border-radius:calc(var(--r) + 6px);box-shadow:0 40px 90px rgba(35,32,72,.32);overflow:visible}
.os-modal::backdrop{background:rgba(35,32,72,.55)}
.os-modal-zamknij{position:absolute;top:10px;right:12px;z-index:2;width:38px;height:38px;
  border:0;border-radius:50%;background:#fff;color:var(--deep);font-size:1.5rem;line-height:1;
  cursor:pointer;box-shadow:0 4px 14px rgba(35,32,72,.18)}
.os-modal-zamknij:hover{background:var(--wash)}
.os-modal-tresc{padding:28px 30px 30px}
.os-modal-naglowek{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;
  margin-bottom:20px}
.os-modal-naglowek .os-foto{aspect-ratio:2/3;border-radius:14px;overflow:hidden}
.os-modal-naglowek h2{font-size:1.42rem;color:var(--deep);margin:0 0 4px;line-height:1.2;outline:none}
.os-modal-stanowisko{margin:0;color:var(--ink);font-weight:500}
.os-modal-spec{margin:6px 0 0;color:var(--muted);font-size:.9rem}
.os-modal-bio{color:var(--ink);line-height:1.6}
.os-modal-bio p{margin:0 0 12px}
.os-modal-bio p:last-child{margin-bottom:0}
.os-modal-plac{margin:16px 0 0;color:var(--muted);font-size:.92rem;line-height:1.5}
.os-modal-akcje{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.os-modal-akcje .btn-fala{display:inline-flex;flex-direction:column;align-items:center;gap:1px}
.os-modal-akcje .zl-via{font-size:.7rem;font-weight:400;opacity:.8;text-transform:none}
@media(max-width:560px){
  .os-modal-tresc{padding:24px 20px 26px}
  .os-modal-naglowek{grid-template-columns:92px 1fr;gap:14px}
  .os-modal-akcje .btn{width:100%;justify-content:center}
}

/* =====================================================================
   PASEK MENU: pigułka Pakietów obok CTA (4.08.2026, rysunek Krzyśka z BC)
   przy PEŁNYM menu — Kontakt wrócił na pasek decyzją Michała.
   Linia niesie teraz logo + cztery pozycje + dwie pigułki, czyli najwięcej
   w całym projekcie. Dwie rzeczy trzeba było ustawić:
   1. .btn-ghost ma obwódkę, a .btn-ink nie — bez korekty pigułki różniłyby się
      wysokością o 4 px; padding pomniejszony o grubość obwódki wyrównuje parę.
   2. Między 981 px (próg burgera) a 1099 px komplet nie mieści się w domyślnych
      odstępach — poniżej zwarty wariant paska (ciaśniejsze odstępy, logo i krój bez
      zmian). Od 1100 px wraca oryginalny oddech, bo miejsca jest w bród.
   Kolor obwódki bierze się z W2 (reguła .btn-ghost wyżej w tym pliku).
   ===================================================================== */
.nav .btn-ghost{border-width:1.5px;padding:calc(.6em - 1.5px) calc(1.2em - 1.5px);background:#fff}
.nav .btn-ghost:hover{background:var(--wash);border-color:#17618F}
/* Odstępy w prawej części paska ściągnięte (uwaga Michała 4.08: „sporo miejsca do odzyskania",
   zmierzone na jego zrzucie z devtools). Domyślne 26 px flexa plus 8 px marginesu robiło
   34 px między menu a guzikiem i tyle samo między guzikami. Teraz: 14 px od menu do pary
   i 10 px w środku pary, żeby czytała się jako jeden blok akcji. */
.nav{gap:14px}
.nav .btn{margin-left:0}
.nav .btn-ghost{margin-left:-4px}

@media(min-width:981px) and (max-width:1099px){
  .nav{gap:12px}
  .nav nav{gap:0;font-size:.95rem}
  .nav nav a.top{padding:26px 8px}
  .nav .btn{font-size:.92rem;padding:.6em 1em;margin-left:0}
  .nav .btn-ghost{padding:calc(.6em - 1.5px) calc(1em - 1.5px);margin-left:-2px}
}

/* =====================================================================
   ZAPISY ONLINE PRZEZ ZNANYLEKARZ (2.09.2026, Michał: przed telefonem, gdy dla
   specjalizacji istnieje kalendarz). Okno wyboru dzieli styl z .os-modal.
   ===================================================================== */
/* Guzik zapisu online = dwie linie wszędzie (Michał 2.09): „Umów wizytę online" nad
   „przez ZnanyLekarz". Kolumnę układa wewnętrzny .zl-in, wycentrowany w obu osiach
   względem pigułki; sam przycisk zostaje zwykłym .btn, więc Safari nie ma czego psuć. */
.btn .zl-in{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;width:100%;line-height:1.15;text-align:center;margin:0}
.btn .zl-in .zl-via{font-size:.72rem;font-weight:400;opacity:.8;letter-spacing:.01em;line-height:1.2}
.btn:has(.zl-in){justify-content:center;padding-top:.55em;padding-bottom:.55em}
button.zl-otworz{line-height:inherit;appearance:none;-webkit-appearance:none;margin:0}
.phero .cta .zl-tel{background:#fff}
/* sąsiedni „Zadzwoń" rozciąga się do wysokości dwulinijkowego guzika, gdy stoją obok siebie */
.zl-btns{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:stretch}
.zl-btns .btn{justify-content:center}
.final .zl-btns{justify-content:center}
.kontakt .zl-btns,.umow-grid .zl-btns{margin-top:4px}
/* w karcie obok siebie (Michał 2.09): zwarte pigułki, każda bierze połowę szerokości; gdy karta
   jest za wąska, zawijają się do dwóch wierszy zamiast wystawać poza kartę */
.kontakt .zl-btns{gap:8px 10px}
.kontakt .zl-btns .btn{flex:1 1 auto;min-width:0;padding:.55em 1em;font-size:.92rem;white-space:nowrap}
/* szeroka karta POZ: guziki naturalnej szerokości, nie na pół karty */
.zl-poz .zl-btns .btn{flex:0 0 auto;font-size:1.02rem;padding:.55em 1.5em}
.zl-modal{max-width:600px}
.zl-modal-h{font-size:1.42rem;color:var(--deep);margin:0 40px 6px 0;line-height:1.2;outline:none}
.zl-modal-lead{margin:0 0 16px;color:var(--muted);line-height:1.5}
.zl-lista{list-style:none;margin:0;padding:0;max-height:min(60vh,520px);overflow-y:auto}
.zl-grupa{font-family:Jost,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--w2,#1B6E9E);margin:16px 0 4px}
.zl-grupa:first-child{margin-top:0}
.zl-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;
  border-top:1px solid var(--line,#e3e9ef)}
.zl-row:first-child,.zl-grupa+.zl-row{border-top:0}
.zl-row .os-foto{width:52px;aspect-ratio:2/3;border-radius:10px;overflow:hidden;margin:0}
.zl-row .os-foto img{width:100%;height:100%;object-fit:cover;display:block}
.zl-row .os-foto.os-mono{gap:4px;background:var(--wash)}
.zl-row .os-foto.os-mono svg.i{width:22px;height:22px}
.zl-row .os-foto.os-mono svg:not(.i){width:26px}
.zl-row-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.zl-row-tekst b{color:var(--deep);font-weight:600;line-height:1.25}
.zl-row-tekst span{color:var(--ink);font-size:.9rem;line-height:1.3}
.zl-row-tekst small{color:var(--muted);font-size:.82rem}
.zl-row .btn{padding:.6em 1.1em;font-size:.95rem;white-space:nowrap}
.zl-modal-fine{margin:16px 0 0;font-size:.82rem;color:var(--muted);line-height:1.5}
/* profil lekarza i finał: po jednym przycisku na kalendarz, podpis usługi w drugiej linii */
.lek-zl{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}
.lek-zl .btn,.final .zl-btns .btn{flex-direction:column;align-items:center;gap:1px;text-align:center;justify-content:center}
.lek-zl .btn .zl-via,.final .zl-btns .btn .zl-via{font-size:.72rem}
/* kafel klikalny jest <div> z przyciskiem „Zobacz opis" w środku (odnośnik ZL obok jako
   rodzeństwo): ta sama kolumna flex co dawny button.os, inaczej pigułka ZL leży inline
   i nachodzi na „Zobacz szczegóły" (zrzut Michała 2.09) */
div.os-klik{cursor:pointer;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
div.os-klik>.os-foto{flex:0 0 auto}
.os button.os-wiecej{appearance:none;-webkit-appearance:none;background:none;border:0;width:100%;
  text-align:left;cursor:pointer;margin:-6px 0 0;padding:0 16px 14px;line-height:inherit}
.os button.os-wiecej:focus-visible{outline:3px solid var(--fala);outline-offset:-3px;border-radius:6px}
/* okno wyboru: nagłówek grupy usług semantyczny, wygląd bez zmian */
.zl-grupa h3{font:inherit;margin:0;color:inherit;letter-spacing:inherit;text-transform:inherit}
/* przychodnia POZ: zapis do specjalisty w osobnej karcie, poza blokiem deklaracji */
.zl-poz{background:var(--wash);border-radius:var(--r);padding:26px 28px}
.zl-poz h3{margin:0 0 8px;color:var(--deep)}
.zl-poz p{margin:0 0 16px;max-width:60ch}
/* pigułka ZL w polu kafla: w świetle 16 px, pod opisem, nad „Zobacz szczegóły" */
.os .btn-zl{align-self:flex-start;margin:-4px 16px 12px}
.os .btn-zl+.os-wiecej{margin-top:0}
@media(max-width:560px){
  .zl-row{grid-template-columns:44px minmax(0,1fr);gap:10px 12px}
  .zl-row .os-foto{width:44px}
  .zl-row .btn{grid-column:2;justify-self:start}
  .zl-btns .btn{width:100%;justify-content:center}
}

/* pasek "pobierz PDF" pod testami PHQ-9 i GAD-7 (2.09.2026) */
.nrz-pdf{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-top:56px;padding:28px 32px;border:1px solid var(--line);border-radius:var(--r);background:var(--wash)}
.nrz-pdf h2{margin:.2em 0 .35em;font-size:1.35rem;color:var(--deep)}
.nrz-pdf p{margin:0;color:var(--muted);max-width:56ch}
.nrz-pdf .btn{flex:0 0 auto}
@media(max-width:640px){
  .nrz-pdf{padding:22px 20px;gap:18px}
  .nrz-pdf .btn{width:100%;justify-content:center}
}