/*
 * Reset i style bazowe strony frontowej. Mobile-first, fluid typography.
 */

/* Nawigacja kotwicowa headera (header.php) - scroll-behavior siedzi na
   html, bo to on jest scrolling boxem, nie .ld-page (klasa na body). */
html {
	scroll-behavior: smooth;
}

.ld-page * ,
.ld-page *::before,
.ld-page *::after {
	box-sizing: border-box;
}

.ld-page {
	position: relative;
	font-family: var(--font-text);
	color: var(--kolor-papier);
	background: var(--kolor-tlo-strona);
	font-weight: 400;
	font-size: clamp(16px, 15px + 0.25vw, 18px);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* Bardzo subtelny efekt scanline/flicker "z tamtych czasow" - retro CRT.
   Nie moze przeszkadzac w czytelnosci, dlatego niska nieprzezroczystosc
   i tryb mieszania overlay zamiast plaskiego przykrycia tresci. */
.ld-page::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	mix-blend-mode: overlay;
	opacity: 0.5;
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.035) 0px,
		rgba(255, 255, 255, 0.035) 1px,
		transparent 1px,
		transparent 3px
	);
	animation: ld-scanline-flicker 6s steps(1) infinite;
}

@keyframes ld-scanline-flicker {
	0%, 96%, 100% { opacity: 0.5; }
	97% { opacity: 0.3; }
	98% { opacity: 0.6; }
}

/* Globalny wrapper - na bardzo szerokich ekranach tresc calej strony nie
   rozciaga sie w nieskonczonosc. Bez position/transform/filter, zeby nie
   zmieniac containing blocka elementow position:fixed (lightbox, popup
   postaci). Pelna szerokosc sekcji (punkt 9) liczona jest wzgledem tego
   wrappera, bo sekcje sa jego bezposrednimi (lub posrednimi blokowymi)
   dziecmi - bez potrzeby sztuczek na jednostkach vw. */
.ld-page-wrap {
	max-width: 1920px;
	margin-inline: auto;
}

.ld-page img {
	max-width: 100%;
	display: block;
	height: auto;
}

.ld-page a {
	color: var(--kolor-technologia-jasny);
	text-decoration: underline;
	text-underline-offset: 2px;
}

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

.ld-page h1,
.ld-page h2,
.ld-page h3,
.ld-page h4 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--kolor-papier);
	line-height: 1.5;
	margin: 0 0 var(--ld-space-sm);
	text-wrap: balance;
}

.ld-page h1 {
	font-size: clamp(1.7rem, 1.3rem + 2vw, 3rem);
	text-shadow: 3px 3px 0 rgba(18, 18, 18, 0.15);
}

.ld-page h2 {
	font-size: clamp(1.2rem, 1rem + 1.1vw, 1.75rem);
}

.ld-page h3 {
	font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
}

.ld-page p {
	margin: 0 0 var(--ld-space-sm);
	text-wrap: pretty;
}

.ld-page ul,
.ld-page ol {
	margin: 0 0 var(--ld-space-sm);
	padding-left: 1.25em;
}

.ld-page .ld-container {
	width: 100%;
	max-width: var(--ld-container-width);
	margin-inline: auto;
	padding-inline: var(--ld-space-md);
}

/* Kazdy dlugi akapit opisowy (hero tagline, o projekcie, partnerzy, karty,
   materialy, bohaterowie, o grze, galeria) siedzi WEWNATRZ .ld-container
   (max 1180px) razem z siatka/lista danej sekcji - limit 1440px ustawiony
   na samym elemencie tekstowym (--ld-text-max-width) nie ma wiec szans
   zadzialac, gdy rodzic jest wezszy niz dziecko. Zamiast poszerzac
   .ld-container globalnie (zepsuloby to szerokosc siatek/kafelkow/zdjec,
   ktore maja zostac wezsze), .ld-container--tekst to NOWY, ODREBNY
   kontener - uzywany SAMODZIELNIE (nie razem z .ld-container na tym samym
   elemencie, zeby uniknac niejednoznacznej specyficznosci przy identycznym
   0,2,0) - jako dodatkowy wrapper TYLKO wokol bloku naglowek+opis, obok
   (nie wewnatrz) waskiego .ld-container reszty sekcji. Ten sam wzorzec
   mobile-first co reszta motywu: pelna szerokosc ponizej 768px, sufit
   1440px od 768px. */
.ld-page .ld-container--tekst {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	padding-inline: var(--ld-space-md);
}

@media (min-width: 768px) {
	.ld-page .ld-container--tekst {
		max-width: var(--ld-text-max-width);
	}
}

.ld-page .ld-section {
	padding-block: var(--ld-space-xl);
	scroll-margin-top: 88px;
}

/* #hero nie ma klasy .ld-section (patrz section-hero.php) - potrzebuje
   tego samego offsetu pod sticky headerem co reszta kotwic menu. */
.ld-page .ld-hero {
	scroll-margin-top: 88px;
}

.ld-page .ld-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(0.8rem, 0.74rem + 0.3vw, 0.95rem);
	line-height: 1;
	letter-spacing: 1px;
	color: var(--ld-eyebrow-color, var(--kolor-postac));
	margin-bottom: var(--ld-space-sm);
}

/* Znacznik przed eyebrow: bez bialej obwodki (halo) - sam kwadrat w kolorze
   sekcji. Kolor domyslny to marka (pomarancz), nadpisywany modyfikatorami
   .ld-eyebrow--* per sekcja (patrz nizej), zeby kazda sekcja miala inny akcent. */
.ld-page .ld-eyebrow::before {
	content: '';
	width: 14px;
	height: 14px;
	background: var(--ld-eyebrow-color, var(--kolor-postac));
	flex: none;
}

.ld-page .ld-eyebrow--technologia { --ld-eyebrow-color: var(--kolor-technologia-jasny); }
.ld-page .ld-eyebrow--technologia-ciemny { --ld-eyebrow-color: var(--kolor-technologia-ciemny); }
.ld-page .ld-eyebrow--klimat { --ld-eyebrow-color: var(--kolor-klimat-jasny); }
.ld-page .ld-eyebrow--klimat-ciemny { --ld-eyebrow-color: var(--kolor-klimat-ciemny); }
.ld-page .ld-eyebrow--zdrowie { --ld-eyebrow-color: var(--kolor-zdrowie-jasny); }
.ld-page .ld-eyebrow--zdrowie-ciemny { --ld-eyebrow-color: var(--kolor-zdrowie-ciemny); }
.ld-page .ld-eyebrow--spoleczenstwo { --ld-eyebrow-color: var(--kolor-spoleczenstwo-jasny); }
.ld-page .ld-eyebrow--spoleczenstwo-ciemny { --ld-eyebrow-color: var(--kolor-spoleczenstwo-ciemny); }

/* Ten wrapper nie ma wlasnego sufitu szerokosci (65ch) - taki limit
   blokowalby .ld-container--tekst (1440px) dla WSZYSTKICH sekcji wzorca
   "eyebrow+h2+opis" (o grze, bohaterowie, karty, galeria, materialy -
   patrz section-*.php) niezaleznie od tego jak szeroki jest kontener
   rodzica. Realny sufit szerokosci pochodzi wylacznie z rodzica
   (.ld-container 1180px lub .ld-container--tekst 1440px, w zaleznosci od
   sekcji). Naglowek h2 wewnatrz i tak jest naturalnie krotki (text-wrap:
   balance) - brak wlasnego sufitu mu nie szkodzi. */
.ld-page .ld-section-head {
	max-width: 100%;
	margin-bottom: var(--ld-space-lg);
}

/* Kolor bialy dotyczy wylacznie tekstu na czarnym tle strony - patrz
   przeciwienstwo w .ld-materialy__item p/.ld-note (layout.css), gdzie ten
   sam rodzaj tekstu siedzi na BIALYM panelu i szary zostaje z koniecznosci
   (bialy na bialym bylby niewidoczny). */
.ld-page .ld-section-head p {
	color: var(--kolor-papier);
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
}

/* Drobna notatka pomocnicza (np. podpowiedz interakcji, informacja
   "wkrotce" pod wylaczonym przyciskiem) - wspolna dla wielu sekcji. */
.ld-page .ld-note {
	margin-top: 10px;
	font-size: 0.85rem;
	color: var(--kolor-papier);
}

/* ---------- Scroll reveal (retro, krokowa animacja wejscia) ---------- */

.ld-page.has-js .ld-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.5s steps(8), transform 0.5s steps(8);
}

/* transform:none (nie translateY(0)) - kazda wartosc transform inna niz
   dokladnie "none" tworzy nowy containing block dla potomkow
   position:fixed/absolute. Karta postaci (.ld-postac-card) ma klase
   .ld-reveal - z translateY(0) po odslonieciu pelnoekranowy popup na
   mobile (.ld-postac-card__bubble, position:fixed) bylby bledny scinany
   do rozmiaru karty zamiast viewportu. */
.ld-page.has-js .ld-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ---------- Dostepnosc: prefers-reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.ld-page *,
	.ld-page *::before,
	.ld-page *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.ld-page.has-js .ld-reveal {
		opacity: 1;
		transform: none;
	}

	.ld-page::after {
		display: none;
	}
}

.ld-page .ld-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ld-page .ld-skip-link {
	position: absolute;
	left: -999px;
	top: auto;
	z-index: 10000;
	background: var(--kolor-tusz);
	color: var(--kolor-papier);
	padding: 12px 18px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.75rem;
}

.ld-page .ld-skip-link:focus {
	left: var(--ld-space-sm);
	top: var(--ld-space-sm);
}

.ld-page :focus-visible {
	outline: 3px solid var(--kolor-postac);
	outline-offset: 2px;
}