/* Rytuały — drugi moduł działu PRZEKROJE.
 *
 * Materiał tej strony to próg, ogień, woda i popiół, więc paleta idzie od
 * zimnego popiołu do żaru: tło jest chłodne i przygaszone, a jedyne ciepło
 * pojawia się tam, gdzie coś się dzieje. Kontrprzykład — miejsce, w którym
 * kroku NIE MA — dostaje barwę zimną, bo jest przerwaniem, nie ciągiem
 * dalszym.
 *
 * Cała śmiałość siedzi w grzbiecie: cztery węzły na jednej linii, która pęka
 * przy otwartym kroku. Reszta strony jest celowo cicha.
 */
.trt-strona {
	--tlo: #0b0c10; --panel: rgba( 22, 24, 30, .78 ); --obrys: rgba( 217, 122, 69, .3 ); --wlos: rgba( 217, 122, 69, .13 );
	--zar: #d97a45; --zar-j: #e79766; --etyk: #96795f;
	--zimno: #7fa8c9; --zimno-c: #4f7592;
	--popiol: #cfc7bd; --dno: #08090c;
	--tekst: #a7a5a2; --tekst-slaby: #837f7b; --tekst-mocny: #ece7e0;
	--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( 1100px 580px at 50% -10%, rgba( 217, 122, 69, .15 ), transparent 70% ),
		radial-gradient( 820px 500px at 10% 46%, rgba( 127, 168, 201, .07 ), transparent 70% ),
		var( --tlo );
	overflow-x: clip;
}
.trt-strona *, .trt-strona *::before, .trt-strona *::after { box-sizing: border-box; }
body:has( .trt-strona ) .wp-site-blocks > header, body:has( .trt-strona ) header.wp-block-template-part, body:has( .trt-strona ) .wp-site-blocks > footer, body:has( .trt-strona ) footer.wp-block-template-part, body:has( .trt-strona ) .wp-block-post-title { display: none !important; }
body:has( .trt-strona ) .wp-site-blocks, body:has( .trt-strona ) .wp-block-group, body:has( .trt-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .trt-strona ) .wp-block-post-content > *, body:has( .trt-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .trt-strona ) { background: #0b0c10; }
body:has( .trt-strona ) .wp-block-post-content > .trt-strona, body:has( .trt-strona ) .entry-content > .trt-strona, .trt-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.trt-strona button { font-family: inherit; }

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

.trt-hero { max-width: 80ch; padding: 44px 0 8px; }
.trt-nad { margin: 0 0 12px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --etyk ); }
.trt-tytul { margin: 0; font: 500 clamp( 44px, 5.2vw, 76px )/1.03 var( --serif ); color: var( --zar-j ); }
.trt-tytul small { display: block; margin-top: 8px; font: 300 16px var( --sans ); letter-spacing: .14em; color: var( --popiol ); }
.trt-lead { margin: 22px 0 0; font-size: 16.5px; line-height: 1.75; color: var( --tekst-mocny ); }

.trt-sekcja { margin: 76px 0 0; }
.trt-sekcja--scisla { position: relative; margin-top: 44px; padding: 34px 30px 38px; border: 1px solid var( --wlos ); border-radius: 26px; background: radial-gradient( 900px 420px at 50% 0%, rgba( 217, 122, 69, .1 ), transparent 65% ), linear-gradient( 180deg, rgba( 22, 24, 30, .84 ), rgba( 10, 11, 15, .94 ) ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 ); }
.trt-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --etyk ); }
.trt-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3vw, 40px )/1.15 var( --serif ); color: var( --zar-j ); }
.trt-sekcja__lead { max-width: 78ch; margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var( --tekst ); }

/* ══════════════  grzbiet  ══════════════
   Cztery węzły na jednej linii. Linia pęka przy otwartym kroku, bo przy każdym
   z czterech mamy obrzęd, w którym tego kroku nie ma. */

.trt-grzbiet { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); margin: 34px 0 0; }
.trt-stacja {
	position: relative; display: grid; justify-items: center; gap: 0;
	padding: 34px 10px 6px; border: 0; background: transparent; cursor: pointer;
	color: var( --tekst-slaby ); transition: color .2s;
}
.trt-nitka { position: absolute; top: 40px; height: 1px; background: var( --wlos ); transition: background .25s; }
.trt-nitka--lewo { left: 0; right: 50%; }
.trt-nitka--prawo { left: 50%; right: 0; }
.trt-wezel {
	position: relative; z-index: 2; width: 15px; height: 15px; border-radius: 999px;
	background: var( --dno ); box-shadow: inset 0 0 0 1px var( --obrys );
	transition: box-shadow .25s, background .25s, transform .25s;
}
.trt-stacja__tresc { display: grid; justify-items: center; gap: 4px; margin-top: 16px; }
.trt-stacja__tresc i { font-style: normal; font-size: 10px; letter-spacing: .24em; color: var( --etyk ); }
.trt-stacja__tresc b { font: 400 15.5px var( --sans ); letter-spacing: .02em; color: var( --tekst ); text-align: center; transition: color .2s; }
.trt-stacja:hover .trt-wezel { box-shadow: inset 0 0 0 1px var( --zar ); }
.trt-stacja:hover .trt-stacja__tresc b { color: var( --tekst-mocny ); }
.trt-stacja:focus-visible { outline: 2px solid var( --zar ); outline-offset: 2px; border-radius: 12px; }

.trt-stacja.jest-wybrany .trt-wezel { background: var( --zar ); box-shadow: inset 0 0 0 1px var( --zar-j ), 0 0 22px -2px var( --zar ); transform: scale( 1.15 ); }
.trt-stacja.jest-wybrany .trt-stacja__tresc b { color: var( --zar-j ); }
.trt-stacja.jest-wybrany .trt-stacja__tresc i { color: var( --zar ); }
/* Pęknięcie. Odcinki po obu stronach otwartego węzła przechodzą w kreskowanie
   i gasną — to jest ta jedna rzecz, którą ta strona ma powiedzieć rysunkiem. */
.trt-stacja.jest-pekniety .trt-nitka {
	background: repeating-linear-gradient( 90deg, var( --zimno-c ) 0 4px, transparent 4px 11px );
	opacity: .85;
}

.trt-krok { margin: 30px 0 0; }
.trt-krok__glowa { display: grid; gap: 8px; max-width: 84ch; }
.trt-krok__nr { margin: 0; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var( --etyk ); }
.trt-krok__glowa h3 { margin: 0; font: 500 clamp( 26px, 2.6vw, 34px )/1.15 var( --serif ); color: var( --tekst-mocny ); }
.trt-krok__krotko { margin: 0; font-size: 16px; line-height: 1.72; color: var( --popiol ); }

/* Kolumny rozciagaja sie na te sama wysokosc, a kontrprzyklad jest w swojej
   wysrodkowany w pionie. Bez tego zimna kolumna konczyla sie w polowie opisu
   i wygladala na przypis, a ma wazyc tyle samo co krok. */
.trt-krok__kolumny { display: grid; grid-template-columns: minmax( 0, 1.28fr ) minmax( 0, 1fr ); gap: 20px; margin: 24px 0 0; align-items: stretch; }
.trt-krok__opis { display: grid; gap: 13px; }
.trt-krok__opis p { margin: 0; font-size: 15px; line-height: 1.76; }
.trt-poznac { margin-top: 4px; padding: 16px 18px; border-left: 2px solid var( --obrys ); border-radius: 0 12px 12px 0; background: rgba( 217, 122, 69, .05 ); display: grid; gap: 9px; }
.trt-poznac b { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; color: var( --etyk ); }
.trt-poznac p { margin: 0; font-size: 14.5px; line-height: 1.72; color: var( --tekst ); }

/* Kontrprzykład: zimna kolumna. Kreskowana krawędź powtarza pęknięcie linii. */
.trt-brak {
	display: grid; align-content: center; gap: 10px; padding: 26px 24px 28px;
	border: 1px dashed rgba( 127, 168, 201, .34 ); border-radius: 16px;
	background: linear-gradient( 165deg, rgba( 127, 168, 201, .09 ), rgba( 10, 11, 15, .72 ) 66% );
}
.trt-brak b { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; color: var( --zimno ); }
.trt-brak p { margin: 0; font-size: 14.5px; line-height: 1.74; color: var( --tekst-mocny ); }

/* ══════════════  sześć rodzin  ══════════════ */

.trt-rodzaje { display: grid; grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) ); gap: 16px; margin: 26px 0 0; }
.trt-rodzaj { display: grid; align-content: start; gap: 11px; padding: 28px 26px 30px; border: 1px solid var( --wlos ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 24, 26, 32, .74 ), rgba( 10, 11, 15, .8 ) ); }
.trt-rodzaj h3 { margin: 0; font: 500 25px var( --serif ); color: var( --tekst-mocny ); }
.trt-rodzaj__krotko { margin: 0; font-size: 15px; line-height: 1.65; color: var( --popiol ); }
.trt-rodzaj p { margin: 0; font-size: 14px; line-height: 1.74; }
.trt-przyklady { display: grid; gap: 8px; padding: 15px 17px; border-radius: 12px; background: rgba( 217, 122, 69, .06 ); }
.trt-przyklady b { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; color: var( --etyk ); }

/* ══════════════  siedem składników  ══════════════ */

.trt-skladniki { display: grid; grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) ); gap: 16px; margin: 26px 0 0; }
.trt-skladnik { display: grid; align-content: start; gap: 10px; padding: 26px 24px 28px; border: 1px solid var( --wlos ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 24, 26, 32, .7 ), rgba( 10, 11, 15, .78 ) ); }
.trt-skladnik i { font-style: normal; font-size: 24px; line-height: 1; color: var( --zar ); text-shadow: 0 0 20px rgba( 217, 122, 69, .5 ); }
.trt-skladnik h3 { margin: 0; font: 500 23px var( --serif ); color: var( --tekst-mocny ); }
.trt-skladnik__krotko { margin: 0; font-size: 14.5px; line-height: 1.65; color: var( --popiol ); }
.trt-skladnik p { margin: 0; font-size: 14px; line-height: 1.72; }
.trt-niewiemy { display: grid; gap: 7px; padding: 14px 16px; border-left: 2px solid rgba( 127, 168, 201, .3 ); border-radius: 0 10px 10px 0; background: rgba( 127, 168, 201, .05 ); }
.trt-niewiemy b { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; color: var( --zimno ); }

/* ══════════════  cztery zastrzeżenia  ══════════════
   Numer jest tu na miejscu: to lista, którą czyta się po kolei, a nie zbiór
   równorzędnych kafli. */

.trt-granice { display: grid; gap: 2px; margin: 26px 0 0; }
.trt-granica { display: grid; grid-template-columns: 84px minmax( 0, 1fr ); gap: 16px; padding: 26px 0; border-top: 1px solid var( --wlos ); }
.trt-granica:last-child { border-bottom: 1px solid var( --wlos ); }
.trt-granica__nr { margin: 0; font: 300 34px/1 var( --serif ); color: var( --zar ); opacity: .5; }
.trt-granica h3 { margin: 0 0 10px; font: 500 24px var( --serif ); color: var( --tekst-mocny ); }
.trt-granica p { margin: 0 0 10px; max-width: 88ch; font-size: 14.5px; line-height: 1.76; }
.trt-granica p:last-child { margin-bottom: 0; }

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

.trt-ramy__siatka { display: grid; grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) ); gap: 16px; margin: 26px 0 0; }
.trt-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( 24, 26, 32, .7 ), rgba( 10, 11, 15, .78 ) ); }
.trt-ramy__siatka i { font-style: normal; font-size: 22px; line-height: 1; color: var( --zar ); }
.trt-ramy__siatka b { font: 400 17px var( --serif ); letter-spacing: .02em; color: var( --tekst-mocny ); }
.trt-ramy__siatka p { margin: 0; font-size: 14px; line-height: 1.72; }
.trt-ramy__siatka .jest-uczciwie { border-color: var( --obrys ); background: linear-gradient( 180deg, rgba( 217, 122, 69, .09 ), rgba( 10, 11, 15, .8 ) ); }

@media ( max-width: 1020px ) {
	.trt-strona { padding: 0 22px 70px; }
	.trt-krok__kolumny { grid-template-columns: minmax( 0, 1fr ); }
}
@media ( max-width: 760px ) {
	/* Przy dwóch kolumnach grzbiet przestałby być jedną linią, więc odcinki
	   znikają, a węzły zostają jako numeracja kroków. */
	.trt-grzbiet { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.trt-nitka { display: none; }
	.trt-sekcja--scisla { padding: 26px 18px 28px; }
	.trt-granica { grid-template-columns: minmax( 0, 1fr ); gap: 6px; }
	.trt-granica__nr { font-size: 26px; }
}
@media ( prefers-reduced-motion: reduce ) {
	.trt-stacja.jest-wybrany .trt-wezel { transform: none; }
}

/* ══════════════  klocek: skrót na wierzchu, całość w oknie  ══════════════
   Sześć rodzajów, siedem składników i cztery zastrzeżenia stały z pełną
   treścią na wierzchu — od tysiąca do półtora tysiąca znaków na kaflu. */
.trt-rodzaj .zd-klocek__skrot,
.trt-skladnik .zd-klocek__skrot,
.trt-granica .zd-klocek__skrot { display: contents; }
.trt-rodzaj, .trt-skladnik { min-height: 236px; }
.trt-granica__lead { font-size: 13.5px; line-height: 1.7; color: var( --tekst ); }
.trt-rodzaj, .trt-skladnik, .trt-granica { transition: border-color .25s, transform .25s, box-shadow .25s; }
.trt-rodzaj:hover, .trt-skladnik:hover, .trt-granica:hover,
.trt-rodzaj:focus-visible, .trt-skladnik:focus-visible, .trt-granica:focus-visible {
	transform: translateY( -3px ); border-color: rgba( 217, 122, 69, .46 );
	box-shadow: 0 18px 44px -26px rgba( 0, 0, 0, .9 ), 0 0 32px -18px var( --zar );
}


/* 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. */

.trt-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;
}
.trt-hero[data-tlo] > * { max-width: 80ch; }

.trt-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. */
.trt-sekcja[data-tlo] .zd-pas > li,
.trt-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 ) {
	.trt-sekcja[data-tlo], .trt-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]. */
.trt-sekcja[data-tlo] {
	--tekst-slaby: #96928f;	/* #837f7b dawało 3.94:1, teraz 5.07:1 */
	--etyk: #a78e79;	/* #96795f dawało 3.87:1, teraz 5.05:1 */
}

/* nadtytuł jako <span> (pierwszy <p> skrótu idzie do nagłówka okna) — blok, żeby układ został */
.trt-granica__nr { display: block; }

/* 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. */
.trt-strona .trt-hero .trt-okno.zd-okno,
.trt-strona .trt-hero .zd-okno.zd-okno,
.trt-strona .trt-hero .trt-okno.trt-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 22, 24, 30, .10 ), transparent 70% ),
		linear-gradient( 168deg, #16171b, #0b0c10 );
}