/* =========================================================
   FCBA — arkusz główny
   Wartości odwzorowane 1:1 z produkcji fundacjafcba.com
   (wyliczone style pobrane z przeglądarki, nie na oko).

   1. Tokeny      6. Sekcje         11. Formularze
   2. Baza        7. Moduły         12. Mapa
   3. Layout      8. Karty          13. Nawigacja wtórna
   4. Header      9. Treść stron    14. Responsywność
   5. Baner      10. Stopka
   ========================================================= */

/* --- 1. Tokeny ------------------------------------------------ */
:root {
	/* Kolory z produkcji */
	--fcba-primary: #00294b;        /* menu, nadtytuły, linki, CTA */
	--fcba-primary-hover: #003d7c;
	--fcba-accent: #004884;         /* ikony list */
	--fcba-bar: #14457b;            /* pasek dolny stopki */
	--fcba-heading: #1b1f2e;        /* nagłówki */
	--fcba-ink: #071c1f;            /* śródtytuły w modułach */
	--fcba-body: #7a838b;           /* tekst ciągły */
	--fcba-text-strong: #000;       /* akapity w treści stron */
	--fcba-meta: #888;              /* data na karcie */
	--fcba-link-footer: #535353;
	--fcba-link-footer-hover: #003c88;
	--fcba-border: #cecece;
	--fcba-white: #fff;

	--fcba-breadcrumb-bg: #d8d8d8;
	--fcba-footer-bg: #e4e4e4;
	--fcba-hero-overlay: rgb(0 41 75 / 55%);
	--fcba-card-shadow: 0 5px 10px 0 rgb(50 65 141 / 7%);

	/* Times New Roman jest systemowy — nie ładujemy żadnych webfontów.
	   Liberation Serif to metrycznie zgodny odpowiednik na Linuksie. */
	--fcba-font-body: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;
	--fcba-font-head: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;

	--fcba-container: 1140px;
	--fcba-gutter: 15px;
	--fcba-header-h: 102px;
}

/* --- 2. Baza -------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
	margin: 0;
	font-family: var(--fcba-font-body);
	/* Times ma niższą wysokość x niż DM Sans — przy 16 px tekst był za drobny. */
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--fcba-body);
	background: var(--fcba-white);
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 15px;
	font-family: var(--fcba-font-head);
	font-weight: 700;
	/* Szeryfy z polskimi znakami (Ł, ą, ż) potrzebują więcej światła
	   niż bezszeryfowe — przy 1.0 wiersze się dotykały. */
	line-height: 1.25;
	color: var(--fcba-heading);
}

h1 { font-size: 40px; }
h2 { font-size: 35px; line-height: 1.2; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 19px; }
h6 { font-size: 17px; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

a { color: var(--fcba-primary); text-decoration: none; transition: color .2s ease; }
a:hover, a:focus-visible { color: var(--fcba-primary-hover); }

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

:focus-visible { outline: 2px solid var(--fcba-primary); outline-offset: 2px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; top: -100px; left: 8px; z-index: 999;
	padding: 10px 18px;
	background: var(--fcba-primary); color: var(--fcba-white);
}
.skip-link:focus { top: 0; }

/* --- 3. Layout ------------------------------------------------ */
.container {
	width: 100%;
	max-width: var(--fcba-container);
	margin-inline: auto;
	padding-inline: var(--fcba-gutter);
}

.section { padding-block: 60px; }
.section--muted { background: #f7f9fb; }

/* --- 4. Header ------------------------------------------------ */
/* Produkcja: biały pasek 102 px, bez cienia, przykleja się przy przewijaniu. */
.header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--fcba-white);
}

.header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: var(--fcba-header-h);
}

/* flex-shrink: 1 + min-width: 0 — bez tego logo o stałej szerokości
   wypychało hamburger poza ekran przy 320-375 px. */
.header__brand {
	flex: 0 1 auto;
	min-width: 0;
	margin-right: auto;
}
.header__brand img,
.custom-logo {
	max-height: 56px;
	max-width: 100%;
	width: auto;
	height: auto;
}

.header__title {
	font-family: var(--fcba-font-head);
	font-size: 18px;
	font-weight: 700;
	color: var(--fcba-heading);
}

.nav__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__list li { position: relative; }

/* 14/600 wersalikami, marginesy 40px 10px — jak w Consalt. */
.nav__list > li > a {
	display: block;
	margin: 40px 10px;
	padding: 0;
	font-family: var(--fcba-font-head);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--fcba-primary);
}
.nav__list > li > a:hover,
.nav__list > li > a:focus-visible { color: var(--fcba-primary-hover); }

/* Produkcja nie wyróżnia kolorem bieżącej pozycji — zaznaczamy ją tylko
   podkreśleniem, żeby nie tracić informacji dla czytających. */
.nav__list > .current-menu-item > a,
.nav__list > .current_page_item > a,
.nav__list > .current-menu-ancestor > a,
.nav__list > .current-menu-parent > a {
	color: var(--fcba-primary);
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

.nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 230px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--fcba-white);
	box-shadow: 0 6px 20px rgb(27 31 46 / 12%);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.nav__list li:hover > .sub-menu,
.nav__list li:focus-within > .sub-menu,
.nav__list li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav__list .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-family: var(--fcba-font-head);
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
	color: var(--fcba-heading);
}
.nav__list .sub-menu a:hover { color: var(--fcba-primary); }

/* Strzałka przy pozycjach z podmenu */
.nav__toggle {
	position: absolute;
	top: 50%;
	right: -4px;
	display: none;
	padding: 8px;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	transform: translateY(-50%);
}

.nav__chevron {
	display: block;
	width: 7px; height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}
[aria-expanded="true"] .nav__chevron { transform: rotate(-135deg); }

/* Na desktopie strzałka jest dekoracją obok linku najwyższego poziomu */
@media (min-width: 992px) {
	.nav__list > li.menu-item-has-children > .nav__toggle {
		display: block;
		right: -6px;
		color: var(--fcba-primary);
		pointer-events: none;
	}
	.nav__list > li.menu-item-has-children > a { margin-right: 20px; }
}

.header__burger {
	display: none;
	padding: 10px;
	background: none;
	border: 0;
	cursor: pointer;
}
.header__burger-box { display: block; width: 24px; }
.header__burger-box span {
	display: block;
	height: 2px;
	margin: 5px 0;
	background: var(--fcba-primary);
	transition: transform .22s ease, opacity .22s ease;
}
.header__burger[aria-expanded="true"] .header__burger-box span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__burger[aria-expanded="true"] .header__burger-box span:nth-child(2) { opacity: 0; }
.header__burger[aria-expanded="true"] .header__burger-box span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.header__search { position: relative; flex: 0 0 auto; }

.header__search-toggle {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	color: var(--fcba-primary);
	background: none;
	border: 0;
	cursor: pointer;
}

.header__search-icon {
	position: relative;
	width: 15px; height: 15px;
	border: 2px solid currentColor;
	border-radius: 50%;
}
.header__search-icon::after {
	content: "";
	position: absolute;
	right: -6px; bottom: -4px;
	width: 8px; height: 2px;
	background: currentColor;
	transform: rotate(45deg);
}

.header__search-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 30;
	width: min(360px, 80vw);
	padding: 14px;
	background: var(--fcba-white);
	box-shadow: 0 6px 20px rgb(27 31 46 / 14%);
}
.header__search-panel[hidden] { display: none; }

/* --- 5. Baner (strona główna) --------------------------------- */
/* Produkcja: 544 px, płaska nakładka rgba(0,41,75,.55), obracające się kropki. */
.banner {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 544px;
	padding-block: 40px;
	background-color: var(--fcba-primary);
	background-image: var(--banner-image, none);
	background-size: cover;
	background-position: center;
	color: var(--fcba-white);
	overflow: hidden;
	isolation: isolate;
}

.banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--fcba-hero-overlay);
}

/* Obracający się pierścień kropek — odpowiednik .wirt_ani_slick_image */
.banner__dots {
	position: absolute;
	top: 100px;
	left: 100px;
	z-index: 0;
	width: 872px;
	max-width: 100%;
	pointer-events: none;
	animation: fcba-rotate-45 5s linear 1s infinite alternate;
}

.banner__dots img { width: 100%; height: auto; }

@keyframes fcba-rotate-45 {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(45deg); }
}

/* Produkcja trzyma tekst banera w szerszym kadrze niż zwykły kontener. */
.banner__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1285px;
	margin-inline: auto;
	padding-inline: var(--fcba-gutter);
}

.banner__title {
	margin-bottom: 15px;
	font-family: var(--fcba-font-head);
	font-size: 70px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--fcba-white);
}
.banner__title-line { display: block; }

.banner__lead {
	max-width: 640px;
	margin-bottom: 30px;
	font-size: 19px;
	line-height: 1.7;
	color: var(--fcba-white);
}

/* --- 6. Sekcje i nagłówki ------------------------------------- */
/* Nadtytuł: 16/700 granat, BEZ wersalików i rozstrzelenia. */
.section__eyebrow,
.section-heading .section__eyebrow {
	margin-bottom: 0;
	font-family: var(--fcba-font-head);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--fcba-primary);
}

/* .prose h2 ma tę samą wagę i wygrywa kolejnością — stąd jawny selektor. */
.section__title,
.prose .section__title,
.section-heading .section__title {
	margin-top: 0;
	margin-bottom: 21px;
	font-family: var(--fcba-font-head);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--fcba-heading);
}

/* Podtytuł pod nagłówkiem sekcji (kolor z ustawień widgetu: #161616). */
/* Podtytuł pod nagłówkiem sekcji — w oryginale pogrubiony, 16 px, #161616. */
.section__subtitle {
	margin-bottom: 14px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: #161616;
}
.section__subtitle:last-child { margin-bottom: 0; }

/* Wariant wyśrodkowany — widget Consalt bez witr_style_title.
   Odstępy ciaśniejsze niż w wariancie do lewej, jak w oryginale. */
.section-heading.is-centered { text-align: center; }

/* Produkcja: nadtytuł mb 0, imię mb 0, funkcje margin 10px 0 16px. */
.section-heading.is-centered .section__title,
.prose .section-heading.is-centered .section__title { margin-top: 0; margin-bottom: 0; }
.section-heading.is-centered .section__subtitle { margin: 10px 0 16px; }
.section-heading.is-centered .section__subtitle:last-child { margin-bottom: 0; }

.section-heading { margin-bottom: 30px; }
.section__cta { margin-top: 40px; }
.section__intro { margin-bottom: 30px; }

/* Pasek tytułu podstrony — odpowiednik .breadcumb-area */
.hero {
	padding-block: 60px;
	text-align: center;
	background-color: var(--fcba-breadcrumb-bg);
	background-image: url("../img/texture-bg.jpg");
	background-repeat: repeat;
	background-position: 50% 100%;
}

.hero__title {
	margin-bottom: 5px;
	font-family: var(--fcba-font-head);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: capitalize;
	color: var(--fcba-heading);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 17px;
	line-height: 1.7;
	text-transform: capitalize;
	color: var(--fcba-heading);
}
.breadcrumbs__list a { color: var(--fcba-heading); }
.breadcrumbs__list a:hover { color: var(--fcba-primary); }
.breadcrumbs__item + .breadcrumbs__item::before { content: "-"; margin-right: 6px; }

/* --- 7. Moduły: zdjęcie + tekst ------------------------------- */
.module {
	align-items: flex-start;
	gap: 40px;
	margin-block: 40px;
}

.module .module__media { align-self: stretch; }
.module .module__media figure,
.module .module__media .wp-block-image { margin: 0; }

/* Zdjęcie podąża za długim tekstem zamiast zostawiać pustkę. */
.module .module__media > * {
	position: sticky;
	top: calc(var(--fcba-header-h) + 20px);
}

.module .module__media img { width: 100%; object-fit: cover; }

/* Kolejność kolumn wynika z kolejności w treści — moduł "odwrócony"
   ma najpierw tekst, więc na telefonie tekst jest pierwszy. */

.module__body > *:first-child { margin-top: 0; }

.prose .module__body h2,
.module__body h2 {
	font-size: 35px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--fcba-heading);
}

.prose .module__body h3,
.module__body h3 {
	margin-top: 25px;
	margin-bottom: 5px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--fcba-ink);
}
.prose .module__body > h3:first-child,
.module__body > h3:first-child { margin-top: 0; }

.module__body p { color: var(--fcba-text-strong); }

/* Listy z markerem "›" — odpowiednik akapitów zaczynających się od ">" */
.module__body ul:not(.list--check):not(.list--contact) {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.module__body ul:not(.list--check):not(.list--contact) > li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 22px;
	color: var(--fcba-text-strong);
}

.module__body ul:not(.list--check):not(.list--contact) > li::before {
	content: "\203A";
	position: absolute;
	top: -.05em;
	left: 0;
	font-size: 1.15em;
	font-weight: 700;
	color: var(--fcba-primary);
}

.module__body ul:not(.list--check):not(.list--contact) > li strong { font-weight: 500; }

/* Wariant z ikoną „ptaszka” — jak witr_section_t_widget na Misji */
ul.list--check,
.module__body ul.list--check { list-style: none; margin: 0 0 16px; padding: 0; }

ul.list--check > li,
.module__body ul.list--check > li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 30px;
	color: var(--fcba-body);
}

ul.list--check > li::before,
.module__body ul.list--check > li::before {
	content: "";
	position: absolute;
	top: .25em;
	left: 0;
	width: 19px; height: 19px;
	background-color: var(--fcba-accent);
	-webkit-mask: var(--fcba-check) center / contain no-repeat;
	mask: var(--fcba-check) center / contain no-repeat;
}

:root {
	--fcba-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8a248 248 0 1 0 0 496 248 248 0 0 0 0-496zm144 176L235 349a24 24 0 0 1-34 0l-89-89a24 24 0 0 1 0-34l17-17a24 24 0 0 1 34 0l55 55 131-131a24 24 0 0 1 34 0l17 17a24 24 0 0 1 0 34z'/%3E%3C/svg%3E");
}

/* Maski obrazków przeniesione z Elementora.

   Uwaga: elementorowy hexagon.svg to NIE pełny sześciokąt, tylko PIERŚCIEŃ —
   zewnętrzny sześciokąt z wyciętym mniejszym w środku (stąd biała dziura
   na oryginale). Orientacja: płaskie górna i dolna krawędź, wierzchołki
   po bokach, viewBox 103x89. Kopia 1:1 ścieżki z wtyczki. */
/* Wyższy selektor niż .module .module__media img, żeby maskowany obrazek
   nie był kadrowany — Elementor pokazuje go w naturalnych proporcjach. */
.module .module__media .is-masked img,
.is-masked img {
	width: 100%;
	height: auto;
	object-fit: fill;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	/* Skala z ustawienia _mask_size_scale danego widgetu. */
	-webkit-mask-size: var(--mask-scale, 100%);
	mask-size: var(--mask-scale, 100%);
}

.is-mask-hexagon img {
	-webkit-mask-image: var(--fcba-hex);
	mask-image: var(--fcba-hex);
}

.is-mask-scale-67 img { --mask-scale: 67%; }
.is-mask-scale-75 img { --mask-scale: 75%; }
.is-mask-scale-80 img { --mask-scale: 80%; }
.is-mask-scale-90 img { --mask-scale: 90%; }

:root {
	--fcba-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 103 89'%3E%3Cpath d='M77.2114,0H25.7523L0,44.5045,25.7523,89H77.2114L103,44.5045ZM61.7691,62.261H41.2218L30.9391,44.5045,41.2218,26.739H61.7691L72.0519,44.5045Z'/%3E%3C/svg%3E");
}

/* Wejściowe animacje przewijania — odpowiednik animacji Elementora.
   Klasę is-visible dokłada IntersectionObserver (assets/js/theme.js).

   Świadomie @keyframes z animation-fill-mode: forwards, a NIE transition.
   Transition potrafi utknąć w stanie "running" (np. gdy karta jest w tle albo
   element trafi na własną warstwę kompozytora) i treść zostaje niewidoczna
   na stałe. Animacja z fill: forwards zawsze kończy się stanem docelowym.

   Ukrywamy WYŁĄCZNIE gdy JS działa (klasa .js na <html>), żeby przy
   wyłączonym skrypcie treść nigdy nie została niewidoczna. */
.js .fcba-anim { opacity: 0; }

.js .fcba-anim.is-visible { animation: fcba-reveal .8s ease forwards; }

.js .fcba-anim--fadeInUp    { transform: translateY(40px); }
.js .fcba-anim--fadeInDown  { transform: translateY(-40px); }
.js .fcba-anim--fadeInLeft  { transform: translateX(-40px); }
.js .fcba-anim--fadeInRight { transform: translateX(40px); }

.js .fcba-anim--fadeInUp.is-visible    { animation-name: fcba-reveal-up; }
.js .fcba-anim--fadeInDown.is-visible  { animation-name: fcba-reveal-down; }
.js .fcba-anim--fadeInLeft.is-visible  { animation-name: fcba-reveal-left; }
.js .fcba-anim--fadeInRight.is-visible { animation-name: fcba-reveal-right; }

@keyframes fcba-reveal       { from { opacity: 0; }                          to { opacity: 1; transform: none; } }
@keyframes fcba-reveal-up    { from { opacity: 0; transform: translateY(40px); }  to { opacity: 1; transform: none; } }
@keyframes fcba-reveal-down  { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes fcba-reveal-left  { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes fcba-reveal-right { from { opacity: 0; transform: translateX(40px); }  to { opacity: 1; transform: none; } }

/* Awaryjne odsłonięcie: gdyby obserwator nie zadziałał, JS dokłada tę klasę. */
.js .fcba-anim.is-revealed {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}

/* Poniżej 992 px moduły są jednokolumnowe, więc wjazdy z boku nie mają sensu,
   a przesunięcie o 40 px w poziomie wypychało treść poza ekran (przewijanie
   w bok na telefonie). Zamieniamy je na wjazd od dołu. */
@media (max-width: 991px) {
	.js .fcba-anim--fadeInLeft,
	.js .fcba-anim--fadeInRight { transform: translateY(40px); }

	.js .fcba-anim--fadeInLeft.is-visible,
	.js .fcba-anim--fadeInRight.is-visible { animation-name: fcba-reveal-up; }
}

@media (prefers-reduced-motion: reduce) {
	.js .fcba-anim {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

/* Separator kropkowany / kreskowany — przeniesiony z widgetu divider. */
.wp-block-separator.is-style-dotted,
.wp-block-separator.is-style-dashed {
	height: 0;
	/* Elementor: wrapper ma padding 15px 0, kreska 1px dotted #000. */
	margin: 15px 0;
	background: none;
	border: 0;
	border-top: 1px dotted #000;
	opacity: 1;
}
.wp-block-separator.is-style-dashed { border-top-style: dashed; }

/* Lista kontaktowa: ikona słuchawki / koperty zamiast markera "›".
   Rozpoznawana po schemacie linku, więc działa też po edycji w edytorze. */
.list--contact {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Wymiary z produkcji: ikona 34 px, odstęp 11.5 px, tekst 21/600 #020101,
   wiersz 45 px wysokości. */
.list--contact li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11.5px;
	min-height: 45px;
	margin-bottom: 0;
	font-size: 21px;
	font-weight: 600;
	color: #020101;
	text-align: left;
}

.list--contact li::before {
	content: "";
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	background-color: #003d7c;
	-webkit-mask: var(--icon, var(--fcba-chevron)) center / contain no-repeat;
	mask: var(--icon, var(--fcba-chevron)) center / contain no-repeat;
}

.list--contact li:has(a[href^="tel:"])    { --icon: var(--fcba-ico-phone); }
.list--contact li:has(a[href^="mailto:"]) { --icon: var(--fcba-ico-mail); }

.list--contact a { color: inherit; }
.list--contact a:hover { color: var(--fcba-primary); }

:root {
	--fcba-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E");
	--fcba-ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48zm-16.4 307.4l-15 65A15 15 0 0 1 354 416C194 416 64 286.3 64 126a15.7 15.7 0 0 1 11.6-14.6l65-15A18.2 18.2 0 0 1 144 96a16.3 16.3 0 0 1 13.8 9.1l30 70A17.9 17.9 0 0 1 189 181a17 17 0 0 1-5.5 11.6l-37.9 31a231.9 231.9 0 0 0 110.8 110.8l31-37.9A17 17 0 0 1 299 291a17.9 17.9 0 0 1 5.9 1.2l70 30A16.3 16.3 0 0 1 384 336a17.4 17.4 0 0 1-.4 3.4z'/%3E%3C/svg%3E");
	--fcba-ico-care: url("../img/icon-social-care.svg");
	--fcba-ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M464 64H48A48 48 0 0 0 0 112v288a48 48 0 0 0 48 48h416a48 48 0 0 0 48-48V112a48 48 0 0 0-48-48zm0 48v40.8c-22.4 18.3-58.2 46.7-134.6 106.5-16.8 13.2-50.2 45.1-73.4 44.7-23.2.4-56.6-31.5-73.4-44.7C106.2 199.5 70.4 171.1 48 152.8V112h416zM48 400V214.4c22.9 18.3 55.4 43.9 104.9 82.7 21.8 17.2 60.1 55.2 103.1 55 42.8 0 80.6-37.4 103.1-55 49.5-38.8 82-64.4 104.9-82.7V400H48z'/%3E%3C/svg%3E");
}

/* Kafelek "witr_section_feature2" w stylu 3 (strona Wesprzyj Fundację).
   Odwzorowanie efektu z Consalt: po najechaniu treść podjeżdża o 84 px,
   ikona u góry chowa się (scale 0), w tle pojawia się znak wodny,
   a od dołu odsłania się zdjęcie. Ikona to glif flaticon-social-care
   wyciągnięty z usuniętej wtyczki i zapisany jako SVG. */
.feature-card {
	position: relative;
	overflow: hidden;
	background: var(--fcba-white);
	box-shadow: 0 0 10px 0 rgb(153 153 153 / 50%);
	text-align: center;
	transition: box-shadow .5s ease;
}

.feature-card__inner {
	position: relative;
	z-index: 2;
	padding: 40px 30px;
	background: var(--fcba-white);
	transition: transform .5s ease;
}

/* Ikona nad tytułem — 64 px, granat marki. */
.feature-card__inner::before {
	content: "";
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	background-color: var(--fcba-primary);
	-webkit-mask: var(--fcba-ico-care) center / contain no-repeat;
	mask: var(--fcba-ico-care) center / contain no-repeat;
	transition: transform 1s ease;
}

/* Znak wodny — 130 px, #ddd, pod tekstem. */
.feature-card__inner::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	width: 130px;
	height: 130px;
	background-color: #ddd;
	-webkit-mask: var(--fcba-ico-care) center / contain no-repeat;
	mask: var(--fcba-ico-care) center / contain no-repeat;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity 1s ease;
	pointer-events: none;
}

/* Tekst musi być nad znakiem wodnym. */
.feature-card__title,
.feature-card__text { position: relative; z-index: 1; }

/* Wyższy selektor niż .module__body h3, które inaczej wygrywa. */
.prose .module__body .feature-card__title,
.module__body .feature-card__title,
.feature-card__title {
	margin: -30px 0 15px;
	font-size: 35px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--fcba-heading);
}

.feature-card__text {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--fcba-text-strong);
}

/* Zdjęcie siedzi przy dolnej krawędzi i wyjeżdża spod treści. */
.feature-card__image {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	margin: 0;
}
.feature-card__image img {
	display: block;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
}

.feature-card:hover .feature-card__inner { transform: translateY(-84px); }
.feature-card:hover .feature-card__inner::before { transform: scale(0); }
.feature-card:hover .feature-card__inner::after { opacity: 1; }

/* Dotyk i klawiatura: nie ma hovera, więc pokazujemy stan docelowy
   po wejściu fokusem, a na urządzeniach dotykowych od razu. */
.feature-card:focus-within .feature-card__inner { transform: translateY(-84px); }
.feature-card:focus-within .feature-card__inner::after { opacity: 1; }

@media (hover: none) {
	.feature-card__inner { transform: translateY(-84px); }
	.feature-card__inner::before { transform: scale(0); }
	.feature-card__inner::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.feature-card__inner,
	.feature-card__inner::before,
	.feature-card__inner::after { transition: none; }
}

/* --- 8. Karty aktualności ------------------------------------- */
/* Siatka zamiast bootstrapowego masonry: równe rzędy niezależnie
   od tego, czy wpis ma miniaturę (uwaga klienta #1). */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 30px;
}

.card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--fcba-white);
	box-shadow: var(--fcba-card-shadow);
}

.card__media { display: block; overflow: hidden; background: #f2f5f8; }

/* Stały kadr 390×250 — miniatura i placeholder zajmują tyle samo. */
.card__img {
	width: 100%;
	aspect-ratio: 390 / 250;
	object-fit: cover;
	transition: transform .3s ease;
}
.card:hover .card__img { transform: scale(1.04); }
.card__img--placeholder,
.fcba-placeholder { object-fit: contain; background: var(--fcba-white); }

.card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 20px 15px 16px 25px;
}

.meta {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	text-transform: none;
	letter-spacing: normal;
	color: var(--fcba-meta);
}

.meta::before {
	content: "";
	flex: 0 0 auto;
	width: 15px; height: 15px;
	background-color: currentColor;
	-webkit-mask: var(--fcba-clock) center / contain no-repeat;
	mask: var(--fcba-clock) center / contain no-repeat;
}

:root {
	--fcba-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8a248 248 0 1 0 0 496 248 248 0 0 0 0-496zm0 448a200 200 0 1 1 0-400 200 200 0 0 1 0 400zm62-83-85-62a12 12 0 0 1-5-10V116a12 12 0 0 1 12-12h44a12 12 0 0 1 12 12v141l56 41a12 12 0 0 1 3 17l-20 28a12 12 0 0 1-17 3z'/%3E%3C/svg%3E");
}

.card__title {
	margin-bottom: 5px;
	font-family: var(--fcba-font-head);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.35;
	/* dwie linie maks. — inaczej dłuższe tytuły rozjeżdżają rząd */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.card__title a { color: var(--fcba-heading); }
.card__title a:hover { color: var(--fcba-primary); }

.card__excerpt {
	margin-bottom: 16px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--fcba-body);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* Lista wpisów: „czytaj więcej” to zwykły link (jak na /aktualnosci/). */
.card__more {
	margin-top: auto;
	align-self: flex-start;
	padding: 8px 0;
	font-family: var(--fcba-font-body);
	font-size: 18px;
	font-weight: 500;
	color: var(--fcba-primary);
	background: none;
	border: 0;
}
.card__more:hover { color: var(--fcba-primary-hover); }

/* Strona główna: ten sam przycisk ma obramowanie (jak .btn2.witr_bt2). */
.section--news .card__more {
	padding: 9px 30px;
	font-size: 16px;
	border: 1px solid var(--fcba-primary);
	border-radius: 5px;
}
.section--news .card__more:hover {
	color: var(--fcba-white);
	background: var(--fcba-primary);
}

/* --- 9. Treść stron ------------------------------------------- */
.prose { max-width: 100%; }
.prose > *:first-child { margin-top: 0; }
.prose p { color: var(--fcba-text-strong); }
.prose h2 { margin-top: 40px; font-size: 35px; line-height: 1.2; }
.prose h3 { margin-top: 30px; font-size: 24px; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 20px; color: var(--fcba-text-strong); }
.prose li { margin-bottom: 6px; }
.prose figure { margin: 30px 0; }
.prose blockquote {
	margin: 30px 0;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--fcba-primary);
	color: var(--fcba-heading);
}
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--fcba-border); text-align: left; }

/* Nie powiększamy obrazka ponad jego naturalny rozmiar — inaczej
   miniatury 654 px rozciągają się na 1110 px i są rozmyte. */
.post__media { margin: 0 0 30px; text-align: center; }
.post__img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	max-height: 520px;
	height: auto;
}

.empty { max-width: 42rem; }
.empty__text { margin-bottom: 20px; }

/* Przyciski ogólne */
.btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 30px;
	font-family: var(--fcba-font-body);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--fcba-primary);
	background: transparent;
	border: 1px solid var(--fcba-primary);
	border-radius: 5px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.btn:hover,
.btn:focus-visible,
.wp-block-button__link:hover {
	color: var(--fcba-white);
	background: var(--fcba-primary);
}

.btn--light { color: var(--fcba-white); border-color: var(--fcba-white); }
.btn--light:hover { color: var(--fcba-primary); background: var(--fcba-white); }

/* --- 10. Stopka ----------------------------------------------- */
/* Produkcja: jasne tło #E4E4E4 + tekstura bg.jpg na 57% krycia. */
.footer { position: relative; color: var(--fcba-text-strong); }

.footer__main {
	position: relative;
	background: var(--fcba-footer-bg);
	isolation: isolate;
}

.footer__main::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("../img/texture-bg.jpg");
	background-repeat: repeat;
	background-position: 8px 1px;
	opacity: .57;
}

.footer__grid {
	display: grid;
	grid-template-columns: minmax(200px, 1fr) 1.35fr 1fr;
	gap: 40px;
	padding-block: 55px;
}

.footer__logo { max-width: 260px; }

.footer__heading {
	margin-bottom: 5px;
	font-family: var(--fcba-font-head);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--fcba-heading);
}

.footer__heading--sub {
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--fcba-heading);
}

.footer__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer__list a {
	display: inline-block;
	padding: 4px 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--fcba-link-footer);
}
.footer__list a:hover { color: var(--fcba-link-footer-hover); }
.footer__list a::before {
	content: "\203A";
	margin-right: 8px;
	font-weight: 700;
	color: var(--fcba-accent);
}

.footer__address {
	margin-bottom: 16px;
	font-size: 17px;
	font-style: normal;
	line-height: 1.7;
	color: var(--fcba-text-strong);
}
.address__line { display: block; }

.footer__contact { margin: 0; padding: 0; list-style: none; font-size: 17px; }
.footer__contact-item { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.footer__contact-item a { color: var(--fcba-text-strong); }
.footer__contact-item a:hover { color: var(--fcba-link-footer-hover); }

.footer__contact-item::before {
	content: "";
	flex: 0 0 auto;
	width: 17px; height: 17px;
	background-color: var(--fcba-accent);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}
.footer__contact-item--phone {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497 381l-112-48a24 24 0 0 0-28 7l-50 60A370 370 0 0 1 130 224l60-49a24 24 0 0 0 7-28L149 35a24 24 0 0 0-27-14L18 45A24 24 0 0 0 0 68c0 245 199 444 444 444a24 24 0 0 0 23-18l24-104a24 24 0 0 0-14-28z'/%3E%3C/svg%3E");
}
.footer__contact-item--mail {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M502 191c4-3 10 0 10 5v212c0 27-21 48-48 48H48c-27 0-48-21-48-48V196c0-5 6-8 10-5 22 18 52 40 154 114 21 15 57 48 92 47 35 1 72-32 92-47 102-74 131-96 154-114zM256 320c23 1 57-29 74-41 133-97 143-105 174-129 6-5 9-12 9-19v-19c0-27-21-48-48-48H48C21 64 0 85 0 112v19c0 7 3 14 9 19 31 24 41 32 174 129 17 12 51 42 73 41z'/%3E%3C/svg%3E");
}

.footer__bar {
	padding-block: 17px;
	background: var(--fcba-bar);
	text-align: center;
}
.footer__bar-text {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--fcba-white);
}

/* Przycisk „do góry” — odpowiednik #scrollUp */
.to-top {
	position: fixed;
	right: 30px;
	bottom: 120px;
	z-index: 99;
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	background: #045191;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; }

.to-top::before {
	content: "";
	width: 12px; height: 12px;
	border-top: 2px solid #ff9800;
	border-left: 2px solid #ff9800;
	transform: translateY(3px) rotate(45deg);
}

/* --- 11. Formularze ------------------------------------------- */
/* Pola: proporcje z produkcji (ramka #CECECE, promień 3 px), ale wyższe
   i z większym stopniem pisma — Times przy 15 px był nieczytelny. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
	width: 100%;
	height: 48px;
	padding: 10px 16px;
	font-family: var(--fcba-font-body);
	font-size: 17px;
	line-height: 1.5;
	color: var(--fcba-heading);
	background: var(--fcba-white);
	border: 1px solid var(--fcba-border);
	border-radius: 3px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

input::placeholder,
textarea::placeholder { color: #8b9199; opacity: 1; }

input:focus, textarea:focus, select:focus {
	border-color: var(--fcba-primary);
	box-shadow: 0 0 0 3px rgb(0 41 75 / 10%);
	outline: none;
}

textarea { height: 170px; min-height: 48px; padding-top: 12px; resize: vertical; }

.search-form { display: flex; gap: 8px; align-items: stretch; }
.search-form__input { flex: 1 1 auto; min-width: 0; }

/* Contact Form 7 — układ jak w formularzu Elementora na produkcji:
   bez etykiet, same placeholdery, odstęp 29 px między polami. */
.wpcf7-form p { margin: 0 0 29px; }
.wpcf7-form p:last-child { margin-bottom: 0; }
.wpcf7-form label { display: block; font-size: 17px; color: var(--fcba-heading); }
.wpcf7-not-valid-tip { margin-top: 6px; font-size: 15px; color: #cf2e2e; }
.wpcf7-form .wpcf7-not-valid { border-color: #cf2e2e; }
.wpcf7-response-output { margin: 16px 0 0 !important; padding: 10px 14px !important; font-size: 14px; border-radius: 3px; }
.wpcf7-spinner { margin-left: 10px; }

/* Przycisk formularza — jak w Elementorze na produkcji. */
.wpcf7-submit,
input[type="submit"],
button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	padding: 0 24px;
	font-family: var(--fcba-font-body);
	font-size: 17px;
	font-weight: 500;
	color: var(--fcba-white);
	/* Produkcja ma tu domyślną szarość Elementora (#69727D) — zamienione
	   na granat marki. Wróć do szarości, jeśli klient woli 1:1. */
	background: var(--fcba-primary);
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	transition: background .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.wpcf7-submit:hover,
input[type="submit"]:hover,
button[type="submit"]:hover { background: var(--fcba-primary-hover); }

/* Przycisk wyszukiwarki nie może być na całą szerokość jak przycisk formularza. */
.search-form .search-form__submit,
button.search-form__submit,
input.search-form__submit {
	flex: 0 0 auto;
	width: auto;
	background: var(--fcba-primary);
}
.search-form .search-form__submit:hover { background: var(--fcba-primary-hover); }

/* Ilustracja na stronie Kontakt — wyśrodkowana, jak w oryginale. */
.contact-illustration { margin: 30px 0 0; }
.contact-illustration img {
	display: block;
	width: auto;
	max-width: 250px;
	height: auto;
	margin: 0 auto;
}

/* Kolumny na Kontakcie nie mają zdjęcia „sticky", więc wyrównujemy do góry. */
.wp-block-columns.module--contact { align-items: flex-start; }

/* Notatka dla redaktora — miejsce do uzupełnienia po migracji. */
.fcba-todo {
	padding: 14px 18px;
	background: #fff6e5;
	border-left: 4px solid #f0a500;
	font-size: 16px;
	color: #6b4b00;
}

/* --- 12. Mapa ------------------------------------------------- */
.map {
	position: relative;
	display: grid;
	place-items: center;
	min-height: var(--map-height, 420px);
	overflow: hidden;
	background: #f2f5f8;
	border: 1px solid var(--fcba-border);
}

.map.is-loaded { display: block; }
.map__consent { max-width: 34rem; padding: 28px; text-align: center; }
.map__consent-text { font-size: 15px; }
.map__consent-alt { margin: 16px 0 0; font-size: 14px; }
.map iframe { display: block; width: 100%; height: var(--map-height, 420px); border: 0; }

/* --- 13. Nawigacja wtórna ------------------------------------- */
.pagination { margin-top: 40px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px; height: 42px;
	padding-inline: 12px;
	font-size: 15px;
	color: var(--fcba-heading);
	border: 1px solid var(--fcba-border);
	border-radius: 3px;
}
.pagination .page-numbers:hover { color: var(--fcba-primary); border-color: var(--fcba-primary); }
.pagination .page-numbers.current { color: var(--fcba-white); background: var(--fcba-primary); border-color: var(--fcba-primary); }

.post-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-top: 40px;
	padding-top: 25px;
	border-top: 1px solid var(--fcba-border);
}

.page-links { margin-top: 24px; }

/* --- 14. Responsywność ---------------------------------------- */
@media (max-width: 1199px) {
	.nav__list > li > a { margin-inline: 6px; font-size: 13px; }
}

@media (max-width: 991px) {
	:root { --fcba-header-h: 80px; }

	.header__burger { display: block; order: 3; }
	.header__search { order: 2; }

	.nav {
		position: fixed;
		inset: var(--fcba-header-h) 0 0 auto;
		z-index: 90;
		width: min(340px, 88vw);
		padding: 10px 16px;
		overflow-y: auto;
		background: var(--fcba-white);
		box-shadow: -6px 0 24px rgb(27 31 46 / 14%);
		transform: translateX(100%);
		transition: transform .26s ease;
		visibility: hidden;
	}
	.nav.is-open { transform: translateX(0); visibility: visible; }

	.nav__list { flex-direction: column; align-items: stretch; }
	.nav__list li { border-bottom: 1px solid #eceff3; }
	.nav__list > li > a { margin: 0; padding: 13px 4px; font-size: 14px; }

	.nav__toggle { display: block; pointer-events: auto; }

	.nav__list .sub-menu {
		position: static;
		display: none;
		min-width: 0;
		padding: 0 0 8px 14px;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.nav__list li.is-open > .sub-menu { display: block; }
	.nav__list li:hover > .sub-menu { display: none; }
	.nav__list li.is-open:hover > .sub-menu { display: block; }
	.nav__list .sub-menu li:last-child { border-bottom: 0; }

	.banner { min-height: 420px; }
	.banner__title { font-size: 44px; }
	.banner__dots { top: 40px; left: -60px; width: 520px; }

	.section__title, .prose h2, .module__body h2 { font-size: 28px; line-height: 1.25; }
	.hero { padding-block: 40px; }
	.hero__title { font-size: 26px; }

	/* Sticky ma sens tylko przy dwóch kolumnach obok siebie. */
	.module .module__media > * { position: static; }
	.wp-block-columns.module { flex-direction: column; gap: 24px; }

	.footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
	.footer__col--brand { grid-column: 1 / -1; }
}

@media (max-width: 575px) {
	:root { --fcba-header-h: 72px; }

	/* Długi adres e-mail przy 21 px łamał się w środku wyrazu ("…fundacja/om"). */
	.list--contact li {
		font-size: 17px;
		gap: 10px;
	}
	.list--contact li::before { width: 28px; height: 28px; }
	.list--contact a { overflow-wrap: anywhere; }

	/* Powiększone cele dotykowe: telefon, e-mail i okruszki miały 19-29 px. */
	.footer__contact-item a,
	.footer__list a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	.footer__contact-item { padding: 0; }

	.breadcrumbs__list a,
	.breadcrumbs__item span {
		display: inline-block;
		padding-block: 8px;
	}

	.header__inner { gap: 10px; }
	.header__brand img,
	.custom-logo { max-height: 40px; }
	.header__search-toggle { width: 34px; height: 34px; }
	.header__burger { padding: 8px; }

	.banner { min-height: 360px; }
	.banner__title { font-size: 34px; }
	.banner__dots { display: none; }

	.card-grid { grid-template-columns: 1fr; gap: 22px; }
	.footer__grid { grid-template-columns: 1fr; }
	.search-form { flex-direction: column; }
	.search-form .search-form__submit { width: 100%; }
	.post-nav { flex-direction: column; }
	.to-top { right: 16px; bottom: 80px; }
}

@media print {
	.header, .footer, .banner, .hero, .pagination, .post-nav, .map, .to-top { display: none !important; }
	body { color: #000; }
}