/* KOLORYT WŁASNY TEGO DZIAŁU — purpura i kadzidło — barwa soborów, nie parafii.
   Grunt #100c14. Gradienty podłoża biorą barwę z palety tego działu,
   a nie z neutralnej szarości: 21 modułów miało wcześniej to samo
   `--tlo: #0e0c0b` i cały serwis świecił jedną szarością. */

/* Chrześcijaństwo — sobory, rozłamy, kanon i wyznania.  Prefiks `tkr-`.

   PALETA Z MATERIAŁU, NIE Z NASTROJU. Cztery barwy wzięte wprost z rzeczy,
   o których dział mówi: pergament kart, atrament żelazowo-galusowy, którym
   te karty zapisano, cynober rubryki, czyli czerwień nagłówka wpisywanego
   osobno po napisaniu tekstu, i złoto tła ikony. Piąta, lapis, pojawia się
   tylko na gałęziach drzewa, bo to najdroższy barwnik iluminacji i nie
   rozdaje się go byle gdzie.

   ŚWIADOMIE inna niż sąsiedzi w filarze zachodnim: Hermetyzm jest czarno-
   mosiężny, Antyk marmurowo-ochrowy. Tu rządzi pergamin na ciemnym.

   SZEROKOŚĆ 1520 px i blok wyłamania z układu motywu są od pierwszej wersji.
   Motyw narzuca `--wp--style--global--content-size: 645px` i bez tego dział
   wygląda na ściśnięty do połowy ekranu, a test tego NIE widzi, bo ściśnięta
   strona niczego nie przepełnia. */

.tkr-strona {
	--tlo: #100c14; --panel: rgba( 28, 22, 36, .84 );
	--obrys: rgba( 230, 220, 196, .30 ); --wlos: rgba( 230, 220, 196, .14 );
	--pergamin: #e6dcc4; --pergamin-j: #f5efe0;
	--atrament: #2a2418;
	--cynober: #b4442e; --cynober-j: #d4674c;
	--zloto: #c8a349; --zloto-j: #e6c46c;
	--lapis: #3a5a8c; --lapis-j: #6f92c4;
	--etyk: #a8977c;
	--tekst: #b6ac97; --tekst-slaby: #8d8271; --tekst-mocny: #ece4d2;
	--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 17px var( --serif );
	background:
		radial-gradient( 1100px 600px at 50% -8%, rgba( 230, 220, 196, .16 ), transparent 70% ),
		radial-gradient( 860px 500px at 88% 38%, rgba( 42, 36, 24, .10 ), transparent 72% ),
		radial-gradient( 700px 420px at 6% 76%, rgba( 180, 68, 46, .1 ), transparent 72% ),
		linear-gradient( 180deg, #191510, var( --tlo ) 46% );
	overflow-x: clip;
}
.tkr-strona *, .tkr-strona *::before, .tkr-strona *::after { box-sizing: border-box; }

/* WYŁAMANIE Z UKŁADU MOTYWU. Bez tego dział stoi w kolumnie 645 px. */
body:has( .tkr-strona ) .wp-site-blocks > header, body:has( .tkr-strona ) header.wp-block-template-part,
body:has( .tkr-strona ) .wp-site-blocks > footer, body:has( .tkr-strona ) footer.wp-block-template-part,
body:has( .tkr-strona ) .wp-block-post-title { display: none !important; }
body:has( .tkr-strona ) .wp-site-blocks, body:has( .tkr-strona ) .wp-block-group,
body:has( .tkr-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tkr-strona ) .wp-block-post-content > *, body:has( .tkr-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tkr-strona ) { background: #12100c; }
body:has( .tkr-strona ) .wp-block-post-content > .tkr-strona, body:has( .tkr-strona ) .entry-content > .tkr-strona,
.tkr-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tkr-strona button { font-family: inherit; }

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

/* ══════════════  HERO  ══════════════ */
/* Padding poziomy 32 px, żeby tytuł stał w jednej linii z treścią sekcji.
   Zero dawało tekst wprost na krawędzi tła — kosztowało osobną poprawkę
   w Sahelu 2026-09-11. */
.tkr-hero { position: relative; padding: 46px 32px 8px; }
.tkr-hero__tresc { max-width: 82ch; }
.tkr-nad { margin: 0 0 12px; font: 400 11px var( --sans ); letter-spacing: .34em; text-transform: uppercase; color: var( --etyk ); }
.tkr-tytul { margin: 0; font: 500 clamp( 44px, 5.4vw, 80px )/1.03 var( --serif ); color: var( --pergamin ); letter-spacing: -.01em; text-shadow: 0 0 66px rgba( 200, 163, 73, .4 ); }
.tkr-tytul small { display: block; margin-top: 10px; font: 300 16px var( --sans ); letter-spacing: .12em; line-height: 1.5; color: var( --zloto-j ); }
.tkr-lead { margin: 24px 0 0; font-size: 19px; line-height: 1.7; color: var( --tekst-mocny ); }

.tkr-hero.tkr-sekcja--tlo { max-width: none; margin: 0 -40px; padding: 214px 72px 34px; border-radius: 0 0 30px 30px; overflow: clip; isolation: isolate; }
.tkr-hero.tkr-sekcja--tlo::before {
	content: ''; position: absolute; inset: 0 0 auto; height: 540px; z-index: -1;
	background: var( --tlo ) center 34% / cover no-repeat;
	mask-image: linear-gradient( 180deg, #000 0%, #000 36%, rgba( 0, 0, 0, .5 ) 70%, transparent 100% );
}
.tkr-hero.tkr-sekcja--tlo::after {
	content: ''; position: absolute; inset: 0 0 auto; height: 540px; z-index: -1;
	background:
		linear-gradient( 90deg, rgba( 18, 16, 12, .94 ) 0%, rgba( 18, 16, 12, .7 ) 36%, rgba( 18, 16, 12, .2 ) 66%, transparent 100% ),
		radial-gradient( 900px 430px at 6% 34%, rgba( 18, 16, 12, .8 ), transparent 74% );
}

/* ══════════════  LICZNIK  ══════════════ */
.tkr-liczby { display: grid; gap: 14px; margin-top: 34px; grid-template-columns: repeat( auto-fit, minmax( min( 200px, 100% ), 1fr ) ); }
.tkr-karta { padding: 22px 20px 20px; border: 1px solid var( --wlos ); border-radius: 18px; background: var( --panel ); }
.tkr-karta b { display: block; font: 400 clamp( 30px, 3vw, 44px )/1 var( --serif ); color: var( --zloto-j ); }
.tkr-karta span { display: block; margin-top: 7px; font: 400 10.5px var( --sans ); letter-spacing: .2em; text-transform: uppercase; color: var( --etyk ); }
.tkr-karta p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.66; color: var( --tekst ); }

/* ══════════════  SEKCJE  ══════════════ */
.tkr-sekcja { position: relative; margin-top: 68px; padding: 36px 32px 40px; border-radius: 24px; }
.tkr-sekcja--scisla { padding: 32px; }
.tkr-sekcja--nie { padding: 32px; border: 1px solid rgba( 180, 68, 46, .3 ); background: linear-gradient( 180deg, rgba( 180, 68, 46, .07 ), transparent 60% ); }
.tkr-sekcja__nad { margin: 0 0 10px; font: 400 10.5px var( --sans ); letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tkr-sekcja__tytul { margin: 0; font: 500 clamp( 30px, 3.3vw, 46px )/1.12 var( --serif ); color: var( --pergamin ); }
.tkr-sekcja__lead { max-width: 88ch; margin: 16px 0 0; font-size: 17.5px; line-height: 1.74; color: var( --tekst ); }
.tkr-uwaga { max-width: 88ch; margin: 20px 0 0; padding-left: 16px; border-left: 2px solid var( --cynober ); font-size: 14.5px; line-height: 1.7; color: var( --tekst-slaby ); }

/* ══════════════  KAFLE  ══════════════ */
.tkr-skad, .tkr-sobor, .tkr-rozlamy, .tkr-kanon, .tkr-wyznania, .tkr-niebylo { display: grid; gap: 16px; margin-top: 26px; grid-template-columns: repeat( auto-fit, minmax( min( 280px, 100% ), 1fr ) ); }
.tkr-kafel { position: relative; padding: 22px 20px 20px; border: 1px solid var( --wlos ); border-top: 2px solid var( --zloto ); border-radius: 16px; background: var( --panel ); cursor: pointer; }
.tkr-kafel--wyszli { border-top-color: var( --cynober ); }
.tkr-kafel__nad { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font: 400 10.5px var( --sans ); letter-spacing: .2em; text-transform: uppercase; color: var( --etyk ); }
.tkr-kafel__nad i { font-style: normal; color: var( --zloto ); }
.tkr-kafel h3 { margin: 0 0 8px; font: 500 22px/1.22 var( --serif ); color: var( --pergamin-j ); }
.tkr-kafel p { margin: 0; font-size: 14.5px; line-height: 1.68; color: var( --tekst ); }
.tkr-zd-wiecej { display: inline-block; margin-top: 12px; font: 400 10.5px var( --sans ); letter-spacing: .2em; text-transform: uppercase; color: var( --zloto-j ); }

/* DWA POLA WŁASNE SOBORU — pokazywane w oknie nad akapitami.
   `Ustalono` złotem, `kto odszedł` cynobrem: rubryka jest tu znakiem straty,
   tak jak w rękopisie czerwień oznaczała to, co wyjęte z ciągu tekstu. */
.tkr-rozstrzyg { max-width: 82ch; margin: 0 0 14px; padding-left: 14px; border-left: 2px solid var( --zloto ); font-size: 15.5px; line-height: 1.7; }
.tkr-rozstrzyg b { display: block; margin-bottom: 4px; font: 400 10.5px var( --sans ); letter-spacing: .2em; text-transform: uppercase; color: var( --etyk ); }
.tkr-rozstrzyg--wyszli { border-left-color: var( --cynober ); }
.tkr-rozstrzyg--zostalo { border-left-color: var( --lapis-j ); }
.tkr-skad-tekst, .tkr-skad { }
.tkr-foto { margin: 0 0 16px; border-radius: 12px; overflow: hidden; }
.tkr-foto img { display: block; width: 100%; height: auto; }

/* ══════════════  DRZEWO ROZEJŚĆ  ══════════════ */
.tkr-drzewo { margin-top: 28px; overflow-x: auto; }
.tkr-drzewo__svg { display: block; width: 100%; min-width: 900px; height: auto; }
.tkr-gal { fill: none; stroke: var( --wlos ); stroke-width: 2; vector-effect: non-scaling-stroke; transition: stroke .24s, stroke-width .24s; }
.tkr-gal--pien { stroke: var( --zloto ); stroke-width: 3; }
.tkr-gal--laczy { stroke-dasharray: 7 6; }
.tkr-gal.jest-wybrana { stroke: var( --lapis-j ); stroke-width: 3; }
.tkr-pas__etyk { font: 400 12px var( --sans ); fill: var( --tekst-slaby ); letter-spacing: .04em; }
.tkr-pas__etyk--pien { fill: var( --zloto-j ); }
.tkr-wezel { cursor: pointer; }
.tkr-wezel__pole { fill: transparent; }
.tkr-wezel__kropka { fill: var( --cynober ); stroke: var( --tlo ); stroke-width: 3; transition: fill .2s, r .2s; }
.tkr-wezel--znacznik .tkr-wezel__kropka { fill: var( --tekst-slaby ); }
.tkr-wezel__rok { font: 400 13px var( --sans ); fill: var( --etyk ); text-anchor: middle; letter-spacing: .06em; }
.tkr-wezel:hover .tkr-wezel__kropka, .tkr-wezel:focus-visible .tkr-wezel__kropka { fill: var( --zloto-j ); }
.tkr-wezel.jest-wybrany .tkr-wezel__kropka { fill: var( --zloto-j ); r: 11; }
.tkr-wezel.jest-wybrany .tkr-wezel__rok { fill: var( --pergamin ); }
.tkr-wezel:focus-visible { outline: 2px solid var( --zloto-j ); outline-offset: 3px; border-radius: 50%; }

.tkr-drzewo__opis { max-width: 88ch; margin-top: 22px; padding: 22px 24px; border: 1px solid var( --wlos ); border-left: 3px solid var( --zloto ); border-radius: 16px; background: var( --panel ); }
.tkr-drzewo__rok { margin: 0 0 6px; font: 400 11px var( --sans ); letter-spacing: .26em; text-transform: uppercase; color: var( --etyk ); }
.tkr-drzewo__opis h3 { margin: 0 0 10px; font: 500 clamp( 24px, 2.6vw, 32px )/1.2 var( --serif ); color: var( --pergamin-j ); }
.tkr-drzewo__krotko { margin: 0; font-size: 16px; line-height: 1.72; color: var( --tekst-mocny ); }
.tkr-drzewo__zostalo { margin: 14px 0 0; padding-left: 14px; border-left: 2px solid var( --lapis-j ); font-size: 14.5px; line-height: 1.68; color: var( --tekst ); }
.tkr-drzewo__zostalo b { display: block; margin-bottom: 4px; font: 400 10.5px var( --sans ); letter-spacing: .2em; text-transform: uppercase; color: var( --etyk ); }

/* ══════════════  PRZERYWNIK  ══════════════ */
.tkr-przerywnik { display: block; width: 100%; height: 46px; margin: 46px 0 0; color: var( --zloto ); opacity: .5; }

/* ══════════════  TŁA SEKCJI  ══════════════ */
.tkr-sekcja--tlo { position: relative; isolation: isolate; overflow: clip; border: 1px solid var( --wlos ); }
.tkr-sekcja--tlo:not( .tkr-hero )::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: var( --tlo ) center 55% / cover no-repeat; opacity: .95;
}
/* Zasłona CIĘŻKA PO LEWEJ, gdzie stoi kolumna tekstu, i gasnąca po prawej,
   gdzie zostaje sam obraz. Wartości te same, co w Sahelu po poprawce sesji
   Grafiki — tam zasłona na 0,84–0,93 przepuszczała 7 % zdjęcia. */
.tkr-sekcja--tlo:not( .tkr-hero )::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient( 90deg, rgba( 18, 16, 12, .94 ) 0%, rgba( 18, 16, 12, .7 ) 36%, rgba( 18, 16, 12, .2 ) 66%, transparent 100% ),
		linear-gradient( 180deg, rgba( 18, 16, 12, .3 ) 0%, rgba( 18, 16, 12, .14 ) 42%, rgba( 18, 16, 12, .62 ) 100% );
}

/* ══════════════  WĄSKI EKRAN  ══════════════ */
@media ( max-width: 1000px ) {
	.tkr-drzewo__svg { min-width: 820px; }
}
@media ( max-width: 780px ) {
	.tkr-strona { padding: 0 18px 70px; }
	.tkr-sekcja { margin-top: 52px; padding: 26px 18px 30px; }
	.tkr-sekcja--scisla, .tkr-sekcja--nie { padding: 26px 18px 30px; }
	.tkr-hero { padding: 46px 18px 8px; }
	.tkr-hero.tkr-sekcja--tlo { margin: 0 -18px; padding: 150px 36px 24px; }
	.tkr-hero.tkr-sekcja--tlo::before, .tkr-hero.tkr-sekcja--tlo::after { height: 380px; }
	.tkr-poziom { margin: 6px 0 0; }
	.tkr-liczby { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 12px; }
}
@media ( max-width: 520px ) {
	.tkr-liczby { grid-template-columns: minmax( 0, 1fr ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.tkr-gal, .tkr-wezel__kropka { transition: none; }
}

/* GRUNT CAŁEJ STRONY. Motyw daje `body` czerń, a kolumna działu ma 1520 px — na
   ekranie 2560 px zostawało po ~470 px czarnego pasa z każdej strony.
   `body:has()` ma swoistość 0,2,1 wobec `body` 0,0,1, więc wygrywa
   z motywem bez `!important`.
   NIE robimy tego pseudoelementem: `background: inherit` na `::after`
   dziedziczy też ZDJĘCIE sekcji, a `cover` przelicza się na szerokości
   pseudoelementu — wychodzą dwa te same zdjęcia w różnych skalach.
   Sprawdzone i cofnięte 2026-09-12. */
body:has( .tkr-strona ) {
	background-color: #100c14;
	background-image: radial-gradient( 1600px 900px at 50% 0%, rgba( 230, 220, 196, .07 ), transparent 68% );
	background-attachment: fixed;
}


/* ===== MIT W KAFLU 2026-09-12 ===== */
.tkr-kafel__nad--mit { color: #c4826e; letter-spacing: .16em; }
.tkr-kafel__mit { color: var( --tekst-slaby ); font-style: italic; }
.tkr-kafel__nie { color: #c4826e; font-style: normal; letter-spacing: .04em; }

/* OKNO TEZY — przejscie tonalne.
   Wspolna warstwa daje oknu tezy plaska pobialke rgba(255,255,255,.028)
   regulami o swoistosci 0,2,0 i 0,3,0 — jedna wartosc dla wszystkich dzialow
   naraz. Dublowana klasa daje 0,4,0 i zamyka sprawe bez !important.
   Barwy sa z palety TEGO dzialu. Dopisane po stronie SERWERA, bo lokalna
   kopia modulu bywa starsza niz wgrana. */
.tkr-strona .tkr-hero .tkr-okno.zd-okno,
.tkr-strona .tkr-hero .zd-okno.zd-okno,
.tkr-strona .tkr-hero .tkr-okno.tkr-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 28, 22, 36, .10 ), transparent 70% ),
		linear-gradient( 168deg, #1b171f, #100c14 );
}