/* Afryka Południowa — granit Matobo, ochra malowideł, czerń i biel paciorków.
 *
 * PALETA MA ROZRÓŻNIAĆ. Siedem działów Afryki musi różnić się na pierwszy
 * rzut oka: granat Amazigh, ziemia bogolan Sahelu, zieleń z indygo Afryki
 * Zachodniej, żelazo i miedź Konga, pergamin i złoto Rogu Afryki, indygo
 * oceanu Afryki Wschodniej — a tu chłodny granit wzgórz, ochra ze skały
 * i ostry kontrast czerni z bielą, wzięty z paciorków nguni.
 *
 * BOX-SIZING I OVERFLOW NA POCZĄTKU ([[taroscope-boxsizing-lazy-pulapki]]).
 */
.tzp-strona,
.tzp-strona *,
.tzp-strona *::before,
.tzp-strona *::after { box-sizing: border-box; }

/* ══ WYŁAMANIE Z UKŁADU MOTYWU ══════════════════════════════════════════
 * Bez tego bloku dział ma 645 px szerokości, bo motyw przykłada
 * `--wp--style--global--content-size` do każdego dziecka `.entry-content`
 * regułą idącą stylem wbudowanym ([[dzial-scisniety-do-645px]]).
 * TEST 18 PUNKTÓW TEGO NIE WYKRYWA — ściśnięta strona niczego nie przepełnia.
 */
body:has( .tzp-strona ) .wp-site-blocks > header,
body:has( .tzp-strona ) header.wp-block-template-part,
body:has( .tzp-strona ) .wp-site-blocks > footer,
body:has( .tzp-strona ) footer.wp-block-template-part,
body:has( .tzp-strona ) .wp-block-post-title { display: none !important; }

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

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

body:has( .tzp-strona ) { background: #14161a; }

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

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

.tzp-strona {
	--granit:     #14161a;
	--granit-2:   #21252b;
	--granit-3:   #2c323a;
	--ochra:      #a8652f;
	--ochra-j:    #d2914f;
	--kosc:       #ece6da;
	--trawa:      #5c6f4a;
	--tekst:      #e4ded2;
	--tekst-cichy:#a7a79e;
	--obwodka:    rgba( 210, 145, 79, .24 );

	/* `position: relative` OBOWIĄZKOWO — emblemat jest pozycjonowany
	   bezwzględnie i bez zaczepu wychodzi poza okno. */
	position: relative;
	max-width: 1520px;
	margin: 0 auto;
	padding: 0 24px 96px;
	overflow-x: clip;
	color: var( --tekst );
	background: var( --granit );
	font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 300;
	line-height: 1.62;
}

/* ── ścieżka ─────────────────────────────────────────────────────────── */
.tzp-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 );
}
.tzp-sciezka i { font-style: normal; opacity: .5; }
.tzp-sciezka b { color: var( --ochra-j ); font-weight: 500; }
.tzp-poziom {
	flex: 1 1 100%; margin: 6px 0 0; font-size: 12px;
	letter-spacing: .04em; text-transform: none; opacity: .72;
}

/* ── hero ────────────────────────────────────────────────────────────── */
.tzp-hero {
	position: relative; margin: 8px 0 40px; padding: 72px 56px 66px;
	border: 1px solid var( --obwodka ); border-radius: 3px;
	background:
		radial-gradient( 110% 130% at 12% 0%, rgba( 168, 101, 47, .2 ), transparent 62% ),
		linear-gradient( 160deg, var( --granit-2 ), var( --granit ) 74% );
}
/* TŁO WARSTWĄ `background`, NIE `::before` — pseudoelementy zajęte przez
   zdobienia.css (ozdobniki, przerywniki). */
.tzp-hero.tzp-sekcja--tlo,
.tzp-sekcja--tlo {
	background-image:
		linear-gradient( 90deg, rgba( 20, 22, 26, .94 ) 0%, rgba( 20, 22, 26, .70 ) 36%, rgba( 20, 22, 26, .20 ) 66%, transparent 100% ), linear-gradient( 180deg, rgba( 20, 22, 26, .10 ) 0%, rgba( 20, 22, 26, .34 ) 100% ),
		var( --tlo );
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}
.tzp-hero__tresc { max-width: 64ch; }
.tzp-nad {
	margin: 0 0 14px; font-size: 12px; letter-spacing: .28em;
	text-transform: uppercase; color: var( --ochra );
}
.tzp-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( --kosc );
	text-shadow: 0 0 34px rgba( 210, 145, 79, .2 );
}
.tzp-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 );
}
.tzp-lead { margin: 0; font-size: 18px; color: #d9d2c5; }

/* ── sekcja ──────────────────────────────────────────────────────────── */
.tzp-sekcja { position: relative; margin: 0 0 58px; padding: 46px 0 10px; }
.tzp-sekcja--tlo { padding: 46px 40px 24px; border-radius: 3px; }
.tzp-sekcja--scisla { padding-top: 18px; }
.tzp-sekcja__nad {
	margin: 0 0 10px; font-size: 12px; letter-spacing: .24em;
	text-transform: uppercase; color: var( --ochra );
}
.tzp-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( --kosc ); text-shadow: 0 0 30px rgba( 210, 145, 79, .18 );
}
.tzp-sekcja__lead { max-width: 78ch; margin: 0 0 30px; color: #cdc7ba; }
.tzp-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 ──────────────────────────────────────────── */
.tzp-przerywnik {
	display: block; width: 100%; height: 44px; margin: 6px 0 18px;
	color: var( --ochra ); opacity: .55;
}
.tzp-znak { display: block; width: 100%; height: auto; color: var( --ochra ); }

/* ── liczby ──────────────────────────────────────────────────────────── */
.tzp-liczby {
	display: grid; gap: 14px;
	grid-template-columns: repeat( auto-fit, minmax( 210px, 1fr ) );
}
/* SIATKA, NIE TOR — pięć liczb ma być objęte jednym spojrzeniem;
   tor kazałby przewijać rzecz przeznaczoną do porównania. */
.tzp-karta {
	padding: 22px 20px; border: 1px solid var( --obwodka ); border-radius: 3px;
	background: linear-gradient( 155deg, rgba( 44, 50, 58, .9 ), rgba( 20, 22, 26, .94 ) );
	box-shadow: 0 0 24px rgba( 168, 101, 47, .08 );
}
.tzp-karta b {
	display: block; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 38px; font-weight: 500; line-height: 1; color: var( --ochra-j );
}
.tzp-karta span {
	display: block; margin: 6px 0 10px; font-size: 13px;
	letter-spacing: .06em; text-transform: uppercase; color: var( --tekst-cichy );
}
.tzp-karta p { margin: 0; font-size: 14px; color: #ccc6b9; }

/* ── kafle ───────────────────────────────────────────────────────────── */
.tzp-ludy, .tzp-unk, .tzp-xhosa, .tzp-mwari, .tzp-san,
.tzp-wrozby, .tzp-pamiec, .tzp-echa, .tzp-nie {
	display: grid; gap: 16px;
	grid-template-columns: repeat( auto-fit, minmax( 264px, 1fr ) );
	contain: inline-size;   /* tor w gridzie puchnie bez tego */
}
.tzp-ludy > *, .tzp-unk > *, .tzp-xhosa > *, .tzp-mwari > *, .tzp-san > *,
.tzp-wrozby > *, .tzp-pamiec > *, .tzp-echa > *, .tzp-nie > * { min-width: 0; }

.tzp-kafel {
	position: relative; padding: 22px 20px 20px; cursor: pointer;
	border: 1px solid var( --obwodka ); border-radius: 3px;
	background: linear-gradient( 155deg, rgba( 44, 50, 58, .92 ), rgba( 20, 22, 26, .95 ) );
	box-shadow: 0 0 22px rgba( 168, 101, 47, .07 );
	transition: border-color .22s, box-shadow .22s, transform .22s;
}
.tzp-kafel:hover, .tzp-kafel:focus-visible {
	border-color: rgba( 210, 145, 79, .5 );
	box-shadow: 0 0 34px rgba( 210, 145, 79, .2 );
	transform: translateY( -2px );
	outline: none;
}
.tzp-kafel:focus-visible { outline: 2px solid var( --ochra-j ); outline-offset: 3px; }
.tzp-kafel h3 {
	margin: 0 0 8px; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 25px; font-weight: 500; line-height: 1.16; color: var( --kosc );
}
.tzp-kafel p { margin: 0; font-size: 14.5px; color: #ccc6b9; }
/* NADTYTUŁ TO `span`, NIE `p` ([[taroscope-nadtytul-zjada-opis]]) */
.tzp-kafel__nad {
	display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
	font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
	color: var( --ochra );
}
.tzp-kafel__nad i { font-style: normal; opacity: .8; }
.tzp-zd-wiecej {
	display: inline-block; margin-top: 14px; font-size: 12px;
	letter-spacing: .14em; text-transform: uppercase; color: var( --ochra-j );
}
.tzp-foto { margin: 0 0 16px; }
.tzp-foto img { display: block; width: 100%; height: auto; border-radius: 2px; }
.tzp-skad {
	margin: 16px 0 0; padding-left: 14px; border-left: 2px solid var( --obwodka );
	font-size: 13.5px; color: var( --tekst-cichy );
}
.tzp-skad b { display: block; margin-bottom: 3px; color: var( --ochra ); font-weight: 500; }

/* ── dwa tory ────────────────────────────────────────────────────────── */
.tzp-tory { margin: 0 auto 26px; }
/* SVG W GRIDZIE KURCZY SIĘ DO 300 px bez jawnej szerokości owijki
   ([[css-svg-w-gridzie-szerokosc]]) */
.tzp-tory__svg { display: block; width: 100%; height: auto; }

/* POLE ROZSTĘPU jest tu treścią, nie tłem — stąd wyraźne wypełnienie
   i stąd ochra, czyli barwa, którą w tym dziale ma wszystko ważne. */
.tzp-tory__pole { fill: rgba( 168, 101, 47, .16 ); stroke: none; }
.tzp-tory__linia { fill: none; stroke: var( --ochra-j ); stroke-width: 1.6; }
.tzp-tory__linia--dol { stroke: var( --tekst-cichy ); stroke-dasharray: 5 4; }
.tzp-tory__kropka { fill: var( --ochra-j ); }
.tzp-tory__kropka--dol { fill: var( --tekst-cichy ); }
.tzp-tory__pole-klik { fill: transparent; }
.tzp-tory__wezel { cursor: pointer; }
.tzp-tory__wezel:hover .tzp-tory__pole-klik { fill: rgba( 236, 230, 218, .05 ); }
.tzp-tory__wezel.jest .tzp-tory__pole-klik { fill: rgba( 236, 230, 218, .09 ); }
.tzp-tory__wezel.jest .tzp-tory__kropka { r: 8; }
.tzp-tory__wezel:focus-visible { outline: 2px solid var( --ochra-j ); outline-offset: 2px; }
.tzp-tory__rok {
	fill: var( --kosc ); font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 20px;
}
.tzp-tory__co {
	fill: var( --tekst-cichy ); font-family: 'Jost', sans-serif;
	font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.tzp-tory__etyk {
	fill: var( --ochra ); font-family: 'Jost', sans-serif; font-size: 13px;
	letter-spacing: .1em; text-transform: uppercase;
}
.tzp-tory__etyk--dol { fill: var( --tekst-cichy ); }

.tzp-tory__opis {
	max-width: 82ch; margin: 0 auto; padding: 24px 24px 20px;
	border: 1px solid var( --obwodka ); border-radius: 3px;
	background: linear-gradient( 155deg, rgba( 44, 50, 58, .9 ), rgba( 20, 22, 26, .94 ) );
}
.tzp-tory__opis h3 {
	margin: 4px 0 16px; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 28px; font-weight: 500; color: var( --kosc );
}
.tzp-tory__kiedy {
	margin: 0; font-size: 12px; letter-spacing: .18em;
	text-transform: uppercase; color: var( --ochra );
}
.tzp-tory__opis p { margin: 0 0 12px; color: #ccc6b9; }
.tzp-tory__opis p:last-child { margin-bottom: 0; }
.tzp-tory__roznica {
	margin: 0 0 16px !important; padding-left: 14px;
	border-left: 2px solid var( --ochra );
	font-size: 14.5px; color: var( --ochra-j ) !important;
}

/* DWA POLA OBOK SIEBIE — dowód i wersja urzędowa mają stać RÓWNOLEGLE,
   nie jedno pod drugim w akapicie. Układ jest tu argumentem: czytelnik ma
   zobaczyć, że w tym samym roku istniały obie odpowiedzi naraz. */
.tzp-para {
	display: grid; gap: 12px; margin: 0 0 18px;
	grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) );
}
.tzp-para__pole { padding: 14px 16px; border-left: 3px solid; }
.tzp-para__pole--dowod  { border-color: var( --ochra-j ); background: rgba( 168, 101, 47, .12 ); }
.tzp-para__pole--wersja { border-color: var( --tekst-cichy ); background: rgba( 167, 167, 158, .08 ); }
.tzp-para__pole b {
	display: block; margin-bottom: 5px; font-size: 11px; font-weight: 500;
	letter-spacing: .16em; text-transform: uppercase; color: var( --ochra-j );
}
.tzp-para__pole--wersja b { color: var( --tekst-cichy ); }
.tzp-para__pole span { font-size: 14.5px; color: #d9d2c5; }

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

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


/* ===== MIT W KAFLU 2026-09-12 ===== */
.tzp-kafel__nad--mit { color: #c4826e; letter-spacing: .16em; }
.tzp-kafel__mit { color: var( --tekst-slaby ); font-style: italic; }
.tzp-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(.tzp-strona){
	background-color: #14161a;
	background-image: linear-gradient( #14161abb, #14161add ), url( '/wp-content/uploads/tarot-kompat/afryka/poludniowa/gfx/tlo-calosc.webp' );
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}