/* Afryka Wschodnia — indygo oceanu, wapień koralowy, mosiądz okuć.
 *
 * PALETA MA ROZRÓŻNIAĆ. Sześć działów Afryki musi się różnić na pierwszy rzut
 * oka: granat Amazigh, ziemia bogolan Sahelu, zieleń z indygo Afryki
 * Zachodniej, żelazo i miedź Konga, pergament i złoto Rogu Afryki — a tu
 * głęboki błękit oceanu, jasny wapień miast z koralu i mosiądz z okuć drzwi
 * Stone Town. Czerwień Maasai wchodzi jako JEDEN akcent, nie jako barwa
 * działu, bo wybrzeże jest tu ważniejsze niż step.
 *
 * BOX-SIZING I OVERFLOW NA POCZĄTKU: motyw daje `content-box`, a
 * `overflow-x: hidden` zabija `loading="lazy"` — stąd `clip`
 * ([[taroscope-boxsizing-lazy-pulapki]]).
 */
.twc-strona,
.twc-strona *,
.twc-strona *::before,
.twc-strona *::after { box-sizing: border-box; }

/* ══ WYŁAMANIE Z UKŁADU MOTYWU ══════════════════════════════════════════
 *
 * BEZ TEGO BLOKU DZIAŁ MA 645 px SZEROKOŚCI. Motyw ustawia
 * `--wp--style--global--content-size: 645px` i przykłada to do każdego
 * bezpośredniego dziecka `.entry-content` regułą idącą stylem wbudowanym,
 * więc bijącą arkusz z `wp_enqueue_style` ([[dzial-scisniety-do-645px]]).
 *
 * TEST 18 PUNKTÓW TEGO NIE WYKRYWA — strona ściśnięta niczego nie przepełnia
 * i melduje zielono. Przy Rogu Afryki zgłosił się wyłącznie emblemat, bo jest
 * pozycjonowany bezwzględnie. Dlatego blok stoi tu od pierwszej wersji pliku,
 * a nie jest dokładany po pomiarze.
 */
body:has( .twc-strona ) .wp-site-blocks > header,
body:has( .twc-strona ) header.wp-block-template-part,
body:has( .twc-strona ) .wp-site-blocks > footer,
body:has( .twc-strona ) footer.wp-block-template-part,
body:has( .twc-strona ) .wp-block-post-title { display: none !important; }

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

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

body:has( .twc-strona ) { background: #0b1620; }

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

.twc-strona button { font-family: inherit; }

.twc-strona {
	--ocean:      #0b1620;
	--ocean-2:    #122633;
	--indygo:     #1c4a63;
	--indygo-j:   #2f7d8c;
	--koral:      #e4dcc8;
	--mosiadz:    #b98a3e;
	--mosiadz-j:  #ddb267;
	--czerwien:   #9c3327;
	--tekst:      #e9e2d2;
	--tekst-cichy:#a9b6bd;
	--obwodka:    rgba( 221, 178, 103, .24 );

	/* POZYCJA WZGLĘDNA OBOWIĄZKOWA: `Tarot_Emblemat` jest pozycjonowany
	   bezwzględnie i bez zaczepu na kontenerze wychodzi poza okno, a
	   `overflow-x: clip` go nie przycina, bo blok zawierający leży na zewnątrz. */
	position: relative;
	max-width: 1520px;
	margin: 0 auto;
	padding: 0 24px 96px;
	overflow-x: clip;
	color: var( --tekst );
	background: var( --ocean );
	font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 300;
	line-height: 1.62;
}

/* ── ścieżka ─────────────────────────────────────────────────────────── */
.twc-sciezka {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	padding: 22px 0 8px; font-size: 13px; letter-spacing: .09em;
	text-transform: uppercase; color: var( --tekst-cichy );
}
.twc-sciezka i { font-style: normal; opacity: .5; }
.twc-sciezka b { color: var( --mosiadz-j ); font-weight: 500; }
.twc-poziom {
	flex: 1 1 100%; margin: 6px 0 0; font-size: 12px;
	letter-spacing: .04em; text-transform: none; opacity: .72;
}

/* ── hero ────────────────────────────────────────────────────────────── */
.twc-hero {
	position: relative; margin: 8px 0 40px; padding: 72px 56px 66px;
	border: 1px solid var( --obwodka ); border-radius: 3px;
	background:
		radial-gradient( 120% 140% at 78% 0%, rgba( 47, 125, 140, .22 ), transparent 64% ),
		linear-gradient( 160deg, var( --ocean-2 ), var( --ocean ) 74% );
}
/* TŁO JAKO WARSTWA `background`, NIE `::before` — pseudoelementy są zajęte
   przez zdobienia.css (przerywniki, ozdobniki). Naukę przekazała sesja
   Grafika po tym, jak rozbiła tak Mezopotamię. */
.twc-hero.twc-sekcja--tlo,
.twc-sekcja--tlo {
	background-image:
		linear-gradient( 90deg, rgba( 11, 22, 32, .94 ) 0%, rgba( 11, 22, 32, .70 ) 36%, rgba( 11, 22, 32, .20 ) 66%, transparent 100% ), linear-gradient( 180deg, rgba( 11, 22, 32, .10 ) 0%, rgba( 11, 22, 32, .34 ) 100% ),
		var( --tlo );
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}
.twc-hero__tresc { max-width: 64ch; }
.twc-nad {
	margin: 0 0 14px; font-size: 12px; letter-spacing: .28em;
	text-transform: uppercase; color: var( --mosiadz );
}
.twc-tytul {
	margin: 0 0 20px; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp( 42px, 5.6vw, 76px ); font-weight: 400; line-height: 1.04;
	letter-spacing: -.012em; color: var( --koral );
	text-shadow: 0 0 34px rgba( 47, 125, 140, .28 );
}
.twc-tytul small {
	display: block; margin-top: 14px; font-family: 'Jost', sans-serif;
	font-size: clamp( 15px, 1.35vw, 19px ); font-weight: 300;
	letter-spacing: .01em; color: var( --tekst-cichy );
}
.twc-lead { margin: 0; font-size: 18px; color: #dcd4c2; }

/* ── sekcja ──────────────────────────────────────────────────────────── */
.twc-sekcja { position: relative; margin: 0 0 58px; padding: 46px 0 10px; }
.twc-sekcja--tlo { padding: 46px 40px 24px; border-radius: 3px; }
.twc-sekcja--scisla { padding-top: 18px; }
.twc-sekcja__nad {
	margin: 0 0 10px; font-size: 12px; letter-spacing: .24em;
	text-transform: uppercase; color: var( --mosiadz );
}
.twc-sekcja__tytul {
	margin: 0 0 14px; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp( 30px, 3.4vw, 46px ); font-weight: 400; line-height: 1.1;
	color: var( --koral ); text-shadow: 0 0 30px rgba( 47, 125, 140, .24 );
}
.twc-sekcja__lead { max-width: 78ch; margin: 0 0 30px; color: #cfd8dc; }
.twc-uwaga {
	max-width: 78ch; margin: 18px 0 0; padding-left: 14px;
	border-left: 2px solid var( --obwodka );
	font-size: 14px; color: var( --tekst-cichy );
}

/* ── przerywnik i ozdobniki ──────────────────────────────────────────── */
.twc-przerywnik {
	display: block; width: 100%; height: 46px; margin: 6px 0 18px;
	color: var( --indygo-j ); opacity: .6;
}
.twc-znak { display: block; width: 100%; height: auto; color: var( --mosiadz ); }

/* ── liczby ──────────────────────────────────────────────────────────── */
.twc-liczby {
	display: grid; gap: 14px;
	grid-template-columns: repeat( auto-fit, minmax( 210px, 1fr ) );
}
/* SIATKA, NIE TOR — uzasadnienie wymagane dyrektywą „zawsze slider":
   pięć kart z jedną liczbą każda ma być objęte jednym spojrzeniem i na tym
   polega ich rola. Tor kazałby przewijać rzecz przeznaczoną do porównania. */
.twc-karta {
	padding: 22px 20px; border: 1px solid var( --obwodka ); border-radius: 3px;
	background: linear-gradient( 155deg, rgba( 18, 38, 51, .94 ), rgba( 11, 22, 32, .94 ) );
	box-shadow: 0 0 24px rgba( 47, 125, 140, .1 );
}
.twc-karta b {
	display: block; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 42px; font-weight: 500; line-height: 1; color: var( --mosiadz-j );
}
.twc-karta span {
	display: block; margin: 6px 0 10px; font-size: 13px;
	letter-spacing: .06em; text-transform: uppercase; color: var( --tekst-cichy );
}
.twc-karta p { margin: 0; font-size: 14px; color: #c8d2d7; }

/* ── kafle ───────────────────────────────────────────────────────────── */
.twc-ludy, .twc-ngai, .twc-enkai, .twc-balubaale, .twc-uganga,
.twc-zanzibar, .twc-pamiec, .twc-echa, .twc-nie {
	display: grid; gap: 16px;
	grid-template-columns: repeat( auto-fit, minmax( 264px, 1fr ) );
	/* Tor w gridzie puchnie bez tych trzech ([[css-slider-w-gridzie-contain]]) */
	contain: inline-size;
}
.twc-ludy > *, .twc-ngai > *, .twc-enkai > *, .twc-balubaale > *, .twc-uganga > *,
.twc-zanzibar > *, .twc-pamiec > *, .twc-echa > *, .twc-nie > * { min-width: 0; }

.twc-kafel {
	position: relative; padding: 22px 20px 20px; cursor: pointer;
	border: 1px solid var( --obwodka ); border-radius: 3px;
	background: linear-gradient( 155deg, rgba( 18, 38, 51, .95 ), rgba( 11, 22, 32, .95 ) );
	box-shadow: 0 0 22px rgba( 47, 125, 140, .09 );
	transition: border-color .22s, box-shadow .22s, transform .22s;
}
.twc-kafel:hover, .twc-kafel:focus-visible {
	border-color: rgba( 221, 178, 103, .5 );
	box-shadow: 0 0 34px rgba( 47, 125, 140, .26 );
	transform: translateY( -2px );
	outline: none;
}
.twc-kafel:focus-visible { outline: 2px solid var( --mosiadz-j ); outline-offset: 3px; }
.twc-kafel h3 {
	margin: 0 0 8px; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 25px; font-weight: 500; line-height: 1.16; color: var( --koral );
}
.twc-kafel p { margin: 0; font-size: 14.5px; color: #c8d2d7; }
/* NADTYTUŁ TO `span`, NIE `p` — w torze widać tylko PIERWSZY akapit kafla
   ([[taroscope-nadtytul-zjada-opis]]). */
.twc-kafel__nad {
	display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
	font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
	color: var( --mosiadz );
}
.twc-kafel__nad i { font-style: normal; opacity: .8; }
.twc-zd-wiecej {
	display: inline-block; margin-top: 14px; font-size: 12px;
	letter-spacing: .14em; text-transform: uppercase; color: var( --mosiadz-j );
}
.twc-foto { margin: 0 0 16px; }
.twc-foto img { display: block; width: 100%; height: auto; border-radius: 2px; }
.twc-skad {
	margin: 16px 0 0; padding-left: 14px; border-left: 2px solid var( --obwodka );
	font-size: 13.5px; color: var( --tekst-cichy );
}
.twc-skad b { display: block; margin-bottom: 3px; color: var( --mosiadz ); font-weight: 500; }

/* ── słup warstw ─────────────────────────────────────────────────────── */
.twc-slup { max-width: 520px; margin: 0 auto 26px; }
.twc-slup__lista { list-style: none; margin: 0; padding: 0; }
.twc-slup__warstwa {
	display: flex; align-items: center; gap: 16px; cursor: pointer;
	padding: 15px 18px; margin: 0;
	border: 1px solid var( --obwodka ); border-bottom: none;
	background: linear-gradient( 100deg, rgba( 18, 38, 51, .9 ), rgba( 11, 22, 32, .9 ) );
	transition: background .2s, border-color .2s, transform .2s;
}
.twc-slup__warstwa:last-child { border-bottom: 1px solid var( --obwodka ); }
.twc-slup__warstwa:first-child { border-radius: 3px 3px 0 0; }
.twc-slup__warstwa:last-child { border-radius: 0 0 3px 3px; }
.twc-slup__warstwa:hover { background: linear-gradient( 100deg, rgba( 28, 74, 99, .8 ), rgba( 18, 38, 51, .9 ) ); }
.twc-slup__warstwa.jest {
	background: linear-gradient( 100deg, rgba( 28, 74, 99, .95 ), rgba( 18, 38, 51, .95 ) );
	border-color: var( --mosiadz-j );
	transform: translateX( 6px );
}
.twc-slup__warstwa:focus-visible { outline: 2px solid var( --mosiadz-j ); outline-offset: 2px; }
.twc-slup__nr {
	flex: 0 0 34px; height: 34px; display: grid; place-items: center;
	border: 1px solid var( --obwodka ); border-radius: 50%;
	font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px;
	color: var( --mosiadz-j );
}
.twc-slup__tresc { display: flex; flex-direction: column; min-width: 0; }
.twc-slup__tresc b {
	font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px;
	font-weight: 500; color: var( --koral );
}
.twc-slup__tresc i {
	font-style: normal; font-size: 12px; letter-spacing: .1em;
	text-transform: uppercase; color: var( --tekst-cichy );
}
.twc-slup__opis {
	max-width: 74ch; margin: 0 auto; padding: 24px 24px 20px;
	border: 1px solid var( --obwodka ); border-radius: 3px;
	background: linear-gradient( 155deg, rgba( 18, 38, 51, .92 ), rgba( 11, 22, 32, .92 ) );
}
.twc-slup__opis h3 {
	margin: 4px 0 10px; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 30px; font-weight: 500; color: var( --koral );
}
.twc-slup__kiedy {
	margin: 0; font-size: 12px; letter-spacing: .18em;
	text-transform: uppercase; color: var( --mosiadz );
}
.twc-slup__krotko { margin: 0 0 16px; color: var( --indygo-j ); font-size: 15.5px; }
.twc-slup__opis p { margin: 0 0 12px; color: #c8d2d7; }
.twc-slup__opis p:last-child { margin-bottom: 0; }

/* TRZY RUBRYKI — to jest teza działu w formie układu, nie tabelka.
   Dlatego stoją nad opisem, a nie pod nim: czytelnik ma zobaczyć najpierw,
   CO warstwa dołożyła i gdzie, a dopiero potem przeczytać dlaczego. */
.twc-rubryki {
	display: grid; gap: 10px; margin: 0 0 18px;
	grid-template-columns: repeat( auto-fit, minmax( 170px, 1fr ) );
}
.twc-rubryka {
	padding: 12px 14px; border-left: 2px solid var( --mosiadz );
	background: rgba( 28, 74, 99, .28 );
}
.twc-rubryka b {
	display: block; margin-bottom: 4px; font-size: 11px; font-weight: 500;
	letter-spacing: .16em; text-transform: uppercase; color: var( --mosiadz-j );
}
.twc-rubryka span { font-size: 14px; color: #d6ded9; }

/* ── wąsko ───────────────────────────────────────────────────────────── */
@media ( max-width: 720px ) {
	.twc-strona { padding: 0 14px 64px; }
	.twc-hero { padding: 46px 22px 42px; }
	.twc-sekcja--tlo { padding: 34px 16px 18px; }
	.twc-slup__tresc b { font-size: 19px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.twc-kafel, .twc-slup__warstwa { transition: none; }
	.twc-kafel:hover, .twc-kafel:focus-visible { transform: none; }
	.twc-slup__warstwa.jest { transform: none; }
}


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


/* ===== TLO CALEJ STRONY 2026-09-13 =====
   Ten sam wzorzec, co Celtowie / Hiszpania / Rumunia: obraz pod cala
   strona, nieruchomy przy przewijaniu, przyciemniony do barwy dzialu.
   Dopoki pliku nie ma, maluje sie sam kolor - nic sie nie psuje. */
body:has(.twc-strona){
	background-color: #0b1620;
	background-image: linear-gradient( #0b1620bb, #0b1620dd ), url( '/wp-content/uploads/tarot-kompat/afryka/wschodnia/gfx/tlo-calosc.webp' );
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}