/* Madagaskar — laterytowa czerwień wyżyny, zieleń ryżowiska, biel lamby.
 *
 * PALETA MA ROZRÓŻNIAĆ, a to już ósmy dział Afryki: granat Amazigh, ziemia
 * bogolan Sahelu, zieleń z indygo Zachodniej, żelazo i miedź Konga, pergamin
 * i złoto Rogu, indygo oceanu Wschodniej, granit i ochra Południowej — a tu
 * czerwień lateryt, w której wyżyna Merina jest dosłownie czerwona, zieleń
 * tarasu ryżowego i biel jedwabnej lamby jako akcent.
 *
 * BOX-SIZING I OVERFLOW NA POCZĄTKU ([[taroscope-boxsizing-lazy-pulapki]]).
 */
.tmg-strona,
.tmg-strona *,
.tmg-strona *::before,
.tmg-strona *::after { box-sizing: border-box; }

/* ══ WYŁAMANIE Z UKŁADU MOTYWU ══════════════════════════════════════════
 * Bez tego dział ma 645 px ([[dzial-scisniety-do-645px]]).
 * TEST 18 PUNKTÓW TEGO NIE WYKRYWA — ściśnięta strona niczego nie przepełnia.
 */
body:has( .tmg-strona ) .wp-site-blocks > header,
body:has( .tmg-strona ) header.wp-block-template-part,
body:has( .tmg-strona ) .wp-site-blocks > footer,
body:has( .tmg-strona ) footer.wp-block-template-part,
body:has( .tmg-strona ) .wp-block-post-title { display: none !important; }

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

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

body:has( .tmg-strona ) { background: #1a1210; }

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

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

.tmg-strona {
	--ziemia:     #1a1210;
	--ziemia-2:   #2b1c17;
	--lateryt:    #b4442e;
	--lateryt-j:  #dd7b5e;
	--ryz:        #6f8a52;
	--ryz-j:      #9cb87c;
	--lamba:      #f0e7da;
	--tekst:      #e5d9cc;
	--tekst-cichy:#b3a496;
	--obwodka:    rgba( 221, 123, 94, .26 );

	/* `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( --ziemia );
	font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 300;
	line-height: 1.62;
}

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

/* ── hero ────────────────────────────────────────────────────────────── */
.tmg-hero {
	position: relative; margin: 8px 0 40px; padding: 72px 56px 66px;
	border: 1px solid var( --obwodka ); border-radius: 3px;
	background:
		radial-gradient( 115% 135% at 22% 0%, rgba( 180, 68, 46, .24 ), transparent 62% ),
		linear-gradient( 160deg, var( --ziemia-2 ), var( --ziemia ) 74% );
}
/* TŁO WARSTWĄ `background`, NIE `::before` — pseudoelementy zajęte przez
   zdobienia.css (ozdobniki, przerywniki). */
.tmg-hero.tmg-sekcja--tlo,
.tmg-sekcja--tlo {
	background-image:
		linear-gradient( 90deg, rgba( 26, 18, 16, .94 ) 0%, rgba( 26, 18, 16, .70 ) 36%, rgba( 26, 18, 16, .20 ) 66%, transparent 100% ), linear-gradient( 180deg, rgba( 26, 18, 16, .10 ) 0%, rgba( 26, 18, 16, .34 ) 100% ),
		var( --tlo );
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}
/* CZYTELNOŚĆ KAFLA NAD ZDJĘCIEM — od pierwszej wersji, nie po pomiarze.
   Krycie 0,92 i podniesione barwy poboczne; przy 0,88 tekst poboczny
   schodził w innych działach poniżej 4,5 : 1 nad bielą. */
.tmg-sekcja--tlo .tmg-kafel {
	background: linear-gradient( 155deg, rgba( 43, 28, 23, .93 ), rgba( 26, 18, 16, .95 ) );
	backdrop-filter: blur( 2px );
	-webkit-backdrop-filter: blur( 2px );
	border-color: rgba( 255, 255, 255, .16 );
}
.tmg-sekcja--tlo { --tekst-cichy: #c6b9ac; }

.tmg-hero__tresc { max-width: 64ch; }
.tmg-nad {
	margin: 0 0 14px; font-size: 12px; letter-spacing: .28em;
	text-transform: uppercase; color: var( --lateryt-j );
}
.tmg-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( --lamba );
	text-shadow: 0 0 34px rgba( 221, 123, 94, .24 );
}
.tmg-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 );
}
.tmg-lead { margin: 0; font-size: 18px; color: #ddd0c2; }

/* ── sekcja ──────────────────────────────────────────────────────────── */
.tmg-sekcja { position: relative; margin: 0 0 58px; padding: 46px 0 10px; }
.tmg-sekcja--tlo { padding: 46px 40px 24px; border-radius: 3px; }
.tmg-sekcja--scisla { padding-top: 18px; }
.tmg-sekcja__nad {
	margin: 0 0 10px; font-size: 12px; letter-spacing: .24em;
	text-transform: uppercase; color: var( --lateryt-j );
}
.tmg-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( --lamba ); text-shadow: 0 0 30px rgba( 221, 123, 94, .2 );
}
.tmg-sekcja__lead { max-width: 78ch; margin: 0 0 30px; color: #d2c5b7; }
.tmg-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 ──────────────────────────────────────────── */
.tmg-przerywnik {
	display: block; width: 100%; height: 44px; margin: 6px 0 18px;
	color: var( --ryz ); opacity: .6;
}
.tmg-znak { display: block; width: 100%; height: auto; color: var( --lateryt ); }

/* ── liczby ──────────────────────────────────────────────────────────── */
.tmg-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. */
.tmg-karta {
	padding: 22px 20px; border: 1px solid var( --obwodka ); border-radius: 3px;
	background: linear-gradient( 155deg, rgba( 43, 28, 23, .92 ), rgba( 26, 18, 16, .94 ) );
	box-shadow: 0 0 24px rgba( 180, 68, 46, .1 );
}
.tmg-karta b {
	display: block; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 38px; font-weight: 500; line-height: 1; color: var( --lateryt-j );
}
.tmg-karta span {
	display: block; margin: 6px 0 10px; font-size: 13px;
	letter-spacing: .06em; text-transform: uppercase; color: var( --tekst-cichy );
}
.tmg-karta p { margin: 0; font-size: 14px; color: #d0c3b5; }

/* ── kafle ───────────────────────────────────────────────────────────── */
.tmg-ludy, .tmg-razana, .tmg-sikidy, .tmg-fady, .tmg-ody,
.tmg-przeprawa, .tmg-pamiec, .tmg-echa, .tmg-nie {
	display: grid; gap: 16px;
	grid-template-columns: repeat( auto-fit, minmax( 264px, 1fr ) );
	contain: inline-size;   /* tor w gridzie puchnie bez tego */
}
.tmg-ludy > *, .tmg-razana > *, .tmg-sikidy > *, .tmg-fady > *, .tmg-ody > *,
.tmg-przeprawa > *, .tmg-pamiec > *, .tmg-echa > *, .tmg-nie > * { min-width: 0; }

.tmg-kafel {
	position: relative; padding: 22px 20px 20px; cursor: pointer;
	border: 1px solid var( --obwodka ); border-radius: 3px;
	background: linear-gradient( 155deg, rgba( 43, 28, 23, .93 ), rgba( 26, 18, 16, .95 ) );
	box-shadow: 0 0 22px rgba( 180, 68, 46, .08 );
	transition: border-color .22s, box-shadow .22s, transform .22s;
}
.tmg-kafel:hover, .tmg-kafel:focus-visible {
	border-color: rgba( 221, 123, 94, .5 );
	box-shadow: 0 0 34px rgba( 221, 123, 94, .22 );
	transform: translateY( -2px );
	outline: none;
}
.tmg-kafel:focus-visible { outline: 2px solid var( --lateryt-j ); outline-offset: 3px; }
.tmg-kafel h3 {
	margin: 0 0 8px; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 25px; font-weight: 500; line-height: 1.16; color: var( --lamba );
}
.tmg-kafel p { margin: 0; font-size: 14.5px; color: #d0c3b5; }
/* NADTYTUŁ TO `span` ([[taroscope-nadtytul-zjada-opis]]) */
.tmg-kafel__nad {
	display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
	font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
	color: var( --lateryt-j );
}
.tmg-kafel__nad i { font-style: normal; opacity: .8; }
.tmg-zd-wiecej {
	display: inline-block; margin-top: 14px; font-size: 12px;
	letter-spacing: .14em; text-transform: uppercase; color: var( --lateryt-j );
}
.tmg-foto { margin: 0 0 16px; }
.tmg-foto img { display: block; width: 100%; height: auto; border-radius: 2px; }
.tmg-skad {
	margin: 16px 0 0; padding-left: 14px; border-left: 2px solid var( --obwodka );
	font-size: 13.5px; color: var( --tekst-cichy );
}
.tmg-skad b { display: block; margin-bottom: 3px; color: var( --lateryt-j ); font-weight: 500; }

/* ── rzut domu ───────────────────────────────────────────────────────── */
.tmg-dom { max-width: 560px; margin: 0 auto 26px; }
/* SVG W GRIDZIE KURCZY SIĘ DO 300 px bez jawnej szerokości owijki
   ([[css-svg-w-gridzie-szerokosc]]) */
.tmg-dom__svg { display: block; width: 100%; height: auto; }
.tmg-dom__obrys { fill: none; stroke: var( --lateryt ); stroke-width: 2; }
.tmg-dom__krata { stroke: var( --obwodka ); stroke-width: 1; }
.tmg-dom__pole {
	fill: rgba( 43, 28, 23, .9 ); stroke: rgba( 221, 123, 94, .3 ); stroke-width: 1;
	transition: fill .2s, stroke .2s;
}
.tmg-dom__miejsce { cursor: pointer; }
.tmg-dom__miejsce:hover .tmg-dom__pole { fill: rgba( 111, 138, 82, .4 ); }
.tmg-dom__miejsce.jest .tmg-dom__pole {
	fill: rgba( 180, 68, 46, .62 ); stroke: var( --lateryt-j ); stroke-width: 2;
}
.tmg-dom__miejsce:focus-visible { outline: 2px solid var( --lateryt-j ); outline-offset: 2px; }
.tmg-dom__etyk {
	fill: var( --lamba ); font-family: 'Jost', sans-serif; font-size: 12px;
	dominant-baseline: middle; letter-spacing: .02em;
}
.tmg-dom__strona {
	fill: var( --ryz-j ); font-family: 'Jost', sans-serif; font-size: 14px;
	letter-spacing: .18em; text-transform: uppercase; dominant-baseline: middle;
}

.tmg-dom__opis {
	max-width: 74ch; margin: 0 auto; padding: 24px 24px 20px;
	border: 1px solid var( --obwodka ); border-radius: 3px;
	background: linear-gradient( 155deg, rgba( 43, 28, 23, .92 ), rgba( 26, 18, 16, .94 ) );
}
.tmg-dom__opis h3 {
	margin: 4px 0 10px; font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 30px; font-weight: 500; color: var( --lamba );
}
.tmg-dom__kiedy {
	margin: 0; font-size: 12px; letter-spacing: .18em;
	text-transform: uppercase; color: var( --lateryt-j );
}
.tmg-dom__krotko { margin: 0 0 14px; color: var( --ryz-j ); font-size: 15.5px; }
.tmg-dom__opis p { margin: 0 0 12px; color: #d0c3b5; }
.tmg-dom__opis p:last-child { margin-bottom: 0; }

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

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


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