/* =========================================================================
   CDIT RaZem - warstwa wygladu dopisana przy przebudowie 2026-08.
   Kolejnosc sekcji: tokeny -> typografia -> stany interakcji -> naglowek
   -> pasek mobilny -> komponenty tresci -> cennik -> stopka -> druk.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENY
   Marka zostaje niebieska - zmieniamy tylko odcienie stanow, bo dotychczasowe
   nie mialy pokrycia z kolorem tekstu (patrz sekcja 3).
   ------------------------------------------------------------------------- */
/* "html:root" zamiast ":root": Blocksy wypisuje swoje zmienne w znaczniku
   <style> umieszczonym PO naszym arkuszu, wiec przy rownej szczegolowosci
   wygrywalby jego zapis. Dodanie nazwy elementu przechyla szale na nasza strone. */
html:root {
	--cdit-blue: #1890e2;
	--cdit-blue-dark: #0d6ca8;   /* biały tekst = 5.3:1 */
	--cdit-blue-darker: #0a5687;
	--cdit-blue-tint: #eaf4fc;
	--cdit-navy: #072a41;
	--cdit-text: #24313d;        /* na bieli 11.6:1 */
	--cdit-muted: #4d5f6f;       /* na bieli 7.1:1 */
	--cdit-line: #dde5ea;
	--cdit-surface: #f4f7f9;
	--cdit-surface-2: #e8eff5;
	--cdit-accent: #b45309;      /* biały tekst = 5.8:1 */
	--cdit-accent-tint: #fff7ed;
	--cdit-accent-text: #7c2d12;
	--cdit-radius: 14px;
	--cdit-radius-sm: 9px;
	--cdit-cien: 0 1px 2px rgba(7, 42, 65, .06), 0 8px 24px rgba(7, 42, 65, .07);
	--cdit-cien-hover: 0 2px 4px rgba(7, 42, 65, .08), 0 16px 36px rgba(7, 42, 65, .12);
	--cdit-przejscie: 180ms cubic-bezier(.4, 0, .2, 1);

	/* Nadpisania zmiennych Blocksy. Wartosci z lewej strony to spadek po
	   demie motywu ("charity"), ktorego nikt nigdy nie zmienil:
	   brazowy tekst przyciskow #714508 i linki w kolorze #e1e8ed, czyli
	   niemal bieli na bialym tle. */
	--theme-button-text-initial-color: #ffffff;
	--theme-button-text-hover-color: #ffffff;
	--theme-button-background-initial-color: var(--cdit-blue-dark);
	--theme-button-background-hover-color: var(--cdit-blue-darker);
	--theme-text-color: var(--cdit-text);
	--theme-button-border-radius: 10px;
	--theme-button-min-height: 46px;

	/* Aliasy palety dla blokow Stackable.
	   Stackable zapisuje kolory jako var(--paletteColorN, <wartosc zapasowa>),
	   ale Blocksy publikuje je pod nazwa --theme-palette-color-N. Zmienne
	   --paletteColorN nie istnialy nigdzie w serwisie, wiec KAZDY blok
	   odwolujacy sie do palety renderowal sie w kolorze zapasowym zapamietanym
	   przy zapisie - czyli w barwach dema motywu: zolty #ffcd05 na przewijakach
	   i odnosnikach, szarosc #edeff2 na tlach przyciskow. Stad wrazenie, ze
	   czesc elementow "nie pasuje do reszty strony". */
	--paletteColor1: var(--theme-palette-color-1);
	--paletteColor2: var(--theme-palette-color-2);
	--paletteColor3: var(--theme-palette-color-3);
	--paletteColor4: var(--theme-palette-color-4);
	--paletteColor5: var(--theme-palette-color-5);
	--paletteColor6: var(--theme-palette-color-6);
	--paletteColor7: var(--theme-palette-color-7);
	--paletteColor8: var(--theme-palette-color-8);
}

/* -------------------------------------------------------------------------
   2. TYPOGRAFIA
   Krój zostaje bez zmian - poprawiamy wylacznie grubosc, rytm i dlugosc wiersza.
   Naglowki mialy grubosc 400, przez co przy 40 px wygladaly na niedokonczone.
   ------------------------------------------------------------------------- */
body {
	color: var(--cdit-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.ct-block-title {
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.22;
}

/* Kolor naglowkow tylko w tresci. Tytul w naglowku podstrony lezy na ciemnym
   tle i ma byc bialy - globalna regula zamieniłaby go w granat na granacie.

   UWAGA na specyficznosc, nie tylko na zasieg. Ta regula CELOWO zostaje przy
   ".entry-content" bez "article" z przodu, mimo zasady opisanej nizej przy
   akapitach. Powody sa dwa:

   1. Pasek kontaktowy w naglowku strony, przed ktorym chroni "article", nie
      zawiera zadnego h1-h6 - sam sklada sie z akapitu z odnosnikami. Zawezenie
      niczego by tu nie ratowalo.
   2. Naglowki na ciemnym tle (".cdit-hero h1", ".cdit-cta h2",
      ".cdit-sekcja--granat h2") maja specyficznosc 0-1-1 i wygrywaja z ta
      regula wylacznie KOLEJNOSCIA w pliku - stoja nizej. Dopisanie "article"
      podnioslo by ja do 0-1-2 i granat wygralby z bialym: tytul otwierajacy
      i sekcja z wezwaniem robily sie granatowe na granatowym tle. */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.cdit-sekcja h2, .cdit-sekcja h3, .cdit-sekcja h4 {
	color: var(--cdit-navy);
}

h1 { font-size: clamp(2rem, 1.35rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 1.05rem + .85vw, 1.6rem); }
h4 { font-size: clamp(1.12rem, .98rem + .5vw, 1.3rem); }

/* Dlugosc wiersza.
   Blocksy rozciaga tresc na 1290 px, a wiersz dluzszy niz ~85 znakow czyta sie
   zauwazalnie wolniej. Ograniczamy jednak CALA kolumne, a nie pojedyncze akapity:
   przy ograniczaniu samych akapitow uklad "is-layout-constrained" centrowal je
   wzgledem naglowkow, ktore zostawaly przy lewej krawedzi - tekst wygladal, jakby
   uciekal w bok. */
/* Selektor MUSI zaczynac sie od <article>: Blocksy owija w klase
   "entry-content" takze pasek kontaktowy w naglowku strony. Bez tego
   zawezenia pasek dostawal szerokosc 900 px i lamal sie na dwie linie -
   ale tylko na podstronach, bo tylko one maja klase "cdit-strona-tresci".
   Stad naglowek wygladal inaczej na stronie glownej, a inaczej w srodku. */
.cdit-strona-tresci article .entry-content {
	max-width: 900px;
	margin-inline: auto;
}

.cdit-strona-tresci article .entry-content > * {
	max-width: none;
}

/* Akapit otwierajacy - wieksza czcionka porzadkuje wejscie w tekst. */
.cdit-lead {
	font-size: 1.14rem;
	line-height: 1.65;
	color: var(--cdit-text);
}

/* Zawezenie do <article> z tego samego powodu, co przy dlugosci wiersza wyzej.
   Bez niego "line-height" tresci trafia takze w akapit paska kontaktowego
   w naglowku: selektor ".entry-content p" ma specyficznosc 0-2-1 i bije
   0-1-0 z klasy ".cdit-pasek-kontakt", wiec pasek dostawal interlinie 1,7
   zamiast 1,25 i rosl w pionie. */
article .entry-content p { line-height: 1.7; }

article .entry-content ul li,
article .entry-content ol li { margin-bottom: .4em; line-height: 1.65; }

/* -------------------------------------------------------------------------
   3. STANY INTERAKCJI
   Sedno zgloszenia: po najechaniu kursorem czesc elementow znikala.
   Zmierzone przed poprawka (kontrast WCAG, wymagane 4.5:1):
     "Umów wizytę"      5.35 -> 1.24   ciemny tekst na ciemnym granacie
     "Wyślij" (formularz) 2.40 -> 1.16 brazowy tekst na niebieskim
     tytuly wpisow     18.35 -> 1.50   zolty #ffcd05 na bieli
     linki w stopce     3.22 -> 3.22   za jasny szary, zero reakcji
     okruszki           1.00           bialy tekst na bialym tle
   ------------------------------------------------------------------------- */

/* 3a. Przyciski pelne - jeden wzorzec dla motywu, Gutenberga i formularzy. */
.ct-button,
.wp-block-button__link,
.wpforms-submit,
.cdit-przycisk {
	/* Nie #1890e2: biały tekst daje na nim 3.43:1, czyli poniżej progu 4.5:1.
	   Ten sam niebieski o dwa stopnie ciemniejszy daje 5.6:1 i nie zmienia
	   charakteru marki - jasny odcień zostaje na ikonach i tłach sekcji. */
	background-color: var(--cdit-blue-dark);
	color: #fff;
	border-radius: 10px;
	font-weight: 600;
	letter-spacing: .01em;
	padding: .8em 1.6em;
	border: 2px solid transparent;
	box-shadow: 0 2px 6px rgba(13, 108, 168, .22);
	transition: background-color var(--cdit-przejscie), box-shadow var(--cdit-przejscie), transform var(--cdit-przejscie);
}

.ct-button:hover,
.wp-block-button__link:hover,
.wpforms-submit:hover,
.cdit-przycisk:hover,
.ct-button:focus-visible,
.wp-block-button__link:focus-visible,
.wpforms-submit:focus-visible,
.cdit-przycisk:focus-visible {
	background-color: var(--cdit-blue-darker);
	color: #fff;
	box-shadow: var(--cdit-cien-hover);
	transform: translateY(-1px);
}

/* 3b. Przycisk obrysowy (CTA w naglowku). Wczesniej po najechaniu dostawal
       niebieskie tlo, ale tekst zostawal ciemnoszary - 2.95:1. */
.ct-button-ghost,
.cdit-przycisk--obrys {
	border: 2px solid var(--cdit-blue);
	color: var(--cdit-blue-dark);
	background: transparent;
	border-radius: 10px;
	font-weight: 600;
	transition: background-color var(--cdit-przejscie), color var(--cdit-przejscie), border-color var(--cdit-przejscie);
}

.cdit-przycisk--obrys .wp-block-button__link {
	background: transparent;
	color: var(--cdit-blue-dark);
	border: 2px solid var(--cdit-blue-dark);
	box-shadow: none;
}

.cdit-przycisk--obrys .wp-block-button__link:hover,
.cdit-przycisk--obrys .wp-block-button__link:focus-visible {
	background: var(--cdit-blue-dark);
	color: #fff;
	border-color: var(--cdit-blue-dark);
}

.cdit-cta .cdit-przycisk--obrys .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, .75);
}

.cdit-cta .cdit-przycisk--obrys .wp-block-button__link:hover,
.cdit-cta .cdit-przycisk--obrys .wp-block-button__link:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--cdit-navy);
}

.ct-button-ghost:hover,
.ct-button-ghost:focus-visible,
.cdit-przycisk--obrys:hover,
.cdit-przycisk--obrys:focus-visible {
	background-color: var(--cdit-blue-dark);
	border-color: var(--cdit-blue-dark);
	color: #fff;
}

/* 3c. Bloki Stackable: tytuly wpisow na stronie glownej po najechaniu robily sie
       zolte (#ffcd05 na bieli = 1.5:1) - to kolor z dema motywu, nie z marki. */
.stk-block-posts__title a,
.stk-block-posts__title a:hover,
.stk-block-posts__title a:focus-visible {
	text-decoration: none;
	transition: color var(--cdit-przejscie);
}

.stk-block-posts__title a:hover,
.stk-block-posts__title a:focus-visible {
	color: var(--cdit-blue-dark) !important;
	text-decoration: underline;
	text-underline-offset: .16em;
}

/* 3d. Odnosniki w tresci - musza byc rozpoznawalne bez najezdzania kursorem.

       Regula celuje w PROZE (akapity, listy, tabele), a nie w kazdy odnosnik
       wewnatrz tresci. Wczesniej lapala takze tytuly kafelkow uslug, nazwy
       pozycji w cenniku i kafelki powiazanych uslug - elementy, ktore maja
       wlasny wyglad i po zlapaniu tej reguly robily sie niebieskie
       i podkreslone jak zwykly odnosnik w zdaniu.

       Selektor zaczyna sie od <article>, bo Blocksy owija w klase "entry-content"
       rowniez pasek kontaktowy w naglowku. */
article .entry-content p > a:not(.ct-button):not(.wp-block-button__link):not(.stk-button):not(.cdit-przycisk):not(.cdit-karta-link),
article .entry-content li > a:not(.ct-button):not(.wp-block-button__link):not(.stk-button):not(.cdit-przycisk):not(.cdit-karta-link),
article .entry-content td > a:not(.ct-button):not(.wp-block-button__link):not(.stk-button):not(.cdit-przycisk):not(.cdit-karta-link),
article .entry-content dd > a:not(.ct-button):not(.wp-block-button__link):not(.stk-button):not(.cdit-przycisk):not(.cdit-karta-link) {
	color: var(--cdit-blue-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color var(--cdit-przejscie), text-decoration-color var(--cdit-przejscie);
}

article .entry-content p > a:not(.ct-button):not(.wp-block-button__link):not(.stk-button):not(.cdit-przycisk):not(.cdit-karta-link):hover,
article .entry-content li > a:not(.ct-button):not(.wp-block-button__link):not(.stk-button):not(.cdit-przycisk):not(.cdit-karta-link):hover,
article .entry-content td > a:not(.ct-button):not(.wp-block-button__link):not(.stk-button):not(.cdit-przycisk):not(.cdit-karta-link):hover,
article .entry-content dd > a:not(.ct-button):not(.wp-block-button__link):not(.stk-button):not(.cdit-przycisk):not(.cdit-karta-link):hover {
	color: var(--cdit-blue-darker);
	text-decoration-thickness: 2px;
}

/* 3e. Menu glowne.
       Wczesniej roznica miedzy stanem zwyklym a najechanym wynosila kilka
       procent jasnosci, czyli w praktyce zadnej informacji zwrotnej.
       Teraz: kolor akcentu plus podkreslenie wyrastajace od srodka pozycji.
       Podkreslenie siedzi tuz pod tekstem (a nie przy dolnej krawedzi wysokiego
       wiersza menu), bo inaczej wyglada jak przypadkowa kreska w powietrzu. */
.ct-header [data-id="menu"] > ul > li > a {
	position: relative;
	transition: color var(--cdit-przejscie);
}

.ct-header [data-id="menu"] > ul > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: calc(50% - .95em);
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0;
	transition: left 220ms cubic-bezier(.4, 0, .2, 1), right 220ms cubic-bezier(.4, 0, .2, 1), opacity 140ms linear;
}

.ct-header [data-id="menu"] > ul > li > a:hover,
.ct-header [data-id="menu"] > ul > li > a:focus-visible,
.ct-header [data-id="menu"] > ul > li.current-menu-item > a,
.ct-header [data-id="menu"] > ul > li.current-menu-ancestor > a {
	color: var(--cdit-blue-dark) !important;
}

.ct-header [data-id="menu"] > ul > li > a:hover::after,
.ct-header [data-id="menu"] > ul > li > a:focus-visible::after,
.ct-header [data-id="menu"] > ul > li.current-menu-item > a::after,
.ct-header [data-id="menu"] > ul > li.current-menu-ancestor > a::after {
	left: 0;
	right: 0;
	opacity: 1;
}

/* Strzalka przy pozycji z lista - mniejsza i obracana razem z otwarciem. */
.ct-header [data-id="menu"] > ul > li.menu-item-has-children > a .ct-toggle-dropdown-desktop svg,
.ct-header [data-id="menu"] > ul > li.menu-item-has-children > a > svg {
	width: 9px;
	height: 9px;
	opacity: .55;
	transition: transform 220ms cubic-bezier(.4, 0, .2, 1), opacity var(--cdit-przejscie);
}

.ct-header [data-id="menu"] > ul > li.menu-item-has-children:hover > a .ct-toggle-dropdown-desktop svg,
.ct-header [data-id="menu"] > ul > li.menu-item-has-children:hover > a > svg {
	transform: rotate(180deg);
	opacity: 1;
}

/* --- Lista rozwijana ---------------------------------------------------
   Byla ciemnogranatowym prostokatem o promieniu 2 px, z pozycjami pisanymi
   dwunastopunktowa czcionka i kreskowanymi liniami miedzy nimi - element
   wyraznie z innego porzadku niz reszta serwisu, gdzie wszystko jest bialymi
   kartami z miekkim cieniem. Ujednolicamy: biala karta, wieksze odstepy,
   czytelny stopien pisma i podswietlenie pozycji zamiast linii. */
.ct-header [data-id="menu"] .sub-menu {
	--dropdown-width: 700px;
	--dropdown-divider: none;
	background: var(--cdit-karta, #fff) !important;
	border: 1px solid var(--cdit-line, #dde5ea);
	border-radius: 16px !important;
	box-shadow: 0 4px 10px rgba(7, 42, 65, .05), 0 18px 44px rgba(7, 42, 65, .14) !important;
	padding: .55rem !important;
	overflow: hidden;
	columns: 2;
	column-gap: .35rem;
	column-rule: 1px solid var(--cdit-line);
}

.ct-header [data-id="menu"] .sub-menu > li {
	break-inside: avoid;
	border: 0 !important;
}

.ct-header [data-id="menu"] .sub-menu a {
	display: block;
	padding: .62rem .85rem !important;
	border-radius: 10px;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--cdit-navy) !important;
	border: 0 !important;
	transition: background-color var(--cdit-przejscie), color var(--cdit-przejscie);
}

.ct-header [data-id="menu"] .sub-menu a:hover,
.ct-header [data-id="menu"] .sub-menu a:focus-visible {
	background: var(--cdit-blue-tint);
	color: var(--cdit-blue-dark) !important;
}

.ct-header [data-id="menu"] .sub-menu .current-menu-item > a {
	background: var(--cdit-blue-tint);
	color: var(--cdit-blue-dark) !important;
	font-weight: 600 !important;
}

/* Na waskich ekranach biurkowych (laptopy 1024-1200 px) na menu zostaje
   ok. 236 px, a trzy pozycje przy domyslnych odstepach potrzebuja ~270 px -
   Blocksy chowal wtedy "OFERTA" i "O NAS" pod przyciskiem "Więcej".
   Zamiast oddawac nawigacje pod dodatkowe klikniecie, sciagamy odstepy. */
@media (min-width: 1000px) and (max-width: 1240px) {
	.ct-header [data-id="menu"] > ul > li > a {
		--menu-items-spacing: 8px;
		padding-inline: 8px;
		font-size: 14px;
		letter-spacing: .02em;
	}
}

/* 3e-bis. Mega menu oferty: kolumna dla dzieci i mlodziezy, kolumna dla doroslych.

   Wczesniej byla to plaska lista lamana wlasciwoscia "columns". Po podziale na
   grupy to juz nie wystarcza: lamanie kolumnowe tnie liste w dowolnym miejscu,
   wiec naglowek grupy potrafilby zostac na dole jednej kolumny, a jego uslugi
   przejsc do drugiej. Stad siatka - kazda grupa dostaje wlasna kolumne. */
.ct-header [data-id="menu"] .cdit-mega > .sub-menu {
	--dropdown-width: 640px;
	width: 640px;
	max-width: 92vw;
	columns: auto;
	column-rule: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 .4rem;
	align-items: start;
}

/* Pozycja grupy musi byc zwyklym blokiem: naglowek nad lista, nie obok niej. */
.ct-header [data-id="menu"] .cdit-mega > .sub-menu > li {
	display: block;
	position: static;
	width: auto;
	break-inside: auto;
}

/* Drugi poziom stoi pod naglowkiem swojej grupy, a nie wysuwa sie obok.
   Blocksy pozycjonuje podmenu bezwzglednie i ukrywa je do najechania - tu ma
   byc widoczne od razu, bo caly sens podzialu to pokazac obie listy naraz.
   Lista nadrzedna ma zreszta "overflow: hidden" (przycina rogi), wiec wysuwane
   podmenu i tak zostaloby obciete. */
.ct-header [data-id="menu"] .cdit-mega > .sub-menu > li > .sub-menu {
	position: static !important;
	inset: auto !important;
	display: block;
	width: 100%;
	min-width: 0;
	opacity: 1;
	/* "visibility" i "pointer-events" DZIEDZICZA sie, wiec musza zostac na
	   "inherit", a nie na "visible"/"auto". Blocksy nadaje kazdemu podmenu
	   wlasne "visibility: hidden; pointer-events: none" - trzeba to zdjac,
	   ale wymuszenie widocznosci odslanialoby liste takze wtedy, gdy lista
	   nadrzedna jest zamknieta: niewidoczna (opacity 0), ale nadal lapiaca
	   kursor plachta na pol ekranu, po najechaniu ktorej menu samo sie
	   otwieralo. Przy "inherit" drugi poziom idzie dokladnie za stanem
	   pierwszego. */
	visibility: inherit;
	pointer-events: inherit;
	transform: none;
	columns: auto;
	overflow: visible;
	margin: 0;
	padding: 0 !important;
	border: 0;
	background: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.ct-header [data-id="menu"] .cdit-mega > .sub-menu > li > .sub-menu::before { content: none; }

/* Naglowek grupy to etykieta, a nie kolejna pozycja do klikniecia w liscie -
   ma sie odrozniac stopniem pisma, a nie samym pogrubieniem. Odnosnik zostaje
   (prowadzi do wlasciwej sekcji strony oferty), ale nie udaje pozycji uslugi. */
.ct-header [data-id="menu"] .cdit-mega__grupa > .ct-menu-link {
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
	color: var(--cdit-muted) !important;
	padding: .5rem .85rem .35rem !important;
}

.ct-header [data-id="menu"] .cdit-mega__grupa > .ct-menu-link:hover,
.ct-header [data-id="menu"] .cdit-mega__grupa > .ct-menu-link:focus-visible {
	background: none;
	color: var(--cdit-blue-dark) !important;
}

/* Strzalka rozwijania przy naglowku grupy nie ma juz czego rozwijac. */
.ct-header [data-id="menu"] .cdit-mega__grupa > .ct-menu-link .ct-toggle-dropdown-desktop,
.ct-header [data-id="menu"] .cdit-mega__grupa > .ct-toggle-dropdown-desktop-ghost { display: none; }

/* Kreska miedzy kolumnami: przy siatce "column-rule" nie dziala, wiec granice
   rysuje druga kolumna. */
.ct-header [data-id="menu"] .cdit-mega > .sub-menu > .cdit-mega__grupa + .cdit-mega__grupa {
	border-left: 1px solid var(--cdit-line);
	padding-left: .4rem;
}

/* Na waskim ekranie biurkowym lista schodzi do jednej kolumny (patrz regula
   dla waskich laptopow nizej), wiec granica idzie w poziom. */
@media (max-width: 1099px) {
	.ct-header [data-id="menu"] .cdit-mega > .sub-menu {
		--dropdown-width: 340px;
		grid-template-columns: minmax(0, 1fr);
	}
	.ct-header [data-id="menu"] .cdit-mega > .sub-menu > .cdit-mega__grupa + .cdit-mega__grupa {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid var(--cdit-line);
		margin-top: .4rem;
		padding-top: .3rem;
	}
}

/* Mostek nad odstepem miedzy pozycja menu a lista.

   Miedzy dolna krawedzia pozycji a gora listy jest 25 px przerwy. Kursor,
   przechodzac przez nia w strone listy, opuszcza obszar pozycji - a to on
   trzyma liste otwarta - wiec lista znikala w polowie ruchu.

   Mostek MUSI siedziec na pozycji menu, a nie na samej liscie: lista ma
   "overflow: hidden" (zeby zaokraglone rogi obcinaly tresc), wiec cokolwiek
   wystawalo ponad jej krawedz, bylo przycinane i nie lapalo kursora.

   Pole mostka lapie kursor dopiero wtedy, gdy pozycja jest juz najechana -
   inaczej niewidzialny pasek pod menu przechwytywalby klikniecia w tresc. */
.ct-header [data-id="menu"] > ul > li.menu-item-has-children::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 32px;
	pointer-events: none;
}

.ct-header [data-id="menu"] > ul > li.menu-item-has-children:hover::after,
.ct-header [data-id="menu"] > ul > li.menu-item-has-children:focus-within::after {
	pointer-events: auto;
}

@media (max-width: 1099px) {
	.ct-header [data-id="menu"] .sub-menu {
		--dropdown-width: 330px;
		columns: 1;
		column-rule: none;
	}
}

/* 3f. Widoczny fokus klawiatury. Bez tego strony nie da sie obsluzyc z klawiatury,
       a jest to takze wymog WCAG 2.4.7. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--cdit-blue-dark);
	outline-offset: 2px;
	border-radius: 4px;
}

/* 3g. Okruszki. Dotychczasowa regula w "dodatkowym CSS" wymuszala biel na
       kazdej podstronie typu "page", takze tam, gdzie tlo naglowka jest jasne. */
.ct-breadcrumbs,
.page .ct-breadcrumbs,
.page .ct-breadcrumbs a,
.page .ct-breadcrumbs span,
.page .ct-breadcrumbs .last-item,
.page .ct-breadcrumbs [aria-current="page"] {
	color: rgba(255, 255, 255, .92) !important;
	text-shadow: 0 1px 2px rgba(7, 42, 65, .55);
}

.page .ct-breadcrumbs a:hover {
	color: #fff !important;
	text-decoration: underline;
}

/* Naglowek podstrony bez zdjecia wyrozniajacego dostaje spokojny gradient marki,
   dzieki czemu bialy tytul i okruszki maja na czym stac. */
.page .hero-section[data-type="type-2"] {
	background: linear-gradient(135deg, var(--cdit-navy) 0%, #0d4a6e 55%, var(--cdit-blue-dark) 100%);
}

/* 3h. Karty wpisow - tytul po najechaniu robil sie zolty na bialym tle. */
.entry-card .entry-title a:hover,
.ct-post-title a:hover,
[data-cards] .entry-title a:hover {
	color: var(--cdit-blue-dark) !important;
}

/* 3i. Zgoda na ciasteczka. Po ujednoliceniu przyciskow oba wygladaly tak samo -
       "Odrzuć" wraca do roli wyboru drugorzednego. */
.cookie-notification .ct-cookies-decline-button {
	background: transparent !important;
	color: var(--cdit-blue-dark) !important;
	border: 2px solid var(--cdit-line) !important;
	box-shadow: none !important;
}

.cookie-notification .ct-cookies-decline-button:hover,
.cookie-notification .ct-cookies-decline-button:focus-visible {
	background: var(--cdit-blue-tint) !important;
	border-color: var(--cdit-blue-dark) !important;
	color: var(--cdit-blue-darker) !important;
}

.cookie-notification .ct-button-group { gap: .6rem; }

/* -------------------------------------------------------------------------
   4. NAGLOWEK: PASEK KONTAKTOWY
   Numer telefonu byl zwyklym tekstem - na telefonie nie dalo sie go dotknac,
   trzeba bylo go przepisac recznie.

   Trzy rzeczy decyduja o tym, czy pasek wyglada na dopracowany:
   * wszystkie pozycje maja ten sam kolor - pasek to nawigacja pomocnicza,
     a nie zbior odnoszacych sie do siebie odnosnikow w akapicie;
   * ikony biora kolor z tekstu (maska zamiast obrazka w kolorze na sztywno),
     wiec zmieniaja sie razem z nim po najechaniu;
   * kazda pozycja ma to samo wypelnienie i te sama wysokosc, wiec odstepy
     miedzy nimi sa rowne, a ikony stoja na jednej linii.
   ------------------------------------------------------------------------- */
.cdit-pasek-kontakt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .25rem 1.5rem;
	margin: 0;
	line-height: 1.25;
}

.cdit-pasek-kontakt > a,
.cdit-pasek-kontakt > span {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .2em 0;
	color: inherit;
	text-decoration: none;
	line-height: 1.25;
	white-space: nowrap;
	transition: color var(--cdit-przejscie);
}

.cdit-pasek-kontakt > a:hover,
.cdit-pasek-kontakt > a:focus-visible {
	color: var(--cdit-blue-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .25em;
}

.cdit-pasek-kontakt__telefon {
	font-weight: 600;
}

/* Ikony jako maska, nie jako obrazek.
   Wczesniej kolor konturu byl wpisany w adres danych (granat na sztywno) -
   ikona nie reagowala na najechanie i przy niebieskim napisie odcinala sie
   od niego kolorem. Maska bierze barwe z "currentColor", wiec ikona i tekst
   sa zawsze tego samego koloru.

   Wysokosc 0,92em zamiast 1,05em: ikona ma tworzyc pare z tekstem, a nie
   konkurowac z nim wielkoscia. Wyrownanie do srodka wiersza o wysokosci 1,25
   trafia optycznie w srodek liter. */
.cdit-pasek-kontakt > a::before,
.cdit-pasek-kontakt > span::before {
	content: "";
	width: .92em;
	height: .92em;
	flex: none;
	background-color: currentColor;
	opacity: .78;
	-webkit-mask: var(--cdit-ikona) center / contain no-repeat;
	mask: var(--cdit-ikona) center / contain no-repeat;
	transition: opacity var(--cdit-przejscie);
}

.cdit-pasek-kontakt > a:hover::before,
.cdit-pasek-kontakt > a:focus-visible::before {
	opacity: 1;
}

.cdit-pasek-kontakt__telefon {
	--cdit-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}

.cdit-pasek-kontakt__adres {
	--cdit-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.cdit-pasek-kontakt__email {
	--cdit-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
}

.cdit-pasek-kontakt__godziny {
	--cdit-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* Na waskim ekranie najpierw znika najmniej pilna informacja - godziny -
   zamiast lamac pasek na dwie linie. */
@media (max-width: 1180px) {
	.cdit-pasek-kontakt { gap: .25rem 1.15rem; font-size: .95em; }
}

@media (max-width: 1000px) {
	.cdit-pasek-kontakt__godziny { display: none; }
}

/* -------------------------------------------------------------------------
   5. MOBILNY PASEK AKCJI
   Na telefonie gorny pasek z kontaktem jest ukryty, a menu trzeba najpierw
   rozwinac - droga od wejscia na strone do polaczenia miala cztery kroki.
   ------------------------------------------------------------------------- */
.cdit-akcje-mobilne {
	display: none;
}

@media (max-width: 767px) {
	.cdit-akcje-mobilne {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 1000;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1px;
		background: var(--cdit-line);
		box-shadow: 0 -6px 20px rgba(7, 42, 65, .16);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.cdit-akcje-mobilne a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .5em;
		min-height: 56px;
		font-weight: 600;
		font-size: 1rem;
		text-decoration: none;
		background: #fff;
		color: var(--cdit-blue-dark);
	}

	.cdit-akcje-mobilne a.cdit-akcje-mobilne__glowna {
		/* Ciemniejszy odcien: na jasnym #1890e2 bialy napis ma 3.42:1. */
		background: var(--cdit-blue-dark);
		color: #fff;
	}

	.cdit-akcje-mobilne a:active { background: var(--cdit-blue-tint); }
	.cdit-akcje-mobilne a.cdit-akcje-mobilne__glowna:active { background: var(--cdit-blue-darker); }
	.cdit-akcje-mobilne svg { width: 1.15em; height: 1.15em; }

	/* Pasek zaslanialby stopke i przycisk "do gory". */
	body { padding-bottom: 56px; }
	.ct-back-to-top { bottom: 70px !important; }
}

/* -------------------------------------------------------------------------
   6. KOMPONENTY TRESCI
   ------------------------------------------------------------------------- */

/* 6a. Sekcja - wspolny rytm pionowy. */
.cdit-sekcja {
	padding-block: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem);
}

.cdit-sekcja--tlo { background: var(--cdit-surface); }
.cdit-sekcja--granat { background: var(--cdit-navy); color: #fff; }
.cdit-sekcja--granat h2,
.cdit-sekcja--granat h3 { color: #fff; }

.cdit-naglowek-sekcji {
	text-align: center;
	max-width: 62ch;
	margin-inline: auto;
	margin-bottom: clamp(1.6rem, 1rem + 1.6vw, 2.6rem);
}

.cdit-naglowek-sekcji p {
	color: var(--cdit-muted);
	font-size: 1.06rem;
	margin-top: .6rem;
}

.cdit-sekcja--granat .cdit-naglowek-sekcji p { color: rgba(255, 255, 255, .82); }

/* 6b. Pasek faktow pod naglowkiem strony glownej. */
.cdit-fakty {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1px;
	background: var(--cdit-line);
	border: 1px solid var(--cdit-line);
	border-radius: var(--cdit-radius);
	overflow: hidden;
}

.cdit-fakty > div {
	background: #fff;
	padding: 1.5rem 1.5rem 1.55rem;
	display: flex;
	gap: 1.05rem;
	align-items: flex-start;
}

.cdit-fakty strong {
	display: block;
	color: var(--cdit-navy);
	font-size: 1.06rem;
	font-weight: 700;
	letter-spacing: -.01em;
	margin-bottom: .22rem;
}

.cdit-fakty span {
	display: block;
	color: var(--cdit-muted);
	font-size: .92rem;
	line-height: 1.5;
}

/* Ikona w kaflu: sam rysunek jest wiekszy, a podklad daje mu oparcie i
   porzadkuje lewa krawedz wszystkich czterech pozycji. Wymiar zewnetrzny
   liczy sie z dopelnienia, wiec kafel ma 3,2rem bez dodatkowej otoczki
   w kodzie strony. */
.cdit-fakty svg {
	width: 1.75rem;
	height: 1.75rem;
	flex: none;
	box-sizing: content-box;
	padding: .72rem;
	border-radius: 14px;
	background: var(--cdit-blue-tint);
	color: var(--cdit-blue-dark);
	stroke-width: 1.6;
}

@media (max-width: 520px) {
	.cdit-fakty > div { padding: 1.25rem 1.2rem; gap: .9rem; }
	.cdit-fakty svg { width: 1.5rem; height: 1.5rem; padding: .6rem; }
}

/* 6c. Siatka uslug. */
.cdit-uslugi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
	gap: 1.15rem;
}

.cdit-usluga {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--cdit-line);
	border-radius: var(--cdit-radius);
	padding: 1.5rem 1.5rem 1.35rem;
	box-shadow: var(--cdit-cien);
	transition: box-shadow var(--cdit-przejscie), transform var(--cdit-przejscie), border-color var(--cdit-przejscie);
}

.cdit-usluga:hover,
.cdit-usluga:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--cdit-cien-hover);
	border-color: #c3daea;
}

.cdit-usluga__ikona {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--cdit-blue-tint);
	color: var(--cdit-blue-dark);
	display: grid;
	place-items: center;
	margin-bottom: 1rem;
}

.cdit-usluga__ikona svg { width: 24px; height: 24px; }

.cdit-usluga h3,
.cdit-usluga h4 {
	font-size: 1.16rem;
	margin: 0 0 .5rem;
}

/* Caly kafelek jest celem klikniecia, ale w drzewie dostepnosci pozostaje
   jednym odnosnikiem - dzieki temu czytnik ekranu nie oglasza go dwa razy. */
.cdit-usluga h3 a::after,
.cdit-usluga h4 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.cdit-usluga h3 a,
.cdit-usluga h4 a {
	color: var(--cdit-navy);
	text-decoration: none;
}

.cdit-usluga:hover h3 a,
.cdit-usluga:hover h4 a { color: var(--cdit-blue-dark); }

.cdit-usluga p {
	color: var(--cdit-muted);
	font-size: .96rem;
	line-height: 1.6;
	margin: 0 0 1rem;
}

.cdit-usluga__stopka {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: .9rem;
	border-top: 1px solid var(--cdit-line);
}

.cdit-usluga__cena {
	font-size: .9rem;
	color: var(--cdit-muted);
}

.cdit-usluga__cena b { color: var(--cdit-navy); font-size: 1rem; }

.cdit-usluga__wiecej {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-weight: 600;
	font-size: .93rem;
	color: var(--cdit-blue-dark);
	text-decoration: none;
}

.cdit-usluga__wiecej::after {
	content: "→";
	transition: transform var(--cdit-przejscie);
}

.cdit-usluga:hover .cdit-usluga__wiecej::after { transform: translateX(4px); }

/* 6c-bis. Podzial oferty na dwie grupy odbiorcow.
   Plaska siatka kilkunastu kafli kazala rodzicowi zgadywac, ktore pozycje
   dotycza dziecka, a ktore jego samego. Grupy rozdziela etykieta i linia,
   a nie sam odstep - przy przewijaniu dluga siatka zaciera granice. */
/* Przelacznik grup to wspolny komponent .cdit-oferta-nav (sekcja 21).
   Na stronie glownej stoi pod wysrodkowanym naglowkiem sekcji - stad
   modyfikator zmieniajacy wylacznie wyrownanie i odstep. */
.cdit-oferta-nav--srodek {
	justify-content: center;
	margin: 0 0 clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem);
}

/* Odsuniecie celu skoku spod przyklejonego naglowka. */
.cdit-grupa-oferty { scroll-margin-top: 5rem; }

.cdit-grupa-oferty--dorosli {
	margin-top: clamp(2.6rem, 1.8rem + 2.4vw, 4rem);
	padding-top: clamp(2.2rem, 1.6rem + 1.8vw, 3.2rem);
	border-top: 1px solid var(--cdit-line);
}

.cdit-grupa-oferty__naglowek {
	max-width: 62ch;
	margin: 0 auto clamp(1.4rem, 1rem + 1.2vw, 2.1rem);
	text-align: center;
}

.cdit-grupa-oferty__etykieta {
	display: inline-block;
	padding: .34rem .85rem;
	border-radius: 999px;
	background: var(--cdit-blue-dark);
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: .85rem;
}

/* Druga etykieta w kolorze akcentu - roznica barwy jest tu jedynym
   szybkim sygnalem, ze zaczyna sie inna oferta. */
.cdit-grupa-oferty--dorosli .cdit-grupa-oferty__etykieta { background: var(--cdit-accent); }

.cdit-grupa-oferty__naglowek h3 {
	font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem);
	color: var(--cdit-navy);
	margin: 0;
}

.cdit-grupa-oferty__naglowek p {
	color: var(--cdit-muted);
	font-size: 1.02rem;
	margin-top: .55rem;
}

.cdit-grupa-oferty__stopka {
	margin: 1.4rem auto 0;
	max-width: 68ch;
	text-align: center;
	color: var(--cdit-muted);
	font-size: .96rem;
}

/* 6c-ter. Zdjecie ilustracyjne na podstronie uslugi.
   Zdjecia z placowki sa robione telefonem i maja rozne proporcje - poziome
   4:3 i pionowe 3:4. Bez przyciecia pionowe zajmowalyby pol ekranu i spychaly
   opis ponizej krawedzi widoku, wiec kadr obcinamy do stalego pasa. */
.cdit-usluga-foto {
	margin: clamp(1.5rem, 1.1rem + 1vw, 2.2rem) 0;
	border-radius: var(--cdit-radius);
	overflow: hidden;
	box-shadow: var(--cdit-cien);
}

.cdit-usluga-foto img {
	display: block;
	width: 100%;
	height: clamp(210px, 13rem + 10vw, 360px);
	object-fit: cover;
	object-position: center;
}

/* 6d. Kroki "jak zaczynamy". */
.cdit-kroki {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
	gap: 1.15rem;
	counter-reset: krok;
	margin: 1.6rem 0 2rem;
}

/* Krazek z numerem stoi absolutnie, wiec sam z siebie nie odsuwa naglowka -
   miejsce pod niego robi gorne wypelnienie karty. Trzy wielkosci ponizej sa
   zwiazane rachunkiem, a nie dobrane osobno: wypelnienie to odstep krazka od
   krawedzi PLUS jego srednica PLUS odstep do naglowka. Dzieki temu zmiana
   samej srednicy nie wymaga poprawiania wypelnienia i numer nigdy nie wchodzi
   na tytul kroku - wczesniej naglowek zaczynal sie na wysokosci dolnej
   krawedzi krazka i oba elementy sie stykaly. */
.cdit-krok {
	--krok-srednica: 44px;
	--krok-gora: 1.35rem;
	--krok-odstep: 1rem;

	position: relative;
	background: #fff;
	border: 1px solid var(--cdit-line);
	border-radius: var(--cdit-radius);
	padding: calc(var(--krok-gora) + var(--krok-srednica) + var(--krok-odstep)) 1.35rem 1.35rem;
}

.cdit-krok::before {
	counter-increment: krok;
	content: counter(krok);
	position: absolute;
	top: var(--krok-gora);
	left: 1.35rem;
	width: var(--krok-srednica);
	height: var(--krok-srednica);
	border-radius: 50%;
	background: var(--cdit-blue);
	color: #fff;
	font-weight: 700;
	font-size: 1.35rem;
	/* Bez tego wysoka interlinia z tekstu ciaglego zsuwa cyfre z osi krazka. */
	line-height: 1;
	display: grid;
	place-items: center;
}

/* Odstep nad naglowkiem daje juz wypelnienie karty - wlasny gorny margines
   dolozylby sie do niego drugi raz. */
.cdit-krok h3 { font-size: 1.06rem; margin: 0 0 .45rem; }
.cdit-krok p { color: var(--cdit-muted); font-size: .95rem; line-height: 1.6; margin: 0; }

/* 6e. Lista sygnalow / atutow. */
.cdit-lista-atut {
	list-style: none;
	margin: 1.2rem 0 2rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: .7rem 1.6rem;
}

.cdit-lista-atut li {
	position: relative;
	padding-left: 2rem;
	line-height: 1.6;
	color: var(--cdit-text);
}

.cdit-lista-atut li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .32em;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: var(--cdit-blue-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230d6ca8'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E") center/.8rem no-repeat;
}

/* 6f. Baner promocyjny. */
.cdit-baner {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.4rem, 1rem + 2vw, 3rem);
	background: var(--cdit-accent-tint);
	border: 1px solid #f5d9b8;
	border-left: 6px solid var(--cdit-accent);
	border-radius: var(--cdit-radius);
	padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
}

.cdit-baner__etykieta {
	display: inline-block;
	background: var(--cdit-accent);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .3em .8em;
	border-radius: 999px;
	margin-bottom: .8rem;
}

.cdit-baner h2 { color: var(--cdit-accent-text); margin: 0 0 .6rem; }
.cdit-baner p { color: #6b4318; margin: 0 0 1rem; line-height: 1.65; }

.cdit-baner .cdit-przycisk {
	background: var(--cdit-accent);
	color: #fff;
	box-shadow: 0 2px 6px rgba(180, 83, 9, .25);
}

.cdit-baner .cdit-przycisk:hover { background: #92400e; color: #fff; }

/* Wariant obrysowy MUSI byc po wariancie pelnym, inaczej przejmuje jego tlo:
   pomaranczowe tlo z niebieskim napisem dawalo kontrast 1.12:1. */
.cdit-baner a.cdit-przycisk--obrys {
	background: transparent;
	color: var(--cdit-accent-text);
	border-color: var(--cdit-accent);
	box-shadow: none;
}

.cdit-baner a.cdit-przycisk--obrys:hover,
.cdit-baner a.cdit-przycisk--obrys:focus-visible {
	background: var(--cdit-accent-text);
	border-color: var(--cdit-accent-text);
	color: #fff;
}

.cdit-baner__akcje { display: flex; flex-wrap: wrap; gap: .7rem; }

/* Miejsce na dane, ktorych jeszcze nie mamy - ma byc widoczne dla redaktora,
   a nie ginac w tresci. */
.cdit-uzupelnij {
	display: inline-block;
	background: repeating-linear-gradient(135deg, #fff4d6, #fff4d6 8px, #ffe9b3 8px, #ffe9b3 16px);
	border: 1px dashed #d9a441;
	border-radius: 6px;
	padding: .05em .5em;
	font-style: normal;
	color: #7a5310;
	font-weight: 600;
}

/* 6g. Opinie. */
.cdit-opinie__pusto {
	text-align: center;
	color: var(--cdit-muted);
}

.cdit-opinie-lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.15rem;
	margin-bottom: 1.8rem;
}

.cdit-opinia {
	background: #fff;
	border: 1px solid var(--cdit-line);
	border-radius: var(--cdit-radius);
	padding: 1.4rem;
	box-shadow: var(--cdit-cien);
	display: flex;
	flex-direction: column;
}

.cdit-opinia__gwiazdki { color: #f0a020; letter-spacing: .1em; margin-bottom: .6rem; }
.cdit-opinia p { color: var(--cdit-text); line-height: 1.65; margin: 0 0 1rem; }
.cdit-opinia footer { margin-top: auto; color: var(--cdit-muted); font-size: .9rem; }
.cdit-opinia footer b { color: var(--cdit-navy); display: block; }

/* 6h. FAQ na znacznikach natywnych - zero JavaScriptu, dziala tez bez skryptow. */
.cdit-faq { margin: 1.4rem 0 2rem; }

.cdit-faq details {
	background: #fff;
	border: 1px solid var(--cdit-line);
	border-radius: var(--cdit-radius-sm);
	margin-bottom: .7rem;
	transition: border-color var(--cdit-przejscie), box-shadow var(--cdit-przejscie);
}

.cdit-faq details[open] {
	border-color: #c3daea;
	box-shadow: var(--cdit-cien);
}

.cdit-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1.05rem 3rem 1.05rem 1.25rem;
	font-weight: 600;
	color: var(--cdit-navy);
	position: relative;
	line-height: 1.45;
}

.cdit-faq summary::-webkit-details-marker { display: none; }

.cdit-faq summary::after {
	content: "";
	position: absolute;
	right: 1.2rem;
	top: 50%;
	width: .62rem;
	height: .62rem;
	border-right: 2px solid var(--cdit-blue-dark);
	border-bottom: 2px solid var(--cdit-blue-dark);
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--cdit-przejscie);
}

.cdit-faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.cdit-faq summary:hover { color: var(--cdit-blue-dark); background: var(--cdit-blue-tint); border-radius: var(--cdit-radius-sm); }

.cdit-faq__odpowiedz {
	padding: 0 1.25rem 1.2rem;
	color: var(--cdit-muted);
	line-height: 1.7;
}

.cdit-faq__odpowiedz p:last-child { margin-bottom: 0; }

/* 6i. Wezwanie do dzialania na koncu strony. */
.cdit-cta {
	background-color: var(--cdit-navy);
	background-image: linear-gradient(135deg, var(--cdit-navy) 0%, #0d4a6e 60%, var(--cdit-blue-dark) 100%);
	border-radius: var(--cdit-radius);
	color: #fff;
	padding: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
	text-align: center;
}

.cdit-hero::before { background-color: rgba(7, 42, 65, .6); }

.cdit-cta h2 { color: #fff; margin-top: 0; }
.cdit-cta p { color: rgba(255, 255, 255, .85); max-width: 56ch; margin: .7rem auto 1.5rem; }

.cdit-cta__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	justify-content: center;
}

.cdit-cta .cdit-przycisk--obrys {
	border-color: rgba(255, 255, 255, .75);
	color: #fff;
}

.cdit-cta .cdit-przycisk--obrys:hover {
	background: #fff;
	border-color: #fff;
	color: var(--cdit-navy);
}

/* 6j. Ramka z faktami na podstronie uslugi. */
.cdit-metryka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1px;
	background: var(--cdit-line);
	border: 1px solid var(--cdit-line);
	border-radius: var(--cdit-radius);
	overflow: hidden;
	margin: 1.8rem 0;
}

.cdit-metryka > div { background: #fff; padding: 1.1rem 1.25rem; }
.cdit-metryka dt { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cdit-muted); margin-bottom: .3rem; }
.cdit-metryka dd { margin: 0; font-weight: 600; color: var(--cdit-navy); line-height: 1.4; }

/* 6k. Powiazane uslugi. */
.cdit-powiazane { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 2.4rem; }

.cdit-powiazane a {
	display: inline-block;
	padding: .45em 1em;
	border: 1px solid var(--cdit-line);
	border-radius: 999px;
	background: #fff;
	color: var(--cdit-blue-dark);
	text-decoration: none;
	font-size: .93rem;
	font-weight: 600;
	transition: background-color var(--cdit-przejscie), border-color var(--cdit-przejscie), color var(--cdit-przejscie);
}

.cdit-powiazane a:hover,
.cdit-powiazane a:focus-visible {
	background: var(--cdit-blue-dark);
	border-color: var(--cdit-blue-dark);
	color: #fff;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   7. CENNIK
   ------------------------------------------------------------------------- */
.cdit-cennik {
	border: 1px solid var(--cdit-line);
	border-radius: var(--cdit-radius);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--cdit-cien);
}

.cdit-cennik__pozycja {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .4rem 1.5rem;
	align-items: start;
	padding: 1.2rem 1.4rem;
	border-top: 1px solid var(--cdit-line);
}

.cdit-cennik__pozycja:first-child { border-top: 0; }
.cdit-cennik__pozycja:nth-child(even) { background: #fbfdfe; }

.cdit-cennik__nazwa { font-weight: 700; color: var(--cdit-navy); font-size: 1.05rem; }
.cdit-cennik__nazwa a { color: inherit; text-decoration: none; }
.cdit-cennik__nazwa a:hover { color: var(--cdit-blue-dark); text-decoration: underline; }

.cdit-cennik__opis {
	grid-column: 1;
	color: var(--cdit-muted);
	font-size: .94rem;
	line-height: 1.55;
}

.cdit-cennik__czas {
	display: inline-block;
	font-size: .84rem;
	color: var(--cdit-blue-dark);
	background: var(--cdit-blue-tint);
	border-radius: 999px;
	padding: .15em .7em;
	margin-top: .35rem;
}

.cdit-cennik__cena {
	grid-column: 2;
	grid-row: 1 / span 2;
	text-align: right;
	white-space: nowrap;
	font-size: 1.32rem;
	font-weight: 700;
	color: var(--cdit-navy);
}

.cdit-cennik__cena small { display: block; font-size: .76rem; font-weight: 500; color: var(--cdit-muted); margin-top: .15rem; }

@media (max-width: 560px) {
	.cdit-cennik__pozycja { grid-template-columns: 1fr; }
	.cdit-cennik__cena { grid-column: 1; grid-row: auto; text-align: left; }
}

/* -------------------------------------------------------------------------
   8. STOPKA
   Linki mialy kontrast 3.22:1 i nie reagowaly na kursor.
   ------------------------------------------------------------------------- */
/* Stopka lezy na ciemnym granacie (#072a41), a nie na bieli - stad jasny tekst.
   Wczesniejszy szary #86919a dawal na tym tle 2.9:1, czyli ponizej progu. */
.ct-footer-copyright,
.ct-footer-copyright p,
.ct-footer .ct-widget,
.ct-footer .ct-widget p,
.ct-footer .ct-widget .textwidget,
.ct-footer .contact-text {
	color: rgba(255, 255, 255, .84) !important;
}

.ct-footer .ct-widget a,
.ct-footer-copyright a,
.ct-footer .contact-text a {
	color: #bcdcf5 !important;
	text-decoration: underline;
	text-underline-offset: .18em;
	transition: color var(--cdit-przejscie);
}

.ct-footer .ct-widget a:hover,
.ct-footer .ct-widget a:focus-visible,
.ct-footer-copyright a:hover,
.ct-footer-copyright a:focus-visible,
.ct-footer .contact-text a:hover {
	color: #ffffff !important;
	text-decoration-thickness: 2px;
}

.ct-footer .widget-title,
.ct-footer .ct-widget strong,
.ct-footer .contact-title { color: #ffffff !important; }

/* Naglowek kolumny w stopce lamie sie na dwa wiersze. Montserrat ma wysokie
   wydluzenia - blok tekstu zajmuje okolo 1,22 wysokosci pisma - a motyw daje
   naglowkom interlinie 1,28, czyli 6% odstepu miedzy wierszami. Przy
   "Centrum Diagnozy i Terapii RaZem" ogonek "y" z pierwszego wiersza wchodzil
   w cudzyslow z drugiego. Selektor 0-2-0 bije "\.ct-widget>*" motywu (0-1-1),
   wiec obywa sie bez "!important". */
.ct-footer .widget-title { line-height: 1.4; }

/* Lista linkow w stopce byla ciasna - na telefonie sasiednie pozycje
   znajdowaly sie blizej niz zalecane 44 px celu dotykowego. */
.ct-footer .textwidget ul { list-style: none; margin: 0; padding: 0; }
.ct-footer .textwidget ul li { margin-bottom: .1rem; }
.ct-footer .textwidget ul li a { display: inline-block; padding: .35em 0; }

/* -------------------------------------------------------------------------
   9. DROBNE POPRAWKI UKLADU
   ------------------------------------------------------------------------- */

/* Obrazy nie moga rozpychac ukladu w poziomie. */
img, video, iframe { max-width: 100%; height: auto; }

/* Ograniczenie przesuniec ukladu przy ladowaniu zdjec (CLS). */
.cdit-usluga img,
.cdit-opinia img { display: block; }

/* Tabele w tresci przewijaja sie same, zamiast rozjezdzac strone na telefonie. */
article .entry-content table { display: block; overflow-x: auto; max-width: 100%; }

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

/* -------------------------------------------------------------------------
   10. DRUK - rodzice czesto drukuja cennik i zalecenia.
   ------------------------------------------------------------------------- */
@media print {
	.ct-header, .ct-footer, .cdit-akcje-mobilne, .cdit-cta, .ct-back-to-top { display: none !important; }
	.cdit-faq details { break-inside: avoid; }
	.cdit-faq details:not([open]) .cdit-faq__odpowiedz { display: block; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* -------------------------------------------------------------------------
   11. GODZINY PRZYJEC JAKO LISTA (skrot [cdit_godziny])
   Ikony paska kontaktowego opisuje sekcja 4 - tutaj zostaje juz tylko lista.
   ------------------------------------------------------------------------- */
.cdit-godziny--lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cdit-godziny--lista li {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: .5rem 0;
	border-bottom: 1px dashed var(--cdit-line);
}

.cdit-godziny--lista li:last-child { border-bottom: 0; }
.cdit-godziny--lista span { color: var(--cdit-muted); }
.cdit-godziny--lista strong { color: var(--cdit-navy); white-space: nowrap; }




/* -------------------------------------------------------------------------
   13. PRZYCISKI GUTENBERGA W NASZYCH SEKCJACH
   ------------------------------------------------------------------------- */
.cdit-cta .wp-block-buttons,
.cdit-baner .wp-block-buttons,
.cdit-sekcja .wp-block-buttons {
	justify-content: center;
	gap: .8rem;
}

.cdit-baner .wp-block-buttons { justify-content: flex-start; }

.cdit-baner .wp-block-button__link {
	background: var(--cdit-accent);
	box-shadow: 0 2px 6px rgba(180, 83, 9, .25);
}

.cdit-baner .wp-block-button__link:hover { background: #92400e; }

.cdit-baner .cdit-przycisk--obrys .wp-block-button__link {
	background: transparent;
	color: var(--cdit-accent-text);
	border-color: #d9a441;
}

.cdit-baner .cdit-przycisk--obrys .wp-block-button__link:hover {
	background: var(--cdit-accent-text);
	border-color: var(--cdit-accent-text);
	color: #fff;
}

/* Sekcja pelnej szerokosci wewnatrz waskiej tresci. */
.cdit-sekcja.alignfull > .wp-block-group__inner-container,
.cdit-sekcja > .wp-block-group__inner-container {
	max-width: var(--theme-content-width, 1290px);
	margin-inline: auto;
	padding-inline: clamp(1rem, .6rem + 1.4vw, 2rem);
}


/* -------------------------------------------------------------------------
   14. WYJATKI OD SZEROKOSCI KOLUMNY
   Wezwanie do kontaktu i pasek faktow maja oddychac szerzej niz proza.
   ------------------------------------------------------------------------- */
/* Sekcja wypelnia kolumne tekstu i nic wiecej.
   Wczesniej probowala "wychodzic" szerzej ujemnymi marginesami liczonymi
   z procentow kontenera - przy niektorych szerokosciach okna wyliczenie
   wypychalo ja o kilkaset pikseli poza prawa krawedz ekranu i sekcja
   przestawala byc wysrodkowana. Kolumna tekstu ma 900 px, co dla wezwania
   do kontaktu jest w zupelnosci wystarczajace. */
.cdit-strona-tresci article .entry-content > .cdit-sekcja {
	width: auto;
	max-width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

.cdit-strona-tresci article .cdit-sekcja > .wp-block-group__inner-container {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/* -------------------------------------------------------------------------
   15. STRONA GLOWNA
   ------------------------------------------------------------------------- */

/* 15a. Naglowek otwierajacy.
   Zdjecie jako tlo warstwy, a nie znacznik <img>: dzieki temu nie trzeba
   pozycjonowac tekstu nad obrazem i uklad nie skacze podczas ladowania. */
.cdit-hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(420px, 60vh, 620px);
	padding: clamp(3rem, 2rem + 5vw, 6rem) clamp(1.2rem, .6rem + 2vw, 3rem);
	background-image: var(--cdit-hero-obraz);
	background-size: cover;
	background-position: center 35%;
	/* Kolor pod zdjeciem: zanim obraz sie zaladuje (i gdyby sie nie zaladowal)
	   bialy tekst musi miec na czym stac. */
	background-color: var(--cdit-navy);
	isolation: isolate;
}

/* Przycienienie po stronie tekstu. Jednolita czarna nakladka na calym zdjeciu
   gasila kolory zabawek - gradient zostawia prawa strone czytelna. */
.cdit-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, rgba(7, 42, 65, .88) 0%, rgba(7, 42, 65, .74) 45%, rgba(7, 42, 65, .28) 100%);
}

.cdit-hero__tresc {
	max-width: 46rem;
	width: min(100%, 1180px);
	margin-inline: auto;
	color: #fff;
}

.cdit-hero__nadtytul {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .82rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .78);
	margin: 0 0 .8rem;
}

.cdit-hero h1 {
	color: #fff;
	margin: 0 0 1rem;
	font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.5rem);
	text-wrap: balance;
}

.cdit-hero__opis {
	color: rgba(255, 255, 255, .9);
	font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
	line-height: 1.65;
	max-width: 40rem;
	margin: 0 0 1.8rem;
}

.cdit-hero__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
}

/* Odnosnik w roli przycisku - te same wymiary co przyciski Gutenberga. */
a.cdit-przycisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	text-decoration: none;
}

.cdit-przycisk--jasny {
	border-color: rgba(255, 255, 255, .8);
	color: #fff;
	background: transparent;
	box-shadow: none;
}

.cdit-przycisk--jasny:hover,
.cdit-przycisk--jasny:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--cdit-navy);
}

/* 15b. Pasek faktow wchodzi na zdjecie - laczy naglowek z reszta strony. */
.cdit-sekcja--fakty {
	padding-top: 0;
	margin-top: clamp(-3.5rem, -2rem - 2vw, -2rem);
	position: relative;
	z-index: 2;
}

.cdit-sekcja--fakty .cdit-fakty { box-shadow: var(--cdit-cien-hover); }

/* 15c. Dwie kolumny w sekcji o Centrum. */
.cdit-dwie-kolumny {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	align-items: start;
}

.cdit-dwie-kolumny p { line-height: 1.72; color: var(--cdit-text); }
.cdit-dwie-kolumny h3 { font-size: 1.1rem; margin: 0 0 .7rem; }
.cdit-dwie-kolumny h3 + .cdit-lista-atut { margin-top: 0; margin-bottom: 1.6rem; }
.cdit-lista-atut--waska { grid-template-columns: 1fr; }

/* 15c-bis. Sekcja "Moja wizja".
   Zdjecie w stalej kolumnie z lewej, obok osobisty tekst wlascicielki. Kolumna
   ze zdjeciem jest przyklejona przy przewijaniu, bo tekst jest kilkakrotnie
   wyzszy od obrazka - bez tego przy dolnych akapitach lewa strona sekcji
   zostawalaby pusta. Odsuniecie od gory omija przyklejony naglowek strony. */
.cdit-wizja {
	display: grid;
	/* Druga kolumna ma swoja szerokosc docelowa, a nie "1fr": przy "1fr"
	   rozciagala sie na cala sekcje, a ograniczony wiersz tekstu zostawial
	   po prawej pas pustki szerszy od samego zdjecia. Z ustalona szerokoscia
	   obu kolumn cala para da sie wysrodkowac pod naglowkiem sekcji. */
	grid-template-columns: minmax(0, 360px) minmax(0, 44rem);
	justify-content: center;
	gap: 2rem clamp(1.6rem, 1rem + 2vw, 3rem);
	align-items: start;
	margin-top: 1.8rem;
}

.cdit-wizja__foto {
	margin: 0;
	position: sticky;
	top: 7rem;
}

.cdit-wizja__foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cdit-radius);
	box-shadow: var(--cdit-cien);
}

.cdit-wizja__tresc > p {
	line-height: 1.72;
	color: var(--cdit-text);
	margin: 0 0 1.05rem;
}

.cdit-wizja__tresc > p:last-child { margin-bottom: 0; }

/* Zdanie zamykajace - wyroznione, bo jest puenta calej sekcji. */
.cdit-wizja__podpis {
	font-size: 1.08rem;
	font-weight: 600;
	color: var(--cdit-navy);
	border-left: 3px solid var(--cdit-blue);
	padding-left: .9rem;
	margin-top: 1.5rem;
}

/* Ponizej tej szerokosci dwie kolumny daja tekst wezszy niz ~45 znakow,
   wiec zdjecie idzie nad tekst i przestaje byc przyklejone. */
@media (max-width: 860px) {
	.cdit-wizja { grid-template-columns: 1fr; gap: 1.5rem; }
	.cdit-wizja__foto {
		position: static;
		max-width: 420px;
		margin-inline: auto;
	}
}

/* 15d. Baner: dane do uzupelnienia w osobnej linii. */
.cdit-baner__dane {
	font-size: .95rem;
	color: #6b4318;
	margin-bottom: 0;
}

@media (max-width: 780px) {
	.cdit-baner { grid-template-columns: 1fr; }
}

/* 15e. Opinie - przycisk pod widzetem. */
.cdit-opinie__akcje { text-align: center; margin-top: 1.5rem; }

/* 15f. Karty wpisow (skrot [cdit_wpisy]).
       Sześć wpisów, po trzy w rzędzie. Karty mają równą wysokość w rzędzie,
       zdjęcia stałe proporcje, a "Czytaj dalej" siedzi zawsze przy dolnej
       krawędzi - dzięki temu siatka nie rozjeżdża się przy różnej długości
       zapowiedzi. */
.cdit-wpisy {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.4rem;
}

.cdit-wpis {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--cdit-line);
	border-radius: var(--cdit-radius);
	overflow: hidden;
	box-shadow: var(--cdit-cien);
	transition: box-shadow var(--cdit-przejscie), transform var(--cdit-przejscie), border-color var(--cdit-przejscie);
}

.cdit-wpis:hover,
.cdit-wpis:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--cdit-cien-hover);
	border-color: #c3daea;
}

.cdit-wpis__obraz {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--cdit-surface-2);
}

.cdit-wpis__obraz img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms cubic-bezier(.4, 0, .2, 1);
}

.cdit-wpis:hover .cdit-wpis__obraz img { transform: scale(1.04); }

.cdit-wpis__tresc {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.15rem 1.3rem 1.25rem;
}

.cdit-wpis__data {
	/* Nie mniej niz 13 px - ponizej tego data staje sie na telefonie
	   meczaca do odczytania. */
	font-size: max(13px, .8rem);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cdit-muted);
	margin: 0 0 .5rem;
}

.cdit-wpis h3 {
	font-size: 1.08rem;
	line-height: 1.35;
	margin: 0 0 .55rem;
}

.cdit-wpis h3 a {
	color: var(--cdit-navy);
	text-decoration: none;
}

/* Caly kafelek jest celem klikniecia, ale w drzewie dostepnosci pozostaje
   jednym odnosnikiem. */
.cdit-wpis h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.cdit-wpis:hover h3 a { color: var(--cdit-blue-dark); }

.cdit-wpis__zajawka {
	color: var(--cdit-muted);
	font-size: .95rem;
	line-height: 1.6;
	margin: 0 0 1rem;
}

.cdit-wpis__wiecej {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-weight: 600;
	font-size: .93rem;
	color: var(--cdit-blue-dark);
}

.cdit-wpis__wiecej::after {
	content: "\2192";
	transition: transform var(--cdit-przejscie);
}

.cdit-wpis:hover .cdit-wpis__wiecej::after { transform: translateX(4px); }

@media (max-width: 1000px) {
	.cdit-wpisy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.cdit-wpisy { grid-template-columns: 1fr; }
}

/* 15g. Galeria placowki - slajder wtyczki potrafi rozepchnac uklad. */
.cdit-sekcja .ngg-galleryoverview { max-width: 100%; overflow: hidden; }

/* -------------------------------------------------------------------------
   16. SEKCJE PELNEJ SZEROKOSCI NA STRONIE GLOWNEJ
   ------------------------------------------------------------------------- */
.home .cdit-sekcja > .wp-block-group__inner-container {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(1rem, .6rem + 1.4vw, 2rem);
}

.home .entry-content > .alignfull { margin-inline: 0; width: 100%; }

/* -------------------------------------------------------------------------
   17. CENNIK - ELEMENTY DODATKOWE
   ------------------------------------------------------------------------- */
.cdit-cennik-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1px;
	background: var(--cdit-line);
	border: 1px solid var(--cdit-line);
	border-radius: var(--cdit-radius);
	overflow: hidden;
	margin: 1.6rem 0 2.4rem;
}

.cdit-cennik-info > div { background: var(--cdit-blue-tint); padding: 1.1rem 1.25rem; }
.cdit-cennik-info strong { display: block; color: var(--cdit-navy); margin-bottom: .25rem; }
.cdit-cennik-info span { color: var(--cdit-muted); font-size: .94rem; line-height: 1.5; }

.cdit-cennik { margin-bottom: 2.4rem; }

.cdit-cennik__na-zapytanie {
	font-size: .92rem;
	font-weight: 600;
	color: var(--cdit-blue-dark);
	white-space: normal;
	display: inline-block;
	max-width: 12rem;
	line-height: 1.35;
}

/* -------------------------------------------------------------------------
   18. MENU - ZABEZPIECZENIE PRZED ZWIJANIEM
   Blocksy chowa pozycje menu pod "Więcej", gdy nie mieszcza sie w kolumnie.
   Etykiety trzymamy krotkie, ale gdyby ktos wpisal dluzsza, niech raczej
   zawinie sie wiersz, niz zniknie cala nawigacja.
   ------------------------------------------------------------------------- */
.ct-header [data-id="menu"] > ul > li > a { white-space: nowrap; }

/* Szerokosc i uklad listy rozwijanej opisuje sekcja 3e. */

/* -------------------------------------------------------------------------
   19. NAGLOWEK PODSTRONY - CZYTELNOSC TYTULU NA ZDJECIU
   Zdjecia w naglowkach sa jasne i kontrastowe (klocki, zabawki), a domyslne
   przycienienie okazalo sie za slabe: bialy tytul gubil sie w tle.
   Gradient zamiast jednolitej nakladki - dol ciemniejszy pod tekstem, gora
   jasniejsza, zeby zdjecie nadal bylo widoczne.
   ------------------------------------------------------------------------- */
/* UWAGA: przycienienia NIE dokladamy tutaj wlasnym pseudoelementem.
   Zdjecie w naglowku podstrony jest w Blocksy warstwa ustawiona bezwzglednie
   (position: absolute) i nadanie jej "position: relative" wypycha ja z warstwy
   tla - naglowek rozjezdza sie wtedy na dwa bloki: zdjecie u gory, tytul pod nim.
   Sile przycienienia ustawiamy w kustomizerze (single_page_pageTitleOverlay),
   czyli mechanizmem przewidzianym przez motyw. */

.hero-section[data-type="type-2"] .page-title,
.hero-section[data-type="type-2"] h1 {
	text-shadow: 0 2px 12px rgba(7, 42, 65, .55);
	text-wrap: balance;
}

.hero-section[data-type="type-2"] .page-description {
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 1px 8px rgba(7, 42, 65, .5);
	max-width: 60ch;
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   20. GALERIA PLACOWKI
   Siatka zamiast pokazu slajdow: wszystkie zdjecia sa widoczne od razu,
   nic nie trzeba przeklikiwac, a przegladarka pobiera tylko to, co wejdzie
   w pole widzenia.
   ------------------------------------------------------------------------- */
.cdit-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: .75rem;
}

.cdit-galeria__kafelek {
	margin: 0;
	border-radius: var(--cdit-radius-sm);
	overflow: hidden;
	background: var(--cdit-surface-2);
	aspect-ratio: 3 / 2;
}

.cdit-galeria__kafelek img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
}

.cdit-galeria__kafelek:hover img { transform: scale(1.04); }

@media (max-width: 600px) {
	.cdit-galeria { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
}

/* -------------------------------------------------------------------------
   21. DOTYK I CZYTELNOSC NA MALYCH EKRANACH
   Wytyczne mowia o celu dotykowym nie mniejszym niz 44x44 px. Zmierzone przed
   poprawka: przycisk menu 18x18, ikony spolecznosciowe 38x38, odnosniki
   w stopce 38 px wysokosci, nazwy uslug w cenniku 19 px.
   ------------------------------------------------------------------------- */

/* Przycisk rozwijania menu - sama ikona ma 18 px, wiec powiekszamy pole klikniecia,
   nie ikone: rysunek zostaje tej samej wielkosci, palec ma w co trafic. */
.ct-header [data-id="trigger"] button,
.ct-header .ct-panel-actions button,
button.ct-toggle-close,
[data-toggle-panel] {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Ikony spolecznosciowe w naglowku i stopce. */
.ct-social-box a {
	min-width: 44px;
	min-height: 44px;
}

@media (max-width: 767px) {
	/* Odnosniki w stopce - wieksze odstepy zamiast wiekszej czcionki. */
	.ct-footer .textwidget ul li a,
	.ct-footer .contact-text a {
		padding-block: .5em;
		display: inline-block;
	}

	/* Nazwy uslug w cenniku sa odnosnikami - potrzebuja wlasnej wysokosci. */
	.cdit-cennik__nazwa a {
		display: inline-block;
		padding-block: .35em;
	}

	/* Tekst pomocniczy: 12 px na telefonie czyta sie meczaco. */
	.ct-breadcrumbs,
	.ct-breadcrumbs span,
	.ct-breadcrumbs a,
	.entry-meta,
	.entry-meta li,
	.cdit-cennik__cena small,
	.cdit-baner__etykieta {
		font-size: 13px !important;
	}

	/* Kafelki uslug: caly kafelek jest celem klikniecia (patrz sekcja 6c),
	   ale sam naglowek tez powinien byc wygodny do trafienia. */
	.cdit-usluga h3 a,
	.cdit-usluga h4 a { display: inline-block; padding-block: .2em; }
}

/* Pasek kontaktowy w naglowku: 9 px z ustawien motywu to rozmiar nieczytelny.
   Na telefonie pasek jest ukryty (jego role przejmuje dolny pasek akcji),
   ale na tablecie widac go nadal. */
.cdit-pasek-kontakt { font-size: max(13.5px, 1em); }


/* -------------------------------------------------------------------------
   22. NAGLOWEK OTWIERAJACY NA PELNA SZEROKOSC
   Blok HTML jest bezposrednim dzieckiem tresci, wiec motyw nadaje mu
   ograniczenie szerokosci i automatyczne marginesy - naglowek mial przez to
   biale paski po bokach. Selektor z rodzicem, bo regula motywu jest bardziej
   szczegolowa niz sama klasa.
   ------------------------------------------------------------------------- */
.entry-content > .cdit-hero {
	max-width: none;
	margin-inline: 0;
	width: 100%;
}

/* -------------------------------------------------------------------------
   23. OKRUSZKI - CEL DOTYKOWY
   Odnosniki w sciezce nawigacyjnej mialy 21 px wysokosci; wytyczne mowia
   o minimum 24 px. Powiekszamy odstep, nie czcionke.
   ------------------------------------------------------------------------- */
.ct-breadcrumbs a,
.ct-breadcrumbs [aria-current="page"] {
	display: inline-block;
	padding-block: .28em;
	min-height: 24px;
}


/* -------------------------------------------------------------------------
   24. LISTA WPISOW - POZOSTALOSCI PO DEMIE MOTYWU
   Przycisk "wiecej wpisow" i etykiety kategorii braly kolor tekstu ze zmiennej
   --theme-button-text-initial-color, ktora Blocksy nadal wypisuje jako #714508
   (brazowy z dema "charity") niezaleznie od ustawien w kustomizerze.
   ------------------------------------------------------------------------- */
/* Etykieta kategorii: <li class="meta-categories" data-type="pill"><a> */
.ct-load-more,
button.ct-load-more,
.entry-meta li[data-type="pill"] a,
.entry-meta li[data-type="pill"] a:hover,
.entry-meta li[data-type="pill"] a:focus-visible {
	color: #fff !important;
	background-color: var(--cdit-blue-dark) !important;
}

.ct-load-more:hover,
button.ct-load-more:hover,
.entry-meta li[data-type="pill"] a:hover,
.entry-meta li[data-type="pill"] a:focus-visible {
	background-color: var(--cdit-blue-darker) !important;
	color: #fff !important;
}

/* Odnosniki w danych wpisu (autor, data). Etykiety kategorii sa wyjete
   selektorem wyzej - maja wlasne, ciemne tlo. */
.entry-meta li:not([data-type="pill"]) a,
.ct-meta-element-author,
.entry-meta .ct-meta-element-author {
	color: var(--cdit-blue-dark) !important;
	transition: color var(--cdit-przejscie);
}

.entry-meta a:hover,
.ct-meta-element-author:hover {
	color: var(--cdit-blue-darker) !important;
	text-decoration: underline;
	text-underline-offset: .18em;
}


/* -------------------------------------------------------------------------
   26. MAPA DOJAZDU
   Mapa ma isc przez cala szerokosc okna, a tresc kontaktu jest zawezona
   do 900 px - trzeba wiec wyjsc poza kolumne ujemnym marginesem.

   Klasa "alignfull" nie jest tu ozdoba. WordPress narzuca dzieciom
   ".is-layout-constrained" regule "margin-left/right: auto !important",
   ktora omija WYLACZNIE elementy z klasa alignleft/alignright/alignfull.
   Bez niej ujemny margines nie ma szans - nawet wpisany w atrybut "style"
   w tresci, bo "!important" z arkusza bije styl inline. Tak wlasnie ramka
   zaczynala sie przy krawedzi kolumny i wystawala poza ekran.

   Wysokosc musi byc podana tutaj: atrybut "height" z tresci przegrywa
   z regula motywu nadrzednego i ramka spada do domyslnych 150 px.
   ------------------------------------------------------------------------- */
article .entry-content iframe.cdit-mapa {
	display: block;
	border: 0;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	height: clamp(300px, 42vh, 450px);
}

/* -------------------------------------------------------------------------
   27. STRONA "O NAS" - WYGLAD PO ZMIANIE POZIOMOW NAGLOWKOW
   Cala strona uzywala h4, wiec po tytule strony nastepowal skok z poziomu 1
   na 4. Poziomy zostaly uporzadkowane (stanowisko = h2, sekcje = h3),
   a rozmiary wyrownujemy tutaj, zeby uklad wygladal dokladnie tak jak dotad.
   ------------------------------------------------------------------------- */
.entry-content h2.cdit-osoba__rola {
	font-size: 25px;
	font-weight: 700;
	color: var(--cdit-navy);
}

.entry-content .cdit-osoba__sekcja .stk-block-heading__text,
.entry-content h3.stk-block-heading__text {
	font-size: 25px;
	line-height: 1.5;
}

@media (max-width: 600px) {
	.entry-content h2.cdit-osoba__rola,
	.entry-content .cdit-osoba__sekcja .stk-block-heading__text,
	.entry-content h3.stk-block-heading__text { font-size: 21px; }
}

/* -------------------------------------------------------------------------
   28. PRZYCIENIENIE NAGLOWKA PODSTRONY
   Naglowek sklada sie z dwoch warstw: <figure> ze zdjeciem (ustawiona
   bezwzglednie, z-index 1) i <header> z tytulem (z-index 2). Przycienienie
   wchodzi miedzy nie jako pseudoelement samego naglowka - przy rownym z-index
   maluje sie po zdjeciu, a przed tytulem. Nie ruszamy przy tym pozycjonowania
   zdjecia: nadanie mu "position: relative" wypycha je z warstwy tla i naglowek
   rozpada sie na dwa bloki jeden pod drugim.
   ------------------------------------------------------------------------- */
.hero-section[data-type="type-2"]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(7, 42, 65, .3) 0%, rgba(7, 42, 65, .52) 45%, rgba(7, 42, 65, .68) 100%);
}

/* Naglowki kart na podstronie kontaktu ("Adres", "Godziny pracy", "Kontakt").
   Podniesione z h5 na h2, zeby po tytule strony nie bylo skoku poziomow -
   rozmiar zostaje taki jak byl. Wymuszenie jest konieczne, bo Blocksy nadaje
   rozmiar naglowkom regula o wiekszej szczegolowosci niz nasza klasa. */
.entry-content .cdit-karta-naglowek h2.stk-block-heading__text,
.entry-content .cdit-karta-naglowek .stk-block-heading__text {
	font-size: 21px !important;
	line-height: 1.4 !important;
}



/* -------------------------------------------------------------------------
   30. IKONY SPOŁECZNOŚCIOWE W NAGŁÓWKU
   Były dwoma czarnymi znakami postawionymi luzem przy lewej krawędzi -
   nie należały wizualnie do niczego. Dostają taki sam kafel jak ikony
   w pasku pod nagłówkiem: okrągły podkład w kolorze marki, granatowy rysunek,
   pełny kolor po najechaniu. Pole dotyku ma wymagane 44 px.
   ------------------------------------------------------------------------- */
.ct-header .ct-social-box {
	gap: .4rem;
}

.ct-header .ct-social-box a {
	width: 40px;
	height: 40px;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--cdit-blue-tint);
	color: var(--cdit-navy);
	transition: background-color var(--cdit-przejscie), color var(--cdit-przejscie), transform var(--cdit-przejscie);
}

.ct-header .ct-social-box a:hover,
.ct-header .ct-social-box a:focus-visible {
	background: var(--cdit-blue-dark);
	color: #fff;
	transform: translateY(-1px);
}

.ct-header .ct-social-box a svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.ct-header .ct-social-box .ct-icon-container {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* -------------------------------------------------------------------------
   31. ARCHIWUM BLOGA - UKŁAD KASKADOWY (MASONRY)
   Karty mają różną wysokość (różna długość tytułu i zapowiedzi), więc na
   równej siatce zostawiały puste pasy pod krótszymi wpisami. Układ kolumnowy
   układa je jedna pod drugą, bez dziur.

   Świadomy kompromis: przy kolumnach kolejność czytania biegnie w dół kolumny,
   a nie w poprzek rzędu. Dla archiwum bloga, gdzie wpisy są niezależne, to nie
   przeszkadza; przy treści czytanej po kolei byłby to błąd.
   ------------------------------------------------------------------------- */
@media (min-width: 1000px) {
	.blog .entries[data-layout],
	.archive .entries[data-layout],
	.search .entries[data-layout] {
		display: block !important;
		columns: 3;
		column-gap: 1.6rem;
	}
}

@media (min-width: 700px) and (max-width: 999px) {
	.blog .entries[data-layout],
	.archive .entries[data-layout] {
		display: block !important;
		columns: 2;
		column-gap: 1.3rem;
	}
}

.blog .entries[data-layout] > .entry-card,
.archive .entries[data-layout] > .entry-card,
.search .entries[data-layout] > .entry-card {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin: 0 0 1.6rem;
	display: block;
	background: #fff;
	border: 1px solid var(--cdit-line);
	border-radius: var(--cdit-radius);
	overflow: hidden;
	box-shadow: var(--cdit-cien);
	transition: box-shadow var(--cdit-przejscie), transform var(--cdit-przejscie), border-color var(--cdit-przejscie);
}

.blog .entries .entry-card:hover,
.archive .entries .entry-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--cdit-cien-hover);
	border-color: #c3daea;
}

/* Zdjęcie bez wymuszonych proporcji - to ono nadaje kartom różną wysokość
   i tworzy efekt kaskady. */
.blog .entries .entry-card .ct-media-container,
.archive .entries .entry-card .ct-media-container {
	margin: 0;
	border-radius: 0;
}

.blog .entries .entry-card .ct-media-container img,
.archive .entries .entry-card .ct-media-container img {
	width: 100%;
	height: auto;
	display: block;
}

/* Odstepy wewnetrzne dajemy DOPELNIENIEM, nie marginesem.
   Elementy karty maja w Blocksy szerokosc 100% karty; margines 20 px po bokach
   dokladal sie do tej szerokosci i tekst wychodzil poza kartę (przy wlaczonym
   overflow: hidden po prostu sie ucinal). Dopelnienie przy box-sizing:
   border-box miesci sie w tej samej szerokosci. */
.blog .entries .entry-card > *,
.archive .entries .entry-card > *,
.search .entries .entry-card > * {
	margin-inline: 0 !important;
	max-width: 100%;
}

.blog .entries .entry-card .entry-meta,
.archive .entries .entry-card .entry-meta {
	padding: .9rem 1.25rem 0;
	margin-block: 0 !important;
	font-size: .82rem;
}

.blog .entries .entry-card .entry-title,
.archive .entries .entry-card .entry-title {
	padding: .55rem 1.25rem 0;
	margin-block: 0 !important;
	font-size: 1.12rem;
	line-height: 1.35;
}

.blog .entries .entry-card .entry-title a,
.archive .entries .entry-card .entry-title a {
	color: var(--cdit-navy);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.blog .entries .entry-card .entry-excerpt,
.archive .entries .entry-card .entry-excerpt {
	padding: .55rem 1.25rem 1.35rem;
	margin-block: 0 !important;
	color: var(--cdit-muted);
	font-size: .94rem;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.blog .entries .entry-card .entry-excerpt p,
.archive .entries .entry-card .entry-excerpt p { margin: 0; }

/* Zdjecie na gorze karty - bez zaokraglen wewnetrznych, bo obcina je juz karta. */
.blog .entries .entry-card > .ct-media-container,
.archive .entries .entry-card > .ct-media-container {
	display: block;
	width: 100%;
	margin: 0 !important;
	border-radius: 0;
}

/* Ozdobny separator motywu na karcie wpisu (::after z trescia "·····").
   Przy pierwotnym ukladzie karty pelnil role przerywnika; po przebudowie
   na karte z ramka i cieniem zostaje w powietrzu jako rzad kropek. */
.blog .entries .entry-card::after,
.archive .entries .entry-card::after,
.search .entries .entry-card::after {
	content: none;
}

/* -------------------------------------------------------------------------
   32. ZESPÓŁ (podstrona "O nas")

   Osiem osób, biogramy od trzech do dwunastu zdań, widoczne od razu -
   bez rozwijania. Przy takiej rozpiętości siatka kart nie ma sensu: karty
   miałyby skrajnie różną wysokość albo trzeba by chować treść.

   Stąd układ listowy, redakcyjny: zdjęcie w stałej kolumnie z lewej, tekst
   z prawej o czytelnej szerokości wiersza, osoby oddzielone cienką linią
   i dużym odstępem. Bez ramek i cieni - o rytmie decyduje typografia
   i światło, nie obudowa.
   ------------------------------------------------------------------------- */

/* Pasek specjalizacji - liczba osób i dziedziny wyliczone z danych. */
.cdit-specjalizacje {
	list-style: none;
	margin: 1.6rem 0 3rem;
	padding: 1.1rem 1.4rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.6rem;
	background: var(--cdit-blue-tint);
	border: 1px solid #cfe3f3;
	border-radius: var(--cdit-radius);
	font-size: .98rem;
}

.cdit-specjalizacje li {
	display: flex;
	align-items: baseline;
	gap: .45em;
	color: var(--cdit-navy);
}

/* Kropka rozdzielajaca dziedziny - bez niej lista zlewa sie w jedno zdanie. */
.cdit-specjalizacje li + li::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--cdit-blue-dark);
	opacity: .45;
	margin-right: .4em;
	align-self: center;
}

.cdit-specjalizacje__liczba { font-weight: 600; }
.cdit-specjalizacje b { font-size: 1.3rem; font-weight: 700; color: var(--cdit-blue-dark); }

/* Przelacznik dwoch czesci oferty.
   Nie jest to zakladka w sensie JS - obie listy sa na stronie i widoczne dla
   wyszukiwarki, a odnosniki tylko przewijaja do wlasciwej. Prostsze, dziala
   bez skryptu i nie chowa polowy oferty przed kimś, kto trafil tu z Google. */
.cdit-oferta-nav {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.6rem 0 2.4rem;
}

.cdit-oferta-nav a {
	display: inline-flex;
	align-items: center;
	padding: .55rem 1.1rem;
	border: 1px solid var(--cdit-line);
	border-radius: 999px;
	background: #fff;
	color: var(--cdit-navy);
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	transition: background-color var(--cdit-przejscie), border-color var(--cdit-przejscie), color var(--cdit-przejscie);
}

.cdit-oferta-nav a:hover,
.cdit-oferta-nav a:focus-visible {
	background: var(--cdit-blue);
	border-color: var(--cdit-blue);
	color: #fff;
}

/* Naglowek celu odnosnika chowalby sie pod przyklejonym naglowkiem strony. */
article .entry-content h2[id="dla-dzieci-i-mlodziezy"],
article .entry-content h2[id="dla-doroslych"] { scroll-margin-top: 7rem; }

.cdit-zespol { margin: 1.8rem 0 3rem; }

/* Podzial zespolu na specjalnosci.
   Naglowek grupy musi wyrazniej odcinac sie od nazwisk niz zwykly h3, bo stoi
   nad lista, w ktorej kazda osoba ma wlasny naglowek tego samego poziomu.
   Stad kreska u dolu i wieksza przerwa nad - inaczej czytelnik nie widzi,
   gdzie konczy sie jedna grupa, a zaczyna nastepna. */
article .entry-content h3.cdit-zespol-grupa {
	margin: 3rem 0 0;
	padding-bottom: .55rem;
	font-size: 1.3rem;
	/* Naglowki grup to teraz nazwy uslug ("Konsultacja i terapia psychologiczna
	   dzieci, mlodziezy i doroslych"), wiec na wezszym ekranie lamia sie na dwa
	   wiersze. Przy globalnej interlinii naglowkow 1,22 i wysokich wydluzeniach
	   Montserrata wiersze schodzilyby sie za blisko - patrz ta sama poprawka
	   w stopce. */
	line-height: 1.35;
	color: var(--cdit-navy);
	border-bottom: 2px solid var(--cdit-blue);
}

article .entry-content h3.cdit-zespol-grupa:first-of-type { margin-top: 1.8rem; }

/* Kontener zaraz po naglowku grupy nie potrzebuje wlasnego odstepu u gory -
   dawalby podwojna przerwe pod kreska. */
.cdit-zespol-grupa + .cdit-zespol { margin-top: 0; }

/* Trenerki TUS opisane sa w swoich grupach - tu zostaje sam odsylacz,
   zeby nie powtarzac tych samych biogramow drugi raz. */
.cdit-zespol-odnosnik {
	margin: 1.2rem 0 0;
	padding: 1rem 1.25rem;
	background: var(--cdit-surface);
	border-radius: var(--cdit-radius);
	color: var(--cdit-text);
	line-height: 1.7;
}

/* Karta osoby bez zdjecia: ramka zostaje jako rowna plama koloru, wiec siatka
   sie nie rozjezdza, a brak zdjecia nie wyglada na blad ladowania. */
.cdit-osoba__foto:empty { min-height: 0; }

.cdit-osoba {
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	gap: clamp(1.6rem, 1rem + 2.2vw, 3.2rem);
	align-items: start;
	padding-block: clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem);
	border-top: 1px solid var(--cdit-line);
}

.cdit-osoba:first-child { border-top: 0; padding-top: .5rem; }
.cdit-osoba:last-child { padding-bottom: .5rem; }

/* Zdjęcia są bardzo różne: od kwadratu 418x418 po portret 1707x2560.
   Wspólne kadrowanie 4:5 z punktem ciężkości u góry trzyma twarze w kadrze. */
.cdit-osoba__foto {
	aspect-ratio: 4 / 5;
	border-radius: var(--cdit-radius);
	overflow: hidden;
	background: var(--cdit-surface-2);
}

.cdit-osoba__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	display: block;
}

.cdit-osoba__stanowisko {
	margin: 0 0 .35rem;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--cdit-blue-dark);
	line-height: 1.4;
}

.cdit-osoba h3 {
	margin: 0 0 1.1rem;
	font-size: clamp(1.35rem, 1.15rem + .7vw, 1.7rem);
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--cdit-navy);
}

.cdit-osoba__opis {
	color: var(--cdit-text);
	font-size: 1rem;
	line-height: 1.72;
	max-width: 62ch;
}

.cdit-osoba__opis p { margin: 0 0 .9rem; }
.cdit-osoba__opis p:last-child { margin-bottom: 0; }

/* Zakres pracy jako osobny blok pod biogramem - wyraźnie oddzielony,
   bo to informacja innego rodzaju niż opis osoby. */
.cdit-osoba__zakres-blok {
	margin-top: 1.5rem;
	padding-top: 1.2rem;
	border-top: 1px dashed var(--cdit-line);
}

.cdit-osoba__etykieta {
	margin: 0 0 .7rem;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cdit-muted);
}

.cdit-osoba__zakres {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.cdit-osoba__zakres li {
	font-size: .88rem;
	line-height: 1.35;
	padding: .35em .8em;
	border-radius: 999px;
	background: var(--cdit-surface);
	border: 1px solid var(--cdit-line);
	color: var(--cdit-navy);
}

/* Znacznik odbiorcow stoi jako pierwszy i musi odrozniac sie od reszty:
   to jedyna informacja, ktora rodzic doroslego pacjenta sprawdza najpierw. */
.cdit-osoba__zakres li.cdit-osoba__odbiorcy {
	background: var(--cdit-blue-tint);
	border-color: #b9d8ee;
	color: var(--cdit-blue-darker);
	font-weight: 600;
}

@media (max-width: 900px) {
	.cdit-osoba { grid-template-columns: 180px minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.cdit-osoba {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}
	/* Na telefonie zdjęcie idzie nad tekst, w szerszym kadrze - portret 4:5
	   na całą szerokość ekranu zajmowałby pół widoku. */
	.cdit-osoba__foto { aspect-ratio: 3 / 2; }
	.cdit-osoba__foto img { object-position: center 22%; }
	.cdit-osoba__stanowisko { font-size: 13px; }
	.cdit-osoba__zakres li { font-size: 13px; }
	.cdit-osoba__etykieta { font-size: 13px; }
	.cdit-specjalizacje { gap: .45rem 1.1rem; }
}

@media print {
	.cdit-osoba { break-inside: avoid; }
}