/* Islam — początki, rozłam, odłamy, przekrój.
 *
 * PALETA NIESIE ROZRÓŻNIENIE, NIE OZDOBĘ. Trzy tory rozłamu mają trzy barwy
 * i te same barwy wracają w tekście przy nazwach odłamów. Butelkowa zieleń
 * i kość słoniowa dla pnia, czerwień Karbali dla toru szyickiego, przygaszony
 * błękit dla ibadyckiego. Świadomie nie indygo Arabii, nie karmazyn Osmanów
 * i nie lazur Persji — działy Bliskiego Wschodu muszą się różnić na pierwszy
 * rzut oka.
 *
 * BLOK UCIECZKI OD MOTYWU JEST OBOWIĄZKOWY. Motyw ustawia
 * `--wp--style--global--content-size: 645px` i bez tych reguł cały dział
 * ściska się do jednej wąskiej kolumny. Test osiemnastu punktów tego NIE
 * WYKRYJE, bo ściśnięta strona niczego nie przepełnia — wygląda po prostu
 * na wąską ([[dzial-scisniety-do-645px]]). Mierzę szerokość `.tiw-strona`
 * na żywej stronie, zanim uznam dział za skończony.
 */

body:has( .tiw-strona ) .wp-site-blocks > header,
body:has( .tiw-strona ) header.wp-block-template-part,
body:has( .tiw-strona ) .wp-site-blocks > footer,
body:has( .tiw-strona ) footer.wp-block-template-part,
body:has( .tiw-strona ) .wp-block-post-title { display: none !important; }

body:has( .tiw-strona ) .wp-site-blocks,
body:has( .tiw-strona ) .wp-block-group,
body:has( .tiw-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }

body:has( .tiw-strona ) .wp-block-post-content > *,
body:has( .tiw-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

body:has( .tiw-strona ) { background: #0b1512; }

body:has( .tiw-strona ) .wp-block-post-content > .tiw-strona,
body:has( .tiw-strona ) .entry-content > .tiw-strona,
.tiw-strona { max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }

.tiw-strona button { font-family: inherit; }
/* MOTYW DAJE content-box. Pudelko rysunku mialo width:100% + 18 px paddingu
   z kazdej strony i wchodzilo 36 px na panel obok — Przemo zobaczyl to
   na zrzucie jako „jedno zachodzi na drugie". Jedna regula, cala strona. */
.tiw-strona, .tiw-strona * { box-sizing: border-box; }

.tiw-strona {
	--kosc:      #efe7d6;
	--tlo:       #0b1512;
	--tlo-jasne: #12211c;
	--zielen:    #1d3b31;
	--zloto:     #c9a227;
	--czerwien:  #a8322d;
	--blekit:    #4f7d78;
	--tekst:     #cfd8d2;
	--tekst-cichy: #9aa9a2;
	--kreska:    rgba( 239, 231, 214, .16 );

	color: var( --tekst );
	font: 300 17px/1.7 Jost, system-ui, sans-serif;
	background: var( --tlo );

	/* POZYCJA WZGLEDNA JEST OBOWIAZKOWA, nie kosmetyczna. Emblemat dzialu
	   jest pozycjonowany BEZWZGLEDNIE; bez zaczepu na kontenerze lapie sie
	   za obszar wyzej i wychodzi 48 px poza okno, a `overflow-x: clip` go
	   NIE przycina, bo przycinanie nie obejmuje potomka, ktorego blok
	   zawierajacy lezy na zewnatrz. Zmierzone przy pierwszym przebiegu testu:
	   `tem__poswiata` prawa krawedz 1473 px przy oknie 1425 px — rowno 48.
	   `clip`, a nie `hidden`, bo `hidden` zabija `loading="lazy"`. */
	position: relative;
	max-width: 1520px;          /* DYREKTYWA: 1520 px tresci; blok wylamania wyzej podnosi to do 1600 */
	margin: 0 auto;
	overflow-x: clip;
	padding: 0 24px 64px;
}

.tiw-strona h1, .tiw-strona h2, .tiw-strona h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; color: var( --kosc ); margin: 0; }

/* ŚCIEŻKA */
.tiw-sciezka { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 18px 32px 0; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var( --tekst-cichy ); }
.tiw-sciezka b { color: var( --zloto ); font-weight: 400; }
.tiw-sciezka i { opacity: .45; font-style: normal; }
.tiw-poziom { margin: 0 0 0 auto; font-size: 12px; letter-spacing: .04em; text-transform: none; color: var( --tekst-cichy ); }

/* HERO */
.tiw-hero { position: relative; padding: 72px 32px 64px; border-bottom: 1px solid var( --kreska ); }
.tiw-hero__tresc { max-width: 1080px; }
.tiw-nad { margin: 0 0 10px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var( --zloto ); }
.tiw-tytul { font-size: clamp( 44px, 6vw, 82px ); line-height: 1.04; }
.tiw-tytul small { display: block; margin-top: 14px; font-size: clamp( 17px, 1.6vw, 23px ); font-style: italic; color: var( --tekst-cichy ); }
.tiw-lead { max-width: 74ch; margin: 22px 0 0; font-size: 18px; color: var( --tekst ); }
.tiw-lead--drugi { color: var( --tekst-cichy ); }

/* SEKCJE */
.tiw-sekcja { padding: 58px 32px; border-bottom: 1px solid var( --kreska ); }
.tiw-sekcja__nad { margin: 0 0 8px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var( --zloto ); }
.tiw-sekcja__tytul { font-size: clamp( 30px, 3.4vw, 46px ); line-height: 1.14; }
.tiw-sekcja__lead { max-width: 78ch; margin: 14px 0 26px; color: var( --tekst-cichy ); }

/* Tło sekcji wpinamy jako WARSTWĘ, nie przez ::before — pseudoelementy
   są zajęte przez zdobienia.css i wpięcie tam tła skasowałoby ozdobniki. */
.tiw-sekcja--tlo { background-image: linear-gradient( 90deg, rgba( 11, 21, 18, .94 ) 0%, rgba( 11, 21, 18, .70 ) 36%, rgba( 11, 21, 18, .20 ) 66%, transparent 100% ), linear-gradient( 180deg, rgba( 11, 21, 18, .10 ) 0%, rgba( 11, 21, 18, .34 ) 100% ), var( --tlo ); background-size: cover; background-position: center; }

/* LICZNIKI */
.tiw-liczby { display: grid; gap: 18px; grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) ); }
.tiw-liczba { padding: 22px 20px; border: 1px solid var( --kreska ); background: var( --tlo-jasne ); }
.tiw-liczba b { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 52px; line-height: 1; color: var( --zloto ); font-weight: 400; }
.tiw-liczba span { display: block; margin: 8px 0 6px; font-size: 14px; letter-spacing: .04em; color: var( --kosc ); }
.tiw-liczba i { display: block; font-style: normal; font-size: 14px; color: var( --tekst-cichy ); }

/* KAFLE — tor robi się sam przez końcówkę `-dotoru` w zdobienia.js */
.tiw-kafle { display: grid; gap: 16px; grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) ); }
.tiw-kafel { padding: 22px 20px; border: 1px solid var( --kreska ); background: var( --tlo-jasne ); cursor: pointer; transition: border-color .2s, transform .2s; }
.tiw-kafel:hover, .tiw-kafel:focus-visible { border-color: var( --zloto ); transform: translateY( -2px ); }
.tiw-kafel__nad { display: block; margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var( --zloto ); }
.tiw-kafel__tytul { font-size: 27px; line-height: 1.2; }
.tiw-kafel__krotko { margin: 10px 0 0; color: var( --tekst-cichy ); }

/* W torze widać tylko PIERWSZY akapit kafla — reguła wspólna. Tu skrót ma
   jeden akapit, więc nic nie znika; zapisane, żeby nikt nie dokładał drugiego. */
.tiw-kafle.zd-pas--bloki > .tiw-kafel { flex: 0 0 min( 420px, 84% ) !important; }

.tiw-odsyl { margin: 16px 0 0; font-size: 15px; color: var( --tekst-cichy ); }
.tiw-odsyl a { color: var( --zloto ); }

.tiw-zastrzezenie { max-width: 80ch; margin: 26px 0 0; padding: 16px 18px; border-left: 2px solid var( --blekit ); font-size: 15px; color: var( --tekst-cichy ); background: rgba( 79, 125, 120, .07 ); }

/* ROZWIDLENIE */
.tiw-rozwidlenie { display: grid; gap: 28px; grid-template-columns: minmax( 0, 1.15fr ) minmax( 0, 1fr ); align-items: start; }
@media ( max-width: 980px ) { .tiw-rozwidlenie { grid-template-columns: 1fr; } }

/* SVG w gridzie kurczy się do 300 px bez jawnej szerokości na owijce
   ([[css-svg-w-gridzie-szerokosc]]). */
.tiw-rozwidlenie__rys { width: 100%; min-width: 0; padding: 18px; border: 1px solid var( --kreska ); background: var( --tlo-jasne ); }
.tiw-rys__svg { display: block; width: 100%; height: auto; overflow: visible; }

.tiw-rys__nic { fill: none; stroke: var( --kosc ); stroke-width: 2; opacity: .5; }
.tiw-rys__nic--szyicki { stroke: var( --czerwien ); opacity: .85; }
.tiw-rys__nic--ibadycki { stroke: var( --blekit ); opacity: .85; }
.tiw-rys__nic--sunnicki { stroke: var( --zloto ); opacity: .8; }

.tiw-rys__wezel { cursor: pointer; }
.tiw-rys__kropka { fill: var( --kosc ); stroke: var( --tlo ); stroke-width: 3; transition: fill .2s, r .2s; }
.tiw-rys__wezel--szyicki .tiw-rys__kropka { fill: var( --czerwien ); }
.tiw-rys__wezel--ibadycki .tiw-rys__kropka { fill: var( --blekit ); }
.tiw-rys__wezel--sunnicki .tiw-rys__kropka { fill: var( --zloto ); }

/* Spór o naukę: węzeł PUSTY w środku. Rozróżnienie kształtem, nie barwą —
   samą barwą byłoby niewidoczne dla części czytelników, a jest tu treścią. */
.tiw-rys__wezel.jest-nauka .tiw-rys__kropka { fill: var( --tlo-jasne ); stroke: currentColor; }
.tiw-rys__wezel--sunnicki.jest-nauka { color: var( --zloto ); }
.tiw-rys__wezel--szyicki.jest-nauka { color: var( --czerwien ); }

.tiw-rys__wezel.jest .tiw-rys__kropka { r: 17; }
.tiw-rys__wezel:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 4px; }

.tiw-rys__rok { fill: var( --zloto ); font: 500 14px/1 Jost, system-ui, sans-serif; letter-spacing: .06em; }
.tiw-rys__nazwa { fill: var( --kosc ); font: 300 17px/1 'Cormorant Garamond', Georgia, serif; }

.tiw-rozwidlenie__opis { padding: 22px 22px 26px; border: 1px solid var( --kreska ); background: var( --tlo-jasne ); }
.tiw-rozwidlenie__opis h3 { font-size: 30px; margin: 4px 0 10px; }
.tiw-rys__kiedy { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var( --zloto ); }
.tiw-rys__krotko { margin: 0 0 14px; font-size: 18px; color: var( --kosc ); }
.tiw-rozwidlenie__opis p { margin: 0 0 12px; color: var( --tekst-cichy ); }

.tiw-podpis { max-width: 82ch; margin: 22px 0 0; font-size: 15px; font-style: italic; color: var( --tekst-cichy ); }

.tiw-foto { margin: -22px -20px 16px; overflow: hidden; border-radius: 0 0 18px 18px; background: #12130f; }
.tiw-foto img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; transition: transform .45s ease; }
.tiw-kafel:hover .tiw-foto img, .tiw-kafel:focus-visible .tiw-foto img { transform: scale( 1.04 ); }

@media ( max-width: 720px ) {
	.tiw-hero, .tiw-sekcja { padding-left: 20px; padding-right: 20px; }
	.tiw-sciezka { padding-left: 20px; padding-right: 20px; }
}

/* PRZEJSCIA TONALNE MIEDZY SEKCJAMI. Bez nich siedem sekcji tego samego
   koloru czyta sie jak jedna dluga plama — test nazwal to „za plasko"
   i mial racje. Gradienty sa slabe (roznica kilku procent jasnosci), bo
   maja rozdzielac sekcje, a nie rysowac pasy. */
.tiw-sekcja:nth-of-type( odd ) { background-image: linear-gradient( 180deg, rgba( 29, 59, 49, .22 ), rgba( 11, 21, 18, 0 ) 62% ); }
.tiw-sekcja:nth-of-type( even ) { background-image: linear-gradient( 180deg, rgba( 11, 21, 18, 0 ), rgba( 29, 59, 49, .18 ) ); }
.tiw-sekcja--rozlam { background-image: linear-gradient( 180deg, rgba( 168, 50, 45, .10 ), rgba( 11, 21, 18, 0 ) 55% ); }
.tiw-sekcja--przekroj { background-image: linear-gradient( 180deg, rgba( 79, 125, 120, .12 ), rgba( 11, 21, 18, 0 ) 58% ); }
.tiw-hero { background-image: linear-gradient( 160deg, rgba( 29, 59, 49, .38 ), rgba( 11, 21, 18, 0 ) 68% ); }

/* Sekcja z wgranym tlem ma je BIC nad gradientem — inaczej grafika wjezdza
   pod przyciemnienie i nie widac jej wcale. */
.tiw-sekcja--tlo { background-image: linear-gradient( 90deg, rgba( 11, 21, 18, .94 ) 0%, rgba( 11, 21, 18, .70 ) 36%, rgba( 11, 21, 18, .20 ) 66%, transparent 100% ), linear-gradient( 180deg, rgba( 11, 21, 18, .10 ) 0%, rgba( 11, 21, 18, .34 ) 100% ), var( --tlo ) !important; background-size: cover; background-position: center; }

/* ═══════════════════════════════════════════════════════════════════
   OPRAWA — geometria zamiast gradientu
   ═══════════════════════════════════════════════════════════════════ */

/* WZÓR OKTAGONU I GWIAZDY jako warstwa najniższa. Krycie jest celowo bardzo
   niskie: ma dawać fakturę widoczną kątem oka, a nie rysunek konkurujący
   z tekstem. Kafel 120 px powtarza się, więc waży tyle co jeden mały obrazek
   niezależnie od wielkości sekcji. */
.tiw-strona { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523c9a227%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220.075%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2295.11%2C74.54%2074.54%2C95.11%2045.46%2C95.11%2024.89%2C74.54%2024.89%2C45.46%2045.46%2C24.89%2074.54%2C24.89%2095.11%2C45.46%22%2F%3E%3Cpolygon%20points%3D%2290.00%2C60.00%2071.55%2C64.78%2081.21%2C81.21%2064.78%2C71.55%2060.00%2C90.00%2055.22%2C71.55%2038.79%2C81.21%2048.45%2C64.78%2030.00%2C60.00%2048.45%2C55.22%2038.79%2C38.79%2055.22%2C48.45%2060.00%2C30.00%2064.78%2C48.45%2081.21%2C38.79%2071.55%2C55.22%22%2F%3E%3Cpolygon%20points%3D%2221.00%2C0.00%200.00%2C21.00%20-21.00%2C0.00%20-0.00%2C-21.00%22%2F%3E%3Cpolygon%20points%3D%22141.00%2C0.00%20120.00%2C21.00%2099.00%2C0.00%20120.00%2C-21.00%22%2F%3E%3Cpolygon%20points%3D%2221.00%2C120.00%200.00%2C141.00%20-21.00%2C120.00%20-0.00%2C99.00%22%2F%3E%3Cpolygon%20points%3D%22141.00%2C120.00%20120.00%2C141.00%2099.00%2C120.00%20120.00%2C99.00%22%2F%3E%3Cline%20x1%3D%2286.87%22%20y1%3D%2286.87%22%20x2%3D%22102.43%22%20y2%3D%22102.43%22%2F%3E%3Cline%20x1%3D%2233.13%22%20y1%3D%2286.87%22%20x2%3D%2217.57%22%20y2%3D%22102.43%22%2F%3E%3Cline%20x1%3D%2233.13%22%20y1%3D%2233.13%22%20x2%3D%2217.57%22%20y2%3D%2217.57%22%2F%3E%3Cline%20x1%3D%2286.87%22%20y1%3D%2233.13%22%20x2%3D%22102.43%22%20y2%3D%2217.57%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: 120px 120px; }

.tiw-hero {
	background-image:
		url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523c9a227%22%20stroke-width%3D%221.1%22%20stroke-opacity%3D%220.13%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2295.11%2C74.54%2074.54%2C95.11%2045.46%2C95.11%2024.89%2C74.54%2024.89%2C45.46%2045.46%2C24.89%2074.54%2C24.89%2095.11%2C45.46%22%2F%3E%3Cpolygon%20points%3D%2290.00%2C60.00%2071.55%2C64.78%2081.21%2C81.21%2064.78%2C71.55%2060.00%2C90.00%2055.22%2C71.55%2038.79%2C81.21%2048.45%2C64.78%2030.00%2C60.00%2048.45%2C55.22%2038.79%2C38.79%2055.22%2C48.45%2060.00%2C30.00%2064.78%2C48.45%2081.21%2C38.79%2071.55%2C55.22%22%2F%3E%3Cpolygon%20points%3D%2221.00%2C0.00%200.00%2C21.00%20-21.00%2C0.00%20-0.00%2C-21.00%22%2F%3E%3Cpolygon%20points%3D%22141.00%2C0.00%20120.00%2C21.00%2099.00%2C0.00%20120.00%2C-21.00%22%2F%3E%3Cpolygon%20points%3D%2221.00%2C120.00%200.00%2C141.00%20-21.00%2C120.00%20-0.00%2C99.00%22%2F%3E%3Cpolygon%20points%3D%22141.00%2C120.00%20120.00%2C141.00%2099.00%2C120.00%20120.00%2C99.00%22%2F%3E%3Cline%20x1%3D%2286.87%22%20y1%3D%2286.87%22%20x2%3D%22102.43%22%20y2%3D%22102.43%22%2F%3E%3Cline%20x1%3D%2233.13%22%20y1%3D%2286.87%22%20x2%3D%2217.57%22%20y2%3D%22102.43%22%2F%3E%3Cline%20x1%3D%2233.13%22%20y1%3D%2233.13%22%20x2%3D%2217.57%22%20y2%3D%2217.57%22%2F%3E%3Cline%20x1%3D%2286.87%22%20y1%3D%2233.13%22%20x2%3D%22102.43%22%20y2%3D%2217.57%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
		linear-gradient( 160deg, rgba( 29, 59, 49, .55 ), rgba( 11, 21, 18, .2 ) 62% );
	background-size: 168px 168px, cover;
}

/* Sekcja z DOSTARCZONYM tłem zakrywa wzór — fotografia jest ważniejsza
   od faktury i nie mają się nakładać. */
.tiw-sekcja--tlo { background-image: linear-gradient( 90deg, rgba( 11, 21, 18, .94 ) 0%, rgba( 11, 21, 18, .70 ) 36%, rgba( 11, 21, 18, .20 ) 66%, transparent 100% ), linear-gradient( 180deg, rgba( 11, 21, 18, .10 ) 0%, rgba( 11, 21, 18, .34 ) 100% ), var( --tlo ) !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; }

/* ETYKIETA SEKCJI ZE ZNAKIEM — gwiazda wyjęta z tła, ta sama figura. */
.tiw-sekcja__nad, .tiw-nad {
	display: flex; align-items: center; gap: 10px;
}
.tiw-sekcja__nad::before, .tiw-nad::before {
	content: ""; flex: 0 0 auto; width: 26px; height: 26px;
	/* MASKA, NIE TLO: gwiazda bierze wtedy currentColor i zmienia sie razem
	   z barwa etykiety; tlo-obrazek mialoby kolor wpisany na sztywno. */
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523c9a227%22%20stroke-width%3D%222.2%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2256.00%2C30.00%2040.16%2C34.21%2048.38%2C48.38%2034.21%2C40.16%2030.00%2C56.00%2025.79%2C40.16%2011.62%2C48.38%2019.84%2C34.21%204.00%2C30.00%2019.84%2C25.79%2011.62%2C11.62%2025.79%2C19.84%2030.00%2C4.00%2034.21%2C19.84%2048.38%2C11.62%2040.16%2C25.79%22%2F%3E%3Cpolygon%20points%3D%2242.01%2C34.97%2034.97%2C42.01%2025.03%2C42.01%2017.99%2C34.97%2017.99%2C25.03%2025.03%2C17.99%2034.97%2C17.99%2042.01%2C25.03%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523c9a227%22%20stroke-width%3D%222.2%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2256.00%2C30.00%2040.16%2C34.21%2048.38%2C48.38%2034.21%2C40.16%2030.00%2C56.00%2025.79%2C40.16%2011.62%2C48.38%2019.84%2C34.21%204.00%2C30.00%2019.84%2C25.79%2011.62%2C11.62%2025.79%2C19.84%2030.00%2C4.00%2034.21%2C19.84%2048.38%2C11.62%2040.16%2C25.79%22%2F%3E%3Cpolygon%20points%3D%2242.01%2C34.97%2034.97%2C42.01%2025.03%2C42.01%2017.99%2C34.97%2017.99%2C25.03%2025.03%2C17.99%2034.97%2C17.99%2042.01%2C25.03%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
/* Linia ciągnąca się od etykiety do krawędzi — zamyka nadtytuł w listwę,
   zamiast zostawiać go samotnym napisem. */
.tiw-sekcja__nad::after, .tiw-nad::after {
	content: ""; flex: 1 1 auto; height: 1px;
	background: linear-gradient( 90deg, var( --kreska ), transparent );
}

/* ═══ KAFEL: POŚWIATA I INICJAŁ ═══
   Dyrektywa: „kafel ma świecić — poświata zapala się pod kursorem i przy
   ognisku klawiatury, NIGDY NA WSZYSTKICH NARAZ". Stąd przejście na
   box-shadow i border, a nie stałe tło. */
.tiw-kafel {
	position: relative;
	overflow: hidden;
	transition: border-color .24s, transform .24s, box-shadow .24s;
}
.tiw-kafel::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient( 120% 90% at 50% 0%, rgba( 201, 162, 39, .16 ), transparent 62% );
	opacity: 0; transition: opacity .24s;
}
.tiw-kafel:hover, .tiw-kafel:focus-visible {
	border-color: var( --zloto );
	transform: translateY( -3px );
	box-shadow: 0 18px 44px rgba( 0, 0, 0, .45 ), 0 0 0 1px rgba( 201, 162, 39, .35 ), 0 0 34px rgba( 201, 162, 39, .18 );
}
.tiw-kafel:hover::after, .tiw-kafel:focus-visible::after { opacity: 1; }
.tiw-kafel:focus-visible { outline: none; }

/* INICJAŁ — konwencja rękopiśmienna: pierwsza litera hasła jako znak kafla.
   Świadomie nie ikona i nie emoji: dział bez wizerunków ma mieć znak, który
   jest pismem. */
.tiw-kafel__inicjal {
	position: absolute; right: 14px; top: 6px;
	font: 400 74px/1 'Cormorant Garamond', Georgia, serif;
	color: var( --zloto ); opacity: .13; pointer-events: none; user-select: none;
}
.tiw-kafel:hover .tiw-kafel__inicjal, .tiw-kafel:focus-visible .tiw-kafel__inicjal { opacity: .26; }
.tiw-kafel__tytul, .tiw-kafel__nad, .tiw-kafel__krotko { position: relative; }

/* ═══ OKNO ═══
   Okno wisi na `body`, POZA `.tiw-strona`, więc reguły scope'owane na stronę
   go nie dotyczą, a zmienne CSS w nim NIE ISTNIEJĄ. `zdobienia.css` ładuje się
   PO arkuszu modułu, więc bez `body:has(…)` przegrywa kolejnością.
   Zmierzone przed poprawką: akapit okna Jost 20px — bezszeryfowy, wbrew
   dyrektywie mówiącej o szeryfowym kroju działu. */
body:has( .tiw-strona ) .zd-okno__przewijak p,
body:has( .tiw-strona ) .zd-klocek__pelne p {
	font: 300 19px/1.72 'Cormorant Garamond', Georgia, serif;
	color: #d8cfc0;
}
body:has( .tiw-strona ) .zd-okno {
	border-color: rgba( 201, 162, 39, .38 );
	box-shadow: 0 40px 90px rgba( 0, 0, 0, .6 ), 0 0 0 1px rgba( 201, 162, 39, .18 ), 0 0 70px rgba( 201, 162, 39, .10 );
}
/* NAROŻNIKI I LISTWA, nie sama ramka — wprost z dyrektywy o oknie. */
body:has( .tiw-strona ) .zd-okno::before,
body:has( .tiw-strona ) .zd-okno::after {
	content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
	border: 1px solid rgba( 201, 162, 39, .55 );
}
body:has( .tiw-strona ) .zd-okno::before { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
body:has( .tiw-strona ) .zd-okno::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
body:has( .tiw-strona ) .zd-okno__gora {
	border-bottom: 1px solid rgba( 201, 162, 39, .28 );
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523c9a227%22%20stroke-width%3D%222.2%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2256.00%2C30.00%2040.16%2C34.21%2048.38%2C48.38%2034.21%2C40.16%2030.00%2C56.00%2025.79%2C40.16%2011.62%2C48.38%2019.84%2C34.21%204.00%2C30.00%2019.84%2C25.79%2011.62%2C11.62%2025.79%2C19.84%2030.00%2C4.00%2034.21%2C19.84%2048.38%2C11.62%2040.16%2C25.79%22%2F%3E%3Cpolygon%20points%3D%2242.01%2C34.97%2034.97%2C42.01%2025.03%2C42.01%2017.99%2C34.97%2017.99%2C25.03%2025.03%2C17.99%2034.97%2C17.99%2042.01%2C25.03%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right 18px center / 26px no-repeat;
}

/* ═══ HERO: KALENDARZ ═══ */
.tiw-hidzra {
	display: grid; gap: 18px; align-items: end;
	grid-template-columns: auto auto 1fr;
	margin: 30px 0 0; padding: 22px 0 0;
	border-top: 1px solid var( --kreska );
	max-width: 1080px;
}
@media ( max-width: 760px ) { .tiw-hidzra { grid-template-columns: 1fr; gap: 10px; } }
.tiw-hidzra__pole b {
	display: block;
	font: 400 clamp( 30px, 3.6vw, 46px )/1 'Cormorant Garamond', Georgia, serif;
	color: var( --kosc );
}
.tiw-hidzra__pole--tam b { color: var( --zloto ); }
.tiw-hidzra__pole span {
	display: block; margin-top: 7px;
	font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var( --tekst-cichy );
}
.tiw-hidzra__strzalka {
	align-self: center; font-size: 26px; color: var( --zloto ); opacity: .5;
	padding-bottom: 14px;
}
.tiw-hidzra__nota { grid-column: 1 / -1; max-width: 70ch; margin: 4px 0 0; font-size: 14px; color: var( --tekst-cichy ); }

/* ═══════════════════════════════════════════════════════════════════
   MAPA — jak islam rozchodził się po Afro-Eurazji
   ═══════════════════════════════════════════════════════════════════
   Kolory krajów przychodzą ze skryptu (z danych), nie stąd — arkusz daje
   tylko ląd, morze, poświatę i przejścia. Przejście koloru .6 s jest
   treścią, nie ozdobą: przy przesuwaniu paska widać, jak kraj ROZJAŚNIA
   się w chwili, gdy islam do niego dociera. */

.tiw-podtytul { margin: 44px 0 16px; font-size: 26px; color: var( --kosc ); }

.tiw-mapa { margin: 8px 0 0; }

.tiw-mapa__pasek {
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
	margin: 0 0 14px;
}
.tiw-mapa__warstwy { display: inline-flex; border: 1px solid var( --kreska ); background: var( --tlo-jasne ); }
.tiw-mapa__warstwa {
	padding: 9px 16px; border: 0; background: transparent; color: var( --tekst-cichy );
	font: 400 13px/1 Jost, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
	transition: background .2s, color .2s, box-shadow .2s;
}
.tiw-mapa__warstwa.jest { background: rgba( 201, 162, 39, .14 ); color: var( --kosc ); box-shadow: inset 0 -2px 0 var( --zloto ); }
.tiw-mapa__warstwa:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 2px; }

.tiw-mapa__rok-box { display: flex; align-items: baseline; gap: 10px; margin-left: auto; }
.tiw-mapa__rok-etyk { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var( --tekst-cichy ); }
.tiw-mapa__rok { font: 400 44px/1 'Cormorant Garamond', Georgia, serif; color: var( --zloto ); min-width: 3ch; text-shadow: 0 0 22px rgba( 201, 162, 39, .35 ); }

.tiw-mapa__graj {
	padding: 9px 16px; border: 1px solid rgba( 201, 162, 39, .45 ); background: transparent; color: var( --zloto );
	font: 400 13px/1 Jost, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
	transition: background .2s, box-shadow .2s;
}
.tiw-mapa__graj:hover, .tiw-mapa__graj:focus-visible { background: rgba( 201, 162, 39, .12 ); box-shadow: 0 0 24px rgba( 201, 162, 39, .18 ); outline: none; }

/* MORZE. Gradient radialny od Arabii — środek mapy jest jasny, brzegi ciemne,
   więc oko samo idzie tam, skąd wszystko wyszło. Pod spodem ten sam wzór
   oktagonów co na stronie, słabszy. */
.tiw-mapa__svg-box {
	position: relative; width: 100%; min-width: 0;
	border: 1px solid var( --kreska );
	background:
		radial-gradient( ellipse 60% 70% at 36% 42%, rgba( 29, 59, 49, .55 ), rgba( 11, 21, 18, 0 ) 70% ),
		linear-gradient( 180deg, #0e1c18, #0a1411 );
	box-shadow: inset 0 0 80px rgba( 0, 0, 0, .45 ), 0 22px 60px rgba( 0, 0, 0, .35 );
	overflow: hidden;
}
.tiw-mapa__svg { display: block; width: 100%; height: auto; }

.tiw-mapa__kraj {
	fill: #1a2a25; fill-opacity: 1;
	stroke: #0a1411; stroke-width: .7; stroke-linejoin: round;
	transition: fill .6s ease, fill-opacity .6s ease, stroke .2s, filter .2s;
	cursor: default;
}
.tiw-mapa__kraj.ma-dane { cursor: pointer; }
.tiw-mapa__kraj.ma-dane:hover, .tiw-mapa__kraj.ma-dane:focus-visible {
	stroke: var( --kosc ); stroke-width: 1.4; filter: url( #tiw-poswiata ); outline: none;
}
.tiw-mapa__kraj--punkt { stroke: var( --kosc ); stroke-width: 1; }

.tiw-mapa__mekka { pointer-events: none; }
.tiw-mapa__mekka-krag { fill: none; stroke: var( --kosc ); stroke-width: 1; opacity: .8; animation: tiw-mekka 3.2s ease-out infinite; transform-origin: center; }
.tiw-mapa__mekka-kropka { fill: var( --kosc ); }
.tiw-mapa__mekka-napis { fill: var( --kosc ); font: 500 13px/1 Jost, system-ui, sans-serif; letter-spacing: .08em; paint-order: stroke; stroke: #0a1411; stroke-width: 3; }
@keyframes tiw-mekka { 0% { r: 6; opacity: .9; } 100% { r: 22; opacity: 0; } }
@media ( prefers-reduced-motion: reduce ) { .tiw-mapa__mekka-krag { animation: none; } .tiw-mapa__kraj { transition: none; } }

/* DYMEK — nad kursorem, w kolorach okna */
.tiw-mapa__dymek {
	position: absolute; z-index: 3; pointer-events: none; max-width: 300px;
	padding: 10px 13px; border: 1px solid rgba( 201, 162, 39, .4 );
	background: rgba( 11, 21, 18, .94 ); box-shadow: 0 12px 30px rgba( 0, 0, 0, .5 ), 0 0 0 1px rgba( 0, 0, 0, .4 );
	backdrop-filter: blur( 6px );
}
.tiw-mapa__dymek b { display: block; font: 400 20px/1.1 'Cormorant Garamond', Georgia, serif; color: var( --kosc ); }
.tiw-mapa__dymek span { display: block; margin-top: 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var( --zloto ); }
.tiw-mapa__dymek em { display: block; margin-top: 5px; font-style: normal; font-size: 13px; color: var( --tekst-cichy ); }

/* CZAS — suwak i skala */
.tiw-mapa__czas { margin: 16px 0 0; padding: 0 6px; }
.tiw-mapa__suwak { width: 100%; height: 26px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.tiw-mapa__suwak::-webkit-slider-runnable-track { height: 3px; background: linear-gradient( 90deg, var( --zloto ), rgba( 201, 162, 39, .25 ) ); border-radius: 2px; }
.tiw-mapa__suwak::-moz-range-track { height: 3px; background: linear-gradient( 90deg, var( --zloto ), rgba( 201, 162, 39, .25 ) ); border-radius: 2px; }
.tiw-mapa__suwak::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -9.5px; border-radius: 50%; background: var( --kosc ); border: 2px solid var( --zloto ); box-shadow: 0 0 0 4px rgba( 201, 162, 39, .18 ), 0 0 22px rgba( 201, 162, 39, .45 ); }
.tiw-mapa__suwak::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var( --kosc ); border: 2px solid var( --zloto ); box-shadow: 0 0 0 4px rgba( 201, 162, 39, .18 ), 0 0 22px rgba( 201, 162, 39, .45 ); }
.tiw-mapa__suwak:focus-visible { outline: none; }
.tiw-mapa__suwak:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba( 201, 162, 39, .35 ); }

.tiw-mapa__skala { display: flex; justify-content: space-between; margin-top: 4px; }
.tiw-mapa__skala button {
	flex: 1 1 0; padding: 6px 0; border: 0; background: transparent; color: var( --tekst-cichy );
	font: 400 12px/1 Jost, system-ui, sans-serif; letter-spacing: .06em; cursor: pointer; transition: color .2s;
}
.tiw-mapa__skala button:first-child { text-align: left; }
.tiw-mapa__skala button:last-child { text-align: right; }
.tiw-mapa__skala button.jest, .tiw-mapa__skala button:hover { color: var( --zloto ); }
.tiw-mapa__skala button:focus-visible { outline: 1px solid var( --zloto ); outline-offset: 2px; }

.tiw-mapa__licznik { margin: 14px 0 0; font: 400 15px/1.5 'Cormorant Garamond', Georgia, serif; font-style: italic; color: var( --kosc ); }

.tiw-mapa__legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; }
.tiw-mapa__leg { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var( --tekst-cichy ); }
.tiw-mapa__leg i { width: 14px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba( 0, 0, 0, .5 ), 0 0 10px rgba( 0, 0, 0, .35 ); }
.tiw-mapa__leg--slabo i { background: rgba( 201, 162, 39, .42 ); }

.tiw-mapa__blad { margin: 0; padding: 40px; text-align: center; color: var( --tekst-cichy ); }

/* KLOCKI KRAJÓW — te same kafle co reszta, w torze */
.tiw-kraje { display: grid; gap: 16px; grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) ); }
.tiw-kraje.zd-pas--bloki > .tiw-kraj { flex: 0 0 min( 340px, 80% ) !important; }
.tiw-kraj__dzis, .tiw-kraj__pod { margin: 14px 0 0 !important; padding: 12px 14px; border-left: 2px solid rgba( 201, 162, 39, .5 ); background: rgba( 201, 162, 39, .06 ); font-size: 16px !important; }
.tiw-kraj__dzis b, .tiw-kraj__pod b { color: var( --zloto ); font-weight: 500; font-family: Jost, system-ui, sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }

@media ( max-width: 760px ) {
	.tiw-mapa__rok-box { margin-left: 0; }
	.tiw-mapa__rok { font-size: 34px; }
	.tiw-mapa__skala button:nth-child( even ) { visibility: hidden; }
}

/* PRZERYWNIK MIEDZY SEKCJAMI — gwiazda na osi i dwie linie gasnace ku brzegom.
   Ten sam ksztalt co w tle i przy etykietach: jeden jezyk ornamentu. */
.tiw-przerywnik { display: flex; align-items: center; gap: 18px; margin: 0 32px; height: 0; overflow: visible; }
.tiw-przerywnik::before, .tiw-przerywnik::after { content: ""; flex: 1 1 auto; height: 1px; }
.tiw-przerywnik::before { background: linear-gradient( 90deg, transparent, rgba( 201, 162, 39, .45 ) ); }
.tiw-przerywnik::after  { background: linear-gradient( 90deg, rgba( 201, 162, 39, .45 ), transparent ); }
.tiw-przerywnik i {
	flex: 0 0 auto; width: 34px; height: 34px; color: var( --zloto );
	background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523c9a227%22%20stroke-width%3D%222.2%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2256.00%2C30.00%2040.16%2C34.21%2048.38%2C48.38%2034.21%2C40.16%2030.00%2C56.00%2025.79%2C40.16%2011.62%2C48.38%2019.84%2C34.21%204.00%2C30.00%2019.84%2C25.79%2011.62%2C11.62%2025.79%2C19.84%2030.00%2C4.00%2034.21%2C19.84%2048.38%2C11.62%2040.16%2C25.79%22%2F%3E%3Cpolygon%20points%3D%2242.01%2C34.97%2034.97%2C42.01%2025.03%2C42.01%2017.99%2C34.97%2017.99%2C25.03%2025.03%2C17.99%2034.97%2C17.99%2042.01%2C25.03%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523c9a227%22%20stroke-width%3D%222.2%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2256.00%2C30.00%2040.16%2C34.21%2048.38%2C48.38%2034.21%2C40.16%2030.00%2C56.00%2025.79%2C40.16%2011.62%2C48.38%2019.84%2C34.21%204.00%2C30.00%2019.84%2C25.79%2011.62%2C11.62%2025.79%2C19.84%2030.00%2C4.00%2034.21%2C19.84%2048.38%2C11.62%2040.16%2C25.79%22%2F%3E%3Cpolygon%20points%3D%2242.01%2C34.97%2034.97%2C42.01%2025.03%2C42.01%2017.99%2C34.97%2017.99%2C25.03%2025.03%2C17.99%2034.97%2C17.99%2042.01%2C25.03%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
	filter: drop-shadow( 0 0 10px rgba( 201, 162, 39, .55 ) );
}

/* 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. */
.tiw-strona .tiw-hero .tiw-okno.zd-okno,
.tiw-strona .tiw-hero .zd-okno.zd-okno,
.tiw-strona .tiw-hero .tiw-okno.tiw-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 239, 231, 214, .10 ), transparent 70% ),
		linear-gradient( 168deg, #16201d, #0b1512 );
}