/*
Theme Name: SomaCare
Theme URI: https://somacare.pl
Author: SomaCare
Description: Autorski motyw SomaCare oparty na identyfikacji "Zielnik". Bez page buildera, bez zależności zewnętrznych.
Version: 16.7.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: somacare
*/

/* ==================================================================
   UWAGA: kolory, fonty i odstępy NIE są tu zapisane.
   Siedzą w tokeny.css i wchodzą tutaj jako zmienne var(--sc-...).
   Chcesz zmienić kolor? Zmieniasz w tokeny.css — zmieni się wszędzie.
   ================================================================== */


/* ------------------------------------------------------------------
   PALETA EKRANU — wprost z sygnetu

   Te sześć wartości to dosłownie kolory wyciągnięte z pliku logo.
   Nic nie jest dobrane "na oko" — każdy odcień występuje w znaku.

   tokeny.css opisuje markę w druku (stonowany Zielnik, wizytówki,
   ulotki). Tutaj marka wraca do własnych, oryginalnych barw.
------------------------------------------------------------------ */
:root {
	/* Pięć specjalizacji — kolory z sygnetu */
	--sc-osteopatia:     #00AB8E;   /* morska zieleń */
	--sc-fizjoterapia:   #1B8996;   /* morski z logotypu */
	--sc-dietetyka:      #FF9036;   /* pomarańcz */
	--sc-neurologopedia: #8F169B;   /* fiolet */
	--sc-psychoterapia:  #C62293;   /* magenta */
	--sc-rezerwa:        #321279;   /* granat */

	/* Wersje DO TEKSTU. Morski i pomarańcz na bieli dają 2–3:1,
	   czyli poniżej progu czytelności — litery biorą wariant
	   przyciemniony, kreski i wypełnienia zostają przy pełnym. */
	--sc-osteopatia-tekst:     #046354;
	--sc-fizjoterapia-tekst:   #12606A;
	--sc-dietetyka-tekst:      #9E5A0C;
	--sc-neurologopedia-tekst: #8F169B;
	--sc-psychoterapia-tekst:  #9E1A75;
	--sc-rezerwa-tekst:        #321279;

	/* Kolory wiodące */
	--sc-szalwia:        #00AB8E;
	--sc-ochra:          #FF9036;

	/* Kolory akcji. Morska ze znaku ma na bieli 2,9:1 — za mało pod
	   biały tekst — więc przycisk bierze wariant o dwa tony ciemniejszy,
	   pozostając w tej samej rodzinie. */
	--sc-akcja:          #00806B;
	--sc-akcja-mocna:    #03705E;
	--sc-atrament:       #241E3A;   /* granat z sygnetu, przyciemniony do tekstu */

	--sc-linia:          #E7E5EC;
	--sc-linia-mocna:    #CBC8D6;

	/* Tła */
	--tlo-blatu:         #FFFFFF;
	--tlo-panelu:        #FFFFFF;
	--tlo-wyrozniona:    #F5F4F8;

	--cien-panelu:       0 1px 2px rgba(36,30,58,.05), 0 12px 32px -18px rgba(36,30,58,.24);

	--ziarno-krycie:     0;
	--rama-krycie:       0;

	--desen-zeberka:
		repeating-linear-gradient(to bottom,
			transparent 0, rgba(36,30,58,.030) 1px, transparent 2px, transparent 3px);
	--desen-liniatura:
		repeating-linear-gradient(to bottom,
			transparent 0 29px, rgba(36,30,58,.055) 29px 30px);
	--desen-brak:        none;
	--desen-arkusza:     var(--desen-brak);
}

/* ------------------------------------------------------------------
   PODSTAWY
------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--tlo-blatu);
	color: var(--sc-atrament);
	font-family: var(--sc-font-tekst);
	font-size: var(--sc-t-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Ziarno papieru. Szum generowany przez przeglądarkę (feTurbulence),
   nie plik graficzny — zero pobierania, zero powtarzalnego kafla.
   Leży NAD tłem, POD treścią, i nie łapie kliknięć. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: var(--ziarno-krycie);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23z)'/%3E%3C/svg%3E");
}
.sc-naglowek, .sc-tresc, .sc-stopka { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--sc-atrament); text-decoration-color: var(--sc-linia-mocna); text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3 {
	font-family: var(--sc-font-naglowek);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 var(--sc-odstep-2);
	text-wrap: balance;
}

p { margin: 0 0 var(--sc-odstep-2); }

/* Widoczny obrys przy nawigacji klawiaturą. Nie usuwaj. */
:focus-visible {
	outline: 2px solid var(--sc-ochra);
	outline-offset: 3px;
}

/* Tekst tylko dla czytników ekranu. */
.sc-tylko-czytnik {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

.sc-pomin-do-tresci {
	position: absolute; left: -9999px;
	background: var(--sc-atrament); color: var(--sc-papier-jasny);
	padding: .6rem 1rem; z-index: 100;
}
.sc-pomin-do-tresci:focus { left: var(--sc-odstep-2); top: var(--sc-odstep-2); }


/* ------------------------------------------------------------------
   UKŁAD
------------------------------------------------------------------ */
.sc-kontener {
	width: min(100% - 2.5rem, 1140px);
	margin-inline: auto;
}
.sc-kontener--waski { width: min(100% - 2.5rem, 720px); }

.sc-sekcja { padding-block: var(--sc-odstep-3); }

/* Przyklejony nagłówek zasłaniałby początek sekcji przy skoku z kotwicy. */
[id] { scroll-margin-top: 92px; }

/* PANEL — arkusz papieru położony na blacie.
   Rogi prawie ostre (--sc-promien = 2px), bo tak mówi identyfikacja.
   Wrażenie "zawieszenia" robi cień i światło dookoła, nie zaokrąglenie. */
.sc-panel {
	position: relative;
	background: var(--tlo-panelu);
	border: 1px solid var(--sc-linia);
	border-radius: var(--sc-promien);
	box-shadow: var(--cien-panelu);
	padding: var(--sc-odstep-5) var(--sc-odstep-4);

	background-image: var(--desen-arkusza);
}

/* Wewnętrzna linijka — razem z ramką panelu daje podwójną kreskę.
   Konwencja z etykiety aptecznej i arkusza zielnikowego.
   Nie łapie kliknięć i nie wchodzi w treść. */
.sc-panel::before {
	content: "";
	position: absolute;
	inset: 11px;
	border: 1px solid var(--sc-linia);
	border-radius: var(--sc-promien);
	opacity: var(--rama-krycie);
	pointer-events: none;
}



.sc-sekcja__naglowek { margin-bottom: var(--sc-odstep-4); }
.sc-sekcja__tytul { font-size: var(--sc-t-h2); margin-top: var(--sc-odstep-2); }

.sc-srodek { text-align: center; }
.sc-srodek .sc-sekcja__naglowek { display: flex; flex-direction: column; align-items: center; }

.sc-tekst-luzny { font-size: 1.0625rem; max-width: 62ch; }
.sc-tekst-luzny--waski { max-width: 52ch; }

.sc-notka {
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-maly);
	color: color-mix(in srgb, var(--sc-atrament) 60%, transparent);
}


/* ------------------------------------------------------------------
   NAGŁÓWEK
------------------------------------------------------------------ */
.sc-naglowek {
	background: var(--tlo-blatu);
	border-bottom: 1px solid var(--sc-linia);
	position: sticky; top: 0; z-index: 50;
}

/* Belka ma dwa stany: rozwinięty na górze strony i zwinięty po przewinięciu.
   Klasę sc-naglowek--zwiniety dokłada skrypt w footer.php. */
.sc-naglowek__srodek {
	display: flex; align-items: center; gap: var(--sc-odstep-3);
	min-height: 124px;
	transition: min-height .22s ease;
}
.sc-naglowek--zwiniety .sc-naglowek__srodek { min-height: 76px; }

.sc-naglowek__logo { margin-right: auto; display: block; }
.sc-naglowek__logo img {
	width: 232px; height: auto;
	transition: width .22s ease;
}
.sc-naglowek--zwiniety .sc-naglowek__logo img { width: 168px; }

/* Po przewinięciu belka odcina się od blatu delikatnym cieniem. */
.sc-naglowek--zwiniety { box-shadow: 0 1px 12px -6px rgba(44,58,49,.35); }

.sc-nawigacja { display: flex; align-items: center; gap: var(--sc-odstep-3); }

.sc-nawigacja__lista {
	display: flex; align-items: center; gap: var(--sc-odstep-3);
	list-style: none; margin: 0; padding: 0;
}
.sc-nawigacja__lista a {
	text-decoration: none;
	font-size: var(--sc-t-maly);
	font-weight: 600;
	padding-block: .35rem;
	border-bottom: 2px solid transparent;
}
.sc-nawigacja__lista a:hover,
.sc-nawigacja__lista .current-menu-item > a { border-bottom-color: var(--sc-szalwia); }

/* --- Lista rozwijana ze specjalizacjami --- */
.sc-nawigacja__lista li { position: relative; }

.sc-nawigacja__lista .sub-menu {
	list-style: none;
	margin: 0;
	padding: var(--sc-odstep-1) 0;
	position: absolute;
	top: 100%; left: -1rem;
	min-width: 220px;
	background: #FFFFFF;
	border: 1px solid var(--sc-linia);
	border-radius: var(--sc-promien);
	box-shadow: var(--cien-panelu);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.sc-nawigacja__lista li:hover > .sub-menu,
.sc-nawigacja__lista li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.sc-nawigacja__lista .sub-menu a {
	display: block;
	padding: .5rem 1rem;
	border-bottom: 0;
	font-weight: 500;
}
.sc-nawigacja__lista .sub-menu a:hover { background: var(--tlo-wyrozniona); }

/* Znacznik rozwijania — kreska, nie znak z fontu. */
.sc-nawigacja__lista .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .38em; height: .38em;
	margin-left: .45em;
	border-bottom: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.sc-naglowek__akcje { display: flex; gap: var(--sc-odstep-1); }

/* Strzałki rozwijania podmenu dokłada skrypt niezależnie od szerokości
   ekranu, bo przy zmianie rozmiaru okna nie da się ich sensownie tworzyć
   i usuwać. Na szerokim ekranie podmenu otwiera się najechaniem, więc
   strzałka jest tu zbędna — i bez tej reguły zostawała surowym
   przyciskiem przeglądarki obok pozycji menu. */
.sc-rozwin { display: none; }

.sc-menu-przycisk {
	display: none;
	background: none; border: 1px solid var(--sc-linia-mocna);
	border-radius: var(--sc-promien);
	width: 42px; height: 38px; cursor: pointer;
	align-items: center; justify-content: center;
}
.sc-menu-przycisk__kreski,
.sc-menu-przycisk__kreski::before,
.sc-menu-przycisk__kreski::after {
	display: block; width: 18px; height: 1.5px;
	background: var(--sc-atrament); position: relative;
}
.sc-menu-przycisk__kreski::before { content: ""; position: absolute; top: -6px; }
.sc-menu-przycisk__kreski::after  { content: ""; position: absolute; top: 6px; }


/* ------------------------------------------------------------------
   HERO
------------------------------------------------------------------ */
.sc-hero { padding-block: var(--sc-odstep-5) var(--sc-odstep-4); }

.sc-hero__srodek {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: var(--sc-odstep-5);
	align-items: center;
}

.sc-hero__tytul {
	font-size: var(--sc-t-hero);
	margin-top: var(--sc-odstep-3);
	margin-bottom: var(--sc-odstep-3);
}

.sc-hero__lead { font-size: 1.125rem; max-width: 46ch; }
.sc-hero__dopisek {
	font-size: var(--sc-t-maly);
	max-width: 48ch;
	color: color-mix(in srgb, var(--sc-atrament) 68%, transparent);
	padding-top: var(--sc-odstep-2);
	border-top: 1px solid var(--sc-linia);
	margin-top: var(--sc-odstep-3);
}

.sc-hero__akcje {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: var(--sc-odstep-3);
	margin-top: var(--sc-odstep-3);
}

.sc-hero__zaslepka {
	aspect-ratio: 4 / 5;
	background: var(--tlo-wyrozniona);
	border: 1px dashed var(--sc-linia-mocna);
	border-radius: var(--sc-promien);
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: var(--sc-odstep-2);
	text-align: center;
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-maly);
	color: color-mix(in srgb, var(--sc-atrament) 55%, transparent);
}


/* ------------------------------------------------------------------
   KARTY SPECJALIZACJI
   Kolor karty przychodzi ze zmiennej --karta-kolor ustawianej w HTML.
------------------------------------------------------------------ */
.sc-siatka-kart {
	display: grid;
	/* auto-FILL, nie auto-FIT: puste kolumny zostają puste zamiast
	   rozciągać istniejące. Dzięki temu dwie karty w dietetyce mają
	   tę samą szerokość co cztery w osteopatii. */
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: var(--sc-odstep-2);
}

.sc-karta {
	display: flex; flex-direction: column;
	/* Karta bierze 4% swojego koloru — tyle, żeby pięć dziedzin
	   dało się rozróżnić kątem oka, i nie więcej. */
	background: color-mix(in srgb, var(--karta-kolor, var(--sc-szalwia)) 4%, #FFFFFF);
	border: 1px solid var(--sc-linia);
	border-top: 3px solid var(--karta-kolor, var(--sc-szalwia));
	border-radius: var(--sc-promien);
	padding: var(--sc-odstep-3);
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}
.sc-karta:hover {
	border-color: var(--karta-kolor, var(--sc-szalwia));
	transform: translateY(-2px);
}

/* Numer katalogowy — konwencja z arkusza zielnikowego i szuflady aptecznej. */
.sc-karta__numer {
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-etyk);
	letter-spacing: .11em;
	color: color-mix(in srgb, var(--sc-atrament) 45%, transparent);
	display: block;
	margin-bottom: var(--sc-odstep-2);
	padding-bottom: var(--sc-odstep-1);
	border-bottom: 1px solid var(--sc-linia);
}

.sc-karta__tytul {
	font-size: var(--sc-t-h3);
	color: var(--karta-kolor, var(--sc-atrament));
	margin-bottom: var(--sc-odstep-1);
}
.sc-karta__opis { font-size: var(--sc-t-maly); margin-bottom: var(--sc-odstep-3); }

.sc-karta__wiecej {
	margin-top: auto;
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-etyk);
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--karta-kolor, var(--sc-atrament));
}
.sc-karta__wiecej::after { content: " →"; }

.sc-karta--pytanie { background: transparent; border-style: dashed; }

/* Karta bez odnośnika — nie unosi się przy najechaniu. */
.sc-karta--statyczna { transform: none; cursor: default; }
.sc-karta--statyczna:hover { transform: none; border-color: var(--sc-linia); }
.sc-karta--statyczna .sc-ikona { margin-bottom: var(--sc-odstep-2); }
.sc-karta--statyczna a { color: var(--karta-kolor-tekst, var(--sc-atrament)); }


/* ------------------------------------------------------------------
   KARTA OSOBY (na liście zespołu)
------------------------------------------------------------------ */
.sc-karta--osoba { padding-top: 0; overflow: hidden; }

.sc-karta__portret {
	margin: 0 calc(var(--sc-odstep-3) * -1) var(--sc-odstep-3);
	aspect-ratio: 4 / 5;
	background: var(--tlo-wyrozniona);
	overflow: hidden;
}
.sc-karta__portret img {
	width: 100%; height: 100%; object-fit: cover;
	/* Portrety z różnych sesji rzadko mają zgodny balans bieli.
	   Delikatne odbarwienie sprowadza je do wspólnego tonu. */
	filter: saturate(.92);
}
.sc-karta__portret--pusty { border-bottom: 1px solid var(--sc-linia); }

.sc-karta__rola {
	font-size: var(--sc-t-maly);
	color: color-mix(in srgb, var(--sc-atrament) 70%, transparent);
	margin-bottom: var(--sc-odstep-2);
}
.sc-karta--osoba .sc-karta__numer { text-transform: uppercase; }


/* ------------------------------------------------------------------
   PROFIL TERAPEUTY
------------------------------------------------------------------ */
.sc-profil {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: var(--sc-odstep-5);
	align-items: start;
}

.sc-profil__portret { position: sticky; top: 104px; }
.sc-profil__portret img {
	width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
	border-radius: var(--sc-promien);
	filter: saturate(.92);
}

.sc-profil__brak-zdjecia {
	aspect-ratio: 4 / 5;
	border: 1px dashed var(--sc-linia-mocna);
	border-radius: var(--sc-promien);
	display: grid; place-items: center;
	text-align: center;
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-maly);
	color: color-mix(in srgb, var(--sc-atrament) 50%, transparent);
}

.sc-profil__imie { font-size: var(--sc-t-h2); margin-top: var(--sc-odstep-2); margin-bottom: var(--sc-odstep-1); }

.sc-profil__rola {
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-maly);
	color: var(--karta-kolor, var(--sc-szalwia));
	padding-bottom: var(--sc-odstep-3);
	border-bottom: 1px solid var(--sc-linia);
	margin-bottom: var(--sc-odstep-3);
}

/* Listy wskazań w opisie — to jest to, czego rodzic szuka w Google. */
.sc-profil .sc-artykul__tresc ul { list-style: none; padding-left: 0; }
.sc-profil .sc-artykul__tresc li {
	position: relative; padding-left: 1.1rem; font-size: var(--sc-t-maly);
}
.sc-profil .sc-artykul__tresc li::before {
	content: ""; position: absolute; left: 0; top: .62em;
	width: 5px; height: 5px; border-radius: 50%;
	border: 1px solid var(--karta-kolor, var(--sc-szalwia));
}

.sc-profil__akcje {
	display: flex; align-items: center; flex-wrap: wrap; gap: var(--sc-odstep-3);
	margin-top: var(--sc-odstep-4);
	padding-top: var(--sc-odstep-3);
	border-top: 1px solid var(--sc-linia);
}

@media (max-width: 860px) {
	.sc-profil { grid-template-columns: 1fr; gap: var(--sc-odstep-3); }
	.sc-profil__portret { position: static; max-width: 260px; }
}


/* ------------------------------------------------------------------
   KROKI PIERWSZEJ WIZYTY
------------------------------------------------------------------ */
.sc-kroki {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sc-odstep-4);
	list-style: none; margin: 0; padding: 0;
	counter-reset: none;
}

.sc-krok { border-top: 1px solid var(--sc-linia-mocna); padding-top: var(--sc-odstep-2); }

.sc-krok__numer {
	display: block;
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-etyk);
	letter-spacing: .11em;
	color: var(--sc-szalwia);
	margin-bottom: var(--sc-odstep-2);
}
.sc-krok__tytul { font-size: var(--sc-t-h3); }
.sc-krok p { font-size: var(--sc-t-maly); margin-bottom: 0; }


/* ------------------------------------------------------------------
   DWIE KOLUMNY / NEWSLETTER
------------------------------------------------------------------ */
.sc-dwie-kolumny {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sc-odstep-5);
	align-items: start;
}

.sc-newsletter {
	background: var(--tlo-wyrozniona);
	border: 1px solid var(--sc-linia);
	border-radius: var(--sc-promien);
	padding: var(--sc-odstep-4);
}
.sc-newsletter__tytul { font-size: var(--sc-t-h3); }


/* ------------------------------------------------------------------
   FAQ
------------------------------------------------------------------ */
.sc-pytanie { border-bottom: 1px solid var(--sc-linia); }

.sc-pytanie summary {
	cursor: pointer;
	list-style: none;
	padding-block: var(--sc-odstep-3);
	font-family: var(--sc-font-naglowek);
	font-size: 1.0625rem;
	display: flex; justify-content: space-between; align-items: center; gap: var(--sc-odstep-2);
}
.sc-pytanie summary::-webkit-details-marker { display: none; }
.sc-pytanie summary::after {
	content: "+";
	font-family: var(--sc-font-etykieta);
	color: var(--sc-szalwia);
	flex: none;
}
.sc-pytanie[open] summary::after { content: "–"; }
.sc-pytanie p { font-size: var(--sc-t-maly); padding-bottom: var(--sc-odstep-3); max-width: 62ch; }


/* ------------------------------------------------------------------
   PODPIS AUTORA POD WPISEM

   Kompaktowy pasek, nie kolumna. Miniatura po lewej, treść po prawej,
   przycisk w tej samej linii co nazwisko. Poprzednia wersja ciągnęła
   się w dół i rozbijała koniec artykułu.
------------------------------------------------------------------ */
.sc-podpis-autora {
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-etyk);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--sc-atrament) 55%, transparent);
	margin-top: var(--sc-odstep-4);
	margin-bottom: var(--sc-odstep-2);
}
.sc-podpis-autora strong { font-weight: 500; color: var(--sc-atrament); }


/* ------------------------------------------------------------------
   KAFELEK WPISU I FILTRY
------------------------------------------------------------------ */
.sc-karta--wpis { padding-top: 0; overflow: hidden; }

/* Wyzerowana górna wyściółka istnieje po to, żeby zdjęcie dotykało
   krawędzi kafla. Gdy zdjęcia nie ma, wyściółkę trzeba oddać — inaczej
   etykieta dziedziny przykleja się do kolorowej kreski. */
.sc-karta--wpis:not(:has(.sc-karta__obraz)) { padding-top: var(--sc-odstep-3); }

.sc-karta__obraz {
	margin: 0 calc(var(--sc-odstep-3) * -1) var(--sc-odstep-3);
	aspect-ratio: 16 / 9;
	background: var(--tlo-wyrozniona);
	overflow: hidden;
}
.sc-karta__obraz img,
.sc-karta__obraz .sc-zaslepka {
	width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto;
	border-radius: 0;
}

.sc-wpis__obraz {
	margin: var(--sc-odstep-3) 0 var(--sc-odstep-4);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--sc-promien);
	background: var(--tlo-wyrozniona);
}
.sc-wpis__obraz img,
.sc-wpis__obraz .sc-zaslepka {
	width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 0;
}

.sc-filtry {
	display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
	margin-bottom: var(--sc-odstep-2);
}
.sc-filtry:last-of-type {
	margin-bottom: var(--sc-odstep-4);
	padding-bottom: var(--sc-odstep-3);
	border-bottom: 1px solid var(--sc-linia);
}
.sc-filtry__nazwa {
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-etyk);
	letter-spacing: .11em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--sc-atrament) 45%, transparent);
	min-width: 5.5rem;
}
.sc-filtr {
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-etyk);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: .4rem .85rem;
	border: 1px solid var(--sc-linia-mocna);
	border-radius: var(--sc-promien);
	color: var(--sc-atrament);
}
.sc-filtr:hover { border-color: var(--karta-kolor, var(--sc-akcja)); }

/* Formularz Contact Form 7 — nadpisujemy jego domyślne style. */
.sc-formularz input[type="text"],
.sc-formularz input[type="email"],
.sc-formularz input[type="tel"],
.sc-formularz textarea {
	width: 100%;
	padding: .8rem 1rem;
	border: 1px solid var(--sc-linia-mocna);
	border-radius: var(--sc-promien);
	font-family: var(--sc-font-tekst);
	font-size: var(--sc-t-maly);
	background: #FFFFFF;
	color: var(--sc-atrament);
	margin-bottom: var(--sc-odstep-2);
}
.sc-formularz textarea { min-height: 150px; resize: vertical; }
.sc-formularz input:focus, .sc-formularz textarea:focus {
	outline: none; border-color: var(--sc-akcja);
}
.sc-formularz label {
	display: block;
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-etyk);
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: .35rem;
	color: color-mix(in srgb, var(--sc-atrament) 70%, transparent);
}
/* Zgoda i przycisk w tym samym rytmie co pola. */
.sc-formularz .wpcf7-acceptance {
	display: block;
	margin-bottom: var(--sc-odstep-2);
}
.sc-formularz .wpcf7-list-item { margin: 0; }
.sc-formularz .wpcf7-acceptance .wpcf7-list-item-label {
	font-size: var(--sc-t-maly);
	font-family: var(--sc-font-tekst);
	text-transform: none;
	letter-spacing: 0;
	color: var(--sc-atrament);
	line-height: 1.5;
}
.sc-formularz .wpcf7-acceptance input[type="checkbox"] {
	margin-right: .5rem;
	accent-color: var(--sc-akcja);
}
.sc-formularz p { margin: 0; }

.sc-formularz .wpcf7-submit {
	background: var(--sc-akcja); color: #FFFFFF;
	border: 1px solid var(--sc-akcja);
	padding: .85rem 1.6rem; border-radius: var(--sc-promien);
	font-family: var(--sc-font-tekst); font-weight: 600;
	font-size: var(--sc-t-maly); cursor: pointer;
	transition: background .16s ease, color .16s ease;
}
.sc-formularz .wpcf7-submit:hover { background: var(--sc-ochra); color: var(--sc-atrament); border-color: var(--sc-ochra); }


/* Newsletter wpleciony w artykuł */
.sc-zapis-inline {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sc-odstep-4);
	align-items: center;
	margin-top: var(--sc-odstep-5);
	padding: var(--sc-odstep-4);
	background: var(--tlo-wyrozniona);
	border-radius: var(--sc-promien);
}
.sc-zapis-inline__tytul { font-size: var(--sc-t-h3); margin-bottom: .5rem; }
.sc-zapis-inline p { font-size: var(--sc-t-maly); margin: 0; }
.sc-zapis-inline .sc-zapis input {
	border-color: var(--sc-linia-mocna);
	background: #FFFFFF;
	color: var(--sc-atrament);
}
.sc-zapis-inline .sc-zapis input::placeholder { color: color-mix(in srgb, var(--sc-atrament) 45%, transparent); }

@media (max-width: 620px) {
	.sc-zapis-inline { grid-template-columns: 1fr; }
	.sc-filtry__nazwa { min-width: 100%; }
}
.sc-filtr--aktywny { background: var(--sc-atrament); color: #FFFFFF; border-color: var(--sc-atrament); }


/* ------------------------------------------------------------------
   ŚCIEŻKI WIEKOWE — kafelki na stronie głównej
------------------------------------------------------------------ */
.sc-wiek {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--sc-odstep-2);
}
.sc-wiek__kafel {
	display: flex; flex-direction: column; align-items: center; gap: .2rem;
	text-align: center;
	padding: var(--sc-odstep-3) var(--sc-odstep-2);
	background: var(--tlo-wyrozniona);
	border: 1px solid var(--sc-linia);
	border-radius: var(--sc-promien);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}
.sc-wiek__kafel:hover { border-color: var(--sc-akcja); background: #FFFFFF; }
/* Ikony wieku są większe od pozostałych, więc dostają cieńszą kreskę —
   przy tej skali domyślna grubość wyglądałaby ciężko. */
.sc-wiek__kafel .sc-ikona {
	margin-bottom: var(--sc-odstep-2);
	stroke-width: 1.15;
	color: var(--sc-akcja);
}
.sc-wiek__kafel:hover .sc-ikona { color: var(--sc-akcja-mocna); }
.sc-wiek__nazwa { font-family: var(--sc-font-naglowek); font-size: 1.0625rem; line-height: 1.25; }
.sc-wiek__zakres {
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-etyk);
	letter-spacing: .06em;
	color: color-mix(in srgb, var(--sc-atrament) 55%, transparent);
}


/* ------------------------------------------------------------------
   KARUZELA TERAPEUTÓW
------------------------------------------------------------------ */
.sc-karuzela.sc-karuzela--osoby { grid-auto-columns: min(62%, 210px); }
@media (min-width: 900px) { .sc-karuzela.sc-karuzela--osoby { grid-auto-columns: calc((100% - var(--sc-odstep-2) * 2) / 3); } }
.sc-karuzela.sc-karuzela--osoby { gap: var(--sc-odstep-2); }
@media (max-width: 620px) { .sc-karuzela.sc-karuzela--osoby { grid-auto-columns: 64%; } }

.sc-mini {
	scroll-snap-align: start;
	text-decoration: none;
	display: flex; flex-direction: column;
}
.sc-mini__portret {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--sc-promien);
	background: var(--tlo-wyrozniona);
	margin-bottom: var(--sc-odstep-2);
	border-bottom: 3px solid var(--karta-kolor, var(--sc-akcja));
}
.sc-mini__portret img,
.sc-mini__portret .sc-zaslepka {
	width: 100%; height: 100%; object-fit: cover;
	aspect-ratio: auto; border-radius: 0; filter: saturate(.92);
}
.sc-mini { min-width: 0; }
.sc-mini__spec {
	font-family: var(--sc-font-etykieta);
	font-size: .625rem;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--karta-kolor-tekst, var(--sc-atrament));
	overflow-wrap: anywhere;
}
.sc-mini__imie {
	font-size: .9375rem;
	line-height: 1.25;
	margin: .2rem 0 .1rem;
	overflow-wrap: anywhere;
}
.sc-mini__rola {
	font-size: var(--sc-t-etyk);
	font-family: var(--sc-font-etykieta);
	color: color-mix(in srgb, var(--sc-atrament) 60%, transparent);
	margin: 0;
}


/* ------------------------------------------------------------------
   ZESPÓŁ NA STRONIE GŁÓWNEJ — tekst z lewej, trzy osoby z prawej
------------------------------------------------------------------ */
.sc-zespol {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: var(--sc-odstep-5);
	align-items: center;
}
.sc-zespol__tekst .sc-sekcja__tytul { margin-top: var(--sc-odstep-2); }
.sc-zespol__osoby { min-width: 0; }

.sc-karuzela__sterowanie--pod {
	justify-content: flex-end;
	margin-top: var(--sc-odstep-2);
}

@media (max-width: 860px) {
	.sc-zespol { grid-template-columns: 1fr; gap: var(--sc-odstep-4); }
}


/* ------------------------------------------------------------------
   KONTAKT W SKRÓCIE — ostatni blok strony głównej
------------------------------------------------------------------ */
.sc-kontakt-krotki {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: var(--sc-odstep-5);
	align-items: center;
}
.sc-kontakt-krotki__dane {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--sc-odstep-3);
	margin-block: var(--sc-odstep-3);
}
.sc-kontakt-krotki__dane p { font-size: var(--sc-t-maly); margin: 0; }
.sc-kontakt-krotki__dane .sc-ikona { margin-bottom: .4rem; }
.sc-kontakt-krotki__akcje { display: flex; gap: var(--sc-odstep-2); flex-wrap: wrap; }
.sc-kontakt-krotki .sc-mapa { margin: 0; }
.sc-kontakt-krotki .sc-mapa iframe { height: 340px; }

/* Bez mapy blok nie ma drugiej kolumny — inaczej zostaje pusta połowa. */
.sc-kontakt-krotki:not(:has(.sc-mapa)) { grid-template-columns: 1fr; }

@media (max-width: 860px) {
	.sc-kontakt-krotki { grid-template-columns: 1fr; }
	.sc-kontakt-krotki .sc-mapa iframe { height: 260px; }
}


/* ------------------------------------------------------------------
   OPINIE I KARUZELA

   Karuzela to zwykłe przewijanie w poziomie z zatrzymywaniem na
   kartach (scroll-snap). Palcem i gładzikiem działa bez JavaScriptu;
   strzałki tylko dokładają wygody przy myszy.
------------------------------------------------------------------ */
/* Ramka karuzeli. Strzałki leżą NA torze, po bokach, na wysokości
   środka kart — tam, gdzie ręka ich szuka. */
.sc-ramka { position: relative; }

/* Strzałka: sama kreska, bez koła i bez cienia. Okrągły biały guzik
   z cieniem wygląda jak wtręt z gotowego szablonu — tu wszystko inne
   stoi na cienkich liniach i kątach prostych.
   --strzalka-y ustala wysokość: przy zdjęciach celujemy w środek
   kadru, a nie w środek całej karty. */
.sc-ramka { --strzalka-y: 44%; }
/* Przy portretach celujemy w środek zdjęcia, nie karty. */
.sc-ramka--osoby { --strzalka-y: 34%; }

.sc-strzalka {
	position: absolute;
	top: var(--strzalka-y);
	transform: translateY(-50%);
	z-index: 2;
	width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	border: 0;
	background: color-mix(in srgb, #FFFFFF 88%, transparent);
	backdrop-filter: blur(2px);
	color: var(--sc-atrament);
	cursor: pointer;
	font-size: 0;
	transition: color .15s ease, opacity .15s ease, transform .15s ease;
}

/* Grot rysowany z dwóch krawędzi — nie znak z fontu. */
.sc-strzalka::before {
	content: "";
	width: 9px; height: 9px;
	border-top: 1.4px solid currentColor;
	border-right: 1.4px solid currentColor;
}
.sc-strzalka--lewo::before  { transform: rotate(-135deg); margin-left: 3px; }
.sc-strzalka--prawo::before { transform: rotate(45deg);  margin-right: 3px; }

.sc-strzalka--lewo  { left: calc(var(--sc-odstep-3) * -1); }
.sc-strzalka--prawo { right: calc(var(--sc-odstep-3) * -1); }

.sc-strzalka:hover { color: var(--sc-akcja); }
.sc-strzalka--lewo:hover  { transform: translateY(-50%) translateX(-2px); }
.sc-strzalka--prawo:hover { transform: translateY(-50%) translateX(2px); }

/* Na krańcu toru strzałka nic nie robi — wygaszamy ją zamiast chować,
   żeby układ nie skakał. */
.sc-strzalka--nieczynna { opacity: .28; pointer-events: none; }

@media (max-width: 1240px) {
	.sc-strzalka--lewo  { left: -.4rem; }
	.sc-strzalka--prawo { right: -.4rem; }
}

.sc-oceny {
	display: flex; flex-wrap: wrap; gap: var(--sc-odstep-5);
	justify-content: center;
	padding-block: var(--sc-odstep-4);
	margin-bottom: var(--sc-odstep-3);
	border-top: 1px solid var(--sc-linia);
	border-bottom: 1px solid var(--sc-linia);
}
.sc-ocena { display: flex; align-items: center; gap: var(--sc-odstep-2); }
.sc-ocena__liczba {
	font-family: var(--sc-font-naglowek);
	font-size: 2.75rem; line-height: 1;
	color: var(--sc-akcja-mocna);
}
.sc-ocena__opis { font-size: var(--sc-t-maly); line-height: 1.45; }

.sc-karuzela {
	display: grid;
	grid-auto-flow: column;
	/* STAŁA szerokość kolumny, nie minmax(0, …).
	   minmax z dolną granicą 0 pozwala przeglądarce ścisnąć wszystkie
	   karty tak, żeby zmieściły się w kadrze — i wtedy zamiast karuzeli
	   dostajemy dziewięć wąskich pasków. */
	grid-auto-columns: min(84%, 330px);
	gap: var(--sc-odstep-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: var(--sc-odstep-1);
	align-items: stretch;

	/* Pasek przewijania chowamy — nawigacja idzie strzałkami,
	   a palcem i gładzikiem tor przewija się tak czy inaczej. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.sc-karuzela::-webkit-scrollbar { display: none; }
@media (min-width: 900px)  { .sc-karuzela { grid-auto-columns: calc((100% - var(--sc-odstep-3) * 2) / 3); } }
@media (max-width: 620px)  { .sc-karuzela { grid-auto-columns: 86%; } }
@media (min-width: 621px) and (max-width: 899px) {
	.sc-karuzela { grid-auto-columns: calc((100% - var(--sc-odstep-3)) / 2); }
	.sc-karuzela.sc-karuzela--osoby { grid-auto-columns: calc((100% - var(--sc-odstep-2)) / 2); }
}

.sc-cytat {
	position: relative;
	scroll-snap-align: start;
	margin: 0;
	padding: calc(var(--sc-odstep-4) + .4rem) var(--sc-odstep-3) var(--sc-odstep-3);
	background: var(--tlo-wyrozniona);
	border-left: 2px solid var(--karta-kolor, var(--sc-akcja));
	border-radius: 0 var(--sc-promien) var(--sc-promien) 0;
	display: flex; flex-direction: column;
}

/* Cudzysłów jako znak graficzny, nie jako litera w tekście. */
/* Cudzysłów. Znak ma duży wyskok nad linię pisma, więc zamiast liczyć
   na line-height ustawiamy go na stałą wysokość i przesuwamy w dół
   o wartość dobraną tak, żeby mieścił się w padding-top karty. */
.sc-cytat::before {
	content: "\201C";
	position: absolute;
	top: var(--sc-odstep-2); left: var(--sc-odstep-3);
	height: 1.6rem; overflow: hidden;
	display: block;
	font-family: var(--sc-font-naglowek);
	font-size: 3.2rem; line-height: 1.05;
	color: var(--karta-kolor, var(--sc-akcja));
	opacity: .22;
	pointer-events: none;
}

.sc-cytat blockquote {
	margin: 0 0 var(--sc-odstep-3);
	border: 0; padding: 0;
	font-family: var(--sc-font-tekst);
	font-style: italic;
	font-size: .9375rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--sc-atrament) 88%, transparent);
	flex: 1;
}

/* Zwinięty cytat ma stałe cztery wiersze — dzięki temu wszystkie karty
   mają tę samą wysokość i karuzela nie zamienia się w kolumnę tekstu. */
.sc-cytat__tresc summary blockquote {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: var(--sc-odstep-2);
}
.sc-cytat:not(:has(.sc-cytat__tresc)) > blockquote {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Ocena nad cytatem */
/* Gwiazdki w przygaszonym bursztynie — mają potwierdzać, nie krzyczeć. */
/* Gwiazdki biorą kolor dziedziny, nie bursztyn. Dzięki temu należą
   do systemu strony, a nie wyglądają jak wtręt z portalu z ocenami. */
.sc-cytat__ocena {
	color: var(--karta-kolor-tekst, var(--sc-akcja-mocna));
	margin-bottom: var(--sc-odstep-2);
	opacity: .75;
}
.sc-gwiazdki { display: inline-flex; gap: 1px; vertical-align: -2px; }

/* Zwijanie długich opinii — natywny <details>, bez skryptu */
.sc-cytat__tresc { flex: 1; }
.sc-cytat__tresc summary { list-style: none; cursor: pointer; }
.sc-cytat__tresc summary::-webkit-details-marker { display: none; }
.sc-cytat__wiecej {
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-etyk);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--karta-kolor-tekst, var(--sc-atrament));
	border-bottom: 1px solid currentColor;
}
.sc-cytat__tresc[open] summary { display: none; }
.sc-cytat__pelny { margin-bottom: var(--sc-odstep-3); }
.sc-cytat figcaption {
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-etyk);
	letter-spacing: .06em;
	line-height: 1.7;
	display: flex; flex-direction: column;
}
.sc-cytat__autor { color: var(--sc-atrament); font-weight: 500; }
.sc-cytat__osoba a { color: var(--karta-kolor-tekst, var(--sc-atrament)); }
.sc-cytat__zrodlo { color: color-mix(in srgb, var(--sc-atrament) 55%, transparent); }


/* ------------------------------------------------------------------
   CENNIK
------------------------------------------------------------------ */
.sc-cennik table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--sc-odstep-4);
}
.sc-cennik th {
	text-align: left;
	font-weight: 400;
	font-size: var(--sc-t-maly);
	padding: .7rem 0;
	border-bottom: 1px solid var(--sc-linia);
}
.sc-cennik td {
	text-align: right;
	white-space: nowrap;
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-maly);
	padding: .7rem 0 .7rem 1rem;
	border-bottom: 1px solid var(--sc-linia);
}
.sc-cennik h2 { border-top: 2px solid var(--sc-akcja); padding-top: var(--sc-odstep-2); }


/* ------------------------------------------------------------------
   NEWSLETTER W STOPCE
------------------------------------------------------------------ */
.sc-newsletter-stopka {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sc-odstep-4);
	align-items: center;
	padding-block: var(--sc-odstep-4);
	border-top: 1px solid rgba(244, 242, 247, .15);
}
.sc-newsletter-stopka p { font-size: var(--sc-t-maly); margin: 0; }

.sc-zapis { display: flex; gap: .5rem; }
.sc-zapis input {
	flex: 1;
	padding: .85rem 1rem;
	border: 1px solid rgba(244, 242, 247, .3);
	border-radius: var(--sc-promien);
	background: transparent;
	color: var(--tlo-wyrozniona);
	font-family: var(--sc-font-tekst);
	font-size: var(--sc-t-maly);
}
.sc-zapis input::placeholder { color: rgba(244, 242, 247, .45); }
.sc-zapis input:focus { border-color: var(--sc-osteopatia); outline: none; }

@media (max-width: 860px) {
	.sc-newsletter-stopka { grid-template-columns: 1fr; }
	.sc-zapis { flex-direction: column; }
}


/* ------------------------------------------------------------------
   OKRUSZKI (ścieżka nawigacji) — generuje je Rank Math
------------------------------------------------------------------ */
.sc-okruszki {
	padding-top: var(--sc-odstep-3);
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-etyk);
	letter-spacing: .06em;
	color: color-mix(in srgb, var(--sc-atrament) 55%, transparent);
}
.sc-okruszki a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--sc-linia); }
.sc-okruszki a:hover { color: var(--sc-atrament); border-bottom-color: var(--sc-linia-mocna); }
.sc-okruszki .separator { padding-inline: .45em; opacity: .6; }
.sc-okruszki .last { color: var(--sc-atrament); }


/* ------------------------------------------------------------------
   RAMKA "UWAGA" — zakres, ograniczenia, czego u nas nie ma.
   Ma być widoczna, ale nie alarmująca: to informacja, nie ostrzeżenie.
------------------------------------------------------------------ */
.sc-uwaga {
	border-left: 3px solid var(--karta-kolor, var(--sc-szalwia));
	background: var(--tlo-wyrozniona);
	padding: var(--sc-odstep-3);
	margin: var(--sc-odstep-4) 0;
	border-radius: 0 var(--sc-promien) var(--sc-promien) 0;
}
.sc-uwaga p { font-size: var(--sc-t-maly); margin: 0; }
.sc-uwaga a { text-decoration-color: var(--sc-linia-mocna); }


.sc-podpis-autora {
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-maly);
	color: color-mix(in srgb, var(--sc-atrament) 65%, transparent);
	margin-top: var(--sc-odstep-4);
}
.sc-podpis-autora strong { font-weight: 500; color: var(--sc-atrament); }

/* Kafelek autora jako zamknięty panel. Sama kreska u góry nie
   trzymała przycisku w środku — przy krótkim opisie wyglądał,
   jakby wypadał z sekcji. Delikatna ramka domyka całość. */
.sc-autor {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: var(--sc-odstep-3);
	align-items: start;
	margin-top: var(--sc-odstep-5);
	padding: var(--sc-odstep-3);
	background: var(--tlo-wyrozniona);
	border: 1px solid var(--sc-linia);
	border-top: 2px solid var(--karta-kolor, var(--sc-szalwia));
	border-radius: var(--sc-promien);
}

.sc-autor__portret img,
.sc-autor__portret .sc-zaslepka {
	width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
	border-radius: var(--sc-promien);
	filter: saturate(.92);
}
.sc-autor__portret a { display: block; }

.sc-autor__tekst { min-width: 0; }
.sc-autor__imie { font-size: var(--sc-t-h3); margin: var(--sc-odstep-2) 0 var(--sc-odstep-1); }
.sc-autor__imie a { text-decoration: none; border-bottom: 1px solid var(--sc-linia-mocna); }

.sc-autor__rola {
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-maly);
	color: var(--karta-kolor, var(--sc-szalwia));
	margin-bottom: var(--sc-odstep-2);
}
.sc-autor__notka { font-size: var(--sc-t-maly); max-width: 56ch; }

/* Przycisk kończy kolumnę z tekstem — obok zdjęcia, pod opisem.
   Odstęp jest oddzielony kreską, żeby było widać, że to zamknięcie
   kafelka, a nie kolejny akapit. */
.sc-autor__akcja {
	margin: var(--sc-odstep-3) 0 0;
	padding-top: var(--sc-odstep-3);
	border-top: 1px solid var(--sc-linia-mocna);
}

@media (max-width: 560px) {
	.sc-autor { grid-template-columns: 1fr; }
	.sc-autor__portret { max-width: 190px; }
	.sc-autor__akcja .sc-przycisk { display: block; text-align: center; }
}


/* ------------------------------------------------------------------
   IKONY
------------------------------------------------------------------ */
.sc-ikona {
	display: block;
	color: var(--sc-akcja);
	margin-bottom: var(--sc-odstep-2);
}
.sc-srodek .sc-ikona { margin-inline: auto; }


/* ------------------------------------------------------------------
   KONTAKT
------------------------------------------------------------------ */
.sc-kontakt-siatka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sc-odstep-4);
	margin-top: var(--sc-odstep-4);
	padding-top: var(--sc-odstep-4);
	border-top: 1px solid var(--sc-linia);
}

.sc-kontakt-blok {
	padding-top: var(--sc-odstep-2);
	border-top: 2px solid var(--sc-akcja);
}
.sc-kontakt-blok__tytul {
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-etyk);
	letter-spacing: .11em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--sc-szalwia);
	margin-bottom: var(--sc-odstep-2);
}

.sc-kontakt-duzy { font-family: var(--sc-font-naglowek); font-size: 1.375rem; }
.sc-kontakt-duzy a { text-decoration: none; border-bottom: 1px solid var(--sc-linia-mocna); }

.sc-godziny { border-collapse: collapse; font-size: var(--sc-t-maly); width: 100%; }
.sc-godziny th {
	text-align: left; font-weight: 400;
	padding: .3rem 0; border-bottom: 1px solid var(--sc-linia);
}
.sc-godziny td {
	text-align: right; font-family: var(--sc-font-etykieta);
	padding: .3rem 0; border-bottom: 1px solid var(--sc-linia);
}

.sc-mapa {
	border: 1px solid var(--sc-linia);
	border-radius: var(--sc-promien);
	overflow: hidden;
	margin-bottom: var(--sc-odstep-2);
}
.sc-mapa iframe { width: 100%; height: 420px; border: 0; display: block; }
@media (max-width: 620px) { .sc-mapa iframe { height: 300px; } }


/* ------------------------------------------------------------------
   DROBIAZGI
------------------------------------------------------------------ */
.sc-link-strzalka {
	font-size: var(--sc-t-maly);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--sc-linia-mocna);
	padding-bottom: 2px;
}
.sc-link-strzalka::after { content: " →"; }

.sc-widget-miejsce {
	margin-top: var(--sc-odstep-3);
	border: 1px dashed var(--sc-linia-mocna);
	border-radius: var(--sc-promien);
	padding: var(--sc-odstep-4);
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-maly);
	text-align: left;
}
.sc-widget-miejsce p:last-child { margin-bottom: 0; }


/* ------------------------------------------------------------------
   TREŚĆ PODSTRON I WPISÓW
------------------------------------------------------------------ */
.sc-artykul { padding-block: var(--sc-odstep-5); }
.sc-artykul__tytul { font-size: var(--sc-t-h2); }
.sc-artykul__tresc h2 { font-size: var(--sc-t-h3); margin-top: var(--sc-odstep-4); }
.sc-artykul__tresc h3 { font-size: 1.0625rem; margin-top: var(--sc-odstep-3); }
.sc-artykul__tresc ul, .sc-artykul__tresc ol { padding-left: 1.25rem; margin-bottom: var(--sc-odstep-2); }
.sc-artykul__tresc li { margin-bottom: .4rem; }
.sc-artykul__tresc blockquote {
	margin: var(--sc-odstep-3) 0;
	padding-left: var(--sc-odstep-3);
	border-left: 2px solid var(--sc-szalwia);
	font-family: var(--sc-font-naglowek);
}


/* ------------------------------------------------------------------
   STOPKA — ciemna, spokojna, bez ozdobników
------------------------------------------------------------------ */
.sc-stopka {
	background: var(--sc-atrament);
	color: var(--tlo-wyrozniona);
	padding-top: var(--sc-odstep-5);
	margin-top: var(--sc-odstep-5);
}

/* Bez podkreśleń — w stopce linków jest dużo i kreski robią szum. */
.sc-stopka a {
	color: var(--tlo-wyrozniona);
	text-decoration: none;
}
.sc-stopka a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: .2em; }

/* Logo w osobnym wierszu nad kolumnami — przy pięciu blokach
   w jednym rzędzie ostatni zawijał się do nowej linii. */
.sc-stopka__marka {
	padding-bottom: var(--sc-odstep-4);
	margin-bottom: var(--sc-odstep-4);
	border-bottom: 1px solid rgba(244, 242, 247, .15);
}

.sc-stopka__siatka {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sc-odstep-4);
	padding-bottom: var(--sc-odstep-4);
	align-items: start;
}

.sc-stopka__znak { width: 210px; height: auto; }

.sc-stopka__tytul {
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-etyk);
	letter-spacing: .11em;
	text-transform: uppercase;
	font-weight: 500;
	color: rgba(244, 242, 247, .55);
	margin-bottom: var(--sc-odstep-2);
}
.sc-stopka__kolumna p { font-size: var(--sc-t-maly); }

.sc-stopka__lista { list-style: none; margin: 0; padding: 0; font-size: var(--sc-t-maly); }
.sc-stopka__lista li { margin-bottom: .45rem; }

.sc-stopka__dol {
	border-top: 1px solid rgba(244, 242, 247, .15);
	padding-block: var(--sc-odstep-3);
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-etyk);
	letter-spacing: .08em;
	color: rgba(244, 242, 247, .55);
}
.sc-stopka__dol p { margin: 0; }


/* ------------------------------------------------------------------
   TELEFON I TABLET
   Jeden próg. Więcej dołożymy, gdy zobaczymy, gdzie się coś łamie.
------------------------------------------------------------------ */
@media (max-width: 860px) {

	.sc-menu-przycisk { display: flex; }

	/* Na wąskim ekranie belka nie rośnie — nie ma na to miejsca. */
	.sc-naglowek__srodek,
	.sc-naglowek--zwiniety .sc-naglowek__srodek { min-height: 72px; }
	.sc-naglowek__logo img,
	.sc-naglowek--zwiniety .sc-naglowek__logo img { width: 150px; }

	/* Menu mobilne musi się przewijać. Bez ograniczenia wysokości lista
	   wychodzi poza ekran telefonu i dolnych pozycji nie da się dosięgnąć
	   — a to właśnie tam lądował przycisk „Umów wizytę". */
	.sc-nawigacja {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch;
		gap: var(--sc-odstep-2);
		background: var(--tlo-blatu);
		border-bottom: 1px solid var(--sc-linia);
		padding: var(--sc-odstep-3) 1.25rem var(--sc-odstep-4);
		max-height: calc(100dvh - 72px);
		overflow-y: auto;
		overscroll-behavior: contain;
		box-shadow: 0 12px 24px -16px rgba(36, 30, 58, .35);
	}
	.sc-nawigacja--otwarta { display: flex; }

	/* Przy otwartym menu tło stoi — inaczej palec przewija stronę pod spodem. */
	body.sc-menu-otwarte { overflow: hidden; }

	.sc-nawigacja__lista { flex-direction: column; align-items: stretch; gap: 0; }
	.sc-nawigacja__lista li { border-bottom: 1px solid var(--sc-linia); }
	.sc-nawigacja__lista a { display: block; padding-block: .8rem; border-bottom: 0; }

	/* Pozycja z podkategoriami: odnośnik po lewej, strzałka po prawej.
	   Obie rzeczy są klikalne osobno, więc da się wejść i w kategorię,
	   i rozwinąć jej listę. */
	.sc-nawigacja__lista .menu-item-has-children {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}
	.sc-nawigacja__lista .menu-item-has-children > a { grid-column: 1; }

	.sc-rozwin {
		display: grid; place-items: center;
		grid-column: 2;
		width: 44px; height: 44px;      /* pole dotyku, nie sama strzałka */
		background: none; border: 0; padding: 0;
		color: var(--sc-atrament); cursor: pointer;
	}
	.sc-rozwin::before {
		content: "";
		width: 9px; height: 9px;
		border-right: 1.6px solid currentColor;
		border-bottom: 1.6px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform .18s ease;
	}
	.sc-rozwin[aria-expanded="true"]::before { transform: translateY(2px) rotate(225deg); }

	/* Podkategorie domyślnie schowane — rozwijają się dopiero po dotknięciu. */
	.sc-nawigacja__lista .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		border: 0; box-shadow: none; background: transparent;
		padding: 0; min-width: 0;
		grid-column: 1 / -1;
		display: none;
	}
	.sc-pozycja--otwarta > .sub-menu {
		display: block;
		padding: 0 0 var(--sc-odstep-2) 1rem;
	}
	.sc-nawigacja__lista .sub-menu li { border-bottom: 0; }
	.sc-nawigacja__lista .sub-menu a { padding-block: .45rem; font-size: var(--sc-t-maly); }
	.sc-nawigacja__lista .menu-item-has-children > a::after { display: none; }

	/* „Umów wizytę" na samej górze menu i wyróżnione. To najważniejszy
	   przycisk w serwisie — nie ma prawa być ostatnią pozycją listy. */
	.sc-naglowek__akcje {
		order: -1;
		flex-direction: column;
		gap: var(--sc-odstep-1);
		margin: 0 0 var(--sc-odstep-2);
		padding-bottom: var(--sc-odstep-3);
		border-bottom: 1px solid var(--sc-linia-mocna);
	}
	.sc-naglowek__akcje .sc-przycisk {
		text-align: center; justify-content: center;
		padding-block: .85rem;
		font-size: 1rem;
	}

	.sc-hero__srodek,
	.sc-dwie-kolumny { grid-template-columns: 1fr; gap: var(--sc-odstep-4); }

	/* Zdjęcie nagłówka nad tekstem i w proporcji, która mieści się
	   na telefonie. Pionowe 4:5 zajmowało prawie cały ekran i spychało
	   tekst poniżej zagięcia. */
	.sc-hero__obraz { order: -1; display: block; }
	.sc-hero__obraz .sc-obraz,
	.sc-hero__obraz figure { margin: 0; display: block; }
	.sc-hero__obraz img {
		display: block;
		width: 100%; height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: var(--sc-promien);
	}
	.sc-hero__zaslepka { aspect-ratio: 3 / 2; }
	.sc-brak-obrazu { --format: 4 / 3 !important; }

	.sc-stopka__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.sc-stopka__siatka { grid-template-columns: 1fr; }
	.sc-panel { padding: var(--sc-odstep-4) var(--sc-odstep-3); }
}


/* ------------------------------------------------------------------
   PRZYCISKI

   Główny przycisk jest w morskiej zieleni ze znaku — kolorze, który
   niesie markę i czyta się jako zaproszenie, a nie ostrzeżenie.
   Pomarańcz przejmuje stan najechania: akcent pojawia się w reakcji
   na ruch, zamiast krzyczeć z ekranu.
------------------------------------------------------------------ */
.sc-przycisk {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	background: var(--sc-akcja);
	color: #FFFFFF;
	padding: .85rem 1.6rem;
	border-radius: var(--sc-promien);
	font-family: var(--sc-font-tekst);
	font-weight: 600;
	font-size: var(--sc-t-maly);
	letter-spacing: .005em;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid var(--sc-akcja);
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.sc-przycisk:hover {
	background: var(--sc-ochra);
	border-color: var(--sc-ochra);
	color: var(--sc-atrament);
}

/* Strzałka z dwóch kresek — nie znak z fontu, więc wygląda tak samo
   w każdym systemie i nie jest czytana przez czytniki ekranu. */
.sc-przycisk::after {
	content: "";
	width: .55em; height: .55em;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .16s ease;
	flex: none;
}
.sc-przycisk:hover::after { transform: rotate(45deg) translate(2px, -2px); }

.sc-przycisk--obrys {
	background: transparent;
	color: var(--sc-akcja-mocna);
	border: 1px solid var(--sc-linia-mocna);
	font-weight: 500;
}
.sc-przycisk--obrys:hover {
	background: transparent;
	border-color: var(--sc-akcja);
	color: var(--sc-akcja-mocna);
}
.sc-przycisk--obrys::after { content: none; }

/* W stopce przycisk musi odciąć się od granatu. */
.sc-stopka .sc-przycisk { background: var(--sc-osteopatia); border-color: var(--sc-osteopatia); color: var(--sc-atrament); }

:focus-visible { outline-color: var(--sc-akcja); }


/* ------------------------------------------------------------------
   TEKST W KOLORZE SPECJALIZACJI — zawsze wersja przyciemniona
------------------------------------------------------------------ */
.sc-karta__tytul,
.sc-profil__rola,
.sc-autor__rola,
.sc-karta__wiecej { color: var(--karta-kolor-tekst, var(--sc-atrament)); }


/* ------------------------------------------------------------------
   ZDJĘCIA I MIEJSCA NA ZDJĘCIA

   Ramka z podpowiedzią pokazuje się tylko zalogowanemu redaktorowi —
   o tym decyduje PHP. Tutaj tylko jej wygląd.
------------------------------------------------------------------ */
.sc-obraz { margin: 0 0 var(--sc-odstep-4); }
.sc-obraz img {
	display: block; width: 100%; height: auto;
	border-radius: var(--sc-promien);
}
.sc-obraz--pasek img { aspect-ratio: 16 / 9; object-fit: cover; }
.sc-obraz--hero { margin-bottom: 0; }
.sc-obraz--hero img { aspect-ratio: 4 / 5; object-fit: cover; }

.sc-brak-obrazu {
	aspect-ratio: var(--format, 16 / 9);
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: .45rem;
	text-align: center;
	padding: var(--sc-odstep-3);
	margin-bottom: var(--sc-odstep-4);
	background: var(--tlo-wyrozniona);
	border: 1px dashed var(--sc-linia-mocna);
	border-radius: var(--sc-promien);
}
.sc-brak-obrazu__etykieta {
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-etyk);
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--sc-akcja-mocna);
}
.sc-brak-obrazu__opis {
	font-size: var(--sc-t-maly);
	max-width: 52ch;
	color: color-mix(in srgb, var(--sc-atrament) 78%, transparent);
}
.sc-brak-obrazu__notka {
	font-size: var(--sc-t-etyk);
	color: color-mix(in srgb, var(--sc-atrament) 48%, transparent);
	border-top: 1px solid var(--sc-linia-mocna);
	padding-top: .4rem; margin-top: .25rem;
	max-width: 40ch;
}
.sc-brak-obrazu--wpis { margin-bottom: var(--sc-odstep-5); }

/* Ikona wgrana z biblioteki zajmuje miejsce wbudowanej. */
.sc-ikona-wgrana {
	display: block;
	margin-bottom: var(--sc-odstep-2);
	object-fit: contain;
}

/* Prośba o opinię: pięć pełnych gwiazdek, wyraźnie większych
   niż te przy pojedynczych komentarzach. */
.sc-gwiazdki--duze { display: block; margin-bottom: var(--sc-odstep-2); color: var(--sc-ochra); }
.sc-gwiazdki--duze .sc-gwiazdki { gap: 3px; }
.sc-gwiazdki--duze .sc-gwiazdki svg { width: 26px; height: 26px; }


/* ------------------------------------------------------------------
   WŁASNE FORMULARZE — kontakt i zapis do newslettera

   Reguły dla Contact Form 7 wyżej zostają: jeśli ktoś wpisze
   shortcode wtyczki, nadal będzie wyglądał jak nasz.
------------------------------------------------------------------ */

.sc-pole { margin-bottom: var(--sc-odstep-2) !important; }
.sc-pole-para {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sc-odstep-3);
}
@media (max-width: 640px) { .sc-pole-para { grid-template-columns: 1fr; } }

.sc-wymagane { color: var(--sc-psychoterapia-tekst); }

.sc-podpowiedz {
	display: block;
	margin-top: -.35rem;
	font-size: var(--sc-t-etyk);
	line-height: 1.45;
	color: color-mix(in srgb, var(--sc-atrament) 55%, transparent);
}

/* Zgoda czyta się jak zdanie, nie jak etykieta pola. */
.sc-zgoda { margin-bottom: var(--sc-odstep-3) !important; }
.sc-zgoda label {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-family: var(--sc-font-tekst);
	font-size: var(--sc-t-maly);
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.5;
	color: var(--sc-atrament);
	margin-bottom: 0;
}
.sc-zgoda input[type="checkbox"] {
	margin-top: .25rem;
	flex: 0 0 auto;
	accent-color: var(--sc-akcja);
	width: 1.05rem; height: 1.05rem;
}
.sc-zgoda a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Pułapka na boty. Nie display:none — część botów to rozpoznaje.
   Dla człowieka i dla czytnika ekranu pole jest poza zasięgiem. */
.sc-pulapka {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* Komunikat po wysłaniu. */
.sc-komunikat {
	padding: var(--sc-odstep-3);
	margin-bottom: var(--sc-odstep-4);
	border-radius: var(--sc-promien);
	border-left: 3px solid var(--sc-akcja);
	background: var(--tlo-wyrozniona);
	font-size: var(--sc-t-maly);
	line-height: 1.55;
}
.sc-komunikat--blad { border-left-color: var(--sc-psychoterapia-tekst); }
.sc-komunikat:focus { outline: none; }

/* Zapis do newslettera: pole i przycisk w wierszu, zgoda pod nimi. */
.sc-zapis { flex-wrap: wrap; }
.sc-zapis .sc-zgoda { flex: 0 0 100%; margin: .5rem 0 0 !important; }
.sc-zapis .sc-zgoda label { font-size: var(--sc-t-etyk); line-height: 1.45; }
.sc-zapis .sc-pulapka { flex: 0 0 0; }

/* W stopce tło jest ciemne, więc zgoda musi być jasna. */
.sc-newsletter-stopka .sc-zgoda label,
.sc-newsletter-stopka .sc-zgoda a { color: rgba(244, 242, 247, .78); }

/* A w bloku warsztatów i pod artykułem — ciemna na jasnym. */
.sc-zapis-inline .sc-zgoda label,
.sc-newsletter .sc-zgoda label { color: color-mix(in srgb, var(--sc-atrament) 72%, transparent); }


/* Blok zapisu na stronie głównej — jaśniejszy niż stopka,
   bo stoi na białym panelu, a nie na atramencie. */
.sc-zapis-blok { text-align: center; }
.sc-zapis-blok .sc-tekst-luzny { margin-inline: auto; }
.sc-zapis-blok .sc-zapis {
	justify-content: center;
	max-width: 30rem;
	margin: var(--sc-odstep-3) auto 0;
}
.sc-zapis-blok .sc-zapis input {
	border-color: var(--sc-linia-mocna);
	background: #FFFFFF;
	color: var(--sc-atrament);
}
.sc-zapis-blok .sc-zapis input::placeholder { color: color-mix(in srgb, var(--sc-atrament) 45%, transparent); }
.sc-zapis-blok .sc-zgoda label { text-align: left; }

/* Kafelek wieku bez podstrony — widoczny sygnał zamiast cichego odnośnika. */
.sc-wiek__kafel--nieczynny { opacity: .55; cursor: default; }
.sc-wiek__ostrzezenie {
	display: block;
	margin-top: .4rem;
	font-family: var(--sc-font-etykieta);
	font-size: var(--sc-t-etyk);
	color: var(--sc-psychoterapia-tekst);
}


/* Brakująca dana rejestrowa w dokumencie prawnym — ma kłuć w oczy,
   dopóki ktoś jej nie wpisze w ustawieniach. */
.sc-do-uzupelnienia {
	background: #FFF3C4;
	color: #7A5B00;
	padding: .1em .4em;
	border-radius: 3px;
	font-family: var(--sc-font-mono, monospace);
	font-size: .9em;
}

/* Notka pod tekstem dokumentu — data wersji, odesłanie do innego dokumentu. */
.sc-artykul__tresc .sc-notka,
.sc-tresc .sc-notka {
	font-size: var(--sc-t-maly);
	color: color-mix(in srgb, var(--sc-atrament) 62%, transparent);
	background: var(--tlo-wyrozniona);
	border-left: 2px solid var(--sc-linia-mocna);
	padding: var(--sc-odstep-2) var(--sc-odstep-3);
	border-radius: 0 var(--sc-promien) var(--sc-promien) 0;
}


/* Media społecznościowe w stopce — ikony, nie napisy. Stoją na ciemnym
   tle, więc dziedziczą jasny kolor tekstu stopki. */
.sc-social {
	list-style: none;
	display: flex; gap: 1.25rem;
	margin: var(--sc-odstep-3) 0 0; padding: 0;
}
/* Same znaki, bez obwódek — stopka jest zbudowana z tekstu, więc rządek
   kółek czytał się w niej jak doklejony widżet. Pole dotyku powiększamy
   odstępem wewnętrznym, nie ramką: na telefonie 22-pikselowy znak byłby
   nie do trafienia. */
.sc-social a {
	display: block;
	padding: 6px;
	margin: -6px;
	color: rgba(244, 242, 247, .78);
	transition: color .15s;
}
.sc-social a:hover,
.sc-social a:focus-visible { color: var(--sc-szalwia); }
.sc-social svg { display: block; }

/* Dopisek o ZnanyLekarz pod przyciskiem opinii. */
.sc-notka-opinia {
	margin-top: var(--sc-odstep-2);
	font-size: var(--sc-t-maly);
	color: color-mix(in srgb, var(--sc-atrament) 58%, transparent);
}
.sc-notka-opinia a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }