/* Taroscope — siedem czakr. Układ i oprawa 1:1 z makiety.
 *
 * Warstwa graficzna (tło strony, kolumna z niszą, ramy paneli) idzie
 * z plików do makiety. Kolor ośrodka podaje PHP jako `--barwa` — jedno
 * źródło rządzi mandalą w kolumnie, obrysem panelu i kręgiem oddechu.
 *
 * Reszta serwisu jest złoto-granatowa; tutaj złoto zostaje, a barwa czakry
 * wchodzi punktowo, bo niesie treść: po niej rozpoznaje się ośrodek.
 */

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

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

/* Motyw ogranicza szerokość DZIECI bloku treści — bez tego strona siedzi
   w kolumnie 645 px zamiast na całej szerokości. */
body:has( #tcz ) .wp-block-post-content > *,
body:has( #tcz ) .entry-content > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body:has( #tcz ) { background: #0a1420; }

/* ─────────────────────────────  szkielet  ───────────────────────────── */

#tcz {
	--zloto:     #d9b26a;
	--zloto2:    #a8843f;
	--zloto-jasne: #f0d79a;
	--tekst:     #e8e2d4;
	--przygaszony: #8f8b7e;
	--obrys:     rgba( 217, 178, 106, .28 );
	--obrys2:    rgba( 217, 178, 106, .55 );
	--serif: 'Cormorant Garamond', 'Times New Roman', serif;
	--sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Płótno strony ma stałą proporcję obrazu tła (1600:1200). Tło NIE idzie
	 * na cały ekran, tylko na to płótno — bo nisza z łukiem jest w nie
	 * wrysowana i kolumna z Buddą musi w nią trafić. Przy tle rozciągniętym
	 * na cały ekran nisza uciekała w bok, a Budda siadał obok swojego miejsca.
	 * Boki ekranu wypełnia ten sam granat, co krawędź obrazu. */
	--plotno: 1520px;
	--pas: 18%;          /* szerokość kolumny wrysowanej w tło */

	position: relative;
	display: grid;
	grid-template-columns: calc( var( --plotno ) * .1906 ) minmax( 0, calc( var( --plotno ) * .8094 ) );
	justify-content: center;
	gap: 0;
	min-height: 100vh;
	max-width: none;
	width: 100%;
	color: var( --tekst );
	font-family: var( --sans );
	font-weight: 300;
	background: #0b1622;
	overflow-x: hidden;
}

/* Obraz tła leży dokładnie pod treścią i kończy się tam, gdzie ona. */
#tcz::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: min( var( --plotno ), 100% );
	transform: translateX( -50% );
	background: var( --tlo-strony ) center top / 100% 100% no-repeat;
	pointer-events: none;
}

/* Boki: ta sama noc co krawędź obrazu, żeby płótno nie kończyło się kantem. */
#tcz::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient( 120% 80% at 50% 0%, transparent 60%, rgba( 6, 12, 20, .55 ) 100% );
	pointer-events: none;
}

#tcz > * { position: relative; z-index: 1; }

#tcz *, #tcz *::before, #tcz *::after { box-sizing: border-box; }
#tcz :focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

/* ────────────────────────  kolumna z ośrodkami  ─────────────────────── */

.tcz-kolumna {
	position: relative;
	display: flex;
	flex-direction: column;
	align-self: start;
	/* Cała kolumna to JEDNA grafika: nisza z Buddą, panel z ramką i lotos
	   u dołu. Proporcja pliku (560:1882) trzyma ją w całości, więc ramka
	   nigdy nie rozjeżdża się z treścią. */
	/* Wysokość wprost z proporcji pliku (0,1906 szerokości płótna × 1882/560).
	   Dawniej dokładaliśmy 31 px, żeby dół kolumny stanął równo z sekcją
	   kamieni — po dołożeniu „Ośrodka z bliska" i „Jak działa cały układ"
	   prawa strona jest o półtora ekranu dłuższa i nie ma już czego równać,
	   więc grafika wraca do swojej proporcji. */
	height: calc( var( --plotno ) * .64055 );
	background: var( --kolumna ) center top / 100% 100% no-repeat;
	padding: 0;
}

/* Odstęp na niszę: linia pod postumentem leży na 26,89% wysokości grafiki. */
.tcz-kolumna__nisza {
	flex: 0 0 auto;
	height: 27.4%;
	background: none;
	margin: 0;
}

.tcz-os {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0 5.2% 0 5.6%;
	padding: 0;
	background: transparent;
}

/* Kreska rozdzielająca — nie ma jej pod ostatnią pozycją ani wokół wybranej. */
.tcz-punkt + .tcz-punkt { border-top-color: rgba( 217, 178, 106, .10 ); }
.tcz-punkt[aria-selected="true"] + .tcz-punkt { border-top-color: transparent; }

.tcz-punkt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 7px 11px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background .22s, border-color .22s;
}

.tcz-punkt__znak {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	color: var( --barwa );
	opacity: .85;
	filter: drop-shadow( 0 0 8px color-mix( in srgb, var( --barwa ) 45%, transparent ) );
	transition: opacity .22s, transform .22s;
}
.tcz-punkt__opis { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.tcz-punkt__nazwa {
	font-family: var( --serif );
	font-size: 15.5px;
	line-height: 1.12;
	white-space: nowrap;
	color: var( --tekst );
}

.tcz-punkt__sanskryt {
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var( --przygaszony );
}

.tcz-punkt:hover { background: rgba( 217, 178, 106, .06 ); }
.tcz-punkt:hover .tcz-punkt__znak { opacity: .95; }

/* Wybrany ośrodek dostaje złotą ramkę z makiety i rozświetloną mandalę. */
.tcz-punkt[aria-selected="true"] {
	border-color: rgba( 217, 178, 106, .65 );
	background: linear-gradient( 100deg, rgba( 217, 178, 106, .22 ), rgba( 150, 105, 40, .10 ) );
	box-shadow: 0 0 26px rgba( 217, 178, 106, .18 ) inset, 0 0 18px rgba( 217, 178, 106, .10 );
}

.tcz-punkt[aria-selected="true"] .tcz-punkt__znak { opacity: 1; transform: scale( 1.05 ); }
.tcz-punkt[aria-selected="true"] .tcz-punkt__nazwa { color: var( --zloto-jasne ); }

/* Lotos i dolny ornament są w grafice kolumny — myśl siada tuż nad
   poświatą lotosu, która zaczyna się na 76,67% wysokości. */
.tcz-kolumna__stopka {
	position: absolute;
	left: 7%;
	right: 7%;
	bottom: 24%;
	margin: 0;
	padding: 0;
	text-align: center;
}

/* Ozdobnik rysuje tło kolumny — tutaj zostaje sam odstęp na niego. */
/* Lotos i kreska pod nim — ozdobnik jest w grafice kolumny. */
/* Lotos jest częścią grafiki kolumny. */
.tcz-lotos { display: none; }

.tcz-kolumna__stopka::before {
	content: '';
	display: block;
	height: 1px;
	margin: 0 8px 14px;
	background: linear-gradient( to right, transparent, rgba( 217, 178, 106, .35 ), transparent );
}

.tcz-mysl {
	margin: 0;
	font-family: var( --serif );
	font-style: italic;
	font-size: 15px;
	line-height: 1.5;
	color: var( --zloto );
	opacity: .85;
}

.tcz-mysl__podpis {
	display: block;
	margin-top: 8px;
	font-family: var( --serif );
	font-style: italic;
	font-size: 12.5px;
	color: var( --przygaszony );
}

.tcz-mysl[hidden] { display: none; }

/* ────────────────────────────  treść  ──────────────────────────────── */

.tcz-tresc { padding: 30px 34px 60px; min-width: 0; }

/* Tytuł stoi na osi CAŁEGO płótna, nie kolumny treści — inaczej ucieka
   w prawo o połowę szerokości kolumny z ośrodkami. */
.tcz-hero {
	position: relative;
	left: calc( var( --plotno ) * -0.068 );
	text-align: center;
	margin-bottom: 24px;
}

.tcz-hero__lotos {
	display: block;
	width: 60px;
	height: 26px;
	margin: 0 auto 6px;
	background: var( --rama-kamieni, none ) center top / 300% auto no-repeat;
	opacity: .8;
}

.tcz-hero h1 {
	margin: 0 0 12px;
	font-family: var( --serif );
	font-weight: 400;
	font-size: clamp( 40px, 4.4vw, 62px );
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --zloto );
	text-shadow: 0 0 40px rgba( 217, 178, 106, .28 );
}

.tcz-lede {
	margin: 0 auto;
	max-width: 620px;
	font-size: 14px;
	line-height: 1.62;
	color: var( --przygaszony );
}

/* ──────────────────────────  panel ośrodka  ────────────────────────── */

.tcz-panel[hidden] { display: none; }

.tcz-glowa {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 300px, 400px );
	gap: 0;
	min-height: 511px;
	border: 1px solid var( --obrys );
	border-radius: 18px;
	background: var( --rama-kamieni ) center / 100% 100% no-repeat, rgba( 10, 20, 32, .72 );
	overflow: hidden;
}

.tcz-glowa__opis { padding: 114px 52px 38px; min-width: 0; }

.tcz-tytul { display: flex; align-items: center; gap: 18px; }

.tcz-tytul__znak {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 999px;
	color: var( --barwa );
	filter: drop-shadow( 0 0 16px color-mix( in srgb, var( --barwa ) 50%, transparent ) );
}

.tcz-tytul__sanskryt {
	margin: 0 0 2px;
	font-size: 10.5px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var( --przygaszony );
}

.tcz-tytul__nazwa {
	margin: 0;
	font-family: var( --serif );
	font-weight: 400;
	font-size: clamp( 30px, 3.2vw, 44px );
	line-height: 1.05;
	color: var( --zloto-jasne );
}

.tcz-tytul__haslo {
	margin: 4px 0 0;
	font-family: var( --serif );
	font-style: italic;
	font-size: 19px;
	color: var( --zloto2 );
}

/* Pasek czterech faktów — dokładnie jak w makiecie, z pionowymi kreskami. */
.tcz-fakty {
	display: flex;
	flex-wrap: nowrap;
	margin: 20px 0 0;
	border: 1px solid var( --obrys );
	border-radius: 12px;
	background: rgba( 8, 16, 26, .5 );
}

.tcz-fakt {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1 1 0;
	min-width: 0;
	padding: 10px 14px;
	border-right: 1px solid var( --obrys );
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --przygaszony );
}

/* Etykieta nad wartością — dwie linijki, jak w makiecie. */
.tcz-fakt b,
.tcz-fakt em { display: block; }
.tcz-fakt > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.tcz-fakt:last-child { border-right: 0; }
.tcz-fakt i { font-style: normal; font-size: 15px; color: var( --barwa ); flex: 0 0 auto; }
.tcz-fakt b { font-weight: 400; }
.tcz-fakt em { font-style: normal; color: var( --tekst ); }

.tcz-opis { margin: 18px 0 0; font-size: 14.5px; line-height: 1.72; }

.tcz-prosi__tytul {
	margin: 20px 0 8px;
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var( --zloto2 );
}

.tcz-prosi { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 6px 26px; max-width: 680px; }

.tcz-prosi li {
	position: relative;
	padding-left: 16px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var( --przygaszony );
}

.tcz-prosi li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: var( --barwa );
}

/* ──────────────────────────  praktyka  ─────────────────────────────── */

.tcz-praktyka {
	position: relative;
	padding: 108px 40px 34px;
	border-left: 1px solid var( --obrys );
	background: rgba( 8, 16, 26, .45 );
	text-align: center;
}

.tcz-praktyka__lotos {
	display: block;
	width: 54px;
	height: 22px;
	margin: 0 auto 10px;
	/* Rysowany ozdobnik — wycinek z ramy niósł ze sobą czarną płytę. */
	background: url( "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2054%2012%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23d9b26a%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M1%206h16M37%206h16%22%2F%3E%3Cpath%20d%3D%22M27%202.4%2030.6%206%2027%209.6%2023.4%206z%22%2F%3E%3Ccircle%20cx%3D%2219.4%22%20cy%3D%226%22%20r%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%2234.6%22%20cy%3D%226%22%20r%3D%221.1%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E" ) center center / 54px auto no-repeat;
	opacity: .7;
}

.tcz-praktyka__tytul {
	margin: 0 0 12px;
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var( --zloto2 );
}

.tcz-praktyka__tekst { margin: 0; font-size: 14px; line-height: 1.68; color: var( --tekst ); }

.tcz-praktyka__afirmacja {
	margin: 18px 0 0;
	font-family: var( --serif );
	font-style: italic;
	font-size: 20px;
	line-height: 1.42;
	color: var( --zloto );
}

.tcz-narzedzia { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }

.tcz-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var( --obrys );
	border-radius: 999px;
	background: rgba( 12, 22, 34, .8 );
	color: var( --tekst );
	font-family: var( --sans );
	font-size: 12px;
	cursor: pointer;
	transition: border-color .2s, background .2s;
}

.tcz-btn:hover { border-color: var( --obrys2 ); }
.tcz-btn__ikona { color: var( --barwa ); font-size: 13px; }

.tcz-btn.gra {
	border-color: color-mix( in srgb, var( --barwa ) 65%, transparent );
	background: color-mix( in srgb, var( --barwa ) 16%, rgba( 12, 22, 34, .8 ) );
}

/* ──────────────────────────  kamienie  ─────────────────────────────── */

.tcz-kamienie-box {
	margin-top: 20px;
	padding: 48px 46px 34px;
	border: 1px solid var( --obrys );
	border-radius: 18px;
	background: var( --rama-kamieni ) center / 100% 100% no-repeat, rgba( 10, 20, 32, .72 );
}

.tcz-kamienie__tytul {
	margin: 0 0 20px;
	text-align: center;
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var( --zloto );
}

.tcz-kamienie__tytul i { font-style: normal; color: var( --zloto2 ); margin: 0 12px; }

/* Pas kamieni: jeden rząd, przewijany. Strzałki pokazują się tylko wtedy,
   gdy jest co przewijać — martwy przycisk myli bardziej, niż pomaga. */
.tcz-pas { display: grid; grid-template-columns: 0 minmax( 0, 1fr ) 0; align-items: center; gap: 0; }
.tcz-pas.jest-przewijany { grid-template-columns: 34px minmax( 0, 1fr ) 34px; gap: 8px; }

.tcz-strzalka {
	width: 34px;
	height: 34px;
	border: 1px solid var( --obrys );
	border-radius: 999px;
	background: rgba( 10, 20, 32, .8 );
	color: var( --zloto );
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	visibility: hidden;
	transition: border-color .2s, opacity .2s;
}

.tcz-pas.jest-przewijany .tcz-strzalka { visibility: visible; }
.tcz-strzalka:hover { border-color: var( --obrys2 ); }
.tcz-strzalka[disabled] { opacity: .3; cursor: default; }

.tcz-kamienie {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 2px 2px 6px;
	scroll-snap-type: x proximity;
	justify-content: center;
}

/* Przy przewijaniu wracamy do wyrównania od lewej — inaczej pierwszy kafel
   chowa się poza kadrem. */
.tcz-pas.jest-przewijany .tcz-kamienie { justify-content: flex-start; }

.tcz-kamienie::-webkit-scrollbar { display: none; }

.tcz-kamien {
	flex: 0 0 128px;
	border: 1px solid var( --obrys );
	font: inherit;
	cursor: pointer;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 8px 12px;
	border: 1px solid var( --obrys );
	border-radius: 14px;
	background: rgba( 8, 16, 26, .55 );
	color: inherit;
	text-decoration: none;
	text-align: center;
	transition: border-color .2s, transform .2s, background .2s;
}

.tcz-kamien:hover { border-color: var( --obrys2 ); transform: translateY( -3px ); background: rgba( 14, 26, 40, .7 ); }
.tcz-kamien[hidden] { display: none; }

.tcz-kamien__obraz {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	overflow: hidden;
	/* Kula pod zdjęciem (widać ją, zanim obraz się wczyta): blik w tonie
	   jasnym, ciało w tonie ciemnym. Sam ton jasny dawał srebrną kulę przy
	   czarnych kamieniach — ten ton to ich połysk, nie barwa. */
	background: radial-gradient( circle at 34% 30%, var( --hex ) 0%, var( --hex2, var( --hex ) ) 42%, rgba( 8, 16, 26, .92 ) 84% );
	box-shadow: 0 0 18px color-mix( in srgb, var( --hex ) 30%, transparent );
}

.tcz-kamien__obraz img { width: 100%; height: 100%; object-fit: cover; }

.tcz-kamien__nazwa { font-family: var( --serif ); font-size: 15px; line-height: 1.15; color: var( --tekst ); }

/* Skąd wzięło się przypisanie — widoczne od razu, bez najeżdżania myszą. */
.tcz-kamien__skad {
	font-size: 8.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --przygaszony );
	border: 1px solid var( --obrys );
	border-radius: 999px;
	padding: 2px 8px;
}

.tcz-wiecej {
	display: block;
	margin: 20px auto 0;
	padding: 12px 34px;
	border: 1px solid var( --obrys2 );
	border-radius: 999px;
	background: transparent;
	color: var( --zloto );
	font-family: var( --sans );
	font-size: 11.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s, color .2s;
}

.tcz-wiecej:hover { background: rgba( 217, 178, 106, .12 ); color: var( --zloto-jasne ); }

.tcz-nota {
	max-width: 900px;
	margin: 26px auto 0;
	font-size: 12px;
	line-height: 1.65;
	color: var( --przygaszony );
	text-align: center;
}

.tcz-nota b { color: var( --tekst ); font-weight: 400; }

/* ──────────────────────  prowadzony oddech  ────────────────────────── */

.tcz-oddech {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 18px;
	background: rgba( 6, 12, 20, .94 );
	backdrop-filter: blur( 6px );
}

.tcz-oddech[hidden] { display: none; }

.tcz-oddech__krag {
	display: grid;
	place-items: center;
	width: 220px;
	height: 220px;
	border-radius: 999px;
	border: 1px solid color-mix( in srgb, var( --barwa, #d9b26a ) 60%, transparent );
	background: radial-gradient( circle, color-mix( in srgb, var( --barwa, #d9b26a ) 26%, transparent ), transparent 70% );
	transform: scale( .6 );
	transition: transform 4s cubic-bezier( .4, 0, .4, 1 );
}

.tcz-oddech__krag.wdech { transform: scale( 1 ); }

.tcz-oddech__slowo { font-family: var( --serif ); font-size: 24px; letter-spacing: .12em; color: var( --zloto ); }
.tcz-oddech__licznik { margin: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var( --przygaszony ); }

/* ──────────────────────────  mniejsze  ─────────────────────────────── */

@media ( max-width: 1180px ) {
	.tcz-glowa { grid-template-columns: minmax( 0, 1fr ); }
	.tcz-praktyka { border-left: 0; border-top: 1px solid var( --obrys ); }
}

@media ( max-width: 1560px ) {
	#tcz { --plotno: 100vw; }
}

@media ( max-width: 900px ) {
	#tcz { grid-template-columns: minmax( 0, 1fr ); }
	.tcz-hero { left: 0; }
	.tcz-kolumna { border-right: 0; border-bottom: 1px solid rgba( 217, 178, 106, .16 ); }
	.tcz-kolumna__nisza { height: 150px; }
	.tcz-os { flex-direction: column-reverse; }
	.tcz-tresc { padding: 24px 18px 48px; }
	.tcz-glowa__opis { padding: 24px 20px; }
}

@media ( prefers-reduced-motion: reduce ) {
	#tcz *, #tcz *::before, #tcz *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
	.tcz-oddech__krag { transition: none; }
}

/* ── panel kamienia otwierany z czakr ─────────────────────────────────
 *
 * Wspólny arkusz okna (`sky-slider.css`) obsługuje kilka działów, więc go
 * nie ruszamy — tutaj tylko dostrajamy typografię dla tego jednego użycia:
 * jedna oś, zgodne stopnie pisma, wszystko na środku.
 */
#astro-karta.tcz-okno .ak-tresc { text-align: center; }

#astro-karta.tcz-okno .ak-tytul {
	font-size: 30px;
	line-height: 1.15;
	margin-bottom: 10px;
}

#astro-karta.tcz-okno .ak-pod {
	font-size: 15px;
	line-height: 1.5;
	font-style: italic;
	margin-bottom: 12px;
}

#astro-karta.tcz-okno .ak-fakty {
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: .04em;
	margin-bottom: 16px;
}

#astro-karta.tcz-okno .ak-naglowek {
	font-size: 10.5px;
	letter-spacing: .22em;
	margin: 16px 0 8px;
}

#astro-karta.tcz-okno .ak-akapit {
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 10px;
}

/* Fakty kamienia z ikonami — ten sam zestaw grafik, co w katalogu kamieni. */
#astro-karta.tcz-okno .tcz-fakty-ikony {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 4px 0 18px;
}

#astro-karta.tcz-okno .tcz-fakt-ikona {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 14px;
	border: 1px solid rgba( 217, 178, 106, .26 );
	border-radius: 12px;
	background: rgba( 8, 16, 26, .45 );
	text-align: left;
}

#astro-karta.tcz-okno .tcz-fakt-ikona img { width: 30px; height: 30px; object-fit: contain; }

#astro-karta.tcz-okno .tcz-fakt-ikona__opis { display: flex; flex-direction: column; gap: 1px; }

#astro-karta.tcz-okno .tcz-fakt-ikona b {
	font-weight: 400;
	font-size: 9.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba( 217, 178, 106, .8 );
}

#astro-karta.tcz-okno .tcz-fakt-ikona em { font-style: normal; font-size: 12.5px; }

/* ══════════════════════════════════════════════════════════════════════
   Ośrodek z bliska — rozwinięcie z bazy wiedzy
   ══════════════════════════════════════════════════════════════════════
   Panel u góry mówi krótko, bo ma się zmieścić obok praktyki. Tutaj jest
   pełny opis: pięć ujęć, każde osobno, żeby dało się czytać wybiórczo —
   ktoś przyszedł po ćwiczenie, ktoś po znaczenie nazwy. */

.tcz-blisko {
	margin-top: 20px;
	padding: 40px 46px 38px;
	border: 1px solid var( --obrys );
	border-radius: 18px;
	background: rgba( 10, 20, 32, .58 );
}

/* Dwie kolumny — nie dla ozdoby, tylko dla długości wiersza. Na pełnej
   szerokości panelu linijka miała ~140 znaków i oko gubiło początek
   następnej; w kolumnie wychodzi ok. 70. */
.tcz-blisko__siatka {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 26px 34px;
}

.tcz-blok { margin: 0; }

/* Osiem bloków w czterech rzędach po dwa: nazwa | działanie, zachowanie |
   pytania, znaki | ciało, ćwiczenie uwagi | ćwiczenie ciała. Para w ostatnim
   rzędzie jest celowa — to dwa sposoby pracy z tym samym ośrodkiem. */
.tcz-blok--praktyka,
.tcz-blok--ruch {
	padding-top: 24px;
	border-top: 1px solid rgba( 217, 178, 106, .14 );
}

.tcz-blok__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.6;
	color: var( --tekst );
	opacity: .92;
}
.tcz-blok__lista li { position: relative; padding-left: 18px; margin: 0 0 8px; }
.tcz-blok__lista li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: .68em;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var( --zloto2 );
}

.tcz-blok__tytul {
	margin: 0 0 9px;
	font-family: var( --sans );
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var( --zloto );
}

.tcz-blok__tresc {
	margin: 0;
	font-size: 14px;
	line-height: 1.72;
	color: var( --tekst );
	opacity: .92;
}

/* Ciało to skojarzenia symboliczne, nie rozpoznanie — mówi to sam wpis,
   a stopień szarości nie pozwala pomylić tego z poradą. */
.tcz-blok--cialo .tcz-blok__tresc { font-size: 13px; color: var( --przygaszony ); }

/* ══════════════════════════════════════════════════════════════════════
   Jak działa cały układ — wspólne dla wszystkich siedmiu
   ══════════════════════════════════════════════════════════════════════ */

.tcz-uklad {
	margin: 20px 0 0;
	padding: 40px 46px 38px;
	border: 1px solid var( --obrys );
	border-radius: 18px;
	background: rgba( 10, 20, 32, .58 );
}

.tcz-uklad__siatka {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 26px 34px;
}

.tcz-zasada { margin: 0; }

.tcz-zasada__tytul {
	margin: 0 0 9px;
	font-family: var( --serif );
	font-size: 17px;
	font-weight: 400;
	letter-spacing: .01em;
	color: var( --zloto-jasne );
}

.tcz-zasada__tresc {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.7;
	color: var( --tekst );
	opacity: .9;
}

/* Granica między tradycją a tym, co dopisano w XIX i XX wieku. Nie chowamy
   jej w przypisie — to część wiedzy, nie zastrzeżenie prawne. */
.tcz-uklad__podtytul {
	margin: 34px 0 20px;
	padding-top: 26px;
	border-top: 1px solid rgba( 217, 178, 106, .14 );
	text-align: center;
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var( --zloto2 );
}

.tcz-uklad__siatka--dopiski { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }

.tcz-zasada--dopisek .tcz-zasada__tytul { font-size: 15px; color: var( --zloto ); }
.tcz-zasada--dopisek .tcz-zasada__tresc { font-size: 12.5px; color: var( --przygaszony ); }

@media ( max-width: 1200px ) {
	.tcz-uklad__siatka,
	.tcz-uklad__siatka--dopiski { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 900px ) {
	.tcz-blisko,
	.tcz-uklad { padding: 28px 22px 26px; }
	.tcz-blisko__siatka,
	.tcz-uklad__siatka,
	.tcz-uklad__siatka--dopiski { grid-template-columns: minmax( 0, 1fr ); }
	.tcz-blok--symbolika,
	.tcz-blok--cialo { grid-column: 1 / -1; }
}