/* ═══════════════════════════════════════════════════════════════════════════
   Style sekcji (Flexible Content) i szablonów treści. Tokeny w style.css (:root). Design „Klasyka”
   (docs/design.md v2). Bez animacji wjazdu i bez zoomu zdjęć na hover (preferencje z koha).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ SEKCJE - rytm i tła ═══ */
.sekcja { padding-block: var(--rytm-sekcji); }
.wariant--jasny { background: var(--biel); }
.wariant--mgla { background: var(--kamien); }
.sekcja__naglowek { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sekcja__naglowek > :last-child { margin-bottom: 0; }
.sekcja__akcja { margin: var(--s-12) 0 0; }
.sekcja__akcja--srodek { text-align: center; }
.naglowek-z-akcja { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4) var(--s-8); margin-bottom: var(--s-8); }
.naglowek-z-akcja h2 { margin: 0; }

/* ═══ HERO ═══ */
.hero { position: relative; color: var(--biel); overflow: hidden; background: var(--granat); }
.hero__zdjecia, .hero__zdjecie { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__zdjecie { object-fit: cover; object-position: 70% 50%; }
.hero--pelny, .hero--baner { display: grid; align-items: center; }
.hero--pelny { min-height: min(88vh, 860px); }
.hero--baner { min-height: min(52vh, 520px); }
/* Granatowy gradient od lewej - tekst zawsze na ciemnym (kontrast niezależny od zdjęcia). */
.hero--pelny::before, .hero--baner::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, rgb(14 25 42 / 0.92) 0%, rgb(14 25 42 / 0.8) 38%, rgb(14 25 42 / 0.2) 74%, rgb(14 25 42 / 0.05) 100%);
}
.hero__tresc { position: relative; z-index: 2; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.hero--pelny .hero__tresc { padding-bottom: clamp(7rem, 12vw, 10rem); }
.hero__tresc > * { max-width: 780px; }
.hero__tytul { color: var(--biel); margin-bottom: var(--s-6); }
.hero .etykieta { color: var(--blekit-jasny); }
.hero__lead { font-size: var(--t-l); line-height: 1.6; color: var(--na-granacie); margin-bottom: var(--s-8); }
.hero__akcje { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero .okruszki__lista, .hero .okruszki__lista a { color: var(--na-granacie-slaby); }
.hero .okruszki__lista a:hover { color: var(--biel); }
/* Spis sekcji (strona Oferta): linki-pigułki do dziedzin. */
.hero__spis ul { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: var(--s-8) 0 0; padding: 0; }
.hero__spis a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
	border: 1px solid rgb(255 255 255 / 0.45); border-radius: var(--promien);
	color: var(--biel); text-decoration: none; font-size: var(--t-s); font-weight: 600;
}
.hero__spis a:hover { background: rgb(255 255 255 / 0.12); border-color: var(--biel); }
/* Hero bez zdjęcia: niskie, jasne. */
.hero--proste { background: var(--kamien); color: var(--tekst); }
.hero--proste .hero__tytul { color: var(--granat); }
.hero--proste .etykieta { color: var(--blekit); }
.hero--proste .hero__lead { color: var(--tekst); }
.hero--proste .hero__spis a { color: var(--blekit); border-color: var(--linia); }
.hero--proste .okruszki__lista, .hero--proste .okruszki__lista a { color: var(--tekst-slaby); }
@media (max-width: 760px) {
	.hero--pelny::before, .hero--baner::before { background: linear-gradient(180deg, rgb(14 25 42 / 0.75) 0%, rgb(14 25 42 / 0.9) 100%); }
	.hero__zdjecie { object-position: 78% 50%; }
	.hero--pelny { min-height: 0; }
}

/* ═══ PAS INFORMACJI (pod hero, zachodzi na zdjęcie) ═══ */
/* Tło jak sekcja powitania pod spodem (kamień) - bez białego paska pod kafelkami (prośba użytkownika 2026-11-03). */
.fakty { position: relative; z-index: 3; padding-top: var(--s-8); background: var(--kamien); }
.fakty--na-zdjeciu {
	--zakladka: clamp(4.5rem, 8vw, 6rem);
	margin-top: calc(-1 * var(--zakladka)); padding-top: 0;
	/* Górna część (ta na zdjęciu) przezroczysta - kafelki dalej najeżdżają na przecięcie hero i sekcji. */
	background: linear-gradient(to bottom, transparent var(--zakladka), var(--kamien) var(--zakladka));
}
.fakty__siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
/* Osobne kafelki z odstępami i lekkim cieniem (prośba użytkownika 2026-11-03). */
.fakt { display: flex; gap: var(--s-4); padding: 28px 30px; background: var(--biel); border-top: 3px solid var(--blekit); box-shadow: 0 14px 34px -20px rgb(20 35 57 / 0.45), 0 2px 6px -2px rgb(20 35 57 / 0.08); }
.fakt__ikona { width: 30px; height: 30px; color: var(--blekit); margin-top: 2px; }
.fakt__tytul { font: 700 1.1rem/1.3 var(--font-serif); margin-bottom: var(--s-1); }
.fakt p { margin: 0; font-size: var(--t-s); }
/* Link w tekście nie może różnić się od niego samym kolorem (PageSpeed, „Links rely on colour”, 2026-11-03): podkreślenie. */
.fakt a { color: var(--blekit); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; white-space: nowrap; }
.fakt a:hover { color: var(--granat); text-decoration-thickness: 2px; }

/* ═══ TEKST (powitanie, aktualności, polityka) ═══ */
.sekcja--tekst .tekst-zdjecie__tekst > * { max-width: var(--szerokosc-waska); }
/* Ze zdjęciem z prawej (powitanie, 2026-11-03): tekst ~3/5, zdjęcie ~2/5; na telefonie zdjęcie pod tekstem. */
.tekst-zdjecie { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.tekst-zdjecie__obraz { margin: 0; position: relative; isolation: isolate; }
.tekst-zdjecie__obraz img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--cien); }
.tekst-zdjecie__obraz::before { content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 1px solid var(--mosiadz); z-index: -1; }
@media (max-width: 860px) { .tekst-zdjecie { grid-template-columns: 1fr; } .tekst-zdjecie__obraz { max-width: 520px; } }
.sekcja--tekst .lead-sekcji { font: 400 clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem)/1.5 var(--font-serif); color: var(--granat); }
.podpis { margin: var(--s-8) 0 0; font: italic 400 1.25rem/1.4 var(--font-serif); color: var(--granat); }
.podpis span { display: block; margin-top: var(--s-1); font: 400 var(--t-s)/1.4 var(--font-tekst); color: var(--tekst-slaby); }

/* ═══ OBSZARY - dziedziny prawa w karuzeli (assets/js/karuzela.js: auto, zapętlona) ═══ */
.karuzela { position: relative; }
.karuzela__tasma {
	display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: var(--s-6);
	/* Odstęp wokół kafli: pierwszy kafel nie ucina się z lewej, cień mieści się w taśmie (scroll-padding = padding). */
	margin: 0 -14px; padding: 14px 14px 36px; scroll-padding-inline: 14px; list-style: none;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.karuzela__tasma::-webkit-scrollbar { display: none; }
.karuzela__tasma > li { scroll-snap-align: start; }
@media (min-width: 600px) { .karuzela__tasma { grid-auto-columns: calc((100% - var(--s-6)) / 2); } }
@media (min-width: 960px) { .karuzela__tasma { grid-auto-columns: calc((100% - 2 * var(--s-6)) / 3); } }
/* Strzałki po bokach taśmy, na wysokości środka kafli (prośba użytkownika 2026-11-03), na krawędziach skrajnych kafli
   (dalej w lewo weszłyby na zakładkę Facebooka). Pas sterowania nie łapie kliknięć, tylko same przyciski. */
.karuzela__sterowanie { display: none; position: absolute; z-index: 2; left: -20px; right: -20px; top: calc(50% - 11px); transform: translateY(-50%); justify-content: space-between; pointer-events: none; }
.karuzela.ma-karuzele .karuzela__sterowanie { display: flex; }
@media (min-width: 1600px) { .karuzela__tasma { grid-auto-columns: calc((100% - 3 * var(--s-6)) / 4); } }
/* Telefon: po bokach strzałki zasłaniały tekst kafla i zakładkę Facebooka - zostają pod taśmą. */
@media (max-width: 599px) { .karuzela__sterowanie { position: static; transform: none; justify-content: center; gap: var(--s-3); margin-top: var(--s-2); } }
.karuzela__strzalka { pointer-events: auto; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; cursor: pointer; background: var(--biel); border: 1px solid var(--linia); color: var(--granat); border-radius: var(--promien); box-shadow: 0 8px 20px -12px rgb(20 35 57 / 0.5); }
.karuzela__strzalka span { width: 9px; height: 9px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateX(2px) rotate(45deg); }
.karuzela__strzalka--dalej span { transform: translateX(-2px) rotate(-135deg); }
.karuzela__strzalka:hover { background: var(--granat); border-color: var(--granat); color: var(--biel); }
.obszar {
	display: flex; flex-direction: column; height: 100%; padding: 34px 30px 30px;
	background: var(--kamien); border: 1px solid var(--linia); border-top: 3px solid var(--granat);
	box-shadow: 0 14px 30px -22px rgb(20 35 57 / 0.45), 0 2px 6px -2px rgb(20 35 57 / 0.08);
	color: var(--tekst); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease;
}
/* Tło kafla zawsze inne niż tło sekcji (prośba użytkownika 2026-11-03). */
.wariant--mgla .obszar { background: var(--biel); }
a.obszar:hover { border-top-color: var(--blekit); box-shadow: 0 20px 40px -24px rgb(20 35 57 / 0.55), 0 2px 6px -2px rgb(20 35 57 / 0.1); color: var(--tekst); }
.obszar__ikona { width: 40px; height: 40px; color: var(--blekit); margin-bottom: var(--s-6); }
.obszar__nazwa { font-size: 1.35rem; margin-bottom: var(--s-3); }
.obszar__przyklady { margin: 0 0 var(--s-6); }
.obszar__wiecej { margin-top: auto; display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; color: var(--blekit); }
.obszar__wiecej .ikona { transition: transform .2s ease; }
a.obszar:hover .obszar__wiecej .ikona { transform: translateX(4px); }

/* ═══ DZIEDZINA (strona Oferta) ═══ */
.dziedzina__tytul { display: flex; align-items: center; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--linia); margin-bottom: var(--s-8); }
.dziedzina__ikona { width: 44px; height: 44px; color: var(--blekit); }
.dziedzina { display: grid; gap: var(--s-8); }
.dziedzina__opis { margin-bottom: var(--s-8); }
.dziedzina__opis p { max-width: 75ch; }
.dziedzina__opis > :last-child { margin-bottom: 0; }
.dziedzina__wstep { font-weight: 600; color: var(--granat); margin-bottom: var(--s-3); }
.lista-kreski { list-style: none; margin: 0; padding: 0; }
.lista-kreski li { position: relative; padding: var(--s-2) 0 var(--s-2) 28px; border-bottom: 1px dashed var(--linia); }
.lista-kreski li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 14px; height: 1px; background: var(--mosiadz); }
@media (min-width: 760px) { .lista-kreski--kolumny { columns: 2; column-gap: var(--s-12); } .lista-kreski--kolumny li { break-inside: avoid; } }
/* Dziedzina ze zdjęciem (2026-11-03): dwie połowy, zdjęcie wypełnia całą swoją kolumnę aż do krawędzi ekranu,
   kolejne dziedziny na zmianę z prawej i z lewej. Telefon: zdjęcie nad tekstem. */
.dziedzina-pol { padding-block: 0; display: grid; }
.dziedzina-pol__obraz { margin: 0; position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.dziedzina-pol__obraz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dziedzina-pol__tekst { padding: var(--rytm-sekcji) var(--margines-boczny); min-width: 0; }
@media (min-width: 960px) {
	.dziedzina-pol { --krawedz: var(--margines-boczny); grid-template-columns: 1fr 1fr; }
	.dziedzina-pol__obraz { grid-column: 2; grid-row: 1; aspect-ratio: auto; min-height: 460px; }
	.dziedzina-pol__tekst { grid-column: 1; grid-row: 1; padding-inline: var(--krawedz) clamp(2.5rem, 5vw, 4.5rem); }
	.dziedzina-pol--zdjecie-lewo .dziedzina-pol__obraz { grid-column: 1; }
	.dziedzina-pol--zdjecie-lewo .dziedzina-pol__tekst { grid-column: 2; padding-inline: clamp(2.5rem, 5vw, 4.5rem) var(--krawedz); }
	.dziedzina-pol .lista-kreski--kolumny { columns: 1; }
}
@media (min-width: 1280px) { .dziedzina-pol .lista-kreski--kolumny { columns: 2; column-gap: var(--s-8); } }

/* ═══ ZESPÓŁ - sylwetki prawników ═══ */
.prawnicy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3rem); }
@media (max-width: 820px) { .prawnicy { grid-template-columns: 1fr; } }
.osoba { background: var(--biel); border: 1px solid var(--linia); padding: clamp(1.75rem, 3vw, 2.5rem); }
.osoba__gora { display: flex; gap: 22px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--linia); }
.monogram, .osoba__portret { width: 88px; height: 88px; flex: none; border-radius: 50%; }
.monogram {
	display: grid; place-items: center; background: var(--granat); color: var(--biel);
	font: 400 1.9rem/1 var(--font-display); letter-spacing: 0.04em;
	box-shadow: inset 0 0 0 4px var(--granat), inset 0 0 0 5px var(--mosiadz);
}
.osoba__portret { object-fit: cover; }
.osoba__rola { font: 600 var(--t-xs)/1.3 var(--font-tekst); letter-spacing: 0.16em; text-transform: uppercase; color: var(--blekit); margin: 0 0 6px; }
.osoba__imie { font-size: 1.45rem; margin: 0; }
.osoba__skrot, .osoba__opis { margin: var(--s-6) 0 0; }
.sciezka { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.sciezka li { display: grid; grid-template-columns: 8em 1fr; gap: 14px; padding: 10px 0; border-top: 1px dashed var(--linia); }
.sciezka b { font: 700 1rem var(--font-serif); color: var(--granat); }

/* ═══ CTA - ciemny pas z telefonami ═══ */
.sekcja--cta { position: relative; overflow: hidden; background: var(--granat); color: var(--na-granacie); text-align: center; }
.cta__zdjecie { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 60%; opacity: 0.22; }
.cta { position: relative; }
.sekcja--cta .etykieta { justify-content: center; color: var(--blekit-jasny); }
.sekcja--cta .etykieta::after { content: ""; width: 36px; height: 1px; background: var(--mosiadz); flex: none; }
.cta__tytul { color: var(--biel); }
.cta__lead { font-size: 1.18rem; max-width: 46em; margin: var(--s-4) auto 0; }
.cta__lead a { color: var(--biel); }
.telefony { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; margin: var(--s-12) 0 0; padding: 0; border-block: 1px solid rgb(255 255 255 / 0.2); }
.telefony li + li { border-left: 1px solid rgb(255 255 255 / 0.2); }
.telefon { display: block; padding: 26px 20px; color: var(--biel); text-decoration: none; }
.telefon:hover { color: var(--biel); }
.telefon__opis { display: block; font-size: 0.92rem; color: var(--blekit-jasny); }
.telefon__numer { display: block; margin-top: 6px; font: 400 clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem)/1.3 var(--font-display); letter-spacing: 0.02em; color: var(--biel); }
.telefon:hover .telefon__numer { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
@media (max-width: 760px) { .telefony li + li { border-left: 0; border-top: 1px solid rgb(255 255 255 / 0.2); } }

/* ═══ FAQ (sekcje i wpisy) ═══ */
/* Pełna szerokość (2026-11-03); miara wiersza tylko na odpowiedziach. */
.sekcja--faq .faq p { max-width: 80ch; }
.sekcja--faq h2 { text-align: center; }
.sekcja--faq .etykieta { justify-content: center; }
.sekcja--faq .etykieta::after { content: ""; width: 36px; height: 1px; background: var(--mosiadz); flex: none; }
.faq { border-top: 1px solid var(--linia); }
.faq__pozycja { border-bottom: 1px solid var(--linia); }
.faq__pytanie { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); padding: 22px 0; }
.faq__pytanie::-webkit-details-marker { display: none; }
.faq__pytanie h3 { font: 700 1.15rem/1.4 var(--font-serif); margin: 0; }
.faq__pytanie::after {
	content: ""; flex: none; width: 24px; height: 24px; margin-top: 2px; border: 1px solid var(--blekit); border-radius: 50%;
	background: linear-gradient(var(--blekit), var(--blekit)) center / 10px 1.5px no-repeat, linear-gradient(var(--blekit), var(--blekit)) center / 1.5px 10px no-repeat;
}
.faq__pozycja[open] > .faq__pytanie::after { background: linear-gradient(var(--blekit), var(--blekit)) center / 10px 1.5px no-repeat; }
.faq__odpowiedz { padding-bottom: var(--s-6); }
.faq__odpowiedz > :last-child { margin-bottom: 0; }

/* ═══ KONTAKT (salon) ═══ */
.salon { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
.salon--z-mapa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch; }
@media (max-width: 860px) { .salon--z-mapa { grid-template-columns: 1fr; } }
.salon__dane { display: grid; gap: var(--s-6); align-content: start; }
.blok-kontaktu { background: var(--biel); border-left: 3px solid var(--blekit); padding: 22px 26px; }
.wariant--jasny .blok-kontaktu { background: var(--kamien); }
.blok-kontaktu h3 { font-size: 1.2rem; margin-bottom: var(--s-2); }
.blok-kontaktu p { margin: 0; }
.salon__linki { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.salon__linki li { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; }
.salon__linki .ikona { color: var(--blekit); }
.salon__przyciski { margin: 0; }
.salon__mapa { position: relative; min-height: 360px; background: #DDE3EB; }
.salon__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.salon__zaslona { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-3); padding: var(--s-6); text-align: center; }
.salon__mapa-info { margin: 0; font-size: var(--t-s); color: var(--tekst-slaby); }

/* ═══ KARTY WPISÓW (lista porad, sekcja „wpisy”, „Przeczytaj też”) ═══ */
.siatka-kart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
@media (min-width: 1600px) { .siatka-kart { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Sekcje „Najnowsze porady” i „Przeczytaj też” mają 4 karty: pełny rząd przy 4 i 2 kolumnach; przy 3 kolumnach
   czwarta zostałaby sama w rzędzie - chowamy ją (2026-11-03). */
@media (min-width: 961px) and (max-width: 1599px) { .sekcja--wpisy .siatka-kart > :nth-child(4):last-child { display: none; } }
@media (max-width: 960px) { .siatka-kart { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .siatka-kart { grid-template-columns: 1fr; } }
/* Kafelki z białym tłem i lekkim cieniem (prośba użytkownika 2026-11-03); lista porad stoi na jasnoszarym tle. */
.karta { background: var(--biel); border: 1px solid var(--linia); box-shadow: 0 14px 30px -22px rgb(20 35 57 / 0.45), 0 2px 6px -2px rgb(20 35 57 / 0.08); transition: box-shadow .2s ease; }
.karta:hover { box-shadow: 0 20px 40px -24px rgb(20 35 57 / 0.55), 0 2px 6px -2px rgb(20 35 57 / 0.1); }
.karta__link { display: block; height: 100%; color: var(--tekst); text-decoration: none; }
.karta__obraz { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.karta__tresc { padding: var(--s-6) var(--s-6) var(--s-8); }
.karta__data { display: block; font-size: var(--t-s); color: var(--tekst-slaby); margin-bottom: var(--s-2); }
.karta__tytul { font: 700 1.22rem/1.3 var(--font-serif); color: var(--granat); margin: 0; }
.karta__link:hover .karta__tytul { color: var(--blekit); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.karta__zajawka { margin: var(--s-3) 0 0; font-size: var(--t-s); color: var(--tekst-slaby); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Paginacja listy porad */
.navigation.pagination { margin-top: var(--s-12); }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--linia); color: var(--granat); text-decoration: none; }
.nav-links .page-numbers.current { background: var(--granat); border-color: var(--granat); color: var(--biel); }
.nav-links a.page-numbers:hover { border-color: var(--blekit); color: var(--blekit); }

/* ═══ WPIS ═══ */
.wpis__naglowek { background: var(--kamien); padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(5rem, 9vw, 7rem); }
.wpis__naglowek h1 { max-width: 920px; }
.wpis__data { display: block; font-size: var(--t-s); color: var(--tekst-slaby); margin-bottom: var(--s-3); }
.wpis__zajawka { font-size: var(--t-l); max-width: 920px; margin: 0; }
/* Obraz w kolumnie treści, najeżdża na dół nagłówka: cofnięty o odstęp sekcji + zakładkę na nagłówek. */
.wpis__obraz { position: relative; z-index: 1; margin: calc(-1 * (var(--rytm-sekcji) + clamp(3.5rem, 7vw, 5rem))) 0 var(--s-12); }
.wpis__obraz img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: var(--cien); }
.uklad-z-panelem { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); padding-block: var(--rytm-sekcji); align-items: start; }
@media (max-width: 960px) { .uklad-z-panelem { grid-template-columns: 1fr; } }
.uklad-z-panelem__panel { position: sticky; top: calc(var(--wys-naglowka) + var(--s-6)); }
@media (max-width: 960px) { .uklad-z-panelem__panel { position: static; } }
.tresc--wpis { font-size: 1.125rem; }
.tresc--wpis h2:first-child { margin-top: 0; }
.spis-tresci { background: var(--kamien); border-left: 3px solid var(--mosiadz); padding: var(--s-6) var(--s-8); margin-bottom: var(--s-12); }
.spis-tresci__tytul { font: 700 1.1rem/1.3 var(--font-serif); color: var(--granat); margin-bottom: var(--s-3); }
.spis-tresci ol { margin: 0; padding-left: 1.3em; }
.spis-tresci li + li { margin-top: var(--s-2); }
.wpis__zrodla, .wpis__faq { margin-top: var(--s-16); }
.wpis__faq h2, .wpis__zrodla h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.karta-info { background: var(--granat); color: var(--na-granacie); padding: var(--s-8) var(--s-6); border-top: 3px solid var(--mosiadz); }
.karta-info__ikona { width: 34px; height: 34px; color: var(--blekit-jasny); margin-bottom: var(--s-4); }
.karta-info__tytul { font: 400 1.5rem/1.2 var(--font-display); color: var(--biel); margin-bottom: var(--s-3); }
.karta-info p { font-size: var(--t-s); }
.karta-info__telefony { list-style: none; margin: var(--s-6) 0; padding: 0; display: grid; gap: var(--s-3); }
.karta-info__telefony span { display: block; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blekit-jasny); }
.karta-info__telefony a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font: 400 1.35rem/1.2 var(--font-display); color: var(--biel); text-decoration: none; }
.karta-info__telefony a:hover { text-decoration: underline; }
.karta-info .przycisk { width: 100%; background: var(--biel); border-color: var(--biel); color: var(--granat); }
.karta-info .przycisk:hover { background: #E8EDF5; }

/* ═══ 404 i strony bez sekcji ═══ */
.sekcja--404 { text-align: center; }
.sekcja--lista h1 { margin-bottom: var(--s-8); }

/* ═══ ZAKŁADKA FACEBOOKA - przypięta do lewej krawędzi, na każdej stronie (2026-11-03) ═══ */
.fb-zakladka {
	position: fixed; left: 0; top: 50%; z-index: 40; transform: translateY(-50%);
	display: grid; place-items: center; width: 48px; height: 48px;
	background: var(--granat); color: var(--biel); border-radius: 0 var(--promien) var(--promien) 0;
	box-shadow: 0 8px 22px -10px rgb(20 35 57 / 0.6); transition: width .2s ease, background-color .2s ease;
}
.fb-zakladka .ikona { width: 24px; height: 24px; }
.fb-zakladka:hover, .fb-zakladka:focus-visible { width: 56px; background: var(--blekit); color: var(--biel); }