/* Pismo klinowe — trzy tysiące lat jednego wynalazku.
 *
 * Paleta z trzech rzeczy, z których to pismo fizycznie powstawało: wilgotnej
 * gliny, ściętej trzciny i cienia w świeżo odciśniętym rowku. Świadomie NIE
 * złoto z lazurem — to barwy pałacowej biżuterii, a pismo klinowe jest szare,
 * robocze i pełne rachunków za jęczmień.
 *
 * Cała śmiałość siedzi w TABLICZCE: znak stoi na powierzchni z fakturą wilgotnej
 * gliny, oświetlonej z góry i z lewej, a suwak prowadzi go przez cztery stadia.
 * Cień pod rysunkiem jest wklęsły, nie wypukły — bo klin się WCISKA, a nie
 * nakłada. To jedyny szczegół, na którym cała ta strona stoi wizualnie.
 */
.tpi-strona {
	--glina-tlo: #17130f; --dno: #100d0a;
	--wlos: rgba( 194, 168, 130, .14 ); --obrys: rgba( 194, 168, 130, .34 );
	--glina: #c2a882; --glina-j: #e0c99f; --glina-c: #8a765a;
	--rowek: #2b2118; --rylec: #6d5b41;
	--trzcina: #8a9a63; --trzcina-j: #a9ba81;
	--miedz: #b0743f; --miedz-j: #cd9057;
	--tekst: #a1957f; --tekst-slaby: #7c7263; --tekst-mocny: #f0e6d2; --etyk: #857a68;
	--serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif;
	position: relative; max-width: 1520px; margin: 0 auto; padding: 0 40px 90px; color: var( --tekst ); font: 300 15px var( --sans );
	background:
		radial-gradient( 1150px 600px at 50% -12%, rgba( 194, 168, 130, .14 ), transparent 70% ),
		radial-gradient( 880px 520px at 86% 40%, rgba( 138, 154, 99, .08 ), transparent 72% ),
		radial-gradient( 820px 500px at 10% 74%, rgba( 176, 116, 63, .09 ), transparent 72% ),
		linear-gradient( 180deg, #1e1913, var( --glina-tlo ) 46%, var( --dno ) );
	overflow-x: clip;
}
.tpi-strona *, .tpi-strona *::before, .tpi-strona *::after { box-sizing: border-box; }
body:has( .tpi-strona ) .wp-site-blocks > header, body:has( .tpi-strona ) header.wp-block-template-part, body:has( .tpi-strona ) .wp-site-blocks > footer, body:has( .tpi-strona ) footer.wp-block-template-part, body:has( .tpi-strona ) .wp-block-post-title { display: none !important; }
body:has( .tpi-strona ) .wp-site-blocks, body:has( .tpi-strona ) .wp-block-group, body:has( .tpi-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tpi-strona ) .wp-block-post-content > *, body:has( .tpi-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tpi-strona ) { background: #17130f; }
body:has( .tpi-strona ) .wp-block-post-content > .tpi-strona, body:has( .tpi-strona ) .entry-content > .tpi-strona, .tpi-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tpi-strona button { font-family: inherit; }

.tpi-sciezka { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 0 6px; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tpi-sciezka i { font-style: normal; color: var( --etyk ); }
.tpi-sciezka b { font-weight: 400; color: var( --glina-j ); }
.tpi-poziom { margin: 0 0 0 auto; }
.tpi-poziom span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var( --wlos ); border-radius: 999px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var( --tekst ); }
.tpi-poziom span::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var( --trzcina ); box-shadow: 0 0 10px var( --trzcina ); }

.tpi-hero { max-width: 84ch; padding: 44px 0 8px; }
.tpi-nad { margin: 0 0 12px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --etyk ); }
.tpi-tytul { margin: 0; font: 500 clamp( 44px, 5.4vw, 80px )/1.02 var( --serif ); color: var( --glina-j ); letter-spacing: -.01em; }
.tpi-tytul small { display: block; margin-top: 10px; font: 300 16px var( --sans ); letter-spacing: .12em; line-height: 1.5; color: var( --glina ); }
.tpi-lead { margin: 24px 0 0; font-size: 16.5px; line-height: 1.78; color: var( --tekst-mocny ); }
.tpi-hero__osnowa { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 0; }
.tpi-hero__osnowa span { display: grid; gap: 2px; padding: 16px 22px; border: 1px solid var( --wlos ); border-left: 3px solid var( --trzcina ); border-radius: 0 16px 16px 0; background: linear-gradient( 100deg, rgba( 138, 154, 99, .1 ), transparent ); }
.tpi-hero__osnowa b { font: 500 30px var( --serif ); color: var( --glina-j ); }
.tpi-hero__osnowa i { font-style: normal; font-size: 11px; letter-spacing: .14em; color: var( --etyk ); }

.tpi-sekcja { margin: 84px 0 0; }
.tpi-sekcja--scisla { position: relative; padding: 36px 32px 40px; border: 1px solid var( --wlos ); border-radius: 26px; background: radial-gradient( 960px 460px at 50% 0%, rgba( 194, 168, 130, .1 ), transparent 66% ), linear-gradient( 180deg, rgba( 36, 30, 23, .88 ), rgba( 16, 13, 10, .96 ) ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 44px 96px -54px rgba( 0, 0, 0, .96 ); }
.tpi-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tpi-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3.1vw, 42px )/1.14 var( --serif ); color: var( --glina-j ); }
.tpi-sekcja__lead { max-width: 80ch; margin: 14px 0 0; font-size: 15px; line-height: 1.76; color: var( --tekst ); }
.tpi-sekcja--religia .tpi-sekcja__tytul { color: var( --miedz-j ); }

/* ══════════════  TABLICZKA — podpis strony  ══════════════ */
.tpi-znak__wybor { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 24px; }
.tpi-znak__wybor button { display: grid; gap: 1px; padding: 10px 16px; border: 1px solid var( --wlos ); border-radius: 14px; background: transparent; text-align: left; cursor: pointer; transition: color .22s, background .22s, border-color .22s, transform .22s; }
.tpi-znak__wybor b { font: 500 15px var( --serif ); color: var( --tekst ); letter-spacing: .04em; }
.tpi-znak__wybor span { font-size: 10.5px; letter-spacing: .1em; color: var( --tekst-slaby ); }
.tpi-znak__wybor button:hover { border-color: var( --obrys ); transform: translateY( -2px ); }
.tpi-znak__wybor button:hover b { color: var( --tekst-mocny ); }
.tpi-znak__wybor button[ aria-selected="true" ] { border-color: var( --trzcina ); background: linear-gradient( 180deg, rgba( 138, 154, 99, .2 ), rgba( 138, 154, 99, .05 ) ); }
.tpi-znak__wybor button[ aria-selected="true" ] b { color: var( --glina-j ); }

.tpi-znak__uklad { display: grid; grid-template-columns: minmax( 0, 340px ) minmax( 0, 1fr ); gap: 30px 44px; align-items: start; }

/* Tabliczka: wilgotna glina oświetlona z góry i z lewej. Faktura jest z dwóch
   delikatnych gradientów, a nie z obrazka — plik rastrowy przy tym rozmiarze
   ważyłby więcej niż cała reszta strony. */
.tpi-tabliczka { margin: 0; padding: 26px; border-radius: 20px;
	background:
		radial-gradient( 120% 90% at 26% 18%, rgba( 224, 201, 159, .22 ), transparent 58% ),
		radial-gradient( 80% 70% at 80% 92%, rgba( 43, 33, 24, .5 ), transparent 62% ),
		linear-gradient( 160deg, #7d6a4e, #5d4e39 62%, #4a3d2c );
	box-shadow: inset 0 2px 0 rgba( 255, 240, 214, .22 ), inset 0 -3px 8px rgba( 0, 0, 0, .5 ), 0 30px 66px -34px rgba( 0, 0, 0, .95 );
}
.tpi-tabliczka__pole { display: grid; place-items: center; aspect-ratio: 1; }
.tpi-rys { width: 100%; height: auto; }
/* Rowek wciśnięty, nie kreska nałożona: jasna krawędź u góry, cień pod spodem. */
.tpi-rys path, .tpi-rys circle { filter: drop-shadow( 0 1.5px 0 rgba( 255, 240, 214, .3 ) ) drop-shadow( 0 -1px 1px rgba( 0, 0, 0, .45 ) ); }
.tpi-rys .jest-uproszczone path { stroke-width: 3.4; }
.tpi-glif { font-family: 'Noto Sans Cuneiform', serif; font-size: clamp( 74px, 12vw, 132px ); line-height: 1; color: var( --rowek );
	text-shadow: 0 1.5px 0 rgba( 255, 240, 214, .34 ), 0 -1px 2px rgba( 0, 0, 0, .5 ); }
.tpi-tabliczka__podpis { margin: 18px 0 0; font-size: 11.5px; line-height: 1.6; text-align: center; color: rgba( 240, 230, 210, .62 ); }

.tpi-suwak { display: grid; gap: 10px; margin: 0 0 20px; }
.tpi-suwak__etyk { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var( --trzcina-j ); }
.tpi-suwak input { width: 100%; accent-color: var( --trzcina ); }
.tpi-suwak input:focus-visible { outline: 2px solid var( --trzcina-j ); outline-offset: 4px; }
.tpi-suwak__osie { display: flex; justify-content: space-between; }
.tpi-suwak__osie i { font-style: normal; font-size: 10px; letter-spacing: .12em; color: var( --tekst-slaby ); }
.tpi-znak__opis { min-height: 5.2em; margin: 0; font-size: 15px; line-height: 1.76; color: var( --tekst-mocny ); }

.tpi-pole { margin-top: 18px; padding: 16px 20px; border-left: 2px solid var( --miedz ); border-radius: 0 12px 12px 0; background: rgba( 176, 116, 63, .1 ); font-size: 13.5px; line-height: 1.72; }
.tpi-pole b { display: block; margin-bottom: 6px; font: 400 10px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --miedz-j ); }

/* ══════════════  etapy  ══════════════ */
.tpi-etapy { position: relative; display: grid; gap: 14px; margin: 28px 0 0; padding: 0 0 0 34px; list-style: none; }
.tpi-etapy::before { content: ''; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient( 180deg, transparent, rgba( 138, 154, 99, .55 ) 8%, rgba( 194, 168, 130, .34 ) 92%, transparent ); }
.tpi-etapy li { position: relative; padding: 18px 22px; border: 1px solid var( --wlos ); border-radius: 16px; background: linear-gradient( 100deg, rgba( 194, 168, 130, .07 ), rgba( 194, 168, 130, .015 ) ); }
.tpi-etapy li::before { content: ''; position: absolute; left: -30px; top: 26px; width: 10px; height: 10px; border-radius: 999px; background: var( --trzcina ); box-shadow: 0 0 14px var( --trzcina ); }
.tpi-etapy i { display: block; margin-bottom: 4px; font-style: normal; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var( --etyk ); }
.tpi-etapy b { display: block; margin-bottom: 6px; font: 500 21px var( --serif ); color: var( --tekst-mocny ); }
.tpi-etapy p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var( --tekst ); }

/* ══════════════  kafle  ══════════════ */
.tpi-bostwa, .tpi-praktyki, .tpi-ramy__siatka { display: grid; grid-template-columns: repeat( auto-fit, minmax( 258px, 1fr ) ); gap: 16px; margin-top: 28px; }
.tpi-kafel, .tpi-ramy__siatka > div { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 20px; overflow: hidden; border: 1px solid var( --wlos ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 194, 168, 130, .05 ), rgba( 194, 168, 130, .012 ) ); transition: border-color .3s, transform .3s, box-shadow .3s, background .3s; }
.tpi-kafel::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient( 180deg, transparent, var( --miedz ), transparent ); opacity: .5; }
.tpi-kafel--jezyk::before { background: linear-gradient( 180deg, transparent, var( --trzcina ), transparent ); }
.tpi-kafel:hover, .tpi-ramy__siatka > div:hover { border-color: var( --obrys ); transform: translateY( -3px ); background: linear-gradient( 180deg, rgba( 194, 168, 130, .09 ), rgba( 194, 168, 130, .02 ) ); box-shadow: 0 30px 66px -40px rgba( 0, 0, 0, .92 ), 0 0 34px -18px rgba( 194, 168, 130, .4 ); }
.tpi-kafel h3 { margin: 0 0 8px; font: 500 21px var( --serif ); color: var( --tekst-mocny ); }
.tpi-kafel p { margin: 0; font-size: 13.5px; line-height: 1.68; color: var( --tekst ); }
.tpi-kafel .zd-wiecej { display: block; margin-top: auto; padding-top: 12px; border-top: 1px solid var( --wlos ); font: 400 10px var( --sans ); letter-spacing: .2em; text-transform: uppercase; color: var( --miedz-j ); opacity: .75; transition: opacity .2s, letter-spacing .2s; }
.tpi-kafel:hover .zd-wiecej { opacity: 1; letter-spacing: .24em; }
.tpi-kafel .zd-klocek__skrot { display: contents; }
.tpi-ramy__siatka i { display: block; margin-bottom: 10px; font-style: normal; font-size: 16px; color: var( --glina-j ); }
.tpi-ramy__siatka b { display: block; margin-bottom: 8px; font: 500 18px var( --serif ); color: var( --tekst-mocny ); }
.tpi-ramy__siatka p { margin: 0; font-size: 13.5px; line-height: 1.68; color: var( --tekst ); }

@media ( max-width: 900px ) {
	.tpi-znak__uklad { grid-template-columns: minmax( 0, 1fr ); }
	.tpi-tabliczka { max-width: 320px; margin: 0 auto; }
}
@media ( max-width: 780px ) {
	.tpi-strona { padding: 0 18px 70px; }
	.tpi-sekcja { margin-top: 58px; }
	.tpi-sekcja--scisla { padding: 26px 20px 30px; }
	.tpi-poziom { margin: 6px 0 0; }
	.tpi-hero__osnowa span { flex: 1 0 100%; }
}
@media ( prefers-reduced-motion: reduce ) {
	.tpi-strona *, .tpi-strona *::before { transition: none !important; animation: none !important; }
}

/* Przerywnik — pas zdobniczy między sekcjami (rysowany w PHP). */
.tpi-przerywnik { display: block; width: 100%; height: 46px; margin: 58px 0 -20px; color: var( --glina ); opacity: .38; filter: drop-shadow( 0 0 10px currentColor ); }


/* ---------------------------------------------------------------------------
   TŁA SEKCJI

   Reguły trzymają się atrybutu data-tlo, który PHP dokłada dopiero wtedy,
   gdy plik naprawdę leży na serwerze. Dopóki grafiki nie ma, sekcja nie
   dostaje ani ramki, ani wypełnienia i wygląda dokładnie jak dziś — brak ma
   być cichy, a nie zostawiać pustej ramy.

   Obraz wchodzi WARSTWĄ właściwości background, nie przez ::before. Tych
   dwóch pseudoelementów używa wspólny zdobienia.css (lotos nad sekcją i kreska
   rozdzielająca) i nadpisanie ich zabrałoby sekcjom zdobienia reszty serwisu.
   Z tego samego powodu nie ma tu overflow: hidden — lotos siedzi nad krawędzią.

   Adres pliku podaje PHP w zmiennej --tlo razem ze znacznikiem czasu, więc
   podmiana grafiki nie wymaga ruszania tego arkusza i nie siedzi w pamięci.
   --------------------------------------------------------------------------- */

.tpi-hero[data-tlo] {
	position: relative; max-width: none;
	padding: 64px 36px 52px; border-radius: 26px;
	border: 1px solid rgba( 255, 255, 255, .10 );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 );
	background:
		linear-gradient( 90deg, rgba( 12, 10, 14, .90 ) 0%, rgba( 12, 10, 14, .70 ) 34%, rgba( 12, 10, 14, .20 ) 66%, transparent 100% ),
		var( --obraz-tla ) 50% 46% / cover no-repeat;
}
.tpi-hero[data-tlo] > * { max-width: 80ch; }

.tpi-sekcja[data-tlo] {
	position: relative;
	padding: 40px 36px 44px; border-radius: 26px;
	border: 1px solid rgba( 255, 255, 255, .10 );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 );
	background:
		radial-gradient( 880px 500px at 12% 16%, rgba( 15, 13, 18, .62 ), transparent 74% ),
		linear-gradient( 180deg, rgba( 15, 13, 18, .10 ) 0%, rgba( 15, 13, 18, .22 ) 48%, rgba( 15, 13, 18, .48 ) 100% ),
		var( --obraz-tla ) 62% 52% / cover no-repeat;
}

@media ( max-width: 680px ) {
	.tpi-hero[data-tlo], .tpi-sekcja[data-tlo] { padding: 28px 20px 32px; border-radius: 18px; }
}

/* ---------------------------------------------------------------------------
   CZYTELNOSC NA TLE

   Kafle i klocki są z założenia przezroczyste — mają tło o kryciu 0,07,
   bo projektowano je na płaską barwę. Nad fotografią to przestaje działać:
   zmierzone na żywej stronie, tekst kafla nad jaśniejszym miejscem zdjęcia ma
   kontrast 1,23:1, czyli jest NIECZYTELNY. Zasłona na całej sekcji tego nie
   naprawia — z rachunku wychodzi, że musiałaby mieć krycie 0,80 i zabiłaby obraz.

   Dlatego czytelność niesie sam kafel, i tylko tam, gdzie pod spodem jest zdjęcie.
   Próg liczony w NAJGORSZYM przypadku, czyli nad czystą bielą, bo tła rozjaśniane
   gammą bywają jaśniejsze niż najjaśniejszy punkt oryginalnego zdjęcia. Próg 4,5:1
   wypada przy kryciu 0,845 — stąd 0,90, a nie 0,86, które miało zapas na granicy błędu.
   Przy 0,90 nad bielą: tekst 5,35:1, tytuł 12,80:1. Między kaflami obraz zostaje widoczny.
   --------------------------------------------------------------------------- */

.tpi-sekcja[data-tlo] .zd-pas > li,
.tpi-sekcja[data-tlo] .zd-klocek {
	background-color: rgba( 12, 10, 14, .90 );
	backdrop-filter: blur( 2px );
	border-color: rgba( 255, 255, 255, .16 );
	box-shadow: 0 18px 40px -26px rgba( 0, 0, 0, .9 );
}

/* TEKST POBOCZNY NAD TŁEM — podpisy i nadtytuły są ciemniejsze od tekstu głównego
   i przy kryciu kafla 0,90 wypadały PONIŻEJ progu 4,5:1. Podnoszenie krycia nic tu
   nie daje — dla najciemniejszych barw trzeba by 0,99, czyli kafel nieprzezroczysty.
   Dlatego rozjaśniam SAMĄ BARWĘ, w tej samej rodzinie, i tylko pod [data-tlo]. */
.tpi-sekcja[data-tlo] {
	--tekst-slaby: #999185;	/* #7c7263 dawało 3.31:1, teraz 5.02:1 */
	--etyk: #9a9182;	/* #857a68 dawało 3.71:1, teraz 5.02:1 */
}