/*
 * Layout sekcji landing page "Lowcy dezinformacji".
 * Mobile-first; kolejnosc regul odpowiada kolejnosci sekcji w brief.md.
 */

/* ============ HEADER (sticky) ============ */

.ld-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--kolor-tlo-strona);
	border-bottom: 4px solid #3a3a3a;
}

/* Zalogowany uzytkownik: #wpadminbar jest position:fixed, top:0,
   z-index:99999 - bez tej kompensacji sticky header trzyma sie top:0 i
   chowa sie (razem z przyciskiem submenu) czesciowo pod paskiem admina,
   co blokuje hover/klik na tej czesci headera. Progi zgodne z wysokoscia
   paska admina w rdzeniu WP. */
body.admin-bar .ld-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .ld-header {
		top: 46px;
	}
}

.ld-header.is-scrolled {
	box-shadow: 0 6px 0 rgba(18, 18, 18, 0.08);
}

.ld-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ld-space-sm);
	padding-block: 14px;
}

.ld-header__logo {
	flex: none;
	display: block;
}

.ld-header__logo img {
	height: clamp(32px, 6vw, 44px);
	width: auto;
}

/* Ksztalt schodkowego rogu + bevel - patrz obszerny komentarz w
   components.css, sekcja "Przyciski". Wariant "ghost" (bialy z szarym
   bevelem), skala "xs" (maly kwadratowy przycisk ~44px). */
.ld-header__toggle {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
	background: var(--kolor-papier);
	border: 0;
	box-shadow:
		inset 0 0 0 4px var(--kolor-tusz),
		inset 0 5px var(--kolor-szary-jasny),
		inset 0 -5px var(--kolor-szary-jasny),
		inset 8px 0 var(--kolor-szary-ciemny),
		inset -8px 0 var(--kolor-szary-ciemny);
	clip-path: var(--ld-clip-path-pixel-xs);
	padding: 10px;
	cursor: pointer;
	transition: transform 0.06s steps(2), filter 0.06s steps(2), background-color 0.06s steps(2), box-shadow 0.06s steps(2);
	filter: drop-shadow(0 4px 0 var(--kolor-tusz));
}

/* "Zagiety rog" (::after) celowo nie jest tu uzyty - patrz obszerny
   komentarz przy .ld-btn w components.css. */

/* Hover/focus: zero zmiany koloru, wylacznie fizyka. Ksztalt (clip-path)
   siedzi tu bezposrednio na przycisku (nie na ::before), wiec globalny
   outline (".ld-page :focus-visible", base.css) bylby przyciety - zamiast
   zmiany tla, focus-visible dostaje dodatkowy bialy pierscien WEWNATRZ
   (inset), bez zmiany koloru powierzchni. */
.ld-header__toggle:hover {
	transform: translateY(-2px);
	filter: drop-shadow(0 6px 0 var(--kolor-tusz));
}

.ld-header__toggle:focus-visible {
	box-shadow: inset 0 0 0 4px var(--kolor-tusz), inset 0 0 0 7px var(--kolor-papier);
}

.ld-header__toggle:active {
	transform: translateY(4px);
	filter: drop-shadow(0 0 0 var(--kolor-tusz));
}

.ld-header__toggle span {
	width: 22px;
	height: 3px;
	background: var(--kolor-tusz);
	display: block;
}

.ld-header__nav {
	position: fixed;
	inset: 76px 0 0 0;
	background: var(--kolor-tlo-strona);
	padding: var(--ld-space-md);
	display: flex;
	flex-direction: column;
	gap: var(--ld-space-md);
	transform: translateX(100%);
	transition: transform 0.2s ease;
	overflow-y: auto;
}

.ld-header__nav.is-open {
	transform: translateX(0);
}

/* Specificity: .ld-page selektor jest tu potrzebny, zeby wygrac z ogolnym
   resetem ".ld-page ul" (base.css) - bez tego przegrywal (margin-bottom +
   padding-left z resetu wygrywaly ze wzgledu na wyzsza specyficznosc), przez
   co menu bylo przesuniete w gore wzgledem logo/CTA - to byla rzeczywista
   przyczyna zlego wyrownania headera (poprawka 1). */
.ld-page .ld-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ld-space-sm);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
}

.ld-header__menu a {
	display: inline-block;
	line-height: 1;
	color: var(--kolor-papier);
	text-decoration: none;
}

.ld-header__menu a:hover {
	color: var(--kolor-postac);
}

.ld-header__cta {
	flex: none;
	align-self: center;
}

@media (min-width: 900px) {
	.ld-header__toggle {
		display: none;
	}

	/* Menu dociagniete do prawej krawedzi headera: flex:1 oddaje <nav> cala
	   pozostala szerokosc obok logo (jedyny inny flex-item .ld-header__inner
	   na tej szerokosci), a justify-content:flex-end przykleja liste menu do
	   prawej krawedzi TEGO slotu - efektywnie do prawej krawedzi calego
	   .ld-container/headera, bez potrzeby dodatkowego "margin-left:auto"
	   (nie ma tu osobnego elementu CTA obok menu - klasa .ld-header__cta w
	   tym pliku zdefiniowana jest "na zapas", ale nie jest uzyta w markupie
	   header.php). */
	.ld-header__nav {
		position: static;
		inset: auto;
		background: none;
		padding: 0;
		flex-direction: row;
		align-items: center;
		gap: var(--ld-space-lg);
		transform: none;
		overflow: visible;
		flex: 1;
		justify-content: flex-end;
	}

	/* 8 pozycji menu, w tym dluzsza "Materialy edukacyjne": mniejszy
	   font/gap i flex-wrap jako siatka bezpieczenstwa, zeby menu nie
	   przycinalo sie/nie wychodzilo poza kontener na wezszych szerokosciach
	   desktop (np. 1024px). */
	.ld-page .ld-header__menu {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		row-gap: 8px;
		column-gap: clamp(0.9rem, 0.6rem + 1vw, var(--ld-space-md));
		font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1rem);
	}
}

/* ---------- Submenu "O grze" ----------
   Bohaterowie/Karty/Zasady gry/Galeria przeniesione z gornego poziomu menu do
   rozwijanego submenu pod "O grze". Wyzwalacz to <button> (nie <a>) - "O grze"
   nie ma juz wlasnego celu nawigacji, wylacznie otwiera liste ponizej (patrz
   komentarz w header.php). Desktop (dropdown na hover/focus): ciemna plakietka
   (tlo #121212 na tle sekcji pod spodem, ramka #3a3a3a) - jezyk .ld-panel--
   terminal. Mobile (submenu w normalnym przeplywie, wewnatrz pionowego
   flyoutu ktory sam ma tlo #121212 - identyczne tlo bylo tu niewidoczne)
   uzywa odwrotnego wariantu tej samej rodziny paneli - biale tlo (jak
   .ld-postac-card__bubble/.ld-accordion__item) z ta sama ramka #3a3a3a i
   drop-shadow co desktop, tylko w jasnym kolorze zamiast tuszu - inaczej
   ramka i cien zlewalyby sie z identycznym tlem flyoutu pod spodem. Kolor
   linkow zmieniony na ciemny (patrz ".ld-header__submenu a" nizej), z
   resetem z powrotem na bialy w wariancie desktopowym ponizej. */
.ld-header__item--has-submenu {
	position: relative;
}

.ld-page .ld-header__submenu-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--kolor-papier);
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	line-height: 1;
	cursor: pointer;
}

.ld-header__submenu-trigger:hover,
.ld-header__item--has-submenu.is-open > .ld-header__submenu-trigger {
	color: var(--kolor-postac);
}

.ld-header__submenu-caret {
	flex: none;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform 0.15s steps(2);
}

.ld-header__item--has-submenu:hover .ld-header__submenu-caret,
.ld-header__item--has-submenu:focus-within .ld-header__submenu-caret,
.ld-header__item--has-submenu.is-open .ld-header__submenu-caret {
	transform: rotate(180deg);
}

/* Mobile (wewnatrz pionowego flyout .ld-header__nav): submenu domyslnie
   zwiniete, rozwijane klikiem/dotykiem - main.js initHeaderSubmenu() dodaje
   klase is-open. */
.ld-page .ld-header__submenu {
	list-style: none;
	margin: 12px 0 0;
	padding: 14px 16px;
	display: none;
	flex-direction: column;
	gap: 12px;
	background: var(--kolor-papier);
	box-shadow: inset 0 0 0 4px var(--kolor-tusz-jasny);
	clip-path: var(--ld-clip-path);
	filter: drop-shadow(6px 6px 0 var(--kolor-tusz-jasny));
}

.ld-header__item--has-submenu.is-open > .ld-header__submenu {
	display: flex;
}

.ld-header__submenu a {
	font-size: 0.95em;
	color: var(--kolor-tusz);
}

@media (min-width: 900px) {
	/* Desktop: pokazywanie na hover/focus-within jest czysto CSS-owe (dziala
	   bez JS) - main.js dokada wylacznie obsluge klikniecia (touch nie ma
	   :hover) i aktualizacje aria-expanded, patrz initHeaderSubmenu().
	   Panel zaczyna sie dokladnie tam, gdzie konczy sie przycisk (top: 100%,
	   bez przerwy) - hoverowalny prostokat ".ld-header__submenu" jest wiec
	   ciagly z przyciskiem. Wizualny odstep nad pierwszym linkiem (dawniej
	   pusta przestrzen PRZED panelem) jest teraz wewnatrz samego elementu:
	   tlo/ramka/wciety rog siedza na ::before wsunietym o 18px od gory, wiec
	   sam panel wyglada tak samo, ale jego realny hoverowalny box juz nie ma
	   przerwy do przeskoczenia kursorem. */
	.ld-page .ld-header__submenu {
		display: flex;
		position: absolute;
		top: 100%;
		left: 50%;
		min-width: 200px;
		margin: 0;
		padding: 32px 16px 14px;
		background: none;
		box-shadow: none;
		clip-path: none;
		transform: translateX(-50%) translateY(-6px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		filter: drop-shadow(6px 6px 0 var(--kolor-tusz));
		transition: opacity 0.15s steps(3), transform 0.15s steps(3), visibility 0.15s;
		z-index: 10;
	}

	/* Wlasciwa "karta" (tlo, ramka, piksowy rog) - wsunieta o 18px od gory
	   panelu i o jeden poziom stackingu w tyl (z-index:-1 dziala tu lokalnie,
	   bo .ld-header__submenu ma juz wlasny kontekst stackingu z powodu
	   position:absolute + z-index powyzej), zeby linki (zwykle dzieci ul)
	   renderowaly sie nad nia, nie pod. */
	.ld-page .ld-header__submenu::before {
		content: "";
		position: absolute;
		inset: 18px 0 0;
		background: var(--kolor-tusz);
		box-shadow: inset 0 0 0 4px #3a3a3a;
		clip-path: var(--ld-clip-path);
		z-index: -1;
	}

	/* Reset koloru z bazowej (mobilnej) reguly - tu panel jest ciemny, wiec
	   linki wracaja do bialego, zamiast ciemnego tekstu z wariantu mobilnego. */
	.ld-header__submenu a {
		color: var(--kolor-papier);
	}

	.ld-header__item--has-submenu:hover > .ld-header__submenu,
	.ld-header__item--has-submenu:focus-within > .ld-header__submenu,
	.ld-header__item--has-submenu.is-open > .ld-header__submenu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
	}
}

/* ============ HERO ============ */

/* Sekcja bez pelnoszerokosciowego tla-banera i przyciskow CTA - na gorze
   obrazek pudelka gry, kontener na pelnej szerokosci (full-bleed do
   granicy .ld-page-wrap, 1920px - patrz .ld-hero__figure nizej), sam
   obrazek ograniczony wysokoscia (max-height na .ld-hero__box nizej) - eyebrow/
   H1/tagline maja pojawiac sie bez nadmiernego przewijania, nie dopiero po
   pelnej wysokosci zdjecia w naturalnej proporcji. Tlo: .ld-dots-bg (te
   same subtelne kropki co w innych sekcjach - "O grze"/FAQ/kontakt/"O
   projekcie"). Brak paddingu - obrazek ma zaczynac sie bezposrednio pod
   sticky headerem; odstep do kolejnej sekcji dostarcza margin-bottom na
   .ld-hero__figure/.ld-hero__inner, nie padding-bottom sekcji. */
.ld-hero {
	padding-block: 0;
}

.ld-hero__inner {
	width: 100%;
}

.ld-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--ld-space-sm);
	max-width: 100%;
}

/* Eyebrow ma wlasny margin-bottom (base.css, --ld-space-sm) - w kontekstach
   blokowych (np. .ld-section-head) to jedyne zrodlo odstepu do naglowka.
   Tutaj kontener jest flex z gap:--ld-space-sm, wiec margines eyebrow
   dodawalby sie do gap i podwajal odstep do H1 - zerowany, zeby odstep
   eyebrow->H1 byl taki sam jak w reszcie motywu (jedna wartosc
   --ld-space-sm, nie dwie). */
.ld-hero__content .ld-eyebrow {
	margin-bottom: 0;
}

/* Obrazek pudelka siedzi POZA .ld-hero__inner/.ld-container--tekst (patrz
   section-hero.php) - dzieki temu .ld-hero__figure jest bezposrednim
   dzieckiem sekcji i osiaga pelna szerokosc .ld-hero, czyli az do granicy
   .ld-page-wrap (1920px, base.css), a nie tylko do sufitu waskiego
   .ld-container--tekst (1440px) - ten sam wzorzec co pelnoszerokosciowy
   odtwarzacz wideo w .ld-instrukcja__video-wrap. Sam obrazek jest wezszy
   niz kontener (patrz .ld-hero__box - ograniczony wysokoscia, nie
   rozciagniety na sile do 1920px), wiec .ld-hero__figure dostaje wlasne
   tlo (delikatna poswiata na srodku), zeby przestrzen po bokach obrazka
   nie wygladala na pusta, tylko na swiadomie zaprojektowane tlo pod
   pelnoszerokosciowa sekcje. Wysokosc tla = wysokosc .ld-hero__frame,
   czyli dokladnie wysokosc renderowanego obrazka (frame owija obrazek
   scisle, bez dodatkowego paddingu).
   Fade na dole obrazka (patrz .ld-hero__frame nizej) siedzi na frame, nie
   tutaj - figure nadal dostarcza tylko tlo-poswiate po bokach. */
.ld-hero__figure {
	margin-bottom: var(--ld-space-sm);
	background:
		radial-gradient(ellipse 70% 100% at 50% 42%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 45%, transparent 75%),
		var(--kolor-tlo-strona);
}

/* Ramka pixel-artowa (cien): filter:drop-shadow siedzi na .ld-hero__frame
   (wrapper scisle owijajacy obrazek), nie na .ld-hero__figure (ktory ma
   teraz wlasne tlo na pelnej szerokosci) ani na .ld-hero__box (ktory ma
   clip-path) - gdyby cien i tlo/clip-path siedzialy na tym samym elemencie,
   Chrome przycinalby cien do ksztaltu clip-path, a przy tle na figure cien
   obrysowywalby cala pelnoszerokosciowa plyte zamiast samego pudelka.
   mask-image zanika dolne 10% wysokosci obrazka do przezroczystosci, tak
   zeby wtapial sie w tlo strony zamiast konczyc twarda krawedzia. Wartosc
   dobrana pod aktualny placeholder (hero-pudelko-3d.png), ktorego wstazka
   z tytulem i ikony wieku/czasu/graczy siegaja az do ok. 90% wysokosci
   kadru - plytszy fade niz standardowe 20-25%, zeby ich nie przycinac. Na
   docelowym, wiekszym zdjeciu klienta z wiekszym marginesem pod spodem
   (nad podloga/cieniem) mozna bezpiecznie zwiekszyc procent zanikania. */
.ld-hero__frame {
	display: flex;
	justify-content: center;
	filter: drop-shadow(6px 6px 0 var(--kolor-tusz));
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
}

/* Obrazek ma ograniczona wysokosc (max-height) - width:auto (zamiast 100%)
   pozwala mu sie zwezic proporcjonalnie zamiast rozciagac na sile do
   pelnej szerokosci kontenera. Dziala to dla dowolnych proporcji zdjecia
   (pion, poziom, panorama box+tyl pudelka obok siebie) - obrazek zawsze
   skaluje sie proporcjonalnie w calosci, nigdy nie jest kadrowany ani
   rozciagniety. Na waskich ekranach (mobile) max-height praktycznie nigdy
   nie jest osiagana pierwsza - tam wiazacym ograniczeniem zostaje
   max-width:100%, wiec obrazek nadal wypelnia szerokosc kontenera.
   width/height/object-fit maja !important: selektor globalnego resetu
   ".ld-page img" (base.css) ma wyzsza specyficznosc (klasa+element) niz sam
   ".ld-hero__box" (jedna klasa), wiec bez tego zabezpieczenia jakikolwiek
   przyszly dopisek do tamtego resetu (albo regula z motywu rodzica) mogloby
   po cichu wymusic inne wymiary i przywrocic kadrowanie. object-fit:contain
   to dodatkowa siatka bezpieczenstwa, gdyby cos jednak wymusilo width/height
   na 100% - obrazek nadal zmiesci sie w calosci zamiast zostac przyciety. */
.ld-hero__box {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 58vh;
	margin-inline: auto;
	background: var(--kolor-papier);
	box-shadow: inset 0 0 0 4px var(--kolor-tusz);
	clip-path: var(--ld-clip-path);
	object-fit: contain !important;
}

/* Dwa osobne obrazki (desktop/mobile, patrz section-hero.php) siedza
   jednoczesnie w DOM - tylko jeden jest widoczny na raz, przelaczanie
   czystym CSS na tym samym progu co reszta ogolnych (nie-nawigacyjnych)
   breakpointow w motywie (640px, patrz np. .ld-benefits__grid,
   .ld-funding-bar__inner). Oba warianty dziedzicza identyczny styling z
   .ld-hero__box powyzej (ramka, cien, max-height, fade z .ld-hero__frame).
   Selektor musi miec dwie klasy (nie jedna) - globalny reset ".ld-page img"
   (base.css) ma specyficznosc klasa+element i inaczej wygralby z pojedyncza
   klasa ".ld-hero__box--mobile", nadpisujac "display:none" wlasnym
   "display:block". */
.ld-hero__frame .ld-hero__box--mobile {
	display: none;
}

@media (max-width: 639px) {
	.ld-hero__frame .ld-hero__box--desktop {
		display: none;
	}

	.ld-hero__frame .ld-hero__box--mobile {
		display: block;
	}
}

/* .ld-hero__inner uzywa .ld-container--tekst (nie .ld-container), wiec ten
   element moze osiagnac 1440px, nie tylko 1180px - patrz section-hero.php
   i base.css. Kolor: pelna biel (var(--kolor-papier)), jak reszta
   tekstu. */
.ld-hero__tagline {
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
	color: var(--kolor-papier);
	width: 100%;
	max-width: 100%;
}

/* ============ GRA PLANSZOWA: statystyki + korzysci ============ */

/* 6 statystyk: mobile 2 kolumny x 3 rzedy, od 600px (miejsce na 3
   kolumny bez zbytniego sciskania) 3x2. */
.ld-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ld-space-sm);
	margin-bottom: var(--ld-space-xl);
}

@media (min-width: 800px) {
	.ld-stats__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ld-stat {
	text-align: center;
	padding: var(--ld-space-sm);
}

.ld-stat__number {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--kolor-postac);
	font-size: clamp(1.8rem, 1.4rem + 2vw, 3rem);
	text-shadow: 3px 3px 0 var(--kolor-tusz);
	margin-bottom: 10px;
}

.ld-stat__label {
	display: block;
	font-size: 0.9rem;
	color: var(--kolor-papier);
}

/* Bento: siatka asymetryczna - pierwszy kafelek duzy (2x2), kolejne mniejsze */
.ld-benefits__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ld-space-sm);
}

@media (min-width: 640px) {
	.ld-benefits__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ld-benefits__grid .ld-benefit:first-child {
		grid-column: span 2;
	}
}

@media (min-width: 1000px) {
	.ld-benefits__grid {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: minmax(170px, auto);
	}

	.ld-benefits__grid .ld-benefit:nth-child(1) {
		grid-column: span 2;
		grid-row: span 2;
		justify-content: center;
	}

	.ld-benefits__grid .ld-benefit:nth-child(1) .ld-benefit__icon {
		width: 72px;
		height: 72px;
	}

	.ld-benefits__grid .ld-benefit:nth-child(1) .ld-benefit__icon .ld-icon {
		width: 34px;
		height: 34px;
	}

	.ld-benefits__grid .ld-benefit:nth-child(1) .ld-benefit__title {
		font-size: 1.3rem;
	}

	.ld-benefits__grid .ld-benefit:nth-child(2) {
		grid-column: span 2;
		grid-row: span 1;
	}

	.ld-benefits__grid .ld-benefit:nth-child(3),
	.ld-benefits__grid .ld-benefit:nth-child(4) {
		grid-column: span 1;
		grid-row: span 1;
	}
}

.ld-benefit {
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform 0.12s steps(3), filter 0.12s steps(3);
}

.ld-page.has-js .ld-benefits__grid .ld-benefit.ld-reveal:nth-child(1) { transition-delay: 0s; }
.ld-page.has-js .ld-benefits__grid .ld-benefit.ld-reveal:nth-child(2) { transition-delay: 0.08s; }
.ld-page.has-js .ld-benefits__grid .ld-benefit.ld-reveal:nth-child(3) { transition-delay: 0.16s; }
.ld-page.has-js .ld-benefits__grid .ld-benefit.ld-reveal:nth-child(4) { transition-delay: 0.24s; }

.ld-benefit:hover {
	transform: translateY(-6px);
	filter: drop-shadow(4px 4px 0 var(--kolor-tusz));
}

/* Kafelki bento - kolorowe tla (zamiast bialych) rozlozone na 4 pozycje,
   kolory z palety kategorii; ikony maja odwrocony kontrast: czarne kolo +
   biala ikona, zeby wybic sie na kolorowym tle. */
.ld-benefits__grid .ld-benefit:nth-child(1) { background: var(--kolor-klimat-jasny); }
.ld-benefits__grid .ld-benefit:nth-child(2) { background: var(--kolor-spoleczenstwo-jasny); }
.ld-benefits__grid .ld-benefit:nth-child(3) { background: var(--kolor-technologia-jasny); }
.ld-benefits__grid .ld-benefit:nth-child(4) { background: var(--kolor-zdrowie-jasny); }

.ld-benefit__icon {
	width: 56px;
	height: 56px;
	border-radius: var(--ld-radius-pill);
	background: var(--kolor-tusz);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	overflow: hidden;
}

.ld-benefit__icon .ld-icon {
	width: 26px;
	height: 26px;
	color: var(--kolor-papier);
}

.ld-benefit__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Prefiks .ld-page podnosi specyficznosc (0,1,1) powyzej globalnego resetu
   naglowkow ".ld-page h1/h2/h3/h4" (rowniez 0,1,1, ale ten selektor jest
   PIERWSZY w kaskadzie przy tej samej specyficznosci, wiec bez dodatkowego
   prefiksu wygrywalby on - to samo, powtarzajace sie w tym pliku zrodlo
   bledow, np. .ld-karta-kategoria__nazwa nizej). Bez tego h3.ld-benefit__title
   dziedziczylby bialy tekst (--kolor-papier) z resetu zamiast wlasciwego
   tuszu - bialy tekst na jasnych kolorach kategorii to kontrast rzedu
   1.5-2.8:1 (ponizej WCAG AA). */
.ld-page .ld-benefit__title {
	font-family: var(--font-text);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--kolor-tusz);
	margin: 0;
}

/* --kolor-tekst-cichy (#4a4a4a) na tle zdrowie-jasny/technologia-jasny daje
   tylko ok. 3.2-3.3:1 (ponizej wymaganych 4.5:1 WCAG AA dla tekstu
   normalnej wielkosci). kolor-tusz (#121212, ten sam co tytul kafelka)
   daje 6.7-12.8:1 na wszystkich czterech kolorach kategorii jednoczesnie,
   wiec zastepuje wariant "wyciszony" bez potrzeby osobnego przypadku dla
   kazdego koloru tla (biały tekst dawalby na technologia-jasny zaledwie
   2.77:1 - #FFFFFF na #2DAABB - gorzej niz kolor bazowy). */
.ld-benefit__desc {
	color: var(--kolor-tusz);
	margin: 0;
	font-size: 0.95rem;
}

/* ============ POSTACIE ============ */

.ld-postacie__hint {
	margin-top: calc(-1 * var(--ld-space-md));
	margin-bottom: var(--ld-space-md);
}

.ld-postacie__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ld-space-lg) var(--ld-space-sm);
}

@media (min-width: 720px) {
	.ld-postacie__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Na waskich ekranach siatka 4 postaci z dymkiem po najechaniu zastapiona
   wzorcem identycznym jak zakladki kategorii w sekcji Karty - pozioma
   lista zakladek z nazwami postaci, jedna postac widoczna naraz w panelu
   ponizej. Ta sama para breakpointow co .ld-postacie__grid powyzej:
   ponizej 720px zakladki, od 720px wraca siatka 4 kolumn z dymkiem (bez
   zmian). Logika przelaczania zakladek to ta sama, generyczna initTabs()
   z main.js (dziala na dowolnym [data-ld-tabs] - patrz section-karty.php). */
.ld-postacie-tabs {
	display: none;
}

@media (max-width: 719px) {
	.ld-postacie__grid {
		display: none;
	}

	.ld-postacie-tabs {
		display: block;
	}
}

@media (min-width: 720px) {
	.ld-postacie-tabs {
		display: none;
	}
}

.ld-postac-mobile {
	text-align: center;
}

.ld-postac-mobile__img {
	display: block;
	margin: 0 auto var(--ld-space-md);
	height: clamp(220px, 55vw, 300px);
	width: auto;
	max-width: 100%;
}

.ld-postac-mobile__nazwa {
	margin: 0 0 var(--ld-space-sm);
}

.ld-page .ld-postac-mobile__cechy {
	text-align: left;
	max-width: 320px;
	margin-inline: auto;
}

.ld-postac-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ld-page.has-js .ld-postac-card.ld-reveal:nth-child(1) { transition-delay: 0s; }
.ld-page.has-js .ld-postac-card.ld-reveal:nth-child(2) { transition-delay: 0.1s; }
.ld-page.has-js .ld-postac-card.ld-reveal:nth-child(3) { transition-delay: 0.2s; }
.ld-page.has-js .ld-postac-card.ld-reveal:nth-child(4) { transition-delay: 0.3s; }

.ld-postac-card__figure {
	position: relative;
	width: 100%;
	height: clamp(200px, 30vw, 320px);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-bottom: var(--ld-space-sm);
}

.ld-postac-card__img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	animation: ld-postac-idle 2.6s steps(6) infinite;
}

.ld-postac-card:nth-child(2) .ld-postac-card__img { animation-delay: 0.3s; }
.ld-postac-card:nth-child(3) .ld-postac-card__img { animation-delay: 0.6s; }
.ld-postac-card:nth-child(4) .ld-postac-card__img { animation-delay: 0.9s; }

@keyframes ld-postac-idle {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

.ld-postac-card__nazwa {
	margin: 0;
	color: var(--kolor-papier);
	font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.1rem);
}

/* Ksztalt schodkowego rogu + bevel - patrz obszerny komentarz w
   components.css, sekcja "Przyciski". Wariant "primary", skala "xs" (maly
   kwadratowy przycisk 30px). */
.ld-postac-card__hint {
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	background: var(--kolor-postac);
	color: var(--kolor-papier);
	border: 0;
	box-shadow:
		inset 0 0 0 3px var(--kolor-tusz),
		inset 0 5px var(--kolor-postac-jasny),
		inset 0 -5px var(--kolor-postac-jasny),
		inset 8px 0 var(--kolor-postac-ciemny),
		inset -8px 0 var(--kolor-postac-ciemny);
	clip-path: var(--ld-clip-path-pixel-xs);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
	opacity: 0;
	transition: opacity 0.15s steps(2), transform 0.06s steps(2), filter 0.06s steps(2), background-color 0.06s steps(2), box-shadow 0.06s steps(2);
	filter: drop-shadow(0 3px 0 var(--kolor-tusz));
}

/* "Zagiety rog" (::after) celowo nie jest tu uzyty - patrz obszerny
   komentarz przy .ld-btn w components.css. */

/* Zero zmiany koloru na hover/focus - patrz komentarz przy
   .ld-header__toggle wyzej (ten sam wzorzec, tylko border 3px zamiast 4px). */
.ld-postac-card__hint:hover {
	transform: translateY(-2px);
	filter: drop-shadow(0 5px 0 var(--kolor-tusz));
}

.ld-postac-card__hint:focus-visible {
	box-shadow: inset 0 0 0 3px var(--kolor-tusz), inset 0 0 0 6px var(--kolor-papier);
}

.ld-postac-card__hint:active {
	transform: translateY(3px);
	filter: drop-shadow(0 0 0 var(--kolor-tusz));
}

@media (hover: none), (pointer: coarse) {
	.ld-postac-card__hint {
		opacity: 1;
	}
}

.ld-postac-card__hint:focus-visible {
	opacity: 1;
}

/* Dymek pojawia sie PONIZEJ postaci - ogon dymka odwrocony w dol, patrz
   ::after/::before. Figura postaci (.ld-postac-card__figure) ma stala
   wysokosc i sekcja nie ma overflow:hidden, wiec dymek pod spodem nie
   ucina sie na dolnej krawedzi sekcji - nachodzi (z wyzszym z-index) na
   tresc pod spodem. */
.ld-postac-card__bubble {
	position: absolute;
	top: calc(100% + 16px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	width: max-content;
	max-width: 220px;
	background: var(--kolor-papier);
	color: var(--kolor-tusz);
	box-shadow: inset 0 0 0 4px var(--kolor-tusz);
	clip-path: var(--ld-clip-path);
	filter: drop-shadow(6px 6px 0 var(--kolor-tusz));
	padding: 14px 16px;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s steps(3), transform 0.15s steps(3), visibility 0.15s;
	z-index: 5;
}

.ld-postac-card__bubble::after {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 12px solid var(--kolor-tusz);
}

.ld-postac-card__bubble::before {
	content: '';
	position: absolute;
	bottom: calc(100% - 4px);
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 9px solid var(--kolor-papier);
	z-index: 1;
}

.ld-postac-card:hover .ld-postac-card__bubble,
.ld-postac-card:focus-within .ld-postac-card__bubble,
.ld-postac-card.is-active .ld-postac-card__bubble {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.ld-postac-card__close {
	display: none;
}

.ld-postac-card__bubble-nazwa {
	display: none;
}

.ld-postac-overlay {
	position: fixed;
	inset: 0;
	background: rgba(18, 18, 18, 0.82);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s steps(4);
}

.ld-postac-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Mobile / dotyk: dymek zamienia sie w pelnoekranowy popup. Ramka
   (box-shadow inset 4px tusz) i ciete narozniki (clip-path) sa
   dziedziczone z bazowej reguly .ld-postac-card__bubble powyzej - to ten
   sam wzorzec co .ld-btn/.ld-panel, bez potrzeby powtarzania. Desktop
   (hover) zostaje bez zmian. */
@media (max-width: 640px), (hover: none) {
	.ld-postac-card__bubble {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		overflow-y: auto;
		z-index: 1001;
		transform: translateY(100%);
		filter: none;
		padding: var(--ld-space-lg) var(--ld-space-md) var(--ld-space-md);
	}

	.ld-postac-card__bubble::before,
	.ld-postac-card__bubble::after {
		display: none;
	}

	.ld-postac-card.is-active .ld-postac-card__bubble {
		transform: translateY(0);
	}

	.ld-postac-card__bubble-nazwa {
		display: block;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 1rem;
		padding-right: 40px;
		margin: 0 0 var(--ld-space-sm);
	}

	/* Ksztalt schodkowego rogu + bevel - patrz obszerny komentarz w
	   components.css, sekcja "Przyciski". Wariant "primary", skala "xs"
	   (maly kwadratowy przycisk 34px). */
	.ld-postac-card__close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 10px;
		right: 10px;
		width: 34px;
		height: 34px;
		background: var(--kolor-postac);
		color: var(--kolor-papier);
		border: 0;
		box-shadow:
			inset 0 0 0 3px var(--kolor-tusz),
			inset 0 5px var(--kolor-postac-jasny),
			inset 0 -5px var(--kolor-postac-jasny),
			inset 8px 0 var(--kolor-postac-ciemny),
			inset -8px 0 var(--kolor-postac-ciemny);
		clip-path: var(--ld-clip-path-pixel-xs);
		font-family: var(--font-display);
		font-weight: 700;
		cursor: pointer;
		z-index: 1;
		transition: transform 0.06s steps(2), filter 0.06s steps(2), background-color 0.06s steps(2), box-shadow 0.06s steps(2);
		filter: drop-shadow(0 3px 0 var(--kolor-tusz));
	}

	/* "Zagiety rog" (::after) celowo nie jest tu uzyty - patrz obszerny
	   komentarz przy .ld-btn w components.css. */

	/* Zero zmiany koloru na hover/focus - patrz komentarz przy
	   .ld-header__toggle wyzej. */
	.ld-postac-card__close:hover {
		transform: translateY(-2px);
		filter: drop-shadow(0 5px 0 var(--kolor-tusz));
	}

	.ld-postac-card__close:focus-visible {
		box-shadow: inset 0 0 0 3px var(--kolor-tusz), inset 0 0 0 6px var(--kolor-papier);
	}

	.ld-postac-card__close:active {
		transform: translateY(2px);
		filter: drop-shadow(0 0 0 var(--kolor-tusz));
	}
}

.ld-page .ld-postac-card__cechy {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 0.85rem;
}

.ld-postac-card__cechy li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.ld-postac-card__cechy li::before {
	content: '';
	flex: none;
	width: 10px;
	height: 10px;
	margin-top: 4px;
	background: var(--kolor-postac);
	box-shadow: inset 0 0 0 2px var(--kolor-tusz);
}

/* ============ KARTY ============ */

/* Pelna szerokosc (full-bleed): tlo "dither" sekcji kategorii ma siegac
   krawedzi ekranu (do 1920px - patrz .ld-page-wrap), tresc wewnatrz zostaje
   wysrodkowana przez zagniezdzony .ld-container (patrz section-karty.php). */
.ld-karta-kategoria {
	position: relative;
	overflow: hidden;
	box-shadow: inset 0 0 0 4px var(--kolor-tusz);
	padding-block: var(--ld-space-lg);
}

/* Przyciemnienie calego tla "dither" (nie tylko plakietki za tekstem) -
   pionowy gradient, najciemniejszy przy gornej krawedzi (tam gdzie siedzi
   naglowek+opis), wygaszony do przezroczystego przed wierszem kart
   awers/rewers. Warstwa miedzy .ld-dither (z-index:0, ponizej) a tresc
   (.ld-container/.ld-container--tekst, z-index:1, powyzej) - pseudoelement
   ::after ma z-index:0 tak jak .ld-dither, ale jako wygenerowana tresc
   trafia w kolejnosci malowania PO nim (ten sam poziom z-index, kolejnosc w
   drzewie decyduje), wiec renderuje sie NAD wzorem dither i POD tekstem/
   kartami, bez zadnej zmiany w markupie. Stopnie gradientu dobrane tak, aby
   alpha zostawala >=0.53 przez cala wysokosc bloku naglowek+opis (zmierzone
   maksimum wsrod szerokosci 375-1920px: 32.3% wysokosci panelu) - patrz
   zmierzony kontrast przy .ld-karta-kategoria__content nizej. */
.ld-karta-kategoria::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(18, 18, 18, 0.62) 0%,
		rgba(18, 18, 18, 0.6) 32%,
		rgba(18, 18, 18, 0.42) 44%,
		rgba(18, 18, 18, 0.2) 58%,
		rgba(18, 18, 18, 0) 72%
	);
}

.ld-karta-kategoria .ld-container {
	position: relative;
	z-index: 1;
	max-width: 920px;
}

/* Naglowek+opis kategorii zyje w .ld-container--tekst (patrz
   section-karty.php i komentarz przy .ld-karta-kategoria__opis nizej) -
   ta sama warstwa (position/z-index) ponad tlem "dither" co
   .ld-karta-kategoria .ld-container powyzej, wymagana osobno bo to inna
   klasa kontenera. */
.ld-karta-kategoria .ld-container--tekst {
	position: relative;
	z-index: 1;
}

/* Naglowek (ikona+nazwa) i opis kategorii maja za maly kontrast na tle
   "dither" bez przyciemnienia: bialy tekst wprost na plaskich kolorach
   "dither" (jasny/ciemny x4 kategorie) daje od 1.47:1 (spoleczenstwo_jasny)
   do 6.06:1 (technologia_ciemny) - 7 z 8 kolorow PONIZEJ progu WCAG AA
   4.5:1, sam text-shadow (1-3px, pixel-artowy "twardy" cien bez rozmycia)
   tego nie naprawia, bo dziala tylko na krawedziach liter, nie na calej
   powierzchni glifu. Kontrast zapewnia gradient na .ld-karta-kategoria::after
   powyzej (przyciemnienie calego tla, nie osobna plakietka za tekstem) -
   zmierzone w realnie wyrenderowanym DOM (headless Chrome, tekst chwilowo
   przezroczysty, probkowanie kazdego piksela w obrebie naglowka i opisu) na
   szerokosciach 375-1920px: najgorszy przypadek 6.34:1 (spoleczenstwo),
   pozostale kategorie: klimat 7.5-7.6:1, technologia 9.1-9.2:1, zdrowie
   9.1-9.2:1 - wszystkie wyraznie powyzej progu 4.5:1. Sam blok zostaje bez
   tla/clip-path (brak efektu "wyklejonej karteczki"), padding-block
   zachowany dla odstepu od gornej krawedzi panelu i wiersza kart ponizej -
   padding-inline nadpisywany i tak przez .ld-container--tekst (wyzsza
   specyficznosc, .ld-page prefix w base.css). */
.ld-karta-kategoria__content {
	position: relative;
	z-index: 1;
	padding-block: var(--ld-space-md);
}

.ld-karta-kategoria__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: var(--ld-space-sm);
}

.ld-karta-kategoria__icon {
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: var(--ld-radius-pill);
	background: var(--kolor-papier);
	box-shadow: inset 0 0 0 4px var(--kolor-tusz);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ld-karta-kategoria__icon .ld-icon {
	width: 26px;
	height: 26px;
	color: var(--kolor-tusz);
}

/* Przyczyna zlego wyrownania ikony i nazwy kategorii: .ld-page
   h1/h2/h3/h4 w base.css ustawia margin: 0 0 var(--ld-space-sm) ze
   specyficznoscia (0,1,1). Selektor ponizej (.ld-karta-kategoria__nazwa,
   specyficznosc 0,1,0 - bez prefiksu .ld-page) przegrywal z globalnym
   resetem naglowkow - ten sam wzorzec bledu jak przy naglowkach headera i
   panelu formularza kontaktowego w tym pliku. Efekt: h3 zachowywal ok.
   12-20px marginesu DOLNEGO (var(--ld-space-sm)), przez co jego "margin
   box" byl asymetryczny (0 gory / ~18px dolu), a align-items:center na
   .ld-karta-kategoria__head centrowalo WLASNIE margin box, nie tresc - w
   efekcie widoczny tekst byl przesuniety do gory wzgledem okraglej ikony
   o ok. polowe tego marginesu (srodek ikony w pionie = 180px, srodek
   nazwy = 170.7px, roznica 9.3px). Naprawa: prefiks .ld-page podnosi
   specyficznosc powyzej resetu. */
.ld-page .ld-karta-kategoria__nazwa {
	margin: 0;
	color: var(--kolor-papier);
	text-shadow: 3px 3px 0 var(--kolor-tusz);
}

/* Ten sam blad specyficznosci co powyzej, tym razem wzgledem .ld-page p
   (base.css, margin: 0 0 var(--ld-space-sm), specyficznosc 0,2,0) kontra
   .ld-karta-kategoria__opis bez prefiksu (0,1,0) - margin-inline: auto z
   tej reguly byl w calosci nadpisywany skrotem "margin" z resetu
   akapitow (margin-left/right wychodzily na 0px zamiast auto), wiec opis
   renderowal sie przyklejony do lewej krawedzi kolumny tresci zamiast
   bycia faktycznie wysrodkowanym (mimo ze text-align:center wizualnie to
   maskowalo). Prefiks .ld-page naprawia i to, i przywraca realne
   wysrodkowanie. */

/* --ld-text-max-width ustawiony tutaj nie mial efektu, dopoki rodzicem
   byl .ld-karta-kategoria .ld-container (max-width:920px, wyzej w tym
   pliku) - dziecko nie moze byc szersze niz rodzic. Naprawa: markup
   (section-karty.php) rozdziela naglowek+opis (.ld-container--tekst,
   sufit 1440px) od wiersza kart awers/rewers (.ld-container, zostaje
   przy 920px - to swiadomie WEZSZY kontener dla PAR ZDJEC kart, nie dla
   tekstu, i ma tak zostac). Kolor: bialy (--kolor-papier), bez zmian. */
.ld-page .ld-karta-kategoria__opis {
	color: var(--kolor-papier);
	text-shadow: 1px 1px 0 rgba(18, 18, 18, 0.6);
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	margin-bottom: var(--ld-space-md);
	text-align: center;
}

.ld-karta-kategoria__cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ld-space-md);
}

.ld-karta-kategoria__card {
	flex: 1 1 220px;
	max-width: 300px;
}

/* clip-path i filter:drop-shadow() na tym samym elemencie powoduje, ze
   Chrome przycina cien do ksztaltu clip-path (ten sam wzorzec bledu co
   .ld-btn/.ld-tab w components.css i .ld-partnerzy__logo nizej). Tu
   jednak clip-path siedzial na KONTENERZE (div), nie na samym <img> - a w
   srodku jest zawsze dokladnie jeden obraz, ktory w praktyce wypelnia
   caly kontener (obrazki kart sa znacznie wieksze niz slot wyswietlania,
   wiec max-width:100% z resetu ".ld-page img" zawsze przycina szerokosc
   img do dokladnie 100% kontenera, a wysokosc kontenera - blok bez
   wlasnej wysokosci - wynika wprost z wysokosci img). Dzieki temu
   clip-path/box-shadow/tlo mozna bezpiecznie przeniesc bezposrednio na
   <img> (clip-path na obrazkach dziala normalnie w przegladarkach - w
   przeciwienstwie do pseudo-elementow to nie jest ograniczone), a
   filter:drop-shadow zostaje na kontenerze, ktory juz nie ma clip-path,
   wiec cien nie jest przycinany. Zero zmian w PHP/markupie.
   overflow:hidden usuniety - byl redundantny (przycinanie robi teraz
   clip-path na img) i przycinalby TAKZE filter na kontenerze (identyczny
   mechanizm co clip-path). */
.ld-karta-kategoria__card-frame {
	filter: drop-shadow(8px 8px 0 var(--kolor-tusz));
	margin-bottom: 10px;
}

.ld-karta-kategoria__card-frame img {
	background: var(--kolor-papier);
	box-shadow: inset 0 0 0 4px var(--kolor-tusz);
	clip-path: var(--ld-clip-path);
}

.ld-karta-kategoria__card-label {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(0.72rem, 0.68rem + 0.15vw, 0.8rem);
	color: var(--kolor-papier);
	background: var(--kolor-tusz);
	padding: 6px 10px;
}

/* ============ INSTRUKCJA ============ */

.ld-instrukcja__grid {
	display: grid;
	gap: var(--ld-space-lg);
	align-items: center;
}

@media (min-width: 860px) {
	.ld-instrukcja__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Patrz obszerny komentarz przy .ld-karta-kategoria__card-frame wyzej -
   identyczny wzorzec i identyczna naprawa (kontener trzyma tylko filter,
   <img> w srodku dostaje clip-path/box-shadow/tlo bezposrednio;
   overflow:hidden usuniety z tego samego powodu). */
.ld-instrukcja__figure {
	filter: drop-shadow(8px 8px 0 var(--kolor-tusz));
}

.ld-instrukcja__figure img {
	background: var(--kolor-papier);
	box-shadow: inset 0 0 0 4px var(--kolor-tusz);
	clip-path: var(--ld-clip-path);
}

.ld-instrukcja__desc {
	color: var(--kolor-papier);
	margin-bottom: var(--ld-space-md);
}

.ld-instrukcja__note {
	margin-top: 10px;
	font-size: 0.85rem;
	color: var(--kolor-papier);
}

.ld-instrukcja__video-wrap {
	margin-top: var(--ld-space-xl);
	text-align: center;
}

.ld-instrukcja__video-wrap h3 {
	margin-bottom: var(--ld-space-sm);
}

/* Odtwarzacz na pelna szerokosc strony (full-bleed do granicy
   .ld-page-wrap, max-width:1920px w base.css - NIE do okna przegladarki)
   zamiast waskiego .ld-container tresci - dlatego .ld-instrukcja__video-wrap
   w markupie (section-instrukcja.php) nie ma juz klasy .ld-container
   (tylko naglowek h3 jest w zagniezdzonym .ld-container, zeby zostac w
   tej samej szerokosci co reszta tekstu sekcji). aspect-ratio 16/9
   pilnuje proporcji niezaleznie od szerokosci.
   clip-path/box-shadow celowo na <video>/<iframe> (elementy zastepowane),
   nie na tym kontenerze - ten sam wzorzec co .ld-instrukcja__figure/.ld-karta-
   kategoria__card-frame (patrz obszerny komentarz przy tej drugiej regule):
   filter:drop-shadow i clip-path na TYM SAMYM elemencie przycina cien w
   Chrome. Kontener trzyma tylko filter. */
.ld-instrukcja__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	filter: drop-shadow(8px 8px 0 var(--kolor-tusz));
}

.ld-instrukcja__video video,
.ld-instrukcja__video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--kolor-tusz);
	box-shadow: inset 0 0 0 4px var(--kolor-tusz);
	clip-path: var(--ld-clip-path);
}

/* ============ MATERIALY EDUKACYJNE ============ */

.ld-materialy__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: var(--ld-space-sm);
}

.ld-materialy__pdfy {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ld-space-sm);
}

.ld-materialy__pdfy .ld-materialy__item {
	margin-bottom: 0;
}

@media (min-width: 640px) {
	.ld-materialy__pdfy {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ld-materialy__icon {
	width: 56px;
	height: 56px;
	border-radius: var(--ld-radius-pill);
	background: var(--kolor-tusz);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.ld-materialy__icon .ld-icon {
	width: 26px;
	height: 26px;
	color: var(--kolor-papier);
}

/* Naglowki wewnatrz .ld-panel (tlo biale) - prefiks .ld-page potrzebny, zeby
   wygrac z globalnym resetem ".ld-page h3" (color: papier/bialy) - patrz
   ten sam, wielokrotnie udokumentowany wzorzec bledu specyficznosci co przy
   .ld-benefit__title wyzej w tym pliku. */
.ld-page .ld-materialy__item h3 {
	margin: 0;
	color: var(--kolor-tusz);
	font-size: 1.05rem;
}

/* SWIADOMIE POMINIETE: .ld-materialy__item to .ld-panel, tlo BIALE (nie
   czarne tlo strony) - --kolor-tekst-cichy tu jest funkcjonalnie wymagany
   (bialy tekst na bialym panelu bylby niewidoczny). Patrz analogiczne
   pominiecia: .ld-accordion__panel (components.css), .ld-placeholder-tile
   (components.css), .ld-funding-bar__text-sub (nizej w tym pliku). */
.ld-materialy__item p {
	margin: 0;
	color: var(--kolor-tekst-cichy);
	font-size: 0.95rem;
}

.ld-page .ld-materialy__item .ld-note {
	color: var(--kolor-tekst-cichy);
}

/* ============ GALERIA ============ */

/* Mobile-first 2 kolumny, tablet 3, od 1000px 5 kolumn BEZ zawijania -
   posredni krok "4 kolumny" celowo pominiety, bo z dokladnie 5 zdjeciami
   w repeaterze dawalby nierowny, niepelny ostatni wiersz. */
.ld-galeria__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ld-space-sm);
}

@media (min-width: 700px) {
	.ld-galeria__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1000px) {
	.ld-galeria__grid {
		grid-template-columns: repeat(5, 1fr);
		gap: var(--ld-space-xs);
	}
}

/* Ksztalt schodkowego rogu - patrz obszerny komentarz w components.css,
   sekcja "Przyciski": skala "lg" - kafelek galerii to duza plytka ze
   zdjeciem, nie maly przycisk, wiec pelna skala czyta sie tu najlepiej.
   BEZ kolorowego bevelu (warianty kolorystyczne dotycza PRZYCISKOW z
   plaskim tlem - tu tlem jest zdjecie, nie plaski kolor, wiec dodanie
   kolorowych paskow inset zaslanialoby fragmenty kadru bez uzasadnienia)
   - zostaje sam czarny obrys "tusz". */
.ld-galeria__item {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	box-shadow: inset 0 0 0 4px var(--kolor-tusz);
	clip-path: var(--ld-clip-path-pixel-lg);
	padding: 0;
	border: 0;
	cursor: pointer;
	background: none;
	display: block;
	width: 100%;
	transition: transform 0.06s steps(2), filter 0.06s steps(2);
	filter: drop-shadow(0 4px 0 var(--kolor-tusz));
}

/* "Zagiety rog" (::after) celowo nie jest tu uzyty - patrz obszerny
   komentarz przy .ld-btn w components.css. */

.ld-galeria__item:hover {
	transform: translateY(-4px);
	filter: drop-shadow(0 8px 0 var(--kolor-tusz));
}

/* Pierscien fokusu klawiatury - dobra praktyka dostepnosci. */
.ld-galeria__item:focus-visible {
	box-shadow: inset 0 0 0 4px var(--kolor-tusz), inset 0 0 0 8px var(--kolor-papier);
}

.ld-galeria__item:active {
	transform: translateY(2px);
	filter: drop-shadow(0 0 0 var(--kolor-tusz));
}

.ld-galeria__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ld-galeria__caption {
	position: absolute;
	inset: auto 0 0 0;
	background: rgba(18, 18, 18, 0.75);
	color: var(--kolor-papier);
	font-size: 0.8rem;
	padding: 8px 10px;
	text-align: left;
}

.ld-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(18, 18, 18, 0.9);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: var(--ld-space-md);
}

.ld-lightbox.is-visible {
	display: flex;
}

.ld-lightbox__inner {
	position: relative;
	max-width: min(900px, 92vw);
	max-height: 88vh;
	background: var(--kolor-papier);
	box-shadow: inset 0 0 0 4px var(--kolor-tusz);
	clip-path: var(--ld-clip-path);
	padding: var(--ld-space-sm);
}

.ld-lightbox__inner img {
	max-height: 74vh;
	width: auto;
	margin-inline: auto;
}

.ld-lightbox__caption {
	text-align: center;
	margin-top: 10px;
	font-size: 0.9rem;
	color: var(--kolor-tusz);
}

/* Ksztalt schodkowego rogu + bevel - patrz obszerny komentarz w
   components.css, sekcja "Przyciski". Wariant "primary", skala "xs" (maly
   kwadratowy przycisk 40px). */
.ld-lightbox__close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 40px;
	height: 40px;
	background: var(--kolor-postac);
	color: var(--kolor-papier);
	border: 0;
	box-shadow:
		inset 0 0 0 4px var(--kolor-tusz),
		inset 0 5px var(--kolor-postac-jasny),
		inset 0 -5px var(--kolor-postac-jasny),
		inset 8px 0 var(--kolor-postac-ciemny),
		inset -8px 0 var(--kolor-postac-ciemny);
	clip-path: var(--ld-clip-path-pixel-xs);
	font-family: var(--font-display);
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.06s steps(2), filter 0.06s steps(2), background-color 0.06s steps(2), box-shadow 0.06s steps(2);
	filter: drop-shadow(0 4px 0 var(--kolor-tusz));
}

/* "Zagiety rog" (::after) celowo nie jest tu uzyty - patrz obszerny
   komentarz przy .ld-btn w components.css. */

/* Zero zmiany koloru na hover/focus - patrz komentarz przy
   .ld-header__toggle wyzej. */
.ld-lightbox__close:hover {
	transform: translateY(-2px);
	filter: drop-shadow(0 6px 0 var(--kolor-tusz));
}

.ld-lightbox__close:focus-visible {
	box-shadow: inset 0 0 0 4px var(--kolor-tusz), inset 0 0 0 7px var(--kolor-papier);
}

.ld-lightbox__close:active {
	transform: translateY(4px);
	filter: drop-shadow(0 0 0 var(--kolor-tusz));
}

/* ============ PARTNERZY ============ */

/* Na waskich ekranach logotypy partnerow jeden pod drugim, wysrodkowane
   (zamiast rzedu 2 kolumn) - patrz max-width na .ld-partnerzy__logo
   ponizej. Od 700px wraca uklad siatki na pelna szerokosc kolumny. */
.ld-partnerzy__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ld-space-sm);
	margin-bottom: var(--ld-space-md);
}

@media (min-width: 700px) {
	.ld-partnerzy__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* `filter: drop-shadow()` na TYM SAMYM elemencie, ktory ma tez
   `clip-path`, jest przez Chrome PRZYCINANY do ksztaltu clip-path - cien
   wykraczajacy poza wlasciwy prostokat elementu (a taki jest z zalozenia:
   ma wystawac 8px na zewnatrz) jest obcinany i NIGDY nie moze byc
   widoczny, niezaleznie od koloru cienia. Naprawa wymaga DODATKOWEGO
   DOM-owego wrappera (zobacz section-partnerzy.php: .ld-partnerzy__logo
   to zewnetrzny, niewidoczny kontener pozycjonujacy,
   .ld-partnerzy__logo-tile to wlasciwy, bialy, oprawiony w clip-path
   kafelek) - jeden element NIE MOZE pokazac wlasnego filter:drop-shadow
   zza wlasnego clip-path (przycina sam siebie), a pseudo-element
   (::before/::after) tego samego elementu tez nie pomaga - wlasne tlo
   elementu zawsze renderuje sie NAD swoimi dziecmi z ujemnym z-index
   (kolejnosc malowania CSS2.1: krok 1 tlo elementu, krok 2 dzieci z
   ujemnym z-index - a wiec "nad", nie "pod"). Cien (::before na
   zewnetrznym .ld-partnerzy__logo, z-index:-1) i wlasciwy kafelek
   (.ld-partnerzy__logo-tile, zwykly przeplyw, bez pozycjonowania) to dwa
   ODREBNE elementy w tym samym stacking context (.ld-partnerzy__logo,
   z-index:0) - cien (krok 2, ujemny z-index) maluje sie PRZED kafelkiem
   (krok 3, zwykla tresc w przeplywie), wiec kafelek go poprawnie zaslania
   poza 8px marginesem wystajacym na zewnatrz.
   Podniesiona specyficznosc selektora kafelka
   (.ld-page .ld-partnerzy__grid .ld-partnerzy__logo-tile) i !important na
   box-shadow/clip-path - obrona na wypadek nieznanej reguly z kaskady
   Hello Elementor/wtyczek, ktorej nie mozna sprawdzic lokalnie (brak
   dostepu do plikow motywu-rodzica w tym srodowisku).

   Kafelek uzywa --ld-clip-path-pixel-lg (skala "lg", ta sama co
   .ld-galeria__item, bo to porownywalnej wielkosci duza plytka, nie maly
   przycisk). Cien pod spodem (::before na zewnetrznym
   .ld-partnerzy__logo) dostaje TEN SAM clip-path co kafelek na wierzchu -
   inaczej stary, geometryczny ksztalt cienia (sciete rogi) wystawalby zza
   nowego, schodkowego kafelka w niedopasowany sposob w 8px marginesie
   widocznego cienia (dwa rozne clip-path, ktore sie nie zgadzaja). Bevel:
   subtelny, w odcieniach szarosci (jak .ld-btn--ghost) - tlo kafelka jest
   biale (logo partnerow), kolorowy bevel kategorii kart nie mialby tu
   uzasadnienia. Akcent "zagietego rogu" (::after) celowo nie jest tu
   uzyty, jak wszedzie indziej w tej kategorii ksztaltow - patrz
   components.css. */
.ld-page .ld-partnerzy__grid .ld-partnerzy__logo {
	position: relative;
	z-index: 0;
	width: 100%;
	max-width: 260px;
	margin-inline: auto;
	aspect-ratio: 3 / 2;
}

.ld-page .ld-partnerzy__grid .ld-partnerzy__logo::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #3a3a3a;
	clip-path: var(--ld-clip-path-pixel-lg);
	transform: translate(8px, 8px);
}

.ld-page .ld-partnerzy__grid .ld-partnerzy__logo-tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--kolor-papier);
	box-shadow:
		inset 0 0 0 4px var(--kolor-tusz),
		inset 0 6px var(--kolor-szary-jasny),
		inset 0 -6px var(--kolor-szary-jasny),
		inset 12px 0 var(--kolor-szary-ciemny),
		inset -12px 0 var(--kolor-szary-ciemny) !important;
	clip-path: var(--ld-clip-path-pixel-lg) !important;
	padding: var(--ld-space-sm);
}

@media (min-width: 700px) {
	.ld-page .ld-partnerzy__grid .ld-partnerzy__logo {
		max-width: none;
		margin-inline: 0;
	}
}

.ld-partnerzy__logo-tile img {
	max-height: 64px;
	width: auto;
	object-fit: contain;
}

/* Akapit zyje w markupie (section-partnerzy.php) we wlasnym
   .ld-container--tekst, POZA .ld-container siatki logotypow (zeby siatka
   zostala przy 1180px, a tekst mogl dojsc do 1440px) - patrz komentarz
   przy .ld-container--tekst w base.css. Kolor: bialy (--kolor-papier). */
.ld-partnerzy__tekst {
	color: var(--kolor-papier);
	width: 100%;
	max-width: 100%;
}

/* ============ O PROJEKCIE ============ */

.ld-o-projekcie {
	position: relative;
	overflow: hidden;
}

.ld-o-projekcie__grid {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--ld-space-lg);
	align-items: center;
}

@media (min-width: 860px) {
	.ld-o-projekcie__grid.has-image {
		grid-template-columns: 1fr 1fr;
	}
}

/* Bez zdjecia bocznego (brak fallbacku na zdjecie_boczne, patrz
   content-seed.php) sekcja uzywa .ld-container--tekst zamiast
   .ld-container (section-o-projekcie.php), wiec ten blok dochodzi do
   1440px. Wariant .has-image (gdy pole zostanie uzupelnione) zostaje
   przy .ld-container/grid 2-kolumnowej - tam tekst i tak zajmuje tylko
   1fr siatki obok zdjecia, wiec sufit 1440px nie mialby znaczenia
   niezaleznie od kontenera. */
.ld-o-projekcie__tekst {
	width: 100%;
	max-width: 100%;
}

/* Selektor bezposredniego dziecka (">"), nie potomka, celowo - akapity
   WYSIWYG (tekst_o_projekcie) sa bezposrednimi dziecmi tego kontenera i
   maja byc biale na ciemnym tle sekcji. .ld-funding-bar zagniezdzony nizej
   w tym samym kontenerze tez zawiera wlasne <p> (na BIALYM tle plakietki,
   patrz .ld-funding-bar__text-main/-sub) - selektor potomka (bez ">")
   pasowalby tez do nich i mial WYZSZA specificznosc niz pojedyncza klasa
   .ld-funding-bar__text-main/-sub, nadpisujac ich kolor na bialy (biale na
   bialym, niewidoczne). Ograniczenie do bezposredniego dziecka wyklucza
   zagniezdzony komponent z dopasowania w ogole - konflikt nie powstaje. */
.ld-o-projekcie__tekst > p {
	color: var(--kolor-papier);
}

/* Blok finansowania pod glownym opisem - dokladnie ten sam wspoldzielony
   komponent .ld-funding-bar co w stopce (patrz sekcja FOOTER na koncu tego
   pliku oraz ld_render_funding_bar() w inc/template-tags.php). Tu dostaje
   tylko dodatkowy odstep od tekstu powyzej - reszta wygladu (jasna belka,
   3 kolumny, plakietka LexCultura) pochodzi ze wspoldzielonych regul. */
.ld-o-projekcie__funding-wrap {
	margin-top: var(--ld-space-lg);
}

/* Belka ma konczyc sie dokladnie tam gdzie tekst opisu powyzej
   (.ld-container--tekst, sufit 1440px), nie przy waskim 1180px
   dziedziczonym z .ld-container wewnatrz .ld-funding-bar__inner (patrz
   stopka - tam ten sufit ma zostac bez zmian, dlatego nadpisanie celuje
   wylacznie w .ld-container zagniezdzony w tym wrapperze, nie w klase
   .ld-container samodzielnie). Mobile-first, ten sam wzorzec co
   .ld-container--tekst w base.css. */
.ld-o-projekcie__funding-wrap .ld-container {
	max-width: 100%;
}

@media (min-width: 768px) {
	.ld-o-projekcie__funding-wrap .ld-container {
		max-width: var(--ld-text-max-width);
	}
}

/* Patrz obszerny komentarz przy .ld-karta-kategoria__card-frame (sekcja
   "KARTY" wyzej w tym pliku) - identyczny wzorzec i identyczna naprawa. */
.ld-o-projekcie__obraz {
	filter: drop-shadow(8px 8px 0 var(--kolor-tusz));
}

.ld-o-projekcie__obraz img {
	box-shadow: inset 0 0 0 4px var(--kolor-tusz);
	clip-path: var(--ld-clip-path);
}

/* ============ FAQ ============ */

.ld-faq {
	max-width: 820px;
	margin-inline: auto;
}

/* Ramki akordeonu FAQ - kolorowe (rotacja po palecie), zamiast domyslnej
   czarnej z .ld-accordion__item. Sekcja ma czarne tlo strony (dziedziczone). */
.ld-faq .ld-accordion__item:nth-child(5n+1) { box-shadow: inset 0 0 0 4px var(--kolor-klimat-jasny); }
.ld-faq .ld-accordion__item:nth-child(5n+2) { box-shadow: inset 0 0 0 4px var(--kolor-spoleczenstwo-jasny); }
.ld-faq .ld-accordion__item:nth-child(5n+3) { box-shadow: inset 0 0 0 4px var(--kolor-technologia-jasny); }
.ld-faq .ld-accordion__item:nth-child(5n+4) { box-shadow: inset 0 0 0 4px var(--kolor-zdrowie-jasny); }
.ld-faq .ld-accordion__item:nth-child(5n+5) { box-shadow: inset 0 0 0 4px var(--kolor-postac); }

.ld-faq .ld-accordion__item:nth-child(5n+1) .ld-accordion__icon { background: var(--kolor-klimat-jasny); }
.ld-faq .ld-accordion__item:nth-child(5n+2) .ld-accordion__icon { background: var(--kolor-spoleczenstwo-jasny); }
.ld-faq .ld-accordion__item:nth-child(5n+3) .ld-accordion__icon { background: var(--kolor-technologia-jasny); }
.ld-faq .ld-accordion__item:nth-child(5n+4) .ld-accordion__icon { background: var(--kolor-zdrowie-jasny); }
.ld-faq .ld-accordion__item:nth-child(5n+5) .ld-accordion__icon { background: var(--kolor-postac); }

.ld-faq .ld-accordion__item:nth-child(5n+1) .ld-accordion__icon .ld-icon,
.ld-faq .ld-accordion__item:nth-child(5n+2) .ld-accordion__icon .ld-icon,
.ld-faq .ld-accordion__item:nth-child(5n+4) .ld-accordion__icon .ld-icon {
	color: var(--kolor-tusz);
}

/* ============ KONTAKT ============ */

.ld-kontakt__grid {
	display: grid;
	gap: var(--ld-space-lg);
}

@media (min-width: 900px) {
	.ld-kontakt__grid {
		grid-template-columns: 0.9fr 1.1fr;
	}
}

.ld-kontakt__info {
	display: flex;
	flex-direction: column;
	gap: var(--ld-space-sm);
}

/* Kolor: bialy (--kolor-papier). Szerokosc SWIADOMIE bez zmian -
   .ld-kontakt__info siedzi w .ld-kontakt__grid (grid 0.9fr/1.1fr obok
   panelu formularza od 900px, patrz wyzej), wiec tekst ma dostepne tylko
   ok. 0.9 z 1180px, niezaleznie od kontenera - poszerzenie do 1440px
   wymagaloby zlamania ukladu "opis obok formularza" (np. przeniesienia
   opisu nad formularz na pelna szerokosc). */
.ld-kontakt__desc {
	color: var(--kolor-papier);
}

/* Panel formularza ma byc czarny (jak reszta strony) zamiast bialego.
   Przyczyna: selektor ponizej bez prefiksu .ld-page ma specyficznosc
   (0,1,0) NIZSZA niz ".ld-page .ld-panel" w components.css (0,2,0) -
   "biale" tlo bazowego .ld-panel zawsze wygrywaloby, niezaleznie od
   kolejnosci plikow. Ramka .ld-panel zostaje w kolorze tusz, ktory jest
   identyczny z tlem panelu i strony - widoczna ramka daje sens tylko
   dzieki jasnym polom/tekstowi w srodku (patrz nizej), podobnie jak
   .ld-panel--terminal.

   Ponizej 900px .ld-kontakt__grid uklada info i panel w jednej kolumnie
   (patrz wyzej) - .ld-panel wnosi wtedy wlasny padding (--ld-space-md)
   NA SZCZYCIE juz istniejacego padding-inline z .ld-container. Poniewaz
   ramka panelu jest niewidoczna (ten sam kolor co tlo strony, patrz wyzej),
   ten dodatkowy padding nie chroni zadnej widocznej krawedzi - tworzy tylko
   podwojny odstep pol formularza od krawedzi ekranu w porownaniu z tekstem
   .ld-kontakt__info tuz nad panelem (ten ma tylko pojedynczy padding
   .ld-container). Zerowanie ponizej 900px wyrownuje pola formularza do tej
   samej krawedzi co naglowek/opis; przywrocenie oryginalnej wartosci w
   @media (min-width: 900px) ponizej zachowuje wyglad desktopu bez zmian. */
.ld-page .ld-kontakt__form-panel {
	background: var(--kolor-tusz);
	color: var(--kolor-papier);
	padding: 0;
}

@media (min-width: 900px) {
	.ld-page .ld-kontakt__form-panel {
		padding: var(--ld-space-md);
	}
}

.ld-page .ld-kontakt__form-panel .ld-form-row label {
	color: var(--kolor-papier);
}

/* Bez input[type="tel"] na liscie tego selektora (ciemny WARIANT panelu
   formularza kontaktowego) pole telefonu spadaloby do OGOLNEGO, jasnego
   tla z components.css zamiast dziedziczyc ciemny wariant panelu, mimo ze
   wizualnie siedzi obok Imienia/E-maila, ktore juz sa ciemne. */
.ld-page .ld-kontakt__form-panel .wpcf7-form input[type="text"],
.ld-page .ld-kontakt__form-panel .wpcf7-form input[type="email"],
.ld-page .ld-kontakt__form-panel .wpcf7-form input[type="tel"],
.ld-page .ld-kontakt__form-panel .wpcf7-form textarea {
	background: #1a1a1a;
	color: var(--kolor-papier);
	box-shadow: inset 0 0 0 4px #3a3a3a;
}

/* SWIADOMIE POMINIETE - placeholder inputa MA zostac przygaszony, zeby
   odrozniac sie od realnie wpisanej tresci (kolor wpisanego tekstu
   powyzej jest juz bialy - patrz input[type]/textarea). */
.ld-page .ld-kontakt__form-panel .wpcf7-form input::placeholder,
.ld-page .ld-kontakt__form-panel .wpcf7-form textarea::placeholder {
	color: var(--kolor-tekst-cichy-jasny);
}

.ld-page .ld-kontakt__form-panel .wpcf7-form .wpcf7-acceptance label {
	color: var(--kolor-papier);
}

.ld-page .ld-kontakt__form-panel .wpcf7-response-output {
	box-shadow: inset 0 0 0 4px #3a3a3a;
	color: var(--kolor-papier);
}

.ld-page .ld-kontakt__form-panel .ld-cf7-missing {
	color: var(--kolor-papier);
}

.ld-page .ld-kontakt__form-panel a {
	color: var(--kolor-technologia-jasny);
}

.ld-kontakt__polityka {
	margin: var(--ld-space-sm) 0 0;
	font-size: 0.85rem;
}

/* ============ FOOTER ============ */

.ld-footer {
	background: var(--kolor-tusz);
	color: var(--kolor-papier);
}

.ld-footer__grid {
	display: grid;
	gap: var(--ld-space-lg);
	padding-block: var(--ld-space-xl);
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.ld-footer__grid {
		grid-template-columns: 1.3fr 1fr 1fr;
	}
}

.ld-footer__logo img {
	height: 40px;
	width: auto;
	margin-bottom: var(--ld-space-sm);
}

/* .ld-page prefiks: patrz komentarz przy .ld-header__menu - to samo
   zabezpieczenie przed leakiem z generycznego resetu ".ld-page ul". */
.ld-page .ld-footer__dane {
	margin: 0;
	padding: 0;
	color: var(--kolor-papier);
	white-space: pre-line;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ld-footer__dane li {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
}

.ld-footer__dane .ld-icon {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--kolor-klimat-jasny);
}

/* Logo bez plakietki - samo logo, przekolorowane na bialo
   (assets/images/misc/partner-lexcultura-white.png), widoczne
   bezposrednio na ciemnym tle stopki, bez wlasnego boxa/ramki. */
.ld-footer__lexcultura {
	display: inline-flex;
	margin-top: var(--ld-space-sm);
}

.ld-footer__lexcultura img {
	height: 40px;
	width: auto;
}

.ld-footer__heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--kolor-klimat-jasny);
	margin-bottom: var(--ld-space-sm);
}

.ld-page .ld-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ld-footer__links a {
	color: var(--kolor-papier);
	text-decoration: none;
}

.ld-footer__links a:hover {
	color: var(--kolor-postac);
}

.ld-page .ld-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ld-footer__social a {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(0.72rem, 0.68rem + 0.15vw, 0.8rem);
	color: var(--kolor-tusz);
	background: var(--kolor-papier);
	padding: 10px 14px;
	border-radius: 4px;
	text-decoration: none;
	display: inline-block;
	transition: transform 0.06s steps(2), filter 0.06s steps(2);
	filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5));
}

/* Zero zmiany koloru na hover/klik, jak wszystkie pozostale elementy
   klikalne - zostaje wylacznie fizyka (transform/filter). "color" tutaj
   NIE jest zmiana koloru - to zabezpieczenie przed globalnym
   ".ld-page a:hover" (base.css), ktore bez tego nadpisania zmienialoby
   kolor tekstu na hover (ten sam mechanizm co przy .ld-btn, patrz
   obszerny komentarz w components.css). */
.ld-footer__social a:hover {
	color: var(--kolor-tusz);
	transform: translateY(-2px);
	filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.5));
}

.ld-footer__social a:active {
	transform: translateY(3px);
	filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.5));
}

/* SWIADOMIE POMINIETE: linijka copyright (rok + "Wszelkie prawa
   zastrzezone", patrz footer.php) NIE uzywa zmiennej --kolor-tekst-cichy*,
   tylko osobny, jeszcze ciemniejszy hardcoded szary (#9a9a9a) -
   potraktowana jak "podpis"/nota prawna na dole stopki, analogicznie do
   wyjatku dla znacznikow/podpisow. */
/* padding-inline wymagany osobno - ten wiersz siedzi jako bezposrednie
   dziecko <footer> (patrz footer.php), POZA .ld-footer__grid, jedynym
   elementem stopki opakowanym w .ld-container (ktory normalnie dostarcza
   boczny odstep). Bez wlasnego paddingu tekst dotyka krawedzi ekranu na
   mobile. */
.ld-footer__bottom {
	border-top: 4px solid #3a3a3a;
	padding-block: var(--ld-space-sm);
	padding-inline: var(--ld-space-md);
	text-align: center;
	font-size: 0.8rem;
	color: #9a9a9a;
}

/* ============ FUNDING BAR (wspoldzielony komponent: stopka + O projekcie) ============ */

/* Dokladny odpowiednik zrzutu od klienta: jasna plakietka z cienka ramka i
   zaokraglonymi rogami (celowo BEZ pixel-artowego clip-path reszty motywu -
   to oficjalny znak informacyjny dotacji, ktory ma wygladac
   neutralnie/urzedowo). Logo MC, dwuliniowy tekst i plakietka Fundacji
   LexCultura tworza jedna, zwarta grupe wysrodkowana w belce - patrz
   justify-content:center nizej. Markup renderuje ld_render_funding_bar()
   (inc/template-tags.php), wywolywana z footer.php ORAZ
   template-parts/section-o-projekcie.php - jedna zmiana stylu/markupu
   obejmuje oba miejsca. */
.ld-funding-bar {
	padding-block: var(--ld-space-md) var(--ld-space-lg);
}

/* padding-block (nie skrot "padding") celowo - zeby nie kolidowac z
   padding-inline z ".ld-page .ld-container" (specificity 0,2,0 > 0,1,0
   tej klasy), ten sam wzorzec bledu co przy .ld-kontakt__form-panel.
   To zalozenie dziala TYLKO gdy .ld-funding-bar ma nad soba wlasnego
   przodka .ld-container/.ld-container--tekst (tak jest w O projekcie -
   patrz .ld-o-projekcie__grid), ktory daje bialej plakietce zewnetrzny
   odstep od krawedzi ekranu. W stopce .ld-funding-bar jest bezposrednim
   dzieckiem <footer>, bez takiego przodka - padding-inline z
   .ld-funding-bar__inner/.ld-container dziala wtedy TYLKO do wewnatrz
   (odsuwa tresc od krawedzi wlasnego pudelka), a samo bialo tlo/ramka
   pudelka i tak dotyka krawedzi ekranu. Dlatego stopka dostaje wlasny,
   scisle scopowany padding ponizej - regula bazowa .ld-funding-bar
   (i wyglad w O projekcie) zostaje bez zmian. */
.ld-footer .ld-funding-bar {
	padding-inline: var(--ld-space-md);
}

.ld-funding-bar__inner {
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	gap: var(--ld-space-sm);
	background: var(--kolor-papier);
	border: 1px solid var(--kolor-szary-jasny);
	border-radius: 16px;
	padding-block: var(--ld-space-sm);
	text-align: center;
}

/* Logo/tekst/plakietka maja wysrodkowac sie JAKO GRUPA, bez nierownych
   odstepow: grid z kolumna "1fr" rezerwowalby CALA dostepna szerokosc dla
   srodkowej kolumny tekstu, a justify-items:start przykleja sam tekst do
   lewej krawedzi TEGO szerokiego slotu, wiec caly nadmiar pustego
   miejsca ladowalby sie w JEDNA, nierowna, duza luke. Flex bez
   rozciaganego slotu (logo/tekst/plakietka maja naturalna szerokosc,
   staly "gap" miedzy wszystkimi trzema) + justify-content:center na
   calym rzedzie centruje trojke JAKO JEDNA, zwarta grupe na srodku
   belki. */
@media (min-width: 640px) {
	.ld-funding-bar__inner {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--ld-space-md);
		text-align: left;
	}
}

/* Wysokosc ujednolicona na 75px (= srednica plakietki LexCultura obok),
   zgodnie z wymaganiem stalego rozmiaru obu logotypow w belce.
   width:auto zachowuje proporcje oryginalnej grafiki (671x298). */
.ld-funding-bar__logo img {
	height: 75px;
	width: auto;
	flex: none;
}

.ld-funding-bar__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ld-funding-bar__text-main {
	margin: 0;
	max-width: 60ch;
	color: var(--kolor-tusz);
	font-size: 0.85rem;
	font-weight: 700;
}

/* SWIADOMIE POMINIETE - plakietka finansowania ma BIALE tlo
   (.ld-funding-bar__inner wyzej), --kolor-tekst-cichy tu jest
   funkcjonalnie wymagany z tego samego powodu co .ld-materialy__item p
   (patrz komentarz tam). */
.ld-funding-bar__text-sub {
	margin: 0;
	max-width: 60ch;
	color: var(--kolor-tekst-cichy);
	font-size: 0.72rem;
	font-weight: 400;
}

/* Logo Fundacji LexCultura jest tu oprawione w okragla plakietke/pieczec
   (inaczej niz prostokatne kafelki logotypow partnerow w sekcji Partnerzy) -
   grafika zrodlowa ma jednolity margines przezroczystosci wokol samego kola,
   wiec object-fit:cover przycina wylacznie ten margines, nie tresc logo. */
.ld-funding-bar__seal {
	width: 75px;
	height: 75px;
	flex: none;
	overflow: hidden;
}

.ld-funding-bar__seal img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: invert(1);
}