/* Drzewa tradycji — buddyzm i hinduizm.
 *
 * Barwy z szat zakonnych i z pigmentów obu światów, nie z domyślnej palety
 * serwisu: szafran mnisiej szaty, kurkuma, cynober znaku na czole, indygo
 * z farbowanej tkaniny i głęboka zieleń liścia figowego, pod którym siedział
 * Budda. Podłoże to nie czerń, tylko ciemna umbra — ma być cień pod drzewem,
 * nie ekran.
 *
 * Zdobienie tej strony to KOŁO O SZEŚCIU SZPRYCHACH, ledwie widoczne za
 * rysunkiem: koło dharmy, ale wygaszone tak, żeby nie konkurowało z pasami.
 * Jest tu dlatego, że mówi, o czym strona jest, i nie ma go nigdzie indziej.
 *
 * Pasy gałęzi mają trzy grubości i to grubość, a nie barwa, koduje wagę —
 * barwa jest zajęta przez rozróżnienie obu drzew. */

.tdr-strona {
	--tlo: #150f0a; --welin: #1e150d; --obrys: rgba( 217, 161, 60, .32 ); --wlos: rgba( 217, 161, 60, .13 );
	--szafran: #d9a13c; --szafran-j: #f0c977; --kurkuma: #c8862a;
	--cynober: #b8452c; --indygo: #3a5a8c; --indygo-j: #7d9bc9; --figa: #3f6b4a;
	--kosc: #ddd0b8; --dno: #0d0906; --etyk: #9c8354;
	--tekst: #b3a894; --tekst-slaby: #8b8271; --tekst-mocny: #f1e7d5;
	--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( 1200px 620px at 50% -12%, rgba( 217, 161, 60, .18 ), transparent 70% ),
		radial-gradient( 900px 520px at 88% 40%, rgba( 58, 90, 140, .12 ), transparent 70% ),
		radial-gradient( 820px 480px at 6% 76%, rgba( 63, 107, 74, .1 ), transparent 70% ),
		var( --tlo );
	overflow-x: clip;
}
.tdr-strona *, .tdr-strona *::before, .tdr-strona *::after { box-sizing: border-box; }
body:has( .tdr-strona ) .wp-site-blocks > header, body:has( .tdr-strona ) header.wp-block-template-part, body:has( .tdr-strona ) .wp-site-blocks > footer, body:has( .tdr-strona ) footer.wp-block-template-part, body:has( .tdr-strona ) .wp-block-post-title { display: none !important; }
body:has( .tdr-strona ) .wp-site-blocks, body:has( .tdr-strona ) .wp-block-group, body:has( .tdr-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tdr-strona ) .wp-block-post-content > *, body:has( .tdr-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tdr-strona ) { background: #150f0a; }
body:has( .tdr-strona ) .wp-block-post-content > .tdr-strona, body:has( .tdr-strona ) .entry-content > .tdr-strona, .tdr-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tdr-strona button { font-family: inherit; }

.tdr-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 ); }
.tdr-sciezka i { font-style: normal; color: var( --etyk ); }
.tdr-sciezka b { font-weight: 400; color: var( --szafran-j ); }
.tdr-poziom { margin: 0 0 0 auto; }
.tdr-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 ); }
.tdr-poziom span::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var( --szafran ); box-shadow: 0 0 10px var( --szafran ); }

/* ══════════════  hero  ══════════════ */

.tdr-hero { max-width: 82ch; padding: 44px 0 8px; }
.tdr-nad { margin: 0 0 12px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --etyk ); }
.tdr-tytul { margin: 0; font: 500 clamp( 44px, 5.4vw, 78px )/1.03 var( --serif ); color: var( --szafran-j ); text-shadow: 0 0 44px rgba( 217, 161, 60, .22 ); }
.tdr-tytul small { display: block; margin-top: 10px; font: 300 16px var( --sans ); letter-spacing: .12em; color: var( --kosc ); }
.tdr-lead { margin: 22px 0 0; font-size: 16.5px; line-height: 1.76; color: var( --tekst-mocny ); }
.tdr-hero__liczby { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 24px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var( --tekst ); }
.tdr-hero__liczby b { font: 500 27px/1 var( --serif ); color: var( --szafran-j ); margin-right: 6px; }

/* ══════════════  sekcje  ══════════════ */

.tdr-sekcja { margin: 76px 0 0; }
.tdr-sekcja--scisla {
	position: relative; margin-top: 44px; padding: 34px 30px 40px;
	border: 1px solid var( --wlos ); border-radius: 26px; overflow: hidden;
	background: linear-gradient( 180deg, rgba( 30, 21, 13, .9 ), rgba( 13, 9, 6, .96 ) );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 );
}
/* Koło dharmy: sześć szprych z jednego punktu, wygaszone maską. Jedyna ozdoba
   tej strony i mówi, o czym ona jest. */
.tdr-sekcja--scisla::before {
	content: ''; position: absolute; right: 6%; top: 50%; width: 1300px; height: 1300px;
	margin: -650px -650px 0 0; pointer-events: none; z-index: 0;
	background:
		repeating-conic-gradient( from 0deg, rgba( 217, 161, 60, .5 ) 0 .16deg, transparent .16deg 22.5deg ),
		radial-gradient( closest-side, transparent 62%, rgba( 217, 161, 60, .16 ) 63%, transparent 66% );
	mask-image: radial-gradient( closest-side, rgba( 0, 0, 0, .45 ), transparent 74% );
	-webkit-mask-image: radial-gradient( closest-side, rgba( 0, 0, 0, .45 ), transparent 74% );
	opacity: .3;
}
.tdr-sekcja--scisla > * { position: relative; z-index: 1; }
.tdr-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.tdr-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3vw, 40px )/1.15 var( --serif ); color: var( --szafran-j ); }
.tdr-sekcja__lead { max-width: 80ch; margin: 12px 0 0; font-size: 14.5px; line-height: 1.72; color: var( --tekst ); }

/* ══════════════  wybór drzewa  ══════════════ */

.tdr-wybor { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.tdr-kafel {
	display: grid; gap: 3px; justify-items: start; padding: 14px 22px;
	border: 1px solid var( --wlos ); border-radius: 16px; cursor: pointer; text-align: left;
	background: linear-gradient( 180deg, rgba( 42, 30, 18, .74 ), rgba( 15, 11, 7, .8 ) );
	color: var( --tekst ); transition: border-color .22s, transform .22s, box-shadow .22s;
}
.tdr-kafel b { font: 500 21px/1.15 var( --serif ); color: var( --tekst-mocny ); }
.tdr-kafel small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var( --etyk ); }
.tdr-kafel:hover { transform: translateY( -2px ); border-color: var( --obrys ); }
.tdr-kafel.jest-wybrany { border-color: var( --szafran ); background: linear-gradient( 180deg, rgba( 217, 161, 60, .2 ), rgba( 15, 11, 7, .86 ) ); box-shadow: 0 0 38px -14px var( --szafran ); }
.tdr-kafel.jest-wybrany b { color: var( --szafran-j ); }
.tdr-kafel:focus-visible { outline: 2px solid var( --szafran ); outline-offset: 3px; }

/* ══════════════  legenda  ══════════════ */

.tdr-legenda { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 20px 0 0; }
.tdr-leg { display: inline-flex; align-items: center; gap: 9px; }
.tdr-leg b { font: 400 11.5px var( --sans ); letter-spacing: .1em; text-transform: uppercase; color: var( --tekst ); }
.tdr-leg__pas { display: block; width: 30px; border-radius: 3px; background: linear-gradient( 90deg, var( --kurkuma ), var( --szafran ) ); }
.tdr-leg--nurt .tdr-leg__pas { height: 14px; }
.tdr-leg--galaz .tdr-leg__pas { height: 9px; }
.tdr-leg--przekroj .tdr-leg__pas { height: 7px; background: linear-gradient( 90deg, var( --indygo ), var( --indygo-j ) ); }
.tdr-leg--obok .tdr-leg__pas { height: 7px; background: linear-gradient( 90deg, var( --figa ), #6f9a7a ); }
.tdr-leg__nitka { display: block; width: 30px; height: 0; border-top: 1.5px dashed var( --kosc ); opacity: .7; }

/* ══════════════  rysunek  ══════════════ */

.tdr-mapa { margin: 24px 0 0; }
.tdr-ram { position: relative; }
.tdr-os { position: relative; height: 30px; margin-bottom: 12px; border-bottom: 1px solid var( --wlos ); }
.tdr-os__kreska { position: absolute; top: 0; bottom: 0; width: 1px; background: var( --wlos ); }
.tdr-os__kreska.jest-zero { background: rgba( 217, 161, 60, .5 ); box-shadow: 0 0 12px rgba( 217, 161, 60, .5 ); }
.tdr-os__kreska i { position: absolute; left: 5px; top: 4px; font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var( --etyk ); white-space: nowrap; }
.tdr-os__kreska.jest-zero i { color: var( --szafran-j ); }

.tdr-plansza { position: relative; }
/* Nitka rodzic → dziecko: pionowa, cienka, pod pasami. */
.tdr-nitka { position: absolute; width: 1px; background: rgba( 221, 208, 184, .34 ); }
.tdr-nitka.jest-moze { background: repeating-linear-gradient( 180deg, rgba( 221, 208, 184, .5 ) 0 3px, transparent 3px 7px ); }

.tdr-pas {
	position: absolute; display: grid; align-content: center; gap: 1px;
	padding: 0 14px; border: 0; border-radius: 5px; cursor: pointer; text-align: left; overflow: hidden;
	background: linear-gradient( 180deg, var( --kurkuma ), #8a5c1c );
	box-shadow: inset 0 1px 0 rgba( 255, 235, 190, .3 ), 0 6px 18px -10px #000;
	transition: box-shadow .2s, transform .2s, filter .2s;
}
.tdr-pas__nazwa { font: 500 14px var( --sans ); letter-spacing: .01em; color: #201404; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdr-pas__lata { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba( 32, 20, 4, .72 ); white-space: nowrap; }
.tdr-pas--przekroj { background: linear-gradient( 180deg, var( --indygo-j ), var( --indygo ) ); }
.tdr-pas--przekroj .tdr-pas__nazwa { color: #0b1220; }
.tdr-pas--przekroj .tdr-pas__lata { color: rgba( 11, 18, 32, .68 ); }
.tdr-pas--obok { background: linear-gradient( 180deg, #6f9a7a, var( --figa ) ); }
.tdr-pas--obok .tdr-pas__nazwa { color: #0c1a11; }
.tdr-pas--obok .tdr-pas__lata { color: rgba( 12, 26, 17, .68 ); }
.tdr-pas.jest-waski { padding: 0 5px; }
.tdr-pas:hover { transform: translateY( -2px ); filter: brightness( 1.1 ); box-shadow: inset 0 1px 0 rgba( 255, 235, 190, .34 ), 0 0 30px -8px var( --szafran ); }
.tdr-pas.jest-wybrany { box-shadow: inset 0 0 0 2px var( --kosc ), 0 0 40px -10px var( --szafran-j ); }
.tdr-pas:focus-visible { outline: 2px solid var( --kosc ); outline-offset: 2px; }

/* ══════════════  panel gałęzi  ══════════════ */

.tdr-galaz { margin: 34px 0 0; padding-top: 28px; border-top: 1px solid var( --wlos ); }
.tdr-galaz__nad { margin: 0 0 5px; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var( --etyk ); }
.tdr-galaz__tytul { margin: 0; font: 500 clamp( 26px, 2.6vw, 34px )/1.14 var( --serif ); color: var( --szafran-j ); }
.tdr-galaz__krotko { max-width: 78ch; margin: 8px 0 0; font-size: 15px; line-height: 1.7; color: var( --tekst-mocny ); }
.tdr-galaz__rodzic { margin: 8px 0 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var( --etyk ); }
.tdr-galaz__kolumny { display: grid; grid-template-columns: minmax( 0, 1.5fr ) minmax( 0, 1fr ); gap: 26px; margin: 24px 0 0; align-items: start; }
.tdr-galaz__opis p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.78; color: var( --tekst ); }
.tdr-galaz__opis p:last-child { margin-bottom: 0; }

/* Warstwa ezoteryczna dostaje własne pole i indygo — to jest teza strony. */
.tdr-galaz__ezo {
	padding: 22px 24px 20px; border: 1px solid rgba( 58, 90, 140, .38 ); border-radius: 18px;
	background: linear-gradient( 180deg, rgba( 34, 44, 68, .5 ), rgba( 11, 13, 22, .82 ) );
	box-shadow: 0 0 44px -30px var( --indygo-j );
}
.tdr-galaz__ezo-nad { margin: 0 0 12px; font: 400 10px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --indygo-j ); }
.tdr-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.tdr-lista li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.62; color: var( --tekst ); }
.tdr-lista li::before { content: '·'; position: absolute; left: 4px; top: -1px; font-size: 18px; color: var( --indygo-j ); }
.tdr-lista li.jest-pusto { color: var( --tekst-slaby ); font-style: italic; }

.tdr-pole { margin-top: 16px; padding: 16px 18px; border-left: 2px solid var( --cynober ); border-radius: 0 12px 12px 0; background: rgba( 184, 69, 44, .08 ); }
.tdr-pole b { display: block; margin-bottom: 5px; font: 400 10px var( --sans ); letter-spacing: .22em; text-transform: uppercase; color: #d4705a; }
.tdr-pole p { margin: 0 !important; font-size: 13.5px; line-height: 1.68; }

/* ══════════════  zestawienie ezoteryki  ══════════════ */

.tdr-sekcja--ezo::before { right: auto; left: 4%; }
.tdr-ezo { margin: 26px 0 0; display: grid; gap: 34px; }
.tdr-ezoblok__tytul { margin: 0 0 14px; font: 500 24px var( --serif ); color: var( --kosc ); }
.tdr-ezoblok__siatka { display: grid; grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) ); gap: 14px; }
.tdr-ezokafel {
	display: grid; align-content: start; gap: 5px; min-height: 196px; padding: 20px 20px 18px;
	border: 1px solid var( --wlos ); border-top: 2px solid var( --indygo-j ); border-radius: 16px;
	background: linear-gradient( 180deg, rgba( 34, 44, 68, .38 ), rgba( 14, 11, 8, .86 ) );
	transition: border-color .22s, transform .22s, box-shadow .22s;
}
.tdr-ezokafel .zd-klocek__skrot { display: contents; }
.tdr-ezokafel:hover, .tdr-ezokafel:focus-visible { transform: translateY( -3px ); border-color: rgba( 125, 155, 201, .55 ); box-shadow: 0 18px 44px -26px #000, 0 0 32px -18px var( --indygo-j ); }
.tdr-ezokafel__nad { display: block; margin: 0; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var( --etyk ); }
.tdr-ezokafel h4 { margin: 3px 0 0; font: 500 19px/1.2 var( --serif ); color: var( --tekst-mocny ); }
.tdr-ezokafel__ile { display: block; margin: 2px 0 0; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var( --indygo-j ); }
.tdr-ezokafel__lead { margin: 7px 0 0; font-size: 13px; line-height: 1.6; color: var( --tekst ); }

/* ══════════════  ramy  ══════════════ */

.tdr-ramy__siatka { display: grid; grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) ); gap: 16px; margin: 26px 0 0; }
.tdr-ramy__siatka > div { display: grid; align-content: start; gap: 10px; padding: 26px 24px 28px; border: 1px solid var( --wlos ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 42, 30, 18, .62 ), rgba( 14, 10, 6, .8 ) ); }
.tdr-ramy__siatka > div i { display: block; font-style: normal; font-size: 22px; color: var( --indygo-j ); }
.tdr-ramy__siatka > div b { display: block; font: 500 21px/1.2 var( --serif ); color: var( --szafran-j ); }
.tdr-ramy__siatka > div p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var( --tekst ); }
.tdr-ramy__siatka > div.jest-uczciwie { border-color: rgba( 184, 69, 44, .3 ); }
.tdr-ramy__siatka > div.jest-uczciwie i { color: var( --cynober ); }

/* ══════════════  wąskie ekrany  ══════════════ */

@media ( max-width: 980px ) {
	.tdr-galaz__kolumny { grid-template-columns: 1fr; }
}
@media ( max-width: 680px ) {
	.tdr-strona { padding: 0 22px 70px; }
	.tdr-sekcja--scisla { padding: 26px 18px 32px; }
	.tdr-pas__lata { display: none; }
	.tdr-sekcja--scisla::before { opacity: .18; }
}
@media ( prefers-reduced-motion: reduce ) {
	.tdr-kafel, .tdr-pas, .tdr-ezokafel { transition: none; }
}


/* TŁA SEKCJI — reguły trzymają się atrybutu data-tlo, który PHP dokłada dopiero,
   gdy plik leży na serwerze. Bez grafiki blok wygląda dokładnie jak dziś.
   Obraz wchodzi WARSTWĄ background, nie przez ::before — tych pseudoelementów
   używa wspólny zdobienia.css. Zmienna to --obraz-tla, a NIE --tlo, które
   w większości arkuszy jest już barwą tła strony. */

.tdr-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, .34 ) 64%, rgba( 12, 10, 14, 0 ) 100% ),
		var( --obraz-tla ) 50% 46% / cover no-repeat;
}
.tdr-hero[data-tlo] > * { max-width: 80ch; }

.tdr-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;
}

/* Czytelność nad zdjęciem: kafle są przezroczyste z założenia, więc nad fotografią
   tekst spada do 1,23:1. Próg 4,5:1 wypada przy kryciu 0,845; stąd 0,90. */
.tdr-sekcja[data-tlo] .zd-pas > li,
.tdr-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 );
}

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

/* 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]. */
.tdr-sekcja[data-tlo] {
	--tekst-slaby: #999182;	/* #8b8271 dawało 4.12:1, teraz 5.01:1 */
	--etyk: #a68f65;	/* #9c8354 dawało 4.31:1, teraz 5.02:1 */
}