/*
Theme Name: DK Nowy Bieżanów
Theme URI: https://www.dknowybiezanow.pl
Description: Motyw potomny Kadence dla Domu Kultury SM „Nowy Bieżanów”. Typografia i kontrast dobrane pod odbiorcę starszego.
Author: Michał Winiarski
Author URI: https://frontendme.pl
Template: kadence
Version: 0.2.0
Requires PHP: 7.4
Text Domain: dk-nowy-biezanow
*/

/* --- Miara tekstu --------------------------------------------------------
   Wiersz czyta się dobrze przy 60–75 znakach. Przy szerokości treści 1178 px
   akapity miały ich **131** — oko gubi początek następnej linii i tekst
   „wygląda źle", choć krój i odstępy są w porządku.

   Zasada: ogranicza się TEKST CIĄGŁY, a nie sekcję. Kafelki, karty, siatki
   i galerie mają zostać szerokie, bo tam nośnikiem jest zdjęcie, nie zdanie.
   Dlatego reguły celują w bezpośrednie dzieci pojemnika z treścią — element
   w kolumnie, karcie albo siatce nigdy nie jest bezpośrednim dzieckiem. */

:root {
	/* 34em przy tekście 18 px to ok. 610 px, czyli ~70 znaków w wierszu.
	   Celowo NIE `ch`: w tym kroju „0” jest szerokie i 68ch dawało 770 px. */
	--dk-miara: 34em;
}

.entry-content > :is(p, ul, ol, h2, h3, h4, blockquote),
.dk-pas .wp-block-group__inner-container > :is(p, ul, ol, h2, h3, h4, blockquote),
.dk-zajecie-tresc > :is(p, ul, ol, h2, h3, h4, blockquote),
.dk-aktualnosc-tresc > :is(p, ul, ol, h2, h3, h4, blockquote),
.dk-plansza-tresc > :is(p, ul, ol, blockquote) {
	max-width: var(--dk-miara);
}

/* Wyjątki: to nie jest tekst ciągły, tylko element układu. */
/* Wyjątki: to nie jest tekst ciągły, tylko element układu. Listy z klasą `dk-`
   są w tym motywie siatkami kafelków (`ul.dk-grupy`, `ul.dk-zajecia__siatka`),
   więc zwężenie połamałoby je na jedną kolumnę. Akapitów to NIE dotyczy. */
.entry-content > .dk-pas,
.entry-content > [class*="wp-block-columns"],
.entry-content > [class*="wp-block-gallery"],
.dk-pas .wp-block-group__inner-container > :is(ul, ol)[class*="dk-"],
.dk-pas .wp-block-group__inner-container > [class*="wp-block-columns"],
.dk-pas .wp-block-group__inner-container > [class*="wp-block-gallery"] {
	max-width: none;
}

/* Widoczny fokus klawiatury – bez tego nawigacja bez myszki jest nieczytelna. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--global-palette1);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Podkreślenie linków w treści. Sam kolor nie wystarczy przy pogorszonym widzeniu barw. */
.entry-content a:not(.button):not(.wp-block-button__link) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Cel dotknięcia min. 44 px – wytyczne WCAG 2.2 dla odbiorcy starszego.
   ⚠️ Celowo NIE `button` w ogólności. Pierwsza wersja tej reguły łapała każdy
   przycisk na stronie, łącznie z kropkami paginacji karuzeli Splide — rozciągała
   je z kółek w pionowe elipsy. Wymieniamy więc to, co faktycznie jest celem
   akcji dla palca, a kontrolki interfejsu zostawiamy ich własnym rozmiarom. */
.entry-content a:not(.button),
.main-navigation a,
.wp-block-button__link,
.button,
button[type="submit"],
.drawer-sub-toggle,
.popup-toggle button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Hamburger Kadence ma natywnie 37×31 px, czyli poniżej progu. To jedyne wejście
   do nawigacji na telefonie, więc powiększamy sam obszar dotknięcia paddingiem,
   zostawiając kreski w ich rozmiarze. */
.mobile-toggle-open-container .menu-toggle-open {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --- Stopka: cztery kolumny --------------------------------------------- */

.dk-footer-heading {
	font-size: 1.05rem;
	line-height: 1.4;
	margin: 0 0 0.6em;
	color: var(--global-palette3);
}

.dk-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dk-footer-list li + li {
	margin-top: 0.15em;
}

/* Odstęp pionowy zamiast 44 px wysokości – w kolumnie linki stoją jeden pod
   drugim, więc cel dotknięcia buduje padding, nie min-height. */
.dk-footer-list a,
.dk-footer-nap a {
	display: inline-block;
	padding: 0.35em 0;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.dk-footer-name {
	margin-bottom: 0.4em;
}

.dk-footer-nap p {
	margin: 0 0 0.8em;
}

/* --- Nagłówek ------------------------------------------------------------ */

/* Nazwa jest długa i wypychała menu do drugiej linii. */
.site-branding .site-title {
	font-size: 1.25rem;
	line-height: 1.3;
}

/* Numer telefonu nie może się łamać w połowie. */
.header-navigation .header-button,
.site-header-item .kb-button,
.header-html .header-button {
	white-space: nowrap;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a {
	padding-left: 0.5em;
	padding-right: 0.5em;
}

/* Podmenu: Kadence daje ~14 px, za mało dla odbiorcy, pod którego dobrana
   jest reszta typografii. */
.header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a {
	font-size: 1rem;
	line-height: 1.5;
}

/* „Zajęcia” łączy dwa porządki – temat i grupę wiekową. Kreska oddziela
   je wzrokowo, żeby lista dziewięciu pozycji nie czytała się jak jeden ciąg. */
.header-navigation .sub-menu li.dk-menu-sep {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	margin-top: 0.35em;
	padding-top: 0.35em;
}

/* --- Promień zaokrągleń ---------------------------------------------------
   Kadence domyślnie prawie nie zaokrągla. Jedna skala dla całej strony. */

:root {
	--dk-radius-s: 10px;
	--dk-radius-m: 18px;
	--dk-radius-pill: 999px;
}

.wp-block-button__link,
.wp-element-button,
button, .button,
.header-navigation .header-button,
.dk-pigulka,
.dk-znacznik {
	border-radius: var(--dk-radius-pill);
}

.wp-block-image img,
.wp-block-cover,
.dk-obraz img,
.entry-content .wp-block-group.has-background {
	border-radius: var(--dk-radius-m);
	overflow: hidden;
}

/* --- Nagłówek: nazwa nad nawigacją ---------------------------------------- */

/* Logo niesie już pełną nazwę, więc tytuł tekstowy tylko by ją dublował.
   Zostaje w kodzie dla czytników ekranu. */
.site-branding .site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Dolny rząd z menu oddzielony cienką kreską, a nie cieniem – spokojniej. */
.site-main-header-wrap {
	border-top: 1px solid var(--global-palette7);
}

.main-navigation .primary-menu-container > ul > li.menu-item > a {
	font-size: 1.05rem;
}

/* --- Rozwijane menu: fiolet marki zamiast czerni -------------------------- */

.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation .header-menu-container ul ul.submenu {
	background: var(--global-palette2);
	border-radius: var(--dk-radius-s);
	overflow: hidden;
	padding: 6px 0;
}

.header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a {
	color: #fff;
}

.header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.header-navigation .sub-menu li.dk-menu-sep {
	border-top: 1px solid rgba(255, 255, 255, 0.28);
}

/* --- Kafelki grup wiekowych ---------------------------------------------- */

.dk-kafelki {
	gap: 18px;
}

.dk-kafel .wp-block-cover__inner-container {
	align-self: flex-end;
	width: 100%;
	padding: 0 18px 16px;
}

.dk-kafel__nazwa {
	font-size: 1.35rem;
	line-height: 1.25;
	margin: 0;
	color: #fff;
}

.dk-kafel__nazwa a {
	color: inherit;
	text-decoration: none;
}

.dk-kafel__nazwa a:hover,
.dk-kafel__nazwa a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Cały kafelek klikalny – palec trafia w zdjęcie, nie w sam napis. */
.dk-kafel__nazwa a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.dk-kafel {
	position: relative;
}

.dk-kafel__wiek {
	margin: 0.2em 0 0;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.85);
}

/* --- Pigułki tematów ------------------------------------------------------ */

.dk-tematy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 26px 0 28px;
}

.dk-tematy__etykieta {
	font-weight: 600;
	margin-right: 6px;
}

.dk-pigulka {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 18px 9px 10px;
	min-height: 44px;
	border: 1px solid var(--global-palette6);
	background: #fff;
	color: var(--global-palette2);
	text-decoration: none;
}

.dk-pigulka:hover,
.dk-pigulka:focus-visible {
	border-color: var(--global-palette1);
	background: var(--global-palette8);
}

.dk-pigulka__ikona {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--global-palette8);
	flex: 0 0 auto;
}

.dk-pigulka__ikona svg {
	width: 17px;
	height: 17px;
	fill: var(--global-palette1);
}

.dk-pigulka__nazwa {
	font-weight: 600;
}

.dk-pigulka__licznik {
	color: var(--global-palette5);
}

/* --- Listy aktualności i wydarzeń ---------------------------------------- */

.dk-podtytul {
	margin-top: -0.4em;
	color: var(--global-palette5);
}

.dk-lista {
	list-style: none;
	margin: 1.6em 0 0;
	padding: 0;
}

.dk-lista__pozycja {
	padding: 0 0 1.1em;
	margin-bottom: 1.1em;
	border-bottom: 1px solid var(--global-palette7);
}

.dk-lista__pozycja:last-child {
	border-bottom: 0;
}

.dk-lista__data {
	display: block;
	margin-bottom: 0.25em;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--global-palette1);
}

.dk-lista__tytul {
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--global-palette3);
	text-decoration: none;
}

.dk-lista__tytul:hover,
.dk-lista__tytul:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.dk-lista__znaczniki {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 0.55em;
}

.dk-znacznik {
	padding: 3px 12px;
	font-size: 0.85rem;
	background: var(--global-palette8);
	color: var(--global-palette1);
	text-decoration: none;
}

.dk-znacznik:hover,
.dk-znacznik:focus-visible {
	background: var(--global-palette7);
}

.dk-wiecej a {
	font-weight: 600;
	text-decoration: none;
}

.dk-wiecej a:hover,
.dk-wiecej a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* --- Stopka na fiolecie --------------------------------------------------- */

.site-footer {
	background: var(--global-palette2);
	color: #fff;
	border-radius: var(--dk-radius-m) var(--dk-radius-m) 0 0;
}

.site-footer .site-footer-row-container-inner {
	background: transparent;
}

.site-top-footer-wrap {
	padding-top: 44px;
	padding-bottom: 12px;
}

.dk-footer-heading,
.dk-footer-name {
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.site-footer .dk-footer-list a,
.site-footer .dk-footer-nap,
.site-footer .site-info,
.site-footer .site-info a {
	color: #fff;
}

/* --- Strona „Dom Kultury" (O nas) ---------------------------------------
   Była ostatnią stroną na starym edytorze: `[gallery]` z jednym zdjęciem
   wyświetlanym jako miniatura 143 px i `<strong>BUDYNEK</strong>` udające
   nagłówek. Teraz trzy pasy, zdjęcie budynku obok historii. */

.dk-onas-hero {
	align-items: center;
	gap: 40px;
}

.dk-onas-zdjecie img {
	border-radius: var(--dk-radius-m);
	width: 100%;
	height: auto;
}

/* Adres nad mapą. Mapa jest obrazkiem — adresu z niej nie da się skopiować
   ani wkleić do nawigacji, a na telefonie łatwiej kliknąć link niż przepisywać. */
.dk-mapa-adres {
	margin-bottom: 20px;
}

/* Zastrzeżenie o godzinach w stopce. Domyślny kolor drobnego druku
   (`--global-palette5`) jest ciemnoszary — na fiolecie nieczytelny. */
.site-footer .dk-godziny-biura__uwaga {
	color: rgba(255, 255, 255, 0.78);
	max-width: 34ch;
}

/* W wąskiej kolumnie stopki etykieta i godziny w jednej linii łamały się
   w środku zakresu („12:00–” / „20:00”). Każde w swojej linii. */
.dk-footer-godziny {
	margin-bottom: 0.8em;
}

.site-footer .dk-godziny-biura,
.site-footer .dk-godziny-biura strong {
	display: block;
}

.dk-nowrap {
	white-space: nowrap;
}

/* W kolumnach nawigacyjnych podkreślenie tylko przy najechaniu – cztery
   kolumny podkreślonych linków to ściana kresek. */
.site-footer .dk-footer-list a {
	text-decoration: none;
}

.site-footer .dk-footer-list a:hover,
.site-footer .dk-footer-list a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.site-footer :focus-visible {
	outline-color: #fff;
}

.site-bottom-footer-wrap {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.85);
}

/* --- Wynajem sal ---------------------------------------------------------- */

.dk-wynajem .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 767px) {
	.dk-kafelki {
		gap: 12px;
	}

	.dk-tematy {
		gap: 8px;
	}
}

/* Reguła podkreślania linków w treści nie może dotykać elementów, które są
   przyciskami w przebraniu. */
.entry-content a.dk-pigulka:not(.button),
.entry-content a.dk-znacznik:not(.button),
.entry-content .dk-kafel__nazwa a:not(.button),
.entry-content a.dk-lista__tytul:not(.button),
.entry-content .dk-wiecej a:not(.button) {
	text-decoration: none;
}

.entry-content a.dk-pigulka:hover,
.entry-content a.dk-pigulka:focus-visible,
.entry-content a.dk-znacznik:hover,
.entry-content a.dk-znacznik:focus-visible {
	text-decoration: none;
}

/* Cel dotknięcia 44 px liczy się dla pigułek jako całości, nie dla tekstu
   w środku – inaczej inline-flex rozpycha wnętrze. */
.entry-content .dk-pigulka span,
.entry-content .dk-lista a {
	min-height: 0;
	display: inline;
}

.entry-content .dk-pigulka span.dk-pigulka__ikona {
	display: inline-flex;
}

/* --- Wyróżnienie „Miejsce przyjazne Seniorom" ----------------------------- */

/* Znak certyfikacji jest okrągły i w obcych barwach – zostaje bez zaokrąglenia
   i bez kadrowania, bo to cudzy znak, nie nasza fotografia. */
.dk-plakietka img {
	border-radius: 0;
	max-width: 160px;
	height: auto;
	mix-blend-mode: multiply;
}

.dk-wyroznienie .wp-block-column:first-child {
	text-align: center;
}

@media (max-width: 781px) {
	.dk-wyroznienie .wp-block-column:first-child {
		flex-basis: auto !important;
	}
}

/* Kadence trzyma wcięcie list w `.entry-content ul`, więc samo `padding: 0`
   na klasie przegrywa specyficznością. */
.entry-content ul.dk-lista,
.site-footer ul.dk-footer-list {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

/* --- Poprawki po przeglądzie 2026-09-05 ---------------------------------- */

/* Nazwa i wiek to jedna informacja, a rozdzielał je pełny odstęp międzyblokowy
   z bloku cover. */
.dk-kafel .wp-block-cover__inner-container > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.dk-kafel__wiek {
	margin-top: 0.15em;
}

/* Kółko pod ikoną miało tło palette8 (#fbfafd) – na białej pigułce niewidoczne. */
.dk-pigulka__ikona {
	width: 34px;
	height: 34px;
	background: rgba(96, 60, 156, 0.12);
}

.dk-pigulka__ikona svg {
	width: 21px;
	height: 21px;
	fill: currentColor;
	color: var(--global-palette1);
}

.dk-pigulka:hover .dk-pigulka__ikona,
.dk-pigulka:focus-visible .dk-pigulka__ikona {
	background: rgba(96, 60, 156, 0.2);
}


/* --- Stopka: linki NAP były czarne, bo kolor linku Kadence bije kolor
       odziedziczony po kontenerze. --------------------------------------- */

.site-footer a,
.site-footer .dk-footer-nap a,
.site-footer .site-info a {
	color: #fff;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: rgba(255, 255, 255, 0.82);
}

.dk-wynajem__kontakt {
	font-size: 0.98rem;
	color: var(--global-palette5);
}

/* --- Spis „Czego u nas szukają" ------------------------------------------ */

.dk-spis__siatka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px 32px;
	margin-top: 20px;
}

.dk-spis__naglowek {
	font-size: 1.05rem;
	margin: 0 0 0.3em;
}

.dk-spis__naglowek a {
	color: var(--global-palette1);
	text-decoration: none;
}

.dk-spis__naglowek a:hover,
.dk-spis__naglowek a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Frazy zostają zwykłym tekstem. Podlinkowanie każdej z osobna zrobiłoby
   z sekcji farmę linków, a nagłówek grupy i tak prowadzi we właściwe miejsce. */
.dk-spis__frazy {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.65;
	color: var(--global-palette5);
}

/* Akapit w hero niesie pełną nazwę i cały zakres działalności, więc jest
   dłuższy niż typowy podtytuł – potrzebuje węższej miary i mniejszego stopnia. */
.wp-block-column .wp-block-heading + p {
	max-width: 52ch;
}

/* Siedem grup układa się parzyściej w czterech kolumnach niż w trzech. */
@media (min-width: 1100px) {
	.dk-spis__siatka {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --- H1: nazwa instytucji + hasło w jednym nagłówku ----------------------- */

/* Nazwa niesie markę, hasło mówi po co tu jesteś. Jeden nagłówek, dwa poziomy
   ważności – hasło jest lżejsze, żeby nie konkurowało z nazwą. */
.dk-hero__haslo {
	display: block;
	margin-top: 0.22em;
	font-size: 0.62em;
	font-weight: 500;
	line-height: 1.3;
	color: var(--global-palette1);
}

/* --- Logo w stopce -------------------------------------------------------- */

/* Znak jest niebieski, a stopka fioletowa – w stopce siedzi wersja biała
   z przezroczystym tłem (załącznik 3955), nie ta sama co w nagłówku. */
.dk-footer-logo {
	margin: 0 0 1em;
}

.dk-footer-logo img {
	display: block;
	width: 116px;
	height: auto;
	border-radius: 0;
}


/* --- Poprawki kafelków po przeglądzie 2026-09-07 -------------------------- */

/* Napis siedział zbyt wysoko i zasłaniał twarze na zdjęciach. */
.dk-kafel .wp-block-cover__inner-container {
	padding: 0 18px 12px;
}

.dk-kafel__nazwa {
	margin-bottom: 0;
	line-height: 1.15;
}

.dk-kafel__wiek {
	margin-top: 0.05em;
	line-height: 1.2;
}

/* Ikony w pigułkach to ścieżki z Font Awesome Free 5.15.3 (CC BY 4.0),
   wyciągnięte z fontu SVG, który leżał już w katalogu Elementora.
   Font SVG ma oś Y skierowaną w górę, stąd transform w znaczniku. */
.dk-pigulka__ikona svg {
	width: 19px;
	height: 19px;
}

/* --- Rozwijane menu: pozycja rodzica na górze ----------------------------- */

/* Pierwsza pozycja w każdym podmenu prowadzi tam, gdzie nagłówek. Kto najedzie
   i nie domyśli się, że sam nagłówek jest klikalny, i tak ma drogę do archiwum.
   Nagłówek zostaje linkiem <a>, a nie przyciskiem: inaczej znikłby Cmd+klik,
   otwieranie w nowej karcie i link dla wyszukiwarek. */
.header-navigation .sub-menu li.menu-item:first-child > a {
	font-weight: 600;
}

.header-navigation .sub-menu li.menu-item:first-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
	margin-bottom: 0.35em;
	padding-bottom: 0.35em;
}

/* Podmenu otwiera się też z klawiatury – bez tego dostępne było wyłącznie myszą. */
.header-navigation .menu-item-has-children:focus-within > .sub-menu {
	display: block;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

/* --- Podmenu: pojedyncza kreska zamiast podwójnej ------------------------- */

/* Kadence rysuje `border-bottom` na KAŻDEJ pozycji podmenu, a nasz separator
   dokłada `border-top` — nad grupą wychodziły dwie kreski blisko siebie.
   Zdejmujemy dolną z pozycji tuż przed separatorem i z ostatniej w liście. */
.header-navigation .sub-menu li.menu-item:has(+ li.dk-menu-sep),
.header-navigation .sub-menu li.menu-item:last-child,
.header-navigation .sub-menu li.menu-item:first-child {
	border-bottom: 0;
}

/* Pierwsza pozycja („Wszystkie zajęcia") ma własną kreskę pod spodem
   i nie potrzebuje tej od Kadence. */
.header-navigation .sub-menu li.menu-item:first-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

/* --- The Events Calendar: strzałki nawigacji po miesiącach ---------------- */

/* Wtyczka wypuszcza „‹" i „›" o różnej wysokości linii, przez co siedzą
   na różnym poziomie względem przycisku „Dzisiaj". */
.tribe-events-c-nav__prev,
.tribe-events-c-nav__next,
.tribe-events-c-top-bar__nav-list-item,
.tribe-events-c-top-bar__nav .tribe-common-c-btn-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	vertical-align: middle;
}

.tribe-events-c-top-bar__nav-list {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* --- Szuflada mobilna: fiolet marki zamiast czerni ------------------------ */

/* Kadence nie wystawia tła szuflady jako opcji motywu, więc idzie CSS-em.
   Czarne tło nie trzymało się z fioletowym podmenu na desktopie i miało
   za mały kontrast wobec reszty strony. */
.popup-drawer .drawer-inner,
.popup-drawer.popup-drawer-layout-sidepanel .drawer-inner {
	background: var(--global-palette2);
}

.popup-drawer .drawer-inner .drawer-content a,
.popup-drawer .drawer-inner .drawer-toggle,
.popup-drawer .drawer-inner .drawer-sub-toggle {
	color: #fff;
}

/* Kreski między pozycjami: 10% bieli ginęło na fiolecie. */
.popup-drawer .mobile-navigation li.menu-item,
.popup-drawer .drawer-nav-drop-wrap {
	border-color: rgba(255, 255, 255, 0.22);
}

.popup-drawer .mobile-navigation li.dk-menu-sep {
	border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.popup-drawer .drawer-inner :focus-visible {
	outline-color: #fff;
}

/* Cel dotknięcia w szufladzie – palec, nie kursor. */
.popup-drawer .mobile-navigation li.menu-item > a,
.popup-drawer .drawer-nav-drop-wrap > a {
	min-height: 48px;
	display: flex;
	align-items: center;
}

/* --- Archiwum zajęć ------------------------------------------------------- */

.dk-zajecia {
	padding-bottom: 48px;
}

.dk-zajecia__tytul {
	margin: 0 0 0.4em;
}

/* Pasek filtrów */

.dk-filtry {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 36px;
	padding: 20px 0;
	background: transparent;
	border-radius: 0;
}

/* Etykieta nad rzędem, nie obok: „Wybierz temat zajęć" nie zmieściłoby się
   w jednej linii z pigułkami bez ściskania ich na wąskich ekranach. */
.dk-filtry__rzad {
	display: block;
}

.dk-filtry__etykieta {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: var(--global-palette5);
}

.dk-filtr {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--global-palette6);
	border-radius: var(--dk-radius-pill);
	background: #fff;
	color: var(--global-palette2);
	text-decoration: none;
}

.dk-filtr:hover,
.dk-filtr:focus-visible {
	border-color: var(--global-palette1);
	background: var(--global-palette7);
}

/* Stan wybrany niesie kolor ORAZ grubość — sam kolor to za mało,
   gdy ktoś nie rozróżnia barw. */
.dk-filtr--aktywny {
	background: var(--global-palette1);
	border-color: var(--global-palette1);
	color: #fff;
	font-weight: 600;
}

.dk-filtr--aktywny:hover,
.dk-filtr--aktywny:focus-visible {
	background: var(--global-palette2);
	border-color: var(--global-palette2);
	color: #fff;
}

/* Sekcje grup wiekowych */

.dk-zajecia__grupa + .dk-zajecia__grupa {
	margin-top: 44px;
}

.dk-zajecia__naglowek {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 0.2em;
	padding-bottom: 0.3em;
	border-bottom: 2px solid var(--global-palette7);
	font-size: 1.6rem;
}

.dk-zajecia__ile {
	font-size: 1rem;
	font-weight: 500;
	color: var(--global-palette5);
}

.dk-zajecia__opis,
.dk-zajecia__licznik {
	margin: 0 0 1.2em;
	color: var(--global-palette5);
}

/* Siatka zajęć */

.dk-zajecia__siatka {
	display: grid;
	/* Trzy kolumny zamiast auto-fill: szersza karta mieści zajawkę klientki
	   w mniejszej liczbie linijek, więc różnice wysokości są mniej widoczne. */
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 1.2em 0 0;
	padding: 0;
	list-style: none;
}

.dk-zajecie {
	margin: 0;
}

.dk-zajecie__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--global-palette7);
	border-radius: var(--dk-radius-m);
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	color: inherit;
}

.dk-zajecie__link:hover,
.dk-zajecie__link:focus-visible {
	border-color: var(--global-palette1);
	box-shadow: 0 4px 16px rgba(60, 48, 108, 0.12);
}

.dk-zajecie__foto {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--global-palette7);
	overflow: hidden;
}

.dk-zajecie__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.dk-zajecie__tresc {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.3em;
	padding: 14px 16px 16px;
}

.dk-zajecie__tytul {
	font-weight: 600;
	line-height: 1.35;
	color: var(--global-palette3);
}

/* Znacznik tematu wygląda jak pigułka filtra i siedzi na dole karty.
   Dzięki `margin-top: auto` wolne miejsce przy krótkiej zajawce zbiera się
   NAD nim, więc czyta się jak oddech, a nie jak dziura po uciętym tekście. */
.dk-zajecie__temat {
	align-self: flex-start;
	margin-top: auto;
	padding: 5px 14px;
	border-radius: var(--dk-radius-pill);
	background: var(--global-palette8);
	color: var(--global-palette2);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.4;
}

.dk-zajecie__opis {
	margin-bottom: 10px;
}

.dk-zajecia__pusto {
	padding: 28px;
	background: var(--global-palette8);
	border-radius: var(--dk-radius-m);
}

/* Karuzela powiązanych wpisów (Splide w Kadence): kropki i strzałki mają
   zostać takie, jakimi zrobił je autor komponentu. */
.splide__pagination__page,
.splide__arrow {
	min-height: 0;
	display: inline-block;
}

/* --- Filtry: pigułki na dużym ekranie, selecty na telefonie -------------- */

/* Domyślnie widoczne są pigułki (linki), formularz jest schowany.
   Pigułki działają bez JavaScriptu, dają się zaindeksować i wysłać linkiem —
   dlatego to one są wersją podstawową, a select tylko wariantem dotykowym. */
.dk-filtry-mobile {
	display: none;
}

.dk-filtry__opcje {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Filtr ma stać blisko tego, co filtruje. Między pigułkami a pierwszą kartą
   było 140 px pustki — rząd filtrów wyglądał, jakby wisiał sam w powietrzu. */
.dk-pas--hero:has(.dk-filtry--pigulki) {
	padding-bottom: 20px;
}

.dk-pas--hero:has(.dk-filtry--pigulki) .dk-filtry {
	margin-bottom: 0;
}


@media (max-width: 767px) {
	/* Chowamy tylko filtry, które mają wariant mobilny (hub zajęć).
	   `.dk-filtry--pigulki` zostaje — patrz komentarz w `inc-aktualnosci.php`. */
	.dk-filtry:not(.dk-filtry--pigulki) {
		display: none;
	}

	.dk-filtry--pigulki {
		margin-bottom: 28px;
	}

	.dk-filtry-mobile {
		display: block;
		margin: 0 0 28px;
		padding: 18px 0;
		background: transparent;
		border-radius: 0;
	}

	.dk-filtry-mobile__pole {
		margin: 0 0 12px;
	}

	.dk-filtry-mobile label {
		display: block;
		margin-bottom: 4px;
		font-weight: 600;
		font-size: 0.95rem;
		color: var(--global-palette5);
	}

	.dk-filtry-mobile select {
		width: 100%;
		min-height: 48px;
		padding: 10px 14px;
		border: 1px solid var(--global-palette6);
		border-radius: var(--dk-radius-s);
		background: #fff;
		color: var(--global-palette3);
		font-size: 1rem;
	}

	.dk-filtry-mobile__akcja {
		margin: 0;
	}

	.dk-filtry-mobile__akcja .button {
		width: 100%;
		justify-content: center;
		min-height: 48px;
		background: var(--global-palette1);
		border: 0;
		color: #fff;
		border-radius: var(--dk-radius-pill);
		font-weight: 600;
	}

	/* Gdy JavaScript przejmie wysyłkę, przycisk jest zbędny. */
	.dk-filtry-mobile.dk-auto .dk-filtry-mobile__akcja {
		display: none;
	}

	.dk-zajecia__siatka {
		grid-template-columns: 1fr;
		gap: 14px;
	}


	/* Karta zostaje pionowa jak na szerokim ekranie: zdjęcie u góry, tekst pod nim.
	   Układ poziomy z miniaturą 116 px zostawiał przy dłuższej zajawce wysoki pusty
	   słup obok zdjęcia. Kadr spłaszczony do 16:9, żeby lista nie urosła nadmiernie. */
	.dk-zajecie__foto {
		aspect-ratio: 16 / 9;
	}

	.dk-zajecie__tresc {
		padding: 12px 14px 14px;
	}
}

/* Między telefonem a szerokim ekranem trzy kolumny robią się za wąskie
   na tytuł zajęcia w dwóch linijkach. */
@media (min-width: 768px) and (max-width: 1050px) {
	.dk-zajecia__siatka {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Przyklejony nagłówek: co trzeba dołożyć ----------------------------- */

/* Przyklejony pasek zasłania to, do czego przeskakuje kotwica albo klawisz Tab.
   Wytyczne mówią wprost: sticky header nie może zakrywać elementu z fokusem. */
html {
	scroll-padding-top: 130px;
}

@media (max-width: 767px) {
	html {
		scroll-padding-top: 96px;
	}
}

/* Cień pojawia się dopiero po odklejeniu od góry – na samej górze strony
   nagłówek ma leżeć płasko. */
.site-header-inner-wrap.item-is-fixed:not(.item-at-start) {
	box-shadow: 0 2px 14px rgba(60, 48, 108, 0.1);
}

/* Kto wyłączył animacje w systemie, nie chce też płynnego przewijania
   po kliknięciu „do góry". */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Przycisk powrotu nie może zasłaniać treści na wąskim ekranie. */
@media (max-width: 767px) {
	#kt-scroll-up {
		right: 12px;
		bottom: 12px;
	}
}

/* --- Powitanie na stronie głównej ----------------------------------------- */

/* Tło, odstępy i zaokrąglenie siedziały wcześniej w atrybutach bloku. Klasa
   presetu koloru (`has-theme-palette-8-background-color`) dostaje od globalnych
   stylów WordPressa `!important`, więc żadnego z tych ustawień nie dało się
   nadpisać w zapytaniu medialnym bez własnego `!important`. Całość przeniesiona
   tutaj; w edytorze blok jest już czysty. */
.wp-block-column.dk-hero {
	padding: 48px 40px;
	border-radius: 18px;
	background: var(--global-palette8);
}

/* Na telefonie kafla nie ma. Przy 390 px sama ramka zjadała 80 px szerokości,
   przez co tekst dostawał 246 z 390 px. Bez tła i bocznych odstępów zostaje
   pełna kolumna treści, a odstępy pionowe schodzą z 48 do 24 px. */
@media (max-width: 767px) {
	/* Kadence emituje `:root .has-theme-palette-8-background-color` (0,2,0), czyli
	   remis z `.wp-block-column.dk-hero` — a przy remisie wygrywa arkusz ładowany
	   później, czyli Kadence. Stąd trzeci człon selektora. */
	.entry-content .wp-block-column.dk-hero {
		padding: 24px 0;
		border-radius: 0;
		background: transparent;
	}

	.dk-hero h1 {
		margin-bottom: 0.35em;
	}

	.dk-hero p {
		margin-bottom: 1.4em;
	}
}

/* --- Kafelki grup wiekowych na stronie głównej ---------------------------- */

/* Tekst pod zdjęciem, nie na nim. Napis na fotografii jest czytelny tylko
   dopóty, dopóki nikt nie podmieni zdjęcia na jaśniejsze — a podmieniać będzie
   klientka. Biała płachta pod tekstem daje kontrast niezależny od zdjęcia. */
/* Kadence trzyma wcięcie list w `.entry-content ul` — samo `padding: 0` na klasie
   przegrywa specyficznością i siatka odjeżdża 36 px w prawo względem nagłówka. */
.entry-content ul.dk-grupy,
.dk-grupy {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	margin: 1.6em 0 0;
	padding: 0;
	list-style: none;
}

.dk-grupa {
	margin: 0;
}

/* Kadence ustawia linkom w treści `display: inline-flex; align-items: center`,
   przez co karta kurczyła się do szerokości najdłuższego napisu i lądowała
   na środku kafelka. Bez `a` w selektorze te deklaracje przegrywały. */
.entry-content a.dk-grupa__link,
.dk-grupa__link {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
	height: 100%;
	border: 1px solid var(--global-palette7);
	border-radius: var(--dk-radius-m);
	overflow: hidden;
	background: #fff;
	color: inherit;
	text-decoration: none;
}

/* Reguła podkreślania linków w treści ma (0,3,1) przez dwa `:not()`.
   Bez `a` w selektorze ta miała (0,3,0) i przegrywała. */
.entry-content a.dk-grupa__link:not(.button) {
	text-decoration: none;
}

.entry-content a.dk-grupa__link:not(.button):hover .dk-grupa__nazwa,
.entry-content a.dk-grupa__link:not(.button):focus-visible .dk-grupa__nazwa {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.dk-grupa__link:hover,
.dk-grupa__link:focus-visible {
	border-color: var(--global-palette1);
	box-shadow: 0 4px 16px rgba(60, 48, 108, 0.12);
}

.dk-grupa__foto {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--global-palette7);
	overflow: hidden;
}

.dk-grupa__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.dk-grupa__tresc {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	padding: 14px 16px 16px;
}

.dk-grupa__nazwa {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--global-palette2);
}

.dk-grupa__ile {
	margin-top: 0.35em;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--global-palette1);
}

/* Selektor musi być tak samo mocny jak reguła bazowa — zapytanie medialne nie
   podnosi specyficzności, więc samo `.dk-grupy` (0,1,0) przegrywało
   z `.entry-content ul.dk-grupy` (0,2,1) i siatka zostawała pięciokolumnowa
   także na telefonie. */
@media (max-width: 1024px) {
	.entry-content ul.dk-grupy,
	.dk-grupy {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.entry-content ul.dk-grupy,
	.dk-grupy {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.dk-grupa__nazwa {
		font-size: 1.1rem;
	}
}

/* Zajawka zajęcia na karcie. Pokazujemy całość — te teksty klientka pisała ręcznie
   i są pełnymi zdaniami, więc urywanie ich wielokropkiem byłoby marnowaniem pracy. */
.dk-zajecie__opis {
	margin-top: 0.5em;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--global-palette5);
}

/* Tytuł ma być kotwicą wzroku, więc trzyma się góry karty, a zajawka
   wypełnia resztę. */
.dk-zajecie__tresc {
	flex: 1 1 auto;
}
/* Oś, na której zaczyna się tekst w całym serwisie: połowa marginesu okna
   plus dwa paddingi Kadence (krawędź kontenera + oddech białego boksu).
   Liczona ze zmiennych motywu, więc przeżyje zmianę szerokości treści. */
:root {
	--dk-os-tresci: max(
		calc(var(--global-content-edge-padding) + var(--global-boxed-spacing)),
		calc((100vw - var(--global-content-width)) / 2 + var(--global-content-edge-padding) + var(--global-boxed-spacing))
	);
}

/* --- Hero, wersja B (propozycja) ---------------------------------------
   Układ z projektu kancelarii: tekst na jasnym tle z siatką kropek, zdjęcie
   na prawej połowie dochodzi do krawędzi ekranu. Zdjęcie budynku zostaje
   duże i czytelne — nie jest tłem pod tekstem. */

.dk-hero-b {
	position: relative;
	margin-bottom: 0;
	background-color: var(--global-palette8);
	/* Kropki zamiast płaskiego tła: widać je z bliska, z daleka dają papier. */
	background-image: radial-gradient(rgba(96, 60, 156, 0.16) 1px, transparent 1px);
	background-size: 22px 22px;
	align-items: stretch;
}

/* Lewa krawędź tekstu trzyma tę samą oś, co treść reszty strony,
   mimo że sekcja idzie od krawędzi do krawędzi okna.
   ⚠️ Selektor musi być dwuczłonowy: `.dk-hero-b .wp-block-column` (0-2-0)
   wygrywało z samą klasą kolumny i zerowało ten padding. */
.dk-hero-b .dk-hero-b__tekst {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 72px 48px 72px 0;
}

.dk-hero-b__tekst h1 {
	margin-bottom: 0.5em;
}

.dk-hero-b__haslo {
	display: block;
	margin-top: 0.18em;
	font-size: 0.58em;
	font-weight: 500;
	line-height: 1.3;
	color: var(--global-palette1);
}

/* Zdjęcie kończy się razem z treścią, nie z ekranem: na szerokim monitorze
   dochodzenie do krawędzi robiło z niego pół ściany, a tekst zostawał w wąskim
   słupku po lewej. */
.dk-hero-b .dk-hero-b__foto {
	padding: 0;
	align-self: center;
}

.dk-hero-b__foto figure,
.dk-hero-b__foto .wp-block-image {
	height: 100%;
	margin: 0;
}

.dk-hero-b__foto img {
	width: 100%;
	height: 100%;
	min-height: 420px;
	max-height: 500px;
	object-fit: cover;
	border-radius: 24px;
}

@media (max-width: 1023px) {
	/* Na wąskim ekranie oddech białego boksu (2rem) już nie ma czego oddzielać,
	   a zabiera jedną trzecią szerokości tekstu — zostaje sama krawędź. */
	:root {
		--dk-os-tresci: var(--global-content-edge-padding);
	}

	.dk-hero-b .dk-hero-b__tekst {
		padding: 48px 0 36px;
	}

	.dk-hero-b__foto img {
		min-height: 0;
		aspect-ratio: 16 / 9;
		border-radius: 0;
	}
}

/* Hero wersji B dotyka nagłówka: znosimy górny odstęp treści strony. */
.dk-hero-pelny .content-area {
	margin-top: 0;
}

.dk-hero-pelny .entry-content-wrap {
	padding-top: 0;
}

/* Budynek stoi w prawej części kadru — bez tego przycięcie pokazuje same drzewa. */
.dk-hero-b__foto img {
	object-position: 72% center;
}

/* --- Pasy pełnej szerokości --------------------------------------------
   Sekcja z tłem rozciąga się na całe okno, ale jej tekst zostaje na tej samej
   osi, co reszta strony. Wcześniej tło było prostokątem w kontenerze i tekst
   w środku zaczynał się 28 px dalej niż tekst sekcji bez tła — przy przewijaniu
   lewa krawędź drgała. */
.entry-content .wp-block-columns.dk-hero-b {
	padding-left: var(--dk-os-tresci);
	padding-right: var(--dk-os-tresci);
	padding-top: 0;
	padding-bottom: 0;
	gap: 56px;
}

.entry-content .wp-block-group.dk-pas,
.entry-content .wp-block-columns.dk-pas {
	margin-bottom: 0;
	padding-left: var(--dk-os-tresci);
	padding-right: var(--dk-os-tresci);
	padding-top: 56px;
	padding-bottom: 56px;
	border-radius: 0;
}

/* Grupy mają własny kontener treści, kolumny nie — te drugie równamy paddingiem
   wyżej, więc tu zostaje tylko zdjęcie samego zaokrąglenia i marginesów. */
.entry-content .dk-pas.wp-block-columns {
	margin-top: 0;
}

/* Zdjęcie bierze naturalną wysokość swojej kolumny — przycięte do 280 px było
   za małe względem szerokiej kolumny tekstu i wyglądało na wstawkę. */
.dk-zapisy__uklad img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.entry-content .dk-zapisy.dk-pas {
	background-color: var(--global-palette7);
}

.dk-pas + .dk-pas {
	padding-top: 0;
}

/* Lista z miniaturami (wersja B strony głównej). Bez zdjęć aktualności
   i wydarzenia czytały się jak ściana tekstu obok siebie. */
.dk-lista--miniatury .dk-lista__pozycja {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.dk-lista--miniatury .dk-lista__tresc {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	min-width: 0;
}

.dk-lista__foto {
	flex: 0 0 84px;
	width: 84px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px;
	background: var(--global-palette7);
}

.dk-lista__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* Strona zbudowana z pasów nie potrzebuje białego boksu treści — jego krawędź
   wystawała spod ostatniego pasa jako biały pasek z cieniem, a sama biel gryzła
   się z odcieniami pasów i stopki. */
.dk-hero-pelny .content-bg,
.dk-strona-pasy .content-bg {
	background: transparent;
	box-shadow: none;
}

/* Pas bez własnego koloru ma pokazywać tło strony, a nie biel po boksie.
   Bez tego pas „Opłaty za zajęcia" był białym prostokątem urwanym w połowie
   szerokości okna, podczas gdy sąsiednie pasy szły od krawędzi do krawędzi. */
.dk-strona-pasy .entry-content .wp-block-group.dk-pas:not([class*="has-background"]) {
	background-color: var(--global-palette8);
}

/* Odstęp nad pierwszym pasem daje sam pas, nie opakowanie treści — inaczej
   między szarym nagłówkiem strony a pierwszym pasem w tym samym odcieniu
   zostaje biała szpara i całość wygląda na przypadkową. */
.dk-strona-pasy .entry-content-wrap {
	padding-top: 0;
}

.dk-strona-pasy .content-area {
	margin-top: 0;
}

/* Mapa z wtyczki wstawia własny element z wysokością w atrybucie stylu,
   więc zaokrąglenie musi złapać kontener, nie samą mapę. */
.dk-pas--mapa .wp-block-shortcode,
.dk-pas--mapa .wpgmza_map {
	border-radius: 12px;
	overflow: hidden;
}

/* Sekcja „Jak zapisać": tekst ma trzymać się kupy, a nie pływać w pionie
   względem zdjęcia. */
.dk-zapisy__uklad {
	gap: 48px;
	align-items: center;
}

.dk-zapisy__uklad p {
	margin-bottom: 0.6em;
}

.dk-zapisy__uklad .dk-zapisy__godziny {
	margin-top: 0.2em;
}

/* --- Podstrona pojedynczego zajęcia --------------------------------------
   Stylistyka pasów z wersji B strony głównej. Pasy tu nie są blokami z edytora,
   tylko sekcjami szablonu, więc nie przechodzą przez `.entry-content` — reguły
   z tamtej sekcji ich nie dotyczą i mają własne, zawężone do `.dk-strona-zajecia`.
   Ta sama oś tekstu (`--dk-os-tresci`), te same dwa odcienie tła. */

.dk-strona-zajecia,
.dk-strona-plansza,
.dk-strona-wyniki,
.dk-strona-404 {
	margin-top: 0;
}

/* Strona zbudowana z pasów nie potrzebuje białego boksu treści — jego krawędź
   wystawałaby spod ostatniego pasa jako pasek z cieniem. */
.dk-strona-zajecia .content-bg,
.dk-strona-zajecia .entry-content-wrap,
.dk-strona-plansza .content-bg,
.dk-strona-plansza .entry-content-wrap,
.dk-strona-wyniki .content-bg,
.dk-strona-wyniki .entry-content-wrap,
.dk-strona-404 .content-bg,
.dk-strona-404 .entry-content-wrap {
	background: transparent;
	box-shadow: none;
	padding: 0;
}

.dk-strona-zajecia .dk-pas,
.dk-strona-plansza .dk-pas,
.dk-strona-wyniki .dk-pas,
.dk-strona-404 .dk-pas {
	padding: 48px var(--dk-os-tresci);
	background: var(--global-palette8);
}

.dk-strona-zajecia .dk-pas--jasny,
.dk-strona-plansza .dk-pas--jasny,
.dk-strona-wyniki .dk-pas--jasny,
.dk-strona-404 .dk-pas--jasny {
	background: var(--global-palette7);
}

/* Hero: te same kropki co w hero strony głównej, żeby początek podstrony
   czytał się jak ciąg dalszy strony, z której się przyszło. */
.dk-strona-zajecia .dk-pas--hero,
.dk-strona-plansza .dk-pas--hero,
.dk-strona-wyniki .dk-pas--hero,
.dk-strona-404 .dk-pas--hero {
	background-color: var(--global-palette8);
	background-image: radial-gradient(rgba(96, 60, 156, 0.16) 1px, transparent 1px);
	background-size: 22px 22px;
	padding-top: 40px;
	padding-bottom: 56px;
}

.dk-zajecie-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
	gap: 48px;
	align-items: center;
}

.dk-zajecie-hero__tytul {
	margin: 0.1em 0 0;
}

.dk-zajecie-hero__lead {
	margin: 0.9em 0 0;
	font-size: 1.14rem;
	line-height: 1.6;
	color: var(--global-palette4);
}

.dk-zajecie-hero__foto img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 24px;
}

/* Powrót do wykazu stoi NAD tytułem, bo najczęstszym powodem wejścia tutaj
   jest przeglądanie listy — wyjście ma być w zasięgu kciuka, nie w stopce. */
.dk-powrot {
	margin: 0;
	font-size: 0.95rem;
}

.dk-powrot a {
	color: var(--global-palette1);
	text-decoration: none;
	font-weight: 500;
}

.dk-powrot a:hover,
.dk-powrot a:focus-visible {
	text-decoration: underline;
}

/* Znaczniki grup i tematów: te same pigułki co na kartach wykazu, ale klikalne
   — prowadzą do przefiltrowanej listy, czyli tam, gdzie ktoś i tak zmierza. */
.dk-zajecie-znaczniki {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 1em 0 0;
}

.dk-znacznik {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 4px 14px;
	border-radius: var(--dk-radius-pill);
	background: rgba(96, 60, 156, 0.1);
	color: var(--global-palette2);
	font-size: 0.92rem;
	font-weight: 500;
	text-decoration: none;
}

.dk-znacznik:hover,
.dk-znacznik:focus-visible {
	background: var(--global-palette1);
	color: #fff;
}

/* Siatka faktów: termin i prowadzący to pierwsze pytanie, więc stoją osobnym
   pasem nad opisem, a nie w środku ściany tekstu, jak dziś. */
.dk-fakty {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 20px 32px;
	margin: 0;
}

.dk-fakty__pozycja {
	margin: 0;
}

.dk-fakty__nazwa {
	margin: 0 0 0.2em;
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--global-palette5);
}

.dk-fakty__wartosc {
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.5;
	color: var(--global-palette3);
}

.dk-podnaglowek {
	margin: 0 0 0.5em;
	font-size: 1.5rem;
}

.dk-strona-zajecia .dk-zajecie-tresc > *:first-child {
	margin-top: 0;
}

.dk-prowadzacy {
	margin-top: 40px;
	padding: 24px 28px;
	border-left: 4px solid var(--global-palette1);
	background: var(--global-palette7);
	border-radius: 0 var(--dk-radius-m) var(--dk-radius-m) 0;
}

.dk-prowadzacy p:last-child {
	margin-bottom: 0;
}

.dk-zapisy-zajecie p {
	max-width: 46em;
}

.dk-zapisy-zajecie p:last-child {
	margin-bottom: 0;
}

.dk-zapisy-zajecie__uwaga {
	padding: 14px 18px;
	border-radius: var(--dk-radius-m);
	background: rgba(96, 60, 156, 0.08);
}

/* Zastrzeżenie o godzinach biura — drobny druk pod każdą wypisaną godziną.
   Skrót zwraca je jako <span>, więc łamiemy je tu do własnej linii. */
.dk-godziny-biura__uwaga {
	display: block;
	margin-top: 6px;
	max-width: 46em;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--global-palette5);
}

p.dk-godziny-biura__uwaga {
	margin-bottom: 0;
}

.dk-podobne .dk-zajecia__siatka {
	margin-top: 0;
}

.dk-podobne .dk-wiecej {
	margin: 24px 0 0;
}

@media (max-width: 1023px) {
	.dk-zajecie-hero {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.dk-strona-zajecia .dk-pas {
		padding-top: 36px;
		padding-bottom: 36px;
	}

	.dk-zajecie-hero__foto img {
		aspect-ratio: 16 / 9;
		border-radius: var(--dk-radius-m);
	}

	.dk-podobne .dk-zajecia__siatka {
		grid-template-columns: 1fr;
	}
}

/* --- Aktualności: karty, lista i pojedynczy wpis --------------------------
   Karta aktualności jest osobna od karty zajęcia, bo niesie co innego: datę
   zamiast tematu i szerszy kadr zdjęcia. Zaproszenia są robione pod plakat,
   a zajęcia mają zdjęcia z sali. */

.dk-karty {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dk-karta {
	margin: 0;
}

.dk-karta__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--global-palette7);
	border-radius: var(--dk-radius-m);
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	color: inherit;
}

.dk-karta__link:hover,
.dk-karta__link:focus-visible {
	border-color: var(--global-palette1);
	box-shadow: 0 4px 16px rgba(60, 48, 108, 0.12);
}

.dk-karta__foto {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--global-palette7);
	overflow: hidden;
}

/* Ogłoszenia zwykle nie mają zdjęcia. Gładki szary prostokąt wyglądał jak obrazek,
   który się nie wczytał — siatka kropek z nagłówków mówi „tu celowo nic nie ma”. */
.dk-karta__foto--pusta {
	background-color: var(--global-palette8);
	background-image: radial-gradient(rgba(96, 60, 156, 0.22) 1.5px, transparent 1.5px);
	background-size: 18px 18px;
}

.dk-karta__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dk-karta__tresc {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	padding: 18px 20px 22px;
}

/* Data nad tytułem, nie pod nim: przy komunikacie pierwsze pytanie brzmi
   „czy to jeszcze aktualne", a nie „o czym to jest". */
.dk-karta__data {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--global-palette1);
}

.dk-karta__tytul {
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--global-palette3);
}

.dk-karta__opis {
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--global-palette5);
}

/* Hero pojedynczej aktualności: sam tekst, zdjęcie dostaje własny pas pod
   spodem. Plakaty mają różne proporcje i w układzie dwukolumnowym raz stały
   słupkiem, raz kładły się na pół ekranu. */
.dk-aktualnosc-hero {
	max-width: 44em;
}

.dk-aktualnosc-hero__data {
	margin: 0.8em 0 0;
	font-weight: 600;
	color: var(--global-palette1);
}

.dk-aktualnosc-hero__tytul {
	margin: 0.15em 0 0;
}

.dk-strona-zajecia .dk-pas--foto {
	padding-top: 0;
	padding-bottom: 0;
	background: var(--global-palette8);
}

.dk-aktualnosc-foto {
	margin: 0;
}

.dk-aktualnosc-foto img {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
	border-radius: var(--dk-radius-m);
}

.dk-aktualnosc-tresc {
	max-width: 44em;
}

.dk-strona-zajecia .dk-aktualnosc-tresc > *:first-child {
	margin-top: 0;
}

/* Paginacja: Kadence stylizuje ją w obrębie swojego archiwum, a ten szablon
   jest własny — inaczej numery stoją nagim tekstem w jednej linii. */
.dk-strona-zajecia .pagination {
	margin-top: 40px;
}

.dk-strona-zajecia .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.dk-strona-zajecia .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--global-palette6);
	border-radius: var(--dk-radius-pill);
	background: #fff;
	color: var(--global-palette2);
	text-decoration: none;
}

.dk-strona-zajecia .page-numbers:hover,
.dk-strona-zajecia .page-numbers:focus-visible {
	border-color: var(--global-palette1);
	background: var(--global-palette7);
}

/* Stan bieżący niesie kolor ORAZ grubość — sam kolor to za mało. */
.dk-strona-zajecia .page-numbers.current {
	background: var(--global-palette1);
	border-color: var(--global-palette1);
	color: #fff;
	font-weight: 600;
}

.dk-strona-zajecia .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

@media (max-width: 1023px) {
	.dk-karty {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* --- The Events Calendar: wpięcie w motyw (krok 17, 2026-09-10) -----------
   Wtyczka niesie własną paletę, własne kroje i własne odstępy, przez co
   sekcja wydarzeń wyglądała jak doklejona do reszty serwisu.

   Robione na ZMIENNYCH wtyczki (`--tec-*`), a nie przez nadpisywanie jej klas:
   wtyczka aktualizuje się kilka razy w roku i przy każdej aktualizacji zmienia
   nazwy klas, ale te zmienne są jej publicznym API. Nadpisań klas jest tu
   tylko tyle, ile zmiennych nie obsługuje.
   -------------------------------------------------------------------------- */

.tribe-common,
.tribe-events,
.tribe-events-pro {
	/* Krój: wtyczka wstawia własny stos systemowy, przez co nagłówki wydarzeń
	   miały inny rysunek liter niż nagłówki na reszcie strony. */
	--tec-font-family-sans-serif: var(--global-body-font-family);
	--tec-font-family-base: var(--global-body-font-family);

	--tec-color-accent-primary: var(--global-palette1);
	--tec-color-accent-primary-hover: var(--global-palette2);
	--tec-color-accent-primary-active: var(--global-palette2);
	--tec-color-accent-primary-background: var(--global-palette1);
	--tec-color-accent-secondary: var(--global-palette2);
	--tec-color-accent-secondary-hover: var(--global-palette1);

	--tec-color-text-primary: var(--global-palette3);
	--tec-color-text-primary-light: var(--global-palette5);
	--tec-color-text-secondary: var(--global-palette5);
	--tec-color-text-event-title: var(--global-palette3);
	--tec-color-text-event-title-list: var(--global-palette3);
	--tec-color-text-event-date: var(--global-palette5);
	--tec-color-text-secondary-event-date: var(--global-palette5);
	--tec-color-link-primary: var(--global-palette3);
	--tec-color-link-accent: var(--global-palette1);
	--tec-color-link-accent-hover: var(--global-palette2);

	--tec-color-background-secondary: var(--global-palette7);
	--tec-color-background-events-bar: var(--global-palette7);
	--tec-color-border-default: var(--global-palette7);
	--tec-color-border-secondary: var(--global-palette7);
	--tec-color-border-active: var(--global-palette1);

	--tec-color-button-primary: var(--global-palette1);
	--tec-color-button-primary-hover: var(--global-palette2);
	--tec-color-button-primary-active: var(--global-palette2);

	--tec-border-radius-default: 10px;
}

/* Tekst wtyczki startuje od 14 px, reszta serwisu od 18 px. Podnosimy stopnie
   pisma, a nie pojedyncze reguły, żeby proporcje wewnątrz widoku zostały. */
.tribe-common {
	--tec-font-size-1: 13px;
	--tec-font-size-2: 15px;
	--tec-font-size-3: 17px;
	--tec-font-size-4: 18px;
	--tec-font-size-5: 20px;
	--tec-font-size-6: 22px;
	--tec-font-size-7: 26px;
	--tec-font-size-8: 32px;
	--tec-font-size-9: 38px;
}

.tribe-common a,
.tribe-events a {
	text-underline-offset: 0.2em;
}

/* Pusty pas nad paskiem wyszukiwania: Kadence daje odstęp na tytuł strony,
   wtyczka drugi na swój nagłówek. Razem robiło to 170 px bieli. */
.tribe-events-view {
	padding-top: 0;
}

.single-tribe_events .entry-content-wrap,
.post-type-archive-tribe_events .entry-content-wrap,
.tax-tribe_events_cat .entry-content-wrap {
	padding-top: clamp(24px, 4vw, 48px);
}

/* Nagłówki wydarzeń zapisane wersalikami w tłumaczeniu wtyczki
   („« Wszystkie Wydarzenia") gryzły się z resztą serwisu. */
.tribe-events-back a,
.tribe-events-c-subscribe-dropdown__button-text {
	text-transform: none;
	font-weight: 600;
}

/* Komunikat „wydarzenie już minęło" leciał małą literą, bez wyróżnienia,
   jako pierwsza rzecz na stronie — wyglądał na błąd, nie na informację. */
.tribe-events-notices {
	background: var(--global-palette7);
	border: 0;
	border-left: 4px solid var(--global-palette1);
	border-radius: 8px;
	color: var(--global-palette5);
	padding: 14px 18px;
}

.tribe-events-notices ul,
.tribe-events-notices li {
	margin: 0;
	list-style: none;
}

.tribe-events-notices li::first-letter {
	text-transform: uppercase;
}

/* Karta na wykazie: zdjęcie wyrównane do wysokości tekstu i zaokrąglone
   tak jak kafelki zajęć, żeby oba wykazy czytało się tak samo. */
.tribe-events-calendar-list__event-featured-image-wrapper img,
.tribe-events-calendar-latest-past__event-featured-image-wrapper img {
	border-radius: 10px;
}

.tribe-events-calendar-list__event-row {
	border-top: 1px solid var(--global-palette7);
	padding-top: clamp(20px, 3vw, 32px);
}

.tribe-events-calendar-list__event-row:first-child {
	border-top: 0;
	padding-top: 0;
}

/* Adres z wtyczki kończył się na „małopolskie, Poland" — nazwa kraju
   po angielsku w polskiej treści. Ukrywana regionem i krajem, bo dla
   jednej instytucji pod jednym adresem nie niosą żadnej informacji. */
.tribe-events-calendar-list__event-venue .tribe-events-calendar-list__event-venue-address .tribe-common-b2--bold + span,
.tribe-events-calendar-list__event-venue-address {
	font-size: var(--tec-font-size-2);
}

.tribe-events-calendar-list__event-venue-address .tribe-street-address-region,
.tribe-events-calendar-list__event-venue-address .tribe-country-name,
.tribe-events-address .tribe-region,
.tribe-events-address .tribe-country-name {
	display: none;
}

/* Widoczny fokus — wtyczka gasi obrys, a reszta serwisu go trzyma. */
.tribe-common a:focus-visible,
.tribe-common button:focus-visible,
.tribe-events a:focus-visible {
	outline: 3px solid var(--global-palette1);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.tribe-events-calendar-list__event-row {
		padding-top: 18px;
	}
}

/* --- Wydarzenia: nagłówek wykazu i pigułki cykli -------------------------- */

/* Tytuł wykazu wydarzeń.

   Historia: wtyczka wypisywała H1 z klasą `.tec-a11y-title-hidden`, czyli tylko
   dla czytników ekranu. Po podpięciu filtra `tec_events_views_v2_view_header_title`
   renderuje widoczny `h1.tribe-events-header__title-text` i stara reguła stała się
   martwa — stąd ta wersja celuje w element, który naprawdę jest na stronie.

   Wtyczka skaluje własny stopień pisma: 26 px na telefonie, 42 px na monitorze.
   Każda inna strona serwisu ma H1 w 36 px na każdej szerokości, więc tytuł wykazu
   był najpierw mniejszy, a potem większy od reszty. */
/* ⚠️ Reguła wtyczki brzmi `.tribe-events .tribe-events-header__title h1.tribe-events-header__title-text`,
   czyli (0,3,1). Sam selektor z klasą body przegrywał bez żadnego błędu. */
body.post-type-archive-tribe_events .tribe-events-header .tribe-events-header__title h1.tribe-events-header__title-text,
body.tax-tribe_events_cat .tribe-events-header .tribe-events-header__title h1.tribe-events-header__title-text {
	margin: 0 0 clamp(16px, 2.5vw, 28px);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--global-palette3);
}

/* Ten sam rozjazd co na wykazie, tylko na podstronie wydarzenia:
   24 px na telefonie i 42 px na monitorze zamiast 36 px jak wszędzie indziej. */
body.single-tribe_events .tribe-events-single h1.tribe-events-single-event-title,
body.single-tribe_events h1.tribe-events-single-event-title {
	font-size: 36px;
	line-height: 1.25;
}

/* Szablon wtyczki maluje `#wrapper` na biało, a cały serwis stoi na jasnym
   fiolecie. Wykaz wydarzeń i podstrona wydarzenia były jedynymi stronami
   z innym tłem strony. */
.tribe-events-page-template #wrapper,
.single-tribe_events #wrapper {
	background: transparent;
}

/* Opakowanie tytułu to `display:flex` o zerowej wysokości, gdy tytuł jest
   ukryty — po odsłonięciu H1 wchodził na pasek wyszukiwania. Odstęp musi
   dostać kontener, nie sam nagłówek. */
.post-type-archive-tribe_events .tribe-events-header__content-title,
.tax-tribe_events_cat .tribe-events-header__content-title {
	display: block;
	margin-bottom: clamp(18px, 3vw, 30px);
}

/* 130 px bieli nad paskiem wyszukiwania brało się z `.content-area{margin-top:5rem}`
   Kadence — odstęp przewidziany na tytuł strony, którego wykaz wydarzeń nie ma.
   Zmniejszamy margines, nie dokładamy paddingu. */
.post-type-archive-tribe_events .content-area,
.tax-tribe_events_cat .content-area,
.single-tribe_events .content-area {
	margin-top: clamp(32px, 5vw, 64px);
}

.dk-cykle-wydarzenia {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}

.dk-cykl-pigulka {
	display: inline-block;
	padding: 5px 14px;
	border: 1px solid var(--global-palette6);
	border-radius: 999px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--global-palette5);
	text-decoration: none;
}

.dk-cykl-pigulka:hover,
.dk-cykl-pigulka:focus-visible {
	border-color: var(--global-palette1);
	background: var(--global-palette7);
	color: var(--global-palette1);
}

/* --- Plansze wystawy Grodeckiego (krok 18, 2026-09-10) --------------------
   Człowiek trafia tu najczęściej z kodu QR, stojąc przed planszą w sali.
   Wie, co ogląda; nie wie, gdzie jest w cyklu i czy jest coś dalej. Stąd
   pozycja na górze, przejścia na dole i pełny spis plansz pod nimi.
   -------------------------------------------------------------------------- */

.dk-strona-plansza .dk-pas--ciemny {
	background: var(--global-palette2);
	color: #fff;
}

.dk-plansza-hero {
	max-width: 70ch;
}

.dk-plansza-tytul {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 10px;
}

/* Numer planszy jest tym, co człowiek widzi na fizycznej planszy — to on
   łączy wydruk z ekranem, więc dostaje własny znacznik, a nie kropkę w tytule. */
.dk-plansza-numer {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2em;
	height: 2.2em;
	padding: 0 0.4em;
	border-radius: 999px;
	background: var(--global-palette1);
	color: #fff;
	font-size: 0.5em;
	line-height: 1;
}

.dk-plansza-wystawa {
	margin: 0;
	color: var(--global-palette5);
}

.dk-plansza-tresc img {
	border-radius: 10px;
	height: auto;
}

.dk-plansze-nawigacja__srodek {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.dk-plansza-sasiad {
	display: block;
	padding: 18px 22px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 12px;
	color: #fff;
	text-decoration: none;
}

.dk-plansza-sasiad:hover,
.dk-plansza-sasiad:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.dk-plansza-sasiad--pusty {
	border: 0;
}

.dk-plansza-sasiad--naprzod {
	text-align: right;
}

.dk-plansza-sasiad__etykieta {
	display: block;
	margin-bottom: 4px;
	font-size: 15px;
	opacity: 0.75;
}

.dk-plansza-sasiad__nazwa {
	display: block;
	font-weight: 600;
}

.dk-plansze-spis__tytul {
	margin: 0 0 18px;
}

/* Numery pochodzą z tytułów i mają dziury (po 4 idzie 6), więc licznik listy
   musi być wyłączony — inaczej WordPress numerowałby po kolei i pokazywał
   inny numer niż ten na fizycznej planszy. */
.dk-plansze-spis {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 8px 24px;
}

.dk-plansze-spis li {
	margin: 0;
}

.dk-plansze-spis a {
	color: var(--global-palette3);
	text-decoration: none;
}

.dk-plansze-spis a:hover,
.dk-plansze-spis a:focus-visible {
	color: var(--global-palette1);
	text-decoration: underline;
}

.dk-plansze-spis__biezaca span {
	font-weight: 700;
	color: var(--global-palette1);
}

@media (max-width: 767px) {
	.dk-plansza-tytul {
		gap: 10px;
	}

	.dk-plansze-nawigacja__srodek {
		grid-template-columns: 1fr;
	}

	.dk-plansza-sasiad--naprzod {
		text-align: left;
	}
}

/* --- Wyszukiwarka, wyniki i 404 (krok 20b, 2026-09-10) --------------------
   Pole szukania i skróty są wspólne dla obu stron: w obu sytuacjach człowiek
   czegoś szukał i nie znalazł, więc potrzebuje tego samego — drogi dalej.
   -------------------------------------------------------------------------- */

.dk-szukaj {
	max-width: 620px;
	margin-top: 22px;
}

.dk-szukaj__etykieta {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
}

.dk-szukaj__wiersz {
	display: flex;
	gap: 10px;
}

.dk-szukaj__pole {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 16px;
	border: 1px solid var(--global-palette6);
	border-radius: 10px;
	background: #fff;
	font-size: 17px;
}

.dk-szukaj__pole:focus-visible {
	outline: 3px solid var(--global-palette1);
	outline-offset: 1px;
}

.dk-szukaj__przycisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: none;
	padding: 12px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--global-palette1);
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
}

.dk-ikona-lupy {
	flex: none;
}

/* Etykieta niewidoczna dla oka, ale czytana przez czytnik ekranu. `display: none`
   zabrałoby ją także czytnikom, a pole zostałoby bez nazwy. */
.dk-szukaj__etykieta--ukryta {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dk-szukaj__przycisk:hover,
.dk-szukaj__przycisk:focus-visible {
	background: var(--global-palette2);
}

.dk-szybkie-linki {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.dk-szybkie-linki a {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid var(--global-palette6);
	border-radius: 999px;
	color: var(--global-palette3);
	text-decoration: none;
}

.dk-szybkie-linki a:hover,
.dk-szybkie-linki a:focus-visible {
	border-color: var(--global-palette1);
	background: #fff;
	color: var(--global-palette1);
}

/* --- Wyniki --- */

.dk-wyniki-tytul,
.dk-404-tytul {
	margin: 0 0 10px;
}

.dk-wyniki-licznik {
	margin: 0;
	color: var(--global-palette5);
}

.dk-wyniki-grupa__tytul {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
}

/* Licznik przy grupie odpowiada na pytanie „czy warto tu patrzeć",
   zanim człowiek przeczyta choć jeden tytuł. */
.dk-wyniki-grupa__ile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.9em;
	height: 1.9em;
	padding: 0 0.4em;
	border-radius: 999px;
	background: var(--global-palette1);
	color: #fff;
	font-size: 0.5em;
	line-height: 1;
}

.dk-wyniki-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
}

.dk-wynik {
	margin: 0;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--global-palette7);
}

.dk-wynik:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.dk-wynik__tytul {
	font-size: 19px;
	font-weight: 600;
	color: var(--global-palette3);
	text-decoration: none;
}

.dk-wynik__tytul:hover,
.dk-wynik__tytul:focus-visible {
	color: var(--global-palette1);
	text-decoration: underline;
}

.dk-wynik__opis {
	margin: 4px 0 0;
	color: var(--global-palette5);
	font-size: 16px;
}

.dk-podpowiedzi {
	margin: 0 0 8px;
	padding-left: 1.2em;
	color: var(--global-palette5);
	max-width: 62ch;
}

.dk-podpowiedzi__naglowek {
	margin-top: 28px;
}

/* --- 404 --- */

.dk-404-kod {
	margin: 0 0 6px;
	color: var(--global-palette5);
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dk-404-lead {
	margin: 0;
	max-width: 60ch;
	color: var(--global-palette5);
}

.dk-404-wystawa,
.dk-404-kontakt {
	margin: 22px 0 0;
	color: var(--global-palette5);
}

@media (max-width: 600px) {
	.dk-szukaj__wiersz {
		flex-direction: column;
	}

	.dk-szukaj__przycisk {
		width: 100%;
	}
}

/* --- Strona kontaktowa (krok 23, część pierwsza, 2026-09-10) --------------
   Strona przeniesiona z SiteOrigin na bloki. Pasy są tu blokami z edytora,
   nie sekcjami szablonu, więc korzystają z reguł `.entry-content .dk-pas`
   z sekcji „Pasy pełnej szerokości" — tutaj tylko to, co dotyczy treści.
   -------------------------------------------------------------------------- */

.dk-kontakt-dane .wp-block-column {
	min-width: 0;
}

/* Adres, telefon i mail to najczęstszy powód wejścia na tę stronę,
   więc są większe od reszty tekstu i klikalne na telefonie. */
.dk-kontakt-adres {
	font-size: 20px;
	line-height: 1.5;
}

.dk-kontakt-adres a,
.dk-kontakt-linia a {
	color: var(--global-palette1);
	text-underline-offset: 0.2em;
}

.dk-kontakt-linia {
	margin-bottom: 8px;
	font-size: 18px;
}

.dk-kontakt-godziny__glowne {
	font-size: 22px;
	line-height: 1.45;
	color: var(--global-palette2);
}

/* Numer konta przepisuje się do przelewu, więc dostaje własny blok
   i odstępy między grupami cyfr zamiast ciągu dwudziestu sześciu znaków. */
.dk-kontakt-konto {
	display: inline-block;
	margin-bottom: 18px;
	padding: 16px 22px;
	border: 1px solid var(--global-palette6);
	border-radius: 12px;
	background: #fff;
	font-size: 21px;
	letter-spacing: 0.02em;
}

.dk-kontakt-konto__etykieta {
	display: block;
	margin-bottom: 4px;
	color: var(--global-palette5);
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Mapa z wtyczki nie ma własnej wysokości, dopóki nie wczyta skryptu —
   bez tego przed zgodą na ciasteczka pas zapada się do zera. */
.dk-pas--mapa .wpgmza_map,
.dk-pas--mapa .wpgmza-map-container {
	min-height: 360px;
	border-radius: 12px;
	overflow: hidden;
}

@media (max-width: 767px) {
	.dk-kontakt-konto {
		display: block;
		font-size: 18px;
	}
}

/* --- Nasi instruktorzy (krok 23, część druga, 2026-09-10) -----------------
   Strona jest wykazem osób, nie tekstem ciągłym: 28 instruktorów w czterech
   działach, każdy z listą zajęć. Stary układ oddzielał ich gwiazdkami „***"
   w akapitach, przez co wszystko miało tę samą wagę wizualną.
   -------------------------------------------------------------------------- */

/* ⚠️ Blok grupy renderuje `.wp-block-group__inner-container` POMIĘDZY grupą
   a jej treścią. Siatka postawiona na samej grupie miała więc jedno dziecko:
   ten pojemnik. Efekt — trzy tory po 369 px, a wszystkich 28 instruktorów
   w pierwszym z nich, obok trzy czwarte pustego ekranu. Siatka musi siedzieć
   na pojemniku, nie na grupie. */
.dk-instruktorzy > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px 36px;
	align-items: start;
}

/* Układ „constrained" WordPressa zwęża dzieci do szerokości treści —
   w komórce siatki to zbędne i psuje równanie kolumn. */
.dk-instruktorzy > .wp-block-group__inner-container > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Nagłówek i lista jednej osoby siedzą we własnej grupie (`.dk-instruktor`),
   więc jedna osoba to jedna komórka siatki. Wcześniej były rodzeństwem
   i siatka rozrzucała nazwisko do jednej kolumny, a jego zajęcia do następnej. */
.dk-instruktor {
	break-inside: avoid;
}

.dk-instruktor__nazwa {
	margin: 0 0 6px;
	font-size: 19px;
	line-height: 1.35;
}

.dk-instruktor__zajecia {
	margin: 0;
	padding-left: 1.1em;
	color: var(--global-palette5);
}

.dk-instruktor__zajecia li {
	margin-bottom: 4px;
}

.dk-instruktorzy-wstep {
	max-width: 68ch;
	color: var(--global-palette5);
}

.dk-instruktorzy-galeria {
	margin-top: 32px;
}

/* ⚠️ Galeria WordPressa układa zdjęcia elastycznie i rozciąga te, które zostaną
   same w ostatnim rzędzie. Pionowe zdjęcie zumby (616×796) lądowało przez to
   samo na całej szerokości: wyświetlane na 1178 px, czyli dwa razy powyżej
   własnej rozdzielczości — gigantyczne i rozmyte naraz.

   Siatka o stałych kafelkach rozwiązuje oba problemy: każde zdjęcie dostaje
   ten sam kadr 4:3 niezależnie od tego, czy jest poziome, czy pionowe. */
.dk-pas .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

/* ⚠️⚠️ Galeria „columns-3" ma własną regułę `width: calc(33.33% - …)`, liczoną
   po przejściu na siatkę od TORU, nie od galerii — kafelki wychodziły po 69 px.
   WordPress zapisuje ją jako `figure.wp-block-image:not(#individual-image)`,
   czyli sztucznie podbija specyficzność do poziomu IDENTYFIKATORA. Żaden
   selektor z samych klas tego nie przebije, choćby miał ich dziesięć.
   Powtarzamy więc ten sam zabieg — to jedyne wyjście poza `!important`. */
.dk-pas .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	margin: 0;
	width: 100%;
	flex-grow: 0;
}

.dk-pas .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	/* Na zdjęciach ludzi kadr od góry — inaczej centrowanie ucina głowy. */
	object-position: center top;
	border-radius: 10px;
}

/* --- Wyszukiwarka na dole strony głównej (2026-09-22) ----------------------
   Stara strona miała na dole „Szukasz czegoś? Wpisz tu zapytanie!" i to była
   jedyna wyszukiwarka w serwisie. Sekcja zostaje, bo ktoś, kto doscrollował
   do końca, nadal czegoś szuka.
   -------------------------------------------------------------------------- */

.dk-szukajka__naglowek {
	margin: 0;
}

.dk-szukajka__opis {
	margin: 10px 0 0;
	color: var(--global-palette5);
}

.dk-szukajka .dk-szukaj {
	margin-top: 16px;
}

/* --- Wydarzenia, które już się odbyły (2026-09-22) -------------------------
   Sekcja pod wykazem kalendarza i skrót `[dk_wydarzenia_odbyte]` na stronie
   głównej. Karty te same co w aktualnościach — ta sama czynność, jeden nawyk.
   -------------------------------------------------------------------------- */

/* Podwójna klasa, bo reset kalendarza (`.tribe-common h2 { margin: 0 }`) jest mocniejszy
   od pojedynczej i pod wykazem wydarzeń nagłówek kleił się do kart. */
.dk-odbyte .dk-odbyte__naglowek {
	margin: 0 0 22px;
}

/* ⚠️ Karta wstawiona w treść strony łapie regułę „podkreślenie linków w treści"
   (0,3,0 przez dwa `:not`), więc `.dk-karta__link` z samej klasy przegrywa
   i cała karta chodzi podkreślona. Karta ma ramkę i cień — podkreślony tytuł
   wygląda w niej na błąd, nie na link. */
.entry-content a.dk-karta__link:not(.button):not(.wp-block-button__link) {
	text-decoration: none;
}

.dk-odbyte__wiecej {
	margin: 22px 0 0;
}

/* Wykaz kalendarza kończy się własnym kontenerem wtyczki, więc sekcja doklejona
   pod nim potrzebuje własnego oddechu — bez tego stoi tuż pod ostatnim
   wydarzeniem i wygląda jak jego część. */
.tribe-events-page-template .dk-odbyte,
.tax-tribe_events_cat .dk-odbyte {
	margin-top: 40px;
}

/* --- Siatka kropek na nagłówku każdej strony (2026-09-23) ------------------
   Kropki były dotąd tylko w hero strony głównej i w szablonach pisanych w PHP
   (zajęcia, aktualności, plansze, wyniki). Zwykłe strony zaczynały się płaską
   szarością, więc wchodząc w „Wynajem sal" albo „Pliki do pobrania" człowiek
   trafiał jakby na inny serwis. Nagłówek Kadence dostaje to samo tło.

   ⚠️ Selektor z `body`, bo Kadence maluje tło nagłówka regułą o wyższej
   specyficzności niż sama klasa. */
body .entry-hero,
body .entry-hero-container-inner {
	background-color: var(--global-palette8);
	background-image: radial-gradient(rgba(96, 60, 156, 0.16) 1px, transparent 1px);
	background-size: 22px 22px;
}

/* Widoki pisane w PHP mają własne nagłówki, nie Kadence'owy `entry-hero`:
   wykaz zajęć rysuje H1 wprost w treści, a kalendarz robi to wtyczką. Żeby kropki
   były naprawdę wszędzie, tłem dostaje je całe podłoże strony. Pasy i karty mają
   własne tła, więc zakrywają siatkę tam, gdzie zaczyna się treść. */
body.wp-site-blocks,
body {
	background-image: radial-gradient(rgba(96, 60, 156, 0.16) 1px, transparent 1px);
	background-size: 22px 22px;
	background-attachment: fixed;
}

/* Strona zbudowana z pasów ma pierwszy pas tuż pod nagłówkiem — gdyby oba miały
   kropki, siatka łamałaby się w miejscu styku. Tam kropki zostają na nagłówku,
   a pas bierze swój kolor. */

/* Pierwszy akapit strony: większy od reszty, żeby wejście w temat dało się
   przeczytać jednym rzutem oka. Używany na stronach przepisanych ze starego
   układu (wynajem sal, pliki do pobrania, dni wolne, RODO). */
.entry-content p.dk-lead {
	font-size: 1.14rem;
	color: var(--global-palette4);
}

/* --- Pole wyszukiwania w nagłówku (2026-09-23) -----------------------------
   Zamiast ikony otwierającej okno na całą szerokość: małe pole widoczne od razu.
   Decyzja Michała po obejrzeniu okna Kadence, które rozstrzeliwało etykietę,
   pole i przycisk na trzy różne końce ekranu.
   -------------------------------------------------------------------------- */

.dk-szukaj--male {
	display: flex;
	align-items: center;
	gap: 0;
	max-width: none;
	margin: 0;
	border: 1px solid var(--global-palette6);
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
}

/* ⚠️ Pierwsza wersja rozszerzała pole po kliknięciu (132 → 210 px). Wyglądało
   efektownie, ale całe menu przeskakiwało wtedy o 78 px w lewo — przy nawigacji
   klawiaturą pozycje uciekały spod kursora. Stała szerokość jest nudniejsza
   i lepsza. */
.dk-szukaj--male .dk-szukaj__pole {
	width: 168px;
	padding: 7px 4px 7px 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 15px;
}

.dk-szukaj--male .dk-szukaj__pole:focus {
	outline: none;
}

.dk-szukaj--male .dk-szukaj__pole::-webkit-search-cancel-button {
	cursor: pointer;
}

.dk-szukaj--male .dk-szukaj__przycisk {
	/* Cel dotknięcia 44 px w obu wymiarach — wytyczna WCAG 2.2, ta sama co przy
	   pozostałych przyciskach serwisu. */
	min-width: 44px;
	padding: 7px 12px;
	border-radius: 0;
	background: transparent;
	color: var(--global-palette1);
}

.dk-szukaj--male .dk-szukaj__przycisk:hover,
.dk-szukaj--male .dk-szukaj__przycisk:focus-visible {
	background: var(--global-palette7);
	color: var(--global-palette2);
}

/* Obramowanie całej ramki reaguje na fokus pola — inaczej przy nawigacji
   klawiaturą nie widać, że kursor jest w wyszukiwarce. */
.dk-szukaj--male:focus-within {
	border-color: var(--global-palette1);
	box-shadow: 0 0 0 2px rgba(96, 60, 156, 0.18);
}

/* Nagłówek na węższych monitorach: menu i pole zaczynają walczyć o miejsce,
   więc pole traci szerokość, zanim menu zacznie się łamać. */
@media (max-width: 1200px) {
	.dk-szukaj--male .dk-szukaj__pole {
		width: 120px;
	}
}