/*
Theme Name: Zakra DPS
Theme URI:
Template: zakra
Author: DPS Gorlice
Description: Motyw potomny Zakry dla Domu Pomocy Społecznej w Gorlicach.
             Paleta pastelowo-żółta, kroje hostowane lokalnie, układ listy
             aktualności i ogłoszeń, poprawki dostępności. Motyw nadrzędny
             pozostaje nietknięty, więc jego aktualizacje niczego tu nie
             nadpiszą.
Version: 2.11.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zakra-dps
*/

/* ==========================================================================
   PALETA
   Pastel jest polem strony, kontrast niosą ciemne bursztyny. Odwrotnie się
   nie da - pastelowy żółty jako kolor tekstu czy tła przycisku nie przechodzi
   WCAG 2.1 AA, a podmiot publiczny podlega ustawie o dostępności cyfrowej.
   W nawiasach kontrast wobec tła strony.

   UWAGA: kolory żyją tutaj, nie w Customizerze. Zmiana koloru w panelu
   WordPressa nie da efektu - te reguły ładują się po arkuszu Customizera.
   ========================================================================== */

:root {
	--dps-bg:           #FFFFFF;  /* tło strony - białe na prośbę DPS */
	--dps-band:         #F2E4B8;  /* pas kontaktowy, wyróżnione sekcje */
	--dps-band-soft:    #F9F0D2;  /* delikatniejsze pasmo sekcji */
	/* Karta jest o ułamek cieplejsza od strony. Na kremowym tle wystarczała
	   biel, ale na białym biała karta zlewałaby się z tłem - trzymałoby ją
	   tylko obramowanie, które wobec bieli ma kontrast 1,35:1, czyli żaden.
	   Różnica wypełnienia nie musi spełniać progu 3:1, musi być dostrzegalna. */
	--dps-card:         #FBF8F0;  /* karty i pola treści */
	--dps-placeholder:  #F3E7C2;  /* tło pod zdjęciem, zanim się wczyta */

	--dps-text:         #2B2417;  /* tekst podstawowy        (14:1) */
	--dps-muted:        #6A5F45;  /* tekst pomocniczy        (5,6:1) */
	--dps-body:         #4A4130;  /* akapity                 (9,5:1) */

	--dps-primary:      #6E5510;  /* przyciski, stany aktywne (biały tekst 7,4:1) */
	--dps-primary-dark: #55410B;  /* najechanie */
	--dps-accent:       #8A4212;  /* odnośniki               (8,6:1) */
	--dps-accent-dark:  #6B320D;

	--dps-border:       #E9DDB8;
	--dps-border-strong:#E4D19A;

	--dps-footer:       #423412;
	--dps-footer-text:  #F3E9CE;

	/* Pasek kontaktowy: ten sam odcień brązu co stopka, rozjaśniony
	   i stonowany. Wybór DPS spośród trzech wariantów.
	   Biały tekst na tym tle daje 6,05:1 - powyżej progu WCAG AA. */
	--dps-pasek:        #6F6145;
	--dps-pasek-tekst:  #FFFFFF;

	/* Sekcje na stronie głównej. DPS poprosił, żeby „bardziej wpadały w brąz"
	   - dawny kremowo-żółty ton gryzł się z brązowym paskiem i stopką.
	   Oba kolory leżą w tym samym odcieniu co pasek (hue 40°), tylko jaśniejsze.
	   Tekst podstawowy: 9,9:1 i 9,0:1. Etykieta sekcji musiała przejść na
	   ciemniejszy kolor - dotychczasowy #6A5F45 dawałby tu 4,0:1, poniżej AA. */
	--dps-sekcja:       #DBCEB3;  /* Najczęściej szukane */
	--dps-sekcja-mocna: #D5C5A5;  /* Celem działań... */

	--dps-space:        2.4rem;
}

/* Motyw nadrzedny operuje na korzeniu 10 px. Zapisujemy to jako procent,
   zeby skala szla za ustawieniem rozmiaru czcionki w przegladarce -
   twarde 10px nadpisuje preferencje uzytkownika. */
html {
	font-size: 62.5%;
}

/* ==========================================================================
   TYPOGRAFIA
   Source Serif 4 na nagłówki, Source Sans 3 na tekst. Pliki leżą w fonts/
   i są serwowane z naszego serwera - żadnych zapytań do obcych domen.
   Zakra ustawia rodziny inline z Customizera; nasz arkusz ładuje się później,
   więc wygrywa przy tej samej specyficzności.
   ========================================================================== */

body,
.woocommerce-ordering select {
	font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 1.8rem;   /* 18 px - dolna granica dla grupy docelowej */
	line-height: 1.7;
	color: var(--dps-text);
	background-color: var(--dps-bg);
}

h1, h2, h3, h4, h5, h6,
.zak-page-header .zak-page-title,
.zakra-single-article .zak-entry-header .entry-title,
.entry-title:not(.zak-page-title) {
	font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	color: var(--dps-text);
	line-height: 1.25;
}

h1, .zak-page-header .zak-page-title { font-weight: 700; }
h2, h3, h4 { font-weight: 600; }

/* ==========================================================================
   TŁA I KONTENERY
   Zakra wstrzykuje te kolory inline z Customizera - powtarzamy jego selektory,
   żeby nadpisać je bez uciekania się do !important.
   ========================================================================== */

.zak-site,
.zak-content {
	background-color: var(--dps-bg);
}

/* Szerokość treści.
   Motyw ma ustawienie "container width: 1160", ale przy układzie "wide"
   go nie stosuje - kontener dostaje max-width:100% i zerowy odstęp boczny,
   przez co tekst rozpycha się na całą szerokość okna. Wiersz o długości
   1300 px jest nieczytelny, a dla grupy docelowej tym bardziej.
   Ustawiamy to wprost, niezależnie od opcji motywu. */
.zak-content .zak-container,
.zak-header .zak-container,
.zak-footer-bar .zak-container {
	max-width: 120rem;
	margin-inline: auto;
	padding-inline: 3.2rem;
}

.zak-header .zak-main-header {
	background-color: var(--dps-bg);
}

.zak-header .zak-top-bar {
	background-color: var(--dps-band);
	color: var(--dps-text);
}

.zak-header,
.zak-header-sticky-wrapper .sticky-header {
	border-bottom-color: var(--dps-border-strong);
}

.zak-header,
.zak-post,
.zak-secondary,
.zak-footer-bar,
.zak-primary-nav .sub-menu,
.zak-primary-nav .sub-menu li,
.posts-navigation,
.post-navigation,
blockquote,
.wp-block-quote,
.zak-posts .zak-post,
.zak-content-area--boxed .widget {
	border-color: var(--dps-border);
}

/* ==========================================================================
   MENU
   ========================================================================== */

.zak-primary-nav ul li > a,
.zak-main-nav.zak-primary-nav ul.zak-primary-menu > li > a,
.zak-primary-nav.zak-menu-item--layout-2 > ul > li > a {
	color: var(--dps-text);
}

.zak-primary-nav ul li:not(.current-menu-item):hover > a,
.zak-main-nav.zak-primary-nav ul.zak-primary-menu li:not(.current-menu-item):hover > a {
	color: var(--dps-accent-dark);
}

/* Bieżąca pozycja podkreślona, nie tylko przyciemniona - sam kolor nie może
   być jedynym nośnikiem informacji (WCAG 1.4.1). */
.zak-primary-nav ul > li:not(.zak-header-button).current-menu-item > a,
.zak-primary-nav ul > li:not(.zak-header-button).current_page_item > a,
.zak-primary-nav ul > li:not(.zak-header-button).current-menu-ancestor > a,
.zak-primary-nav ul > li:not(.zak-header-button).current_page_ancestor > a {
	color: var(--dps-text);
	box-shadow: inset 0 -3px 0 0 var(--dps-primary);
}

.zak-primary-nav .sub-menu {
	background-color: var(--dps-card);
}

/* Przycisk menu na telefonie miał 32 px szerokości - poniżej progu 44 px,
   a to najważniejszy cel dotyku na całej stronie mobilnej. */
.zak-toggle-menu button,
.zak-toggle-menu > a,
.zak-mobile-nav__header button {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   ODNOŚNIKI I PRZYCISKI
   ========================================================================== */

.entry-content a,
.zak-entry-summary a,
.widget a {
	color: var(--dps-accent);
}

.entry-content a:hover,
.zak-entry-summary a:hover,
.widget a:hover,
.zak-entry-footer a:hover,
.entry-button:hover,
.pagebuilder-content a:hover {
	color: var(--dps-accent-dark);
}

.entry-button:hover .zak-icon {
	fill: var(--dps-accent-dark);
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button .wp-block-button__link,
.zak-button {
	background-color: var(--dps-primary);
	border-color: var(--dps-primary);
	color: #FFFFFF;
	font-weight: 600;
	min-height: 48px;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button .wp-block-button__link:hover,
.zak-button:hover {
	background-color: var(--dps-primary-dark);
	border-color: var(--dps-primary-dark);
	color: #FFFFFF;
}

.zak-scroll-to-top {
	background-color: var(--dps-primary);
}

.zak-scroll-to-top:hover {
	background-color: var(--dps-primary-dark);
}

/* ==========================================================================
   LISTA AKTUALNOŚCI - kafelki
   Zdjęcia z telefonu są pionowe (768x1024), a motyw pokazywał je w pełnej
   szerokości, więc jeden wpis zajmował półtora ekranu.
   ========================================================================== */

.zak-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 3.2rem;
	align-items: stretch;
}

.zak-posts > nav,
.zak-posts > .navigation,
.zak-posts > .zak-posts-navigation,
.zak-posts > .no-results {
	grid-column: 1 / -1;
}

.zak-posts .zak-post {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	background: var(--dps-card);
	border: 1px solid var(--dps-border);
	border-radius: 6px;
	overflow: hidden;
}

.zak-posts .zak-entry-thumbnail {
	margin: 0;
	background: var(--dps-placeholder);
}

.zak-posts .zak-entry-thumbnail__link {
	display: block;
	line-height: 0;
}

/* Stałe proporcje kadru - kafelki są równej wysokości niezależnie od tego,
   czy zdjęcie jest pionowe czy poziome. */
.zak-posts .zak-entry-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.zak-posts .zak-post-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 2rem var(--dps-space) var(--dps-space);
}

.zak-posts .entry-title {
	font-size: 2.2rem;
	line-height: 1.3;
	margin: 0 0 0.8rem;
}

.zak-posts .zak-entry-meta {
	font-size: 1.6rem;
	color: var(--dps-muted);
	margin-bottom: 1.2rem;
}

/* Motyw wypisuje "Autor:" z pustym odnośnikiem (href="/author/" bez treści).
   To nie tylko wygląda źle - link bez nazwy to błąd dostępności. */
.zak-byline {
	display: none;
}

/* Na liście kategorii każdy kafelek należy do tej samej kategorii, więc
   "Opublikowano w Aktualności" przy każdym to szum - zostaje sama data. */
.zak-posts .zak-cat-links {
	display: none;
}

.zak-posts .zak-entry-summary {
	font-size: 1.7rem;
	line-height: 1.7;
	color: var(--dps-body);
}

.zak-posts .zak-entry-footer {
	margin-top: auto;
	padding-top: 1.6rem;
	border: 0;
}

/* Obszar klikalny min. 44x44 px - grupa docelowa to osoby starsze. */
.zak-posts .entry-button {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	min-height: 44px;
	font-weight: 600;
	color: var(--dps-accent);
}

/* CAŁY kafelek jest celem dotyku.
   Sam tytuł miał 29 px wysokości, a data 23 px - na telefonie to za mało,
   zwłaszcza dla osób starszych. Nakładka rozciąga odnośnik tytułu na całą
   kartę; pozostałe odnośniki w kafelku i tak prowadzą do tego samego wpisu. */
.zak-posts .zak-post {
	position: relative;
}

.zak-posts .entry-title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Widoczne ognisko obejmuje wtedy cały kafelek, a nie sam napis. */
.zak-posts .zak-post:has(.entry-title a:focus-visible) {
	outline: 3px solid var(--dps-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   PASEK KONTAKTOWY NAD MENU
   Telefon i e-mail od razu widoczne - dla rodziny szukającej miejsca dla
   bliskiego to najczęstsza pierwsza potrzeba.
   ========================================================================== */

.dps-pasek-kontaktowy {
	background: var(--dps-pasek);
	/* Bez jasnej kreski na dole - przy ciemnym pasku sam kolor wystarcza
	   za oddzielenie, a kremowa linia odcinałaby się jak rysa. */
	font-size: 1.6rem;
}

.dps-pasek-kontaktowy__srodek {
	max-width: 120rem;
	margin-inline: auto;
	padding: 0.4rem 3.2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem 2.4rem;
}

.dps-pasek-kontaktowy p {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.6rem;
	color: var(--dps-pasek-tekst);
}

/* Obszar dotyku min. 44 px także tutaj - to pierwszy odnośnik na stronie. */
.dps-pasek-kontaktowy a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.4rem;
	color: var(--dps-pasek-tekst);
	text-decoration: none;
}

.dps-pasek-kontaktowy a:hover,
.dps-pasek-kontaktowy a:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
   STOPKA Z DANYMI KONTAKTOWYMI
   ========================================================================== */

.dps-stopka {
	background: var(--dps-footer);
	color: var(--dps-footer-text);
	font-size: 1.7rem;
	line-height: 1.65;
}

.dps-stopka__srodek {
	max-width: 120rem;
	margin-inline: auto;
	padding: 4rem 3.2rem 2.4rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
	gap: 3.2rem;
}

.dps-stopka p {
	margin: 0 0 0.8rem;
}

.dps-stopka__nazwa {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 2.1rem;
	font-weight: 600;
	color: #FFFFFF;
}

.dps-stopka__tytul {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #D9C79A;
}

/* Cel dotyku min. 44 px także w stopce - miał 36 px. */
.dps-stopka a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--dps-footer-text);
	text-decoration: underline;
}

.dps-stopka a:hover,
.dps-stopka a:focus-visible {
	color: #FFFFFF;
}

/* Selektor podwójny celowo. Reguła ".dps-stopka p" wyżej ma wyższą
   specyficzność niż samo ".dps-stopka__nota" i nadpisywała margin: 0 auto
   swoim margin: 0 0 0.8rem. Nota stała przez to przy lewej krawędzi,
   a jej górna kreska kończyła się w połowie szerokości ekranu. */
.dps-stopka .dps-stopka__nota {
	max-width: 120rem;
	margin: 0 auto;
	text-align: center;
	padding: 1.6rem 3.2rem 3.2rem;
	border-top: 1px solid rgba(243, 233, 206, 0.22);
	font-size: 1.5rem;
	color: #C9BFA4;
}

@media (max-width: 768px) {
	.dps-pasek-kontaktowy__srodek,
	.dps-stopka__srodek,
	.dps-stopka__nota {
		padding-inline: 2rem;
	}

	.dps-pasek-kontaktowy__srodek {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   STRONA GŁÓWNA
   Zbudowana z bloków rdzenia, żeby personel mógł ją edytować bez kodu.
   Klasy nadajemy blokom, a wygląd trzymamy tutaj - w jednym miejscu.
   ========================================================================== */

.home .zak-primary {
	padding-top: 3.2rem;
}

.dps-hero {
	align-items: center;
	gap: 4rem;
	margin-bottom: 5.6rem;
}

.dps-hero h1 {
	/* Skaluje się z szerokością - na telefonie 30 px, na desktopie 52 px. */
	font-size: clamp(3rem, 1.6rem + 2.6vw, 5.2rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 1.6rem;
	text-wrap: pretty;
}

.dps-lead {
	font-size: 2.1rem;
	line-height: 1.6;
	color: var(--dps-body);
	margin-bottom: 2.4rem;
	text-wrap: pretty;
}

.dps-hero .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
}

.dps-hero .wp-block-button__link {
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	border-radius: 4px;
}

.dps-hero .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--dps-primary);
	border: 2px solid var(--dps-primary);
}

.dps-hero .is-style-outline .wp-block-button__link:hover {
	background: var(--dps-primary);
	color: #FFFFFF;
}

/* --- Najczęściej szukane --- */

.dps-szukane {
	background: var(--dps-sekcja);
	/* Bez obramowania - wypełnienie samo odcina sekcję od białej strony,
	   a kremowa ramka na brązowym tle wyglądała jak obwódka po naklejce. */
	border: 0;
	border-radius: 8px;
	padding: 3.2rem;
	margin-bottom: 5.6rem;
}

.dps-szukane h2 {
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dps-body);
	margin: 0 0 2rem;
}

.dps-karta {
	position: relative;
	margin: 0;
	padding: 2.2rem 2.4rem;
	background: var(--dps-card);
	border: 1px solid var(--dps-border);
	border-radius: 6px;
	height: 100%;
}

/* Cała karta jest celem dotyku, nie sam napis (miał 37 px wysokości). */
.dps-karta a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.dps-karta:has(a:focus-visible) {
	outline: 3px solid var(--dps-accent);
	outline-offset: 2px;
}

.dps-karta a {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 2.2rem;
	color: var(--dps-text);
	text-decoration: none;
}

.dps-karta a:hover {
	color: var(--dps-accent-dark);
	text-decoration: underline;
}

.dps-karta span {
	display: block;
	margin-top: 0.6rem;
	font-size: 1.7rem;
	color: var(--dps-body);
}

/* Strony-wieszaki (Nasz Dom, Aktywność, Galeria) - te same karty co na
   stronie głównej, żeby serwis czytał się jednolicie. */
/* Siatka zamiast rzędu kolumn. Blok Kolumny układa wszystko w jednym
   rzędzie, więc pięć kart na Naszym Domu było wąskich, a „Zasady
   funkcjonowania i organizacja Domu" łamało się w cztery linijki.
   Liczba kolumn zależy od liczby kart, żeby nigdzie nie zostało puste
   miejsce: 5 kart - trzy u góry i dwie szersze na dole, 3 - jeden rząd,
   2 i 4 - po dwie. Selektory mają tę samą specyficzność co reguły
   liczebne, dlatego w zapytaniach o szerokość powtarzamy je w całości. */
.page .entry-content .wp-block-columns.dps-wieszak {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	margin-top: 2.4rem;
}

.page .entry-content .wp-block-columns.dps-wieszak > .wp-block-column {
	min-width: 0;
	margin: 0;
}

.page .entry-content .wp-block-columns.dps-wieszak:has(> .wp-block-column:nth-child(2):last-child),
.page .entry-content .wp-block-columns.dps-wieszak:has(> .wp-block-column:nth-child(4):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page .entry-content .wp-block-columns.dps-wieszak:has(> .wp-block-column:nth-child(5):last-child) {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.page .entry-content .wp-block-columns.dps-wieszak:has(> .wp-block-column:nth-child(5):last-child) > .wp-block-column {
	grid-column: span 2;
}

.page .entry-content .wp-block-columns.dps-wieszak:has(> .wp-block-column:nth-child(5):last-child) > .wp-block-column:nth-child(n+4) {
	grid-column: span 3;
}

@media (max-width: 1024px) {
	.page .entry-content .wp-block-columns.dps-wieszak:has(> .wp-block-column:nth-child(5):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.page .entry-content .wp-block-columns.dps-wieszak:has(> .wp-block-column:nth-child(5):last-child) > .wp-block-column,
	.page .entry-content .wp-block-columns.dps-wieszak:has(> .wp-block-column:nth-child(5):last-child) > .wp-block-column:nth-child(n+4) {
		grid-column: auto;
	}

	/* Piąta karta sama w ostatnim rzędzie - na całą szerokość zamiast
	   połówki z pustym miejscem obok. */
	.page .entry-content .wp-block-columns.dps-wieszak:has(> .wp-block-column:nth-child(5):last-child) > .wp-block-column:nth-child(5) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 781px) {
	.page .entry-content .wp-block-columns.dps-wieszak,
	.page .entry-content .wp-block-columns.dps-wieszak:has(> .wp-block-column:nth-child(2):last-child),
	.page .entry-content .wp-block-columns.dps-wieszak:has(> .wp-block-column:nth-child(4):last-child),
	.page .entry-content .wp-block-columns.dps-wieszak:has(> .wp-block-column:nth-child(5):last-child) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Tytuł i opis jeden pod drugim. Dotychczasowe display:flex bez kierunku
   ustawiłoby opis obok tytułu, w tym samym wierszu. */
.dps-wieszak .dps-karta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 0.6rem;
	min-height: 11rem;
}

.dps-wieszak .dps-karta span {
	margin-top: 0;
}

/* Wstęp pod tytułem strony stał wklejony w nagłówek. */
.page .entry-content > .dps-lead:first-child {
	margin-top: 0.8rem;
}

/* --- Z życia Domu --- */

.dps-naglowek-sekcji {
	font-size: 3.4rem;
	margin-bottom: 2.4rem;
}

/* Blok układa kafelki przez flex-wrap, a trzy karty po 385 px plus odstępy
   przekraczały szerokość treści - trzecia zawijała się do drugiego rzędu.
   Siatka o stałych trzech kolumnach zawsze mieści je w jednej linii.

   Selektor musi być bardziej szczegółowy niż .wp-block-latest-posts.is-grid,
   bo arkusz bloków WordPressa ładuje się PO naszym i przy remisie wygrywa. */
ul.dps-najnowsze.wp-block-latest-posts__list,
ul.dps-najnowsze.wp-block-latest-posts__list.is-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3.2rem;
	align-items: stretch;
}

/* Blok ustawia na pozycjach listy width: calc(33.33% - 1.25em) - sensowne przy
   układzie flex, ale w komórce siatki liczy 33% z już podzielonej szerokości
   i ściska kafelek do 111 px. Odstępy trzyma gap, więc marginesy też zerujemy.
   Selektor musi mieć wyższą wagę niż .wp-block-latest-posts.is-grid.columns-3 li. */
ul.dps-najnowsze.wp-block-latest-posts__list.is-grid > li,
ul.dps-najnowsze.wp-block-latest-posts__list > li {
	width: auto;
	max-width: none;
	flex-basis: auto;
	margin: 0;
}

.dps-najnowsze li {
	display: flex;
	flex-direction: column;
	background: var(--dps-card);
	border: 1px solid var(--dps-border);
	border-radius: 6px;
	overflow: hidden;
	margin: 0;
}

/* Blok owija zdjęcie w kontener z klasą wyrównania, która ogranicza szerokość
   i centruje - w kafelku ma być pełna szerokość kadru. */
.dps-najnowsze .wp-block-latest-posts__featured-image,
.dps-najnowsze .wp-block-latest-posts__featured-image.aligncenter {
	margin: 0;
	width: 100%;
	max-width: none;
	text-align: initial;
}

.dps-najnowsze .wp-block-latest-posts__featured-image a {
	display: block;
	line-height: 0;
}

.dps-najnowsze .wp-block-latest-posts__featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.dps-najnowsze .wp-block-latest-posts__post-title {
	display: block;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 2.2rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--dps-text);
	text-decoration: none;
	padding: 2rem 2.4rem 0;
}

.dps-najnowsze .wp-block-latest-posts__post-title:hover {
	color: var(--dps-accent-dark);
	text-decoration: underline;
}

.dps-najnowsze .wp-block-latest-posts__post-date {
	padding: 0.8rem 2.4rem 0;
	font-size: 1.6rem;
	color: var(--dps-muted);
}

.dps-najnowsze .wp-block-latest-posts__post-excerpt {
	padding: 0.8rem 2.4rem 2.4rem;
	margin: 0;
	font-size: 1.7rem;
	color: var(--dps-body);
}

.dps-wiecej {
	margin: 2.4rem 0 5.6rem;
	font-size: 1.8rem;
	font-weight: 600;
}

.dps-wiecej a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* --- zamknięcie --- */

.dps-misja {
	background: var(--dps-sekcja-mocna);
	border-radius: 8px;
	padding: 3.2rem;
}

.dps-misja p {
	margin: 0;
	font-size: 1.9rem;
	color: var(--dps-text);
	text-wrap: pretty;
}

@media (max-width: 781px) {
	.dps-hero {
		gap: 2.4rem;
		margin-bottom: 4rem;
	}

	.dps-szukane,
	.dps-misja {
		padding: 2.4rem 2rem;
	}

	ul.dps-najnowsze.wp-block-latest-posts__list,
	ul.dps-najnowsze.wp-block-latest-posts__list.is-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* ==========================================================================
   OGŁOSZENIA - lista, nie kafelki
   Przetargi i komunikaty nie mają zdjęć, więc siatka kafelków dałaby rząd
   pustych prostokątów. Liczy się data i dokumenty do pobrania.
   ========================================================================== */

.category-ogloszenia .zak-posts {
	display: block;
}

.category-ogloszenia .zak-posts .zak-post {
	border: 0;
	border-bottom: 1px solid var(--dps-border);
	border-radius: 0;
	margin: 0 0 3.2rem;
	padding: 0 0 3.2rem;
	background: transparent;
}

.category-ogloszenia .zak-posts .zak-entry-thumbnail {
	display: none;
}

.category-ogloszenia .zak-posts .zak-post-content {
	padding: 0;
}

.category-ogloszenia .zak-posts .entry-title {
	font-size: 2.4rem;
}

.dps-zalaczniki-naglowek {
	margin: 2rem 0 0.8rem;
	font-weight: 600;
	color: var(--dps-text);
}

.dps-zalaczniki {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.dps-zalaczniki li {
	margin: 0;
}

/* Obszar klikalny min. 44x44 px - dokumenty pobierają często osoby starsze. */
.dps-zalaczniki a {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	min-height: 44px;
	padding: 0.8rem 1.44rem;
	background: var(--dps-card);
	border: 1px solid var(--dps-border-strong);
	border-radius: 6px;
	text-decoration: none;
	color: var(--dps-accent);
}

.dps-zalaczniki a:hover,
.dps-zalaczniki a:focus-visible {
	background: var(--dps-band-soft);
	text-decoration: underline;
}

.dps-zalaczniki .dps-typ {
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--dps-muted);
}

/* ==========================================================================
   POJEDYNCZY WPIS
   ========================================================================== */

/* Zdjęcie wiodące wpisu.
   Bez tego pionowa fotografia z telefonu renderowała się jako 1200x1600 px -
   ściana obrazu przed jakimkolwiek tekstem. Stała wysokość z kadrowaniem
   daje przewidywalny nagłówek niezależnie od orientacji zdjęcia. */
.single-post .zak-entry-thumbnail img {
	display: block;
	width: 100%;
	height: 44rem;
	object-fit: cover;
	border-radius: 6px;
}

.single-post .entry-content img {
	max-width: 100%;
	height: auto;
	/* Pionowe zdjęcia z telefonu mają 1024 px wysokości i wypychały tekst
	   poza ekran. */
	max-height: 70vh;
	width: auto;
	margin-inline: auto;
	border-radius: 6px;
}

/* ==========================================================================
   POJEDYNCZE ZDJĘCIA W TREŚCI STRON
   Zdjęcia z telefonu są pionowe (768×1024) i bez ograniczenia zajmowały cały
   ekran, spychając tekst. Na stronie informacyjnej ilustracja ma wspierać
   tekst, a nie go zastępować.
   ========================================================================== */

.page .entry-content img {
	display: block;
	max-width: 100%;
	max-height: 44rem;
	width: auto;
	height: auto;
	margin: 2.4rem auto;
	border-radius: 6px;
}

/* ==========================================================================
   PROCEDURA KROK PO KROKU
   ========================================================================== */

.dps-kroki {
	list-style: none;
	counter-reset: dps-krok;
	margin: 2.4rem 0 3.2rem;
	padding: 0;
	display: grid;
	gap: 1.6rem;
}

.dps-kroki li {
	counter-increment: dps-krok;
	position: relative;
	margin: 0;
	padding: 2rem 2.4rem 2rem 7.2rem;
	background: var(--dps-card);
	border: 1px solid var(--dps-border);
	border-radius: 6px;
	line-height: 1.6;
}

.dps-kroki li::before {
	content: counter(dps-krok);
	position: absolute;
	left: 2rem;
	top: 1.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 50%;
	background: var(--dps-primary);
	color: #FFFFFF;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1;
}

@media (max-width: 600px) {
	.dps-kroki li {
		padding: 1.8rem 1.8rem 1.8rem 6.4rem;
	}

	.dps-kroki li::before {
		left: 1.4rem;
		width: 3.2rem;
		height: 3.2rem;
		font-size: 1.7rem;
	}
}

/* ==========================================================================
   GALERIE
   Ciągi zdjęć z treści przeniesionej z Elementora są grupowane filtrem
   w functions.php i tutaj dostają siatkę. Bez tego lecą jedno pod drugim
   i zlewają się w plamę.
   ========================================================================== */

/* Zdjęcia układają się w rzędzie i zawijają same - liczba kolumn wynika
   z dostępnej szerokości, a nie z twardej wartości. Minimum 30rem daje przy
   treści 1200 px trzy kadry po ~389 px: na tyle duże, że widać, co
   przedstawiają. Wcześniejsze 240 px robiło z nich kwadraciki.

   auto-fit, nie auto-fill: gdy zdjęć jest mniej niż kolumn, puste ścieżki
   znikają i dwa zdjęcia zajmują całą szerokość zamiast zostawiać dziurę. */
.dps-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	gap: 1.6rem;
	margin: 2.4rem 0 3.2rem;
}

/* Zabezpieczenie: gdyby cokolwiek wstawiło jeszcze <br> między kafelki,
   nie może zająć komórki siatki. */
.dps-galeria br {
	display: none;
}

.dps-galeria__kafelek {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--dps-placeholder);
	cursor: zoom-in;
	min-height: 0;
	line-height: 0;
}

.dps-galeria__kafelek:hover .dps-galeria__lupa,
.dps-galeria__kafelek:focus-visible .dps-galeria__lupa {
	opacity: 1;
}

/* Wyższa specyficzność niż reguła dla pojedynczych zdjęć we wpisie -
   inaczej max-height:70vh rozsadziłby komórki siatki. */
.entry-content .dps-galeria img,
.single-post .entry-content .dps-galeria img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	margin: 0;
}

.dps-galeria__lupa {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgba(43, 36, 23, 0.82);
	color: #FFFFFF;
	opacity: 0;
	transition: opacity 0.15s ease;
}

/* ==========================================================================
   POWIĘKSZENIE ZDJĘCIA
   ========================================================================== */

.dps-tylko-czytnik {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

body.dps-lightbox-otwarty {
	overflow: hidden;
}

.dps-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* KONIECZNE. Przeglądarka ukrywa element z atrybutem hidden regułą
   [hidden] { display: none } ze swojego arkusza, ale KAŻDA reguła autora ma
   nad nią pierwszeństwo - powyższe display:flex ją nadpisywało i okno
   zostawało na ekranie mimo hidden="true". */
.dps-lightbox[hidden] {
	display: none;
}

.dps-lightbox__tlo {
	position: absolute;
	inset: 0;
	background: rgba(24, 20, 12, 0.92);
}

/* Sterowanie jest przypięte do okna przeglądarki, nie do panelu ze zdjęciem.
   Wcześniej przycisk zamknięcia siedział 6 rem NAD panelem i przy niższym
   oknie wychodził poza ekran - nie dało się go kliknąć. */
.dps-lightbox__panel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: min(120rem, 100vw);
	padding: 8rem 9rem;
}

.dps-lightbox__figura {
	margin: 0;
	text-align: center;
}

.dps-lightbox__obraz {
	display: block;
	max-width: 100%;
	max-height: 82vh;
	width: auto;
	height: auto;
	border-radius: 4px;
}

.dps-lightbox__podpis {
	margin: 1.2rem 0 0;
	color: #F3E9CE;
	font-size: 1.7rem;
	text-wrap: pretty;
}

.dps-lightbox__licznik {
	position: fixed;
	left: 50%;
	bottom: 2rem;
	transform: translateX(-50%);
	margin: 0;
	color: #C9BFA4;
	font-size: 1.6rem;
}

/* Obszary dotyku min. 48 px - powiększenie obsługują też osoby starsze. */
.dps-lightbox__zamknij,
.dps-lightbox__nawigacja {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.2rem;
	height: 5.2rem;
	min-height: 0;
	flex: none;
	padding: 0;
	border: 2px solid rgba(243, 233, 206, 0.5);
	border-radius: 50%;
	background: rgba(43, 36, 23, 0.9);
	color: #F3E9CE;
	cursor: pointer;
}

.dps-lightbox__zamknij:hover,
.dps-lightbox__nawigacja:hover {
	background: var(--dps-primary);
	border-color: #F3E9CE;
	color: #FFFFFF;
}

/* Wszystkie trzy przyciski przypięte do okna - zawsze w zasięgu, niezależnie
   od rozmiaru zdjęcia i wysokości ekranu. */
.dps-lightbox__zamknij {
	position: fixed;
	top: 1.6rem;
	right: 1.6rem;
}

.dps-lightbox__nawigacja {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
}

.dps-lightbox__nawigacja--wstecz { left: 1.6rem; }
.dps-lightbox__nawigacja--dalej  { right: 1.6rem; }

@media (max-width: 781px) {
	.dps-galeria {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
		gap: 1.2rem;
	}

	.dps-lightbox__panel {
		padding: 7rem 1.2rem 9rem;
	}

	/* Na telefonie strzałki na dole, żeby nie zasłaniały zdjęcia. */
	.dps-lightbox__nawigacja {
		top: auto;
		bottom: 1.8rem;
		transform: none;
	}

	.dps-lightbox__nawigacja--wstecz { left: 2.4rem; }
	.dps-lightbox__nawigacja--dalej  { right: 2.4rem; }

	.dps-lightbox__licznik {
		bottom: 3.4rem;
	}
}

.single-post .entry-content p {
	line-height: 1.7;
	color: var(--dps-body);
}

/* Motyw drukuje datę i kategorię wpisu w 14 px - poniżej progu czytelności
   dla grupy docelowej. */
.single-post .zak-entry-meta,
.single-post .zak-entry-meta a,
.single-post .zak-posted-on,
.single-post .zak-cat-links {
	font-size: 1.6rem;
	color: var(--dps-muted);
}

/* Cele dotyku w metadanych i w nawigacji między wpisami miały 23-24 px. */
.single-post .zak-entry-meta a,
.post-navigation a,
.posts-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Odnośniki do dokumentów w wykazach (statut, regulamin) - samodzielne cele,
   nie odnośniki wplecione w zdanie. */
.entry-content li > a:only-child {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ==========================================================================
   STOPKA
   Customizer ustawiał tu tekst #fafafa na tle #ffffff - biały na białym,
   czyli treść niewidoczna. Poprawione na ciemne tło z jasnym tekstem.
   ========================================================================== */

.zak-footer-bar {
	background-color: var(--dps-footer);
	color: var(--dps-footer-text);
	/* Nota nad tym paskiem ma już własną kreskę. Druga, na całą szerokość,
	   tworzyła podwójną linię z pustym pasem pomiędzy. */
	border-top-width: 0;
}

/* Dół stopki wyśrodkowany - nota i wiersz archiwum pod nią. */
.zak-footer-bar .zak-row {
	justify-content: center;
}

.zak-footer-bar.zak-style-2 .zak-footer-bar__1 {
	flex: 1 1 100%;
	text-align: center;
}

.zak-footer-bar a,
.zak-footer-bar p a {
	color: var(--dps-footer-text);
	text-decoration: underline;
}

.zak-footer-bar a:hover {
	color: #FFFFFF;
}

.dps-archiwum-stopka {
	margin: 0.8rem 0;
}

/* Roczniki w pasku stopki miały 32 px wysokości - za mało na telefonie. */
.dps-archiwum-stopka a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.8rem;
}

/* ==========================================================================
   DOSTĘPNOŚĆ
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--dps-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   TELEFON
   ========================================================================== */

@media (max-width: 768px) {
	body {
		font-size: 1.7rem;
	}

	.zak-content .zak-container,
	.zak-header .zak-container,
	.zak-footer-bar .zak-container {
		padding-inline: 2rem;
	}

	.single-post .zak-entry-thumbnail img {
		height: 24rem;
	}

	.zak-posts {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.zak-posts .entry-title {
		font-size: 2.1rem;
	}
}

/* ==========================================================================
   Roczniki aktualnosci
   ========================================================================== */

/* Pasek lat nad lista wpisow. Prosba z DPS: kliknieciem w Aktualnosci maja
   byc widoczne roczniki. Stoi miedzy tytulem archiwum a kafelkami. */
.dps-lata {
	margin: 0 0 var(--dps-space);
}

.dps-lata__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dps-lata__rok {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6rem;
	/* 44 px to minimalny obszar dotyku - grupa docelowa to osoby starsze
	   i ich rodziny, czesto na telefonie. Odstepy dobrane tak, zeby przycisk
	   mial realnie okolo 48 px: samo min-height zostawialo 43,99 px po
	   zaokragleniu podpikselowym, czyli wartosc graniczna przy pomiarze. */
	min-height: 44px;
	padding: 1.2rem 1.8rem;
	border: 1px solid var(--dps-border-strong);
	border-radius: 2px;
	background: var(--dps-card);
	color: var(--dps-text);
	font-size: 1.7rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
}

.dps-lata__rok:hover {
	border-color: var(--dps-primary);
	background: var(--dps-band-soft);
	color: var(--dps-text);
}

.dps-lata__rok:focus-visible {
	outline: 3px solid var(--dps-primary);
	outline-offset: 2px;
}

/* Rocznik otwarty. Rozroznienie nie opiera sie na samym kolorze: dochodzi
   odwrocone tlo, grubsza ramka i atrybut aria-current dla czytnikow. */
.dps-lata__rok--wybrany,
.dps-lata__rok--wybrany:hover {
	background: var(--dps-primary);
	border-color: var(--dps-primary);
	color: #FFFFFF;
}

.dps-lata__ile {
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--dps-muted);
}

.dps-lata__rok--wybrany .dps-lata__ile {
	color: var(--dps-footer-text);
}

/* Nazwa i adres w pasku kontaktowym. Na waskich ekranach sama ulica schodzi
   z drogi - nazwa Domu i telefon sa wazniejsze, a adres jest w stopce. */
.dps-pasek-kontaktowy__nazwa {
	font-weight: 600;
}

@media (max-width: 47.9em) {
	.dps-pasek-kontaktowy__adres {
		display: none;
	}
}

/* ==========================================================================
   Baner ciasteczek
   ========================================================================== */

/* Wtyczka Cookie Notice wpisuje kolory wprost w atrybut style znacznika,
   dlatego jedyna droga to !important - regula z arkusza z !important
   wygrywa ze zwyklym stylem wpisanym w element.
   Domyslne tlo to rgba(0,0,0,0.6): tresc strony przeswituje przez baner,
   a bialy tekst na jasnym zdjeciu robi sie nieczytelny. To realny blad
   kontrastu, a strona podmiotu publicznego podlega WCAG 2.1 AA.
   Pelne tlo stopki z kremowym tekstem daje 10,02:1. */
#cookie-notice {
	background-color: var(--dps-footer) !important;
}

#cookie-notice .cookie-notice-container {
	color: var(--dps-footer-text) !important;
	padding: 1.6rem 2.4rem;
}

#cookie-notice .cn-text-container {
	font-size: 1.6rem;
	line-height: 1.6;
}

/* Przycisk zgody: jasny na ciemnym pasku, 10:1, z obszarem dotyku 44 px. */
#cookie-notice .cn-set-cookie.cn-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.8rem 2.8rem;
	background: var(--dps-footer-text) !important;
	color: var(--dps-footer) !important;
	border: 1px solid var(--dps-footer-text);
	border-radius: 2px;
	font-size: 1.6rem;
	font-weight: 700;
	text-shadow: none;
}

#cookie-notice .cn-set-cookie.cn-button:hover {
	background: #FFFFFF !important;
}

#cookie-notice .cn-set-cookie.cn-button:focus-visible,
#cookie-notice .cn-close-icon:focus-visible {
	outline: 3px solid var(--dps-footer-text);
	outline-offset: 3px;
}

#cookie-notice .cn-close-icon {
	min-width: 44px;
	min-height: 44px;
}

/* Widget dostepnosci: odstep od gory ustawiony jest w samej wtyczce
   (Pojo -> a11y_toolbar_distance_top_mobile), a nie tutaj. Domyslne 50 px
   na telefonie kladlo przycisk dokladnie na numerze telefonu w pasku
   kontaktowym, ktory po dopisaniu nazwy Domu ma trzy linie.
   Nadpisywanie tego CSS-em wymagaloby podbijania specyficznosci, bo wtyczka
   wypisuje wlasny blok <style> z !important nizej w dokumencie - dlatego
   zmiana siedzi w ustawieniu wtyczki, gdzie jej miejsce. */

/* ==========================================================================
   Zdjecia w kolumnach na stronach
   ========================================================================== */

/* Reguła ograniczająca wysokość zdjęć chroni przed pionowymi kadrami
   z telefonu, które inaczej rozpychają stronę na dwa ekrany. Ma jednak
   skutek uboczny: szerokie zdjęcie krajobrazowe też dostaje limit wysokości,
   przez co kurczy się wszerz i ląduje jako mały prostokąt na środku pustego
   pasa. Zdjęcia wstawione w pełnym rozmiarze zwalniamy z tego limitu. */
.page .entry-content .wp-block-image.size-full img {
	max-height: none;
}

/* Zdjęcie w kolumnie obok tekstu ma być towarzyszem akapitu, nie jego
   konkurentem - niższy limit trzyma proporcje między nimi. */
.page .entry-content .wp-block-column img {
	max-height: 34rem;
	width: auto;
}

/* Zakra dokłada każdemu blokowi kolumn padding: 3em 2em. Skutek jest
   podwójny: na komputerze blok wcina się względem pozostałych akapitów,
   a na telefonie tekst w kolumnie zaczyna się o 33 px dalej niż tekst poza
   nią - wygląda to na przypadkowe przesunięcie. Odstępy ustawiamy sami. */
.page .entry-content .wp-block-columns {
	padding: 0;
	gap: var(--dps-space);
	margin-bottom: var(--dps-space);
}

/* ==========================================================================
   Karty ułożone przez motyw
   Kilka akapitów w formacie „Karta" pod rząd filtr w functions.php owija
   w <div class="dps-karty" data-kart="N">. Liczba kolumn zależy od N,
   żeby nigdzie nie zostało puste miejsce.
   ========================================================================== */

.dps-karty {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	margin: 2.4rem 0 var(--dps-space);
}

.dps-karty[data-kart="2"],
.dps-karty[data-kart="4"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Pięć kart: trzy u góry, dwie szersze na dole. */
.dps-karty[data-kart="5"] {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dps-karty[data-kart="5"] > .dps-karta {
	grid-column: span 2;
}

.dps-karty[data-kart="5"] > .dps-karta:nth-child(n+4) {
	grid-column: span 3;
}

@media (max-width: 1024px) {
	.dps-karty[data-kart="5"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dps-karty[data-kart="5"] > .dps-karta,
	.dps-karty[data-kart="5"] > .dps-karta:nth-child(n+4) {
		grid-column: auto;
	}

	.dps-karty[data-kart="5"] > .dps-karta:nth-child(5) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 781px) {
	.dps-karty,
	.dps-karty[data-kart="2"],
	.dps-karty[data-kart="4"],
	.dps-karty[data-kart="5"] {
		grid-template-columns: minmax(0, 1fr);
	}

	.dps-karty[data-kart="5"] > .dps-karta:nth-child(5) {
		grid-column: auto;
	}
}

/* Tytuł nad opisem - także gdy opis jest zwykłym tekstem wpisanym po
   Shift+Enter, a nie w <span>. Tekst po <br> staje się osobnym elementem
   kolumny, więc sam <br> jest już zbędny i tylko dokładałby pustą linię. */
.dps-karta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 1.7rem;
	line-height: 1.55;
	color: var(--dps-body);
}

.dps-karta > br {
	display: none;
}

.dps-karta span {
	margin-top: 0;
}

.dps-karty .dps-karta {
	justify-content: center;
	min-height: 11rem;
	margin: 0;
}