/* KOLORYT WŁASNY TEGO DZIAŁU — zieleń i biel wapna — Sycylia i Bałkany, nie pustynia.
   Grunt #071310. 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ą. */

/* Islam w Europie — dwa pasy na jednej osi.  Prefiks `tie-`.

   MATERIAŁ: glazura kafla, rzeźbiony stiuk, strop cedrowy, kostka mozaiki.
   ŚWIATŁO: dziedzińca, przez ażur — południowe, dzienne, o ostrym cieniu.

   To jest jedyny dział tego filaru o świetle DZIENNYM i o ostrej krawędzi
   cienia. Pozostałe dostały mgłę, zmierzch, wnętrze albo witraż. Różnica jest
   rzeczowa, a nie gustowa: dział mówi o dziedzińcu, o krużganku i o wodzie
   w basenie, a te trzy rzeczy istnieją tylko w pełnym słońcu. Cień pod ażurem
   jest tu drugą barwą, nie brakiem barwy.

   Cztery barwy z rzeczy, o których dział mówi: glazura zielona z turkusem,
   ziemia palona, złoto kostki mozaikowej i wapno tynku. Świadomie NIE używamy
   zieleni jako barwy wyłącznej ani półksiężyca jako znaku: jedno i drugie to
   skojarzenie późniejsze i państwowe, a dział mówi o trzynastu stuleciach.

   DWA PASY MAJĄ DWIE BARWY I TO JEST CAŁA OPRAWA TEZY. Pas górny — glazura;
   pas dolny — ziemia palona. Żaden z nich nie dostaje barwy mocniejszej,
   większego znaku ani grubszej kreski, bo rysunek nie ma prawa rozstrzygać
   sporu, którego nie rozstrzyga materiał.

   SZEROKOŚĆ 1520 px i blok wyłamania z układu motywu — jak w całym filarze.
   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. */

.tie-strona {
	--tlo: #071310; --panel: rgba( 16, 34, 30, .84 );
	--obrys: rgba( 47, 132, 120, .30 ); --wlos: rgba( 47, 132, 120, .14 );
	--glazura: #2f8478; --glazura-j: #6cc4b3;
	--ziemia: #a8563a; --ziemia-j: #d08a68;
	--zloto: #b3872f; --zloto-j: #e0bb6a;
	--wapno: #d8d3c4; --wapno-j: #f1eee4;
	--cien: #1a201f; --cien-j: #55605c;
	--etyk: #9aa08c;
	--tekst: #aeb3a5; --tekst-slaby: #878d7f; --tekst-mocny: #e9e7db;
	--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( 1200px 640px at 50% -10%, rgba( 47, 132, 120, .16 ), transparent 72% ),
		radial-gradient( 900px 520px at 86% 40%, rgba( 168, 86, 58, .10 ), transparent 74% ),
		radial-gradient( 760px 440px at 8% 78%, rgba( 168, 86, 58, .1 ), transparent 74% ),
		linear-gradient( 180deg, #141917, var( --tlo ) 48% );
	overflow-x: clip;
}
.tie-strona *, .tie-strona *::before, .tie-strona *::after { box-sizing: border-box; }

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

/* ══════════════  UWERTURA  ══════════════ */

.tie-hero {
	position: relative; margin: 26px 0 0; padding: 62px 44px 54px; border-radius: 28px;
	border: 1px solid var( --wlos ); overflow: hidden;
	background:
		radial-gradient( 900px 420px at 22% 0%, rgba( 216, 219, 216, .1 ), transparent 70% ),
		linear-gradient( 180deg, rgba( 22, 26, 26, .9 ), rgba( 13, 16, 15, .96 ) );
}
/* Uwertura z grafiką nosi `tie-sekcja--tlo tie-hero`, a NIE `tie-hero--tlo`
   — nazwa modyfikatora pochodzi z `tlo()` i jest wspólna dla obu. */
.tie-sekcja--tlo::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: var( --tlo ) 50% 50% / cover no-repeat; opacity: .92;
}
.tie-sekcja--tlo::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient( 900px 520px at 16% 16%, rgba( 10, 12, 12, .66 ), transparent 76% ),
		linear-gradient( 180deg, rgba( 10, 12, 12, .14 ), rgba( 10, 12, 12, .5 ) );
}
.tie-hero__nad {
	margin: 0 0 16px; font: 400 11px var( --sans ); letter-spacing: .3em; text-transform: uppercase;
	color: var( --etyk );
}
.tie-hero__tytul {
	margin: 0 0 26px; max-width: 20ch;
	font: 300 clamp( 40px, 5.2vw, 72px ) / 1.07 var( --serif ); color: var( --tekst-mocny );
	text-shadow: 0 0 60px rgba( 216, 219, 216, .16 );
}

/* ══════════════  SEKCJE  ══════════════ */

.tie-sekcja { position: relative; margin: 84px 0 0; padding: 0; }
.tie-sekcja--tlo { padding: 54px 40px 48px; border-radius: 26px; border: 1px solid var( --wlos ); overflow: hidden; }
.tie-sekcja__nad {
	margin: 0 0 12px; font: 400 11px var( --sans ); letter-spacing: .28em; text-transform: uppercase;
	color: var( --etyk );
}
.tie-sekcja__tytul {
	margin: 0 0 16px; max-width: 26ch;
	font: 300 clamp( 30px, 3.4vw, 46px ) / 1.12 var( --serif ); color: var( --tekst-mocny );
	text-shadow: 0 0 40px rgba( 216, 219, 216, .13 );
}
.tie-sekcja__lead { margin: 0 0 32px; max-width: 78ch; font-size: 19px; line-height: 1.66; color: var( --tekst ); }

.tie-przerywnik { display: block; width: 100%; height: 44px; margin: 66px 0 0; color: var( --glazura ); opacity: .5; }

/* ══════════════  DWA PASY NA JEDNEJ OSI  ══════════════
   Rysunek dostaje JAWNĄ szerokość, bo SVG w siatce kurczy się do 300 px,
   a wtedy podpisy punktów nachodzą na siebie i cały sens przestaje działać.

   Rysunek bierze całe pasmo, a opis staje POD nim. Przy dwóch pasach i osi
   od VIII do XVII wieku wciśnięcie rysunku w połowę szerokości dawało odstęp
   dwudziestu pikseli na stulecie — podpisy nachodziły na siebie niezależnie
   od rozsuwania. */
.tie-pasy {
	width: 100%; max-width: 1180px; margin: 0 auto; position: relative;
	/* Dwa światła, po jednym na pas, o tych samych parametrach i o tej samej
	   przezroczystości. Gdyby różniły się mocą, rysunek zacząłby sugerować,
	   który pas jest ważniejszy — a tego właśnie robić mu nie wolno. */
	background:
		radial-gradient( 48% 34% at 50% 26%, rgba( 108, 196, 179, .08 ), transparent 72% ),
		radial-gradient( 48% 34% at 50% 74%, rgba( 208, 138, 104, .08 ), transparent 72% );
}
.tie-pasy__svg { display: block; width: 100%; height: auto; overflow: visible; }

.tie-os { stroke: var( --wlos ); stroke-width: 1.4; }
.tie-os__rok { fill: var( --tekst-slaby ); font: 400 10.5px var( --sans ); letter-spacing: .1em; text-anchor: middle; }
.tie-os__kreska { stroke: var( --wlos ); stroke-width: 1; }

/* Nagłówki pasów — jedyne miejsce, gdzie barwa pasa pada na tekst. */
.tie-pas__etyk { font: 400 11px var( --sans ); letter-spacing: .24em; text-transform: uppercase; }
.tie-pas__etyk--gora { fill: var( --glazura-j ); }
.tie-pas__etyk--dol { fill: var( --ziemia-j ); }
.tie-pas__linia { stroke-width: 1; stroke-dasharray: 1 7; stroke-linecap: round; opacity: .6; }
.tie-pas__linia--gora { stroke: var( --glazura ); }
.tie-pas__linia--dol { stroke: var( --ziemia ); }

/* NAKŁADANIE SIĘ PASÓW — to jest cała teza rysunku, więc ma własny znak.
   Pionowy słup obejmuje dekady, w których na obu pasach stoi zdarzenie.
   Świadomie jest NEUTRALNY barwą: nie należy do żadnego z pasów. */
.tie-zachodzi { fill: rgba( 224, 187, 106, .09 ); stroke: rgba( 224, 187, 106, .3 ); stroke-width: 1; stroke-dasharray: 3 4; }
.tie-zachodzi__etyk { fill: var( --zloto-j ); font: 400 10px var( --sans ); letter-spacing: .2em; text-transform: uppercase; text-anchor: middle; }

.tie-punkt { cursor: pointer; outline: none; }
.tie-punkt__pole { fill: transparent; }
.tie-punkt__nog { stroke-width: 1.2; opacity: .75; }
.tie-punkt__znak { fill: var( --tlo ); stroke-width: 1.8; }
.tie-punkt--gora .tie-punkt__znak, .tie-punkt--gora .tie-punkt__nog { stroke: var( --glazura-j ); }
.tie-punkt--dol .tie-punkt__znak, .tie-punkt--dol .tie-punkt__nog { stroke: var( --ziemia-j ); }
.tie-punkt--os .tie-punkt__znak { stroke: var( --wapno ); fill: var( --wapno ); }
.tie-punkt__rok { fill: var( --tekst-slaby ); font: 400 11px var( --sans ); letter-spacing: .08em; text-anchor: middle; }
.tie-punkt__etyk { fill: var( --tekst ); font: 300 13px var( --serif ); text-anchor: middle; }
.tie-pasy__nota { fill: var( --tekst-slaby ); font: 300 13px var( --serif ); text-anchor: middle; }

.tie-punkt:hover .tie-punkt__etyk,
.tie-punkt:focus-visible .tie-punkt__etyk { fill: var( --tekst-mocny ); }
.tie-punkt.jest-wybrany .tie-punkt__etyk { fill: var( --tekst-mocny ); font-weight: 500; }
.tie-punkt--gora.jest-wybrany .tie-punkt__znak { fill: var( --glazura ); }
.tie-punkt--dol.jest-wybrany .tie-punkt__znak { fill: var( --ziemia ); }
.tie-punkt--gora.jest-wybrany { filter: drop-shadow( 0 0 14px rgba( 108, 196, 179, .45 ) ); }
.tie-punkt--dol.jest-wybrany { filter: drop-shadow( 0 0 14px rgba( 208, 138, 104, .45 ) ); }
.tie-punkt--os.jest-wybrany { filter: drop-shadow( 0 0 14px rgba( 241, 238, 228, .35 ) ); }

.tie-pasy__opis {
	max-width: 78ch; margin: 26px auto 0; padding: 30px 34px;
	border: 1px solid var( --wlos ); border-radius: 22px; background: var( --panel );
}
.tie-pasy__opis h3 { margin: 0 0 6px; font: 300 30px var( --serif ); color: var( --tekst-mocny ); }
.tie-pasy__opis p { margin: 0 0 14px; font-size: 18px; line-height: 1.74; }
.tie-pasy__opis p:last-child { margin-bottom: 0; }
.tie-pasy__punkt { font: 400 11px var( --sans ) !important; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 8px !important; }
.tie-pasy__punkt--gora { color: var( --glazura-j ); }
.tie-pasy__punkt--dol { color: var( --ziemia-j ); }
.tie-pasy__punkt--os { color: var( --etyk ); }
.tie-pasy__krotko { color: var( --tekst-mocny ); font-style: italic; }

/* ══════════════  SIATKI KAFLI  ══════════════ */

.tie-siatka { display: grid; gap: 22px; grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) ); align-items: start; }
.tie-siatka--przeklad { grid-template-columns: repeat( auto-fill, minmax( 330px, 1fr ) ); }

.tie-kafel {
	position: relative; padding: 26px 26px 24px; border-radius: 20px;
	border: 1px solid var( --wlos ); background: var( --panel ); cursor: pointer;
	transition: border-color .2s, transform .2s;
}
.tie-kafel:hover, .tie-kafel:focus-visible { border-color: var( --obrys ); transform: translateY( -2px ); }
.tie-kafel h3 { margin: 0 0 8px; font: 300 25px / 1.18 var( --serif ); color: var( --tekst-mocny ); }
.tie-kafel p { margin: 0; font-size: 17px; line-height: 1.66; }
.tie-kafel__nad {
	display: block; margin: 0 0 10px; font: 400 10.5px var( --sans ); letter-spacing: .22em;
	text-transform: uppercase; color: var( --etyk );
}
.tie-kafel__nad i { font-style: normal; margin-right: 8px; color: var( --glazura-j ); }

.tie-foto { margin: 0 0 18px; border-radius: 14px; overflow: hidden; }
.tie-foto img { display: block; width: 100%; height: auto; }

/* ── siedem składników obrzędu ── */
.tie-rozklad {
	margin: 0 0 18px; padding: 16px 18px; border-radius: 14px;
	border: 1px solid var( --wlos ); background: rgba( 108, 196, 179, .06 );
}
.tie-rozklad__pole { display: grid; grid-template-columns: 116px 1fr; gap: 14px; padding: 7px 0; border-bottom: 1px solid var( --wlos ); }
.tie-rozklad__pole:last-child { border-bottom: 0; }
.tie-rozklad__pole b { font: 400 10.5px var( --sans ); letter-spacing: .18em; text-transform: uppercase; color: var( --glazura-j ); padding-top: 3px; }
.tie-rozklad__pole span { font-size: 16.5px; line-height: 1.6; color: var( --tekst ); }

/* ══════════════  LICZNIK  ══════════════ */

.tie-liczby { display: grid; gap: 20px; grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) ); align-items: start; }
.tie-karta { padding: 28px 24px; border-radius: 20px; border: 1px solid var( --wlos ); background: var( --panel ); }
.tie-karta__ile {
	margin: 0 0 10px; font: 300 clamp( 38px, 4vw, 56px ) / 1 var( --serif ); color: var( --zloto-j );
	text-shadow: 0 0 34px rgba( 224, 187, 106, .22 );
}
.tie-karta__co { margin: 0 0 10px; font: 400 12px var( --sans ); letter-spacing: .14em; text-transform: uppercase; color: var( --etyk ); line-height: 1.5; }
.tie-karta__krotko { margin: 0; font-size: 16.5px; line-height: 1.64; }

/* ══════════════  OKNO  ══════════════ */

.tie-okno {
	max-width: 82ch; padding: 30px 34px; border-radius: 20px;
	border: 1px solid var( --wlos ); background: rgba( 19, 23, 22, .7 );
}
.tie-okno p { margin: 0; font-size: 19px; line-height: 1.74; color: var( --tekst ); }

/* POLA OPISU W KAFLU. Wspólny pomocnik modułu nadaje im klasę `tie-pole`,
   więc ich reguły muszą nosić dokładnie tę nazwę. W dziale skandynawskim
   przemianowanie pól rysunku zabrało ze sobą te ramki i zostały bez oprawy;
   tutaj stoją osobno i celowo NIE dzielą nazwy z niczym w rysunku. */
.tie-pole { margin: 0 0 14px !important; padding: 12px 16px; border-radius: 12px; font-size: 16px !important; }
.tie-pole b { display: block; font: 400 10.5px var( --sans ); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 5px; }
.tie-pole--zrodlo { background: rgba( 199, 205, 192, .09 ); color: var( --tekst-slaby ); }
.tie-pole--zrodlo b { color: var( --cien-j ); }
.tie-pole--zamiast { background: rgba( 179, 135, 47, .16 ); color: var( --tekst-mocny ); }
.tie-pole--zamiast b { color: var( --tekst-mocny ); }

/* ══════════════  WĄSKIE EKRANY  ══════════════ */

@media ( max-width: 900px ) {
	.tie-strona { padding: 0 20px 60px; }
	.tie-hero { padding: 44px 24px 38px; }
	.tie-sekcja { margin-top: 60px; }
	.tie-sekcja--tlo { padding: 36px 22px 32px; }
	.tie-pasy__opis { padding: 22px 20px; }
	.tie-rozklad__pole { grid-template-columns: 1fr; gap: 3px; }
	/* Siatka przekładu ma `minmax( 330px )`, co przy 390 px ekranu i marginesach
	   wychodzi poza stronę. Jedna kolumna. */
	.tie-siatka, .tie-siatka--przeklad { grid-template-columns: 1fr; }
	.tie-punkt__etyk { font-size: 11px; }
}

/* 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( .tie-strona ) {
	background-color: #071310;
	background-image: radial-gradient( 1600px 900px at 50% 0%, rgba( 47, 132, 120, .07 ), transparent 68% );
	background-attachment: fixed;
}


/* ===== POPRAWKA WARSTW 2026-09-12 =====
   `z-index: -1` na obu pseudoelementach wrzucal ZDJECIE POD wlasne,
   nieprzezroczyste tlo sekcji (.tie-hero ma pelny linear-gradient),
   wiec grafika nie byla widoczna w ogole. Sprawdzone na zywo.
   Pseudoelementy ida nad tlo elementu, tresc nad nie. */
.tie-sekcja--tlo::before,
.tie-sekcja--tlo::after { z-index: 0; }
.tie-sekcja--tlo > * { position: relative; z-index: 1; }


/* ===== MIT W KAFLU 2026-09-12 =====
   Naglowek kafla w sekcji „Czego nie bylo” to CUDZE falszywe zdanie.
   Ma wygladac na cytat, nie na teze strony. */
.tie-kafel__nad--mit { color: #c4826e; letter-spacing: .16em; }
.tie-kafel__mit { color: var( --tekst-slaby ); font-style: italic; }
.tie-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. */
.tie-strona .tie-hero .tie-okno.zd-okno,
.tie-strona .tie-hero .zd-okno.zd-okno,
.tie-strona .tie-hero .tie-okno.tie-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 16, 34, 30, .10 ), transparent 70% ),
		linear-gradient( 168deg, #121e1b, #071310 );
}