/* Strona „Księżyc".
 *
 * Barwy, krój i ozdoby są te same, co na Horoskopie i Niebie — to ma być
 * kolejna sala tego samego domu, nie osobny serwis. Stąd te same zmienne,
 * ta sama para krojów (Cormorant Garamond + Jost) i ta sama złota kreska
 * z gwiazdą, która na tamtych stronach rozdziela sekcje.
 *
 * Znakiem rozpoznawczym jest tarcza Księżyca: jedna grafika pełni z cieniem
 * terminatora liczonym z oświetlenia. Ten sam element wraca w czterech
 * rozmiarach — od kafla w kalendarzu po bohatera karty znaku — i to on
 * niesie stronę, więc reszta jest celowo cicha.
 */

/* Motyw zostawia `content-box`, a cały ten arkusz jest pisany pod
 * `border-box` — bez tego resetu każdy element z paddingiem i `width:100%`
 * wychodził poza obrys rodzica (najbardziej rzucały się w oczy pigułki
 * przycisków). Reset trzymamy w obrębie `.tks`, żeby nie ruszać motywu. */
.tks,
.tks *,
.tks *::before,
.tks *::after { box-sizing: border-box; }

.tks {
	--tlo:          #050318;
	--tlo-panel:    rgba( 12, 8, 38, .72 );
	--tlo-kafel:    rgba( 22, 14, 58, .5 );
	--zloto:        #f0d9a0;
	--zloto-jasne:  #fbe9bd;
	--zloto-etyk:   #c9a870;
	--lawenda:      #b9a6e0;
	--tekst:        #cdc4e6;
	--tekst-slaby:  #9a90bd;
	--obrys:        rgba( 190, 160, 255, .22 );
	--obrys-zloty:  rgba( 240, 217, 160, .3 );

	--serif: 'Cormorant Garamond', 'Times New Roman', serif;
	--sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

	position: relative;
	color: var( --tekst );
	font-family: var( --sans );
	font-weight: 300;
	background:
		radial-gradient( 120% 80% at 50% 0%, rgba( 60, 30, 120, .45 ), transparent 70% ),
		url( '/wp-content/uploads/tarot-kompat/ksiezyc/gfx/tlo-ksiezyc.jpg' ) center top / cover no-repeat,
		var( --tlo );
	min-height: 100vh;
	padding: 0 0 40px;
	/* `clip`, nie `hidden`: `hidden` robi z tego pojemnik przewijania,
	 * a wtedy przeglądarka przestaje doczytywać obrazki spod `loading=lazy`
	 * — tarcze Księżyca zostawały puste. `clip` przycina bez tego skutku. */
	overflow-x: clip;
}

/* Chrom motywu chowamy tak samo, jak robią to Niebo i Horoskop —
   inaczej strona wyglądałaby jak wklejka w cudzy szablon. */
body:has( .tks ) .wp-site-blocks > header,
body:has( .tks ) header.wp-block-template-part,
body:has( .tks ) .wp-site-blocks > footer,
body:has( .tks ) footer.wp-block-template-part,
body:has( .tks ) .wp-block-post-title { display: none !important; }

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

/* Motyw zwęża KAŻDE bezpośrednie dziecko treści do szerokości kolumny —
   bez tej reguły cała strona ściska się do 645 px. */
body:has( .tks ) .wp-block-post-content > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body:has( .tks ) { background: #050318; }

.tks-laduje {
	margin: 0;
	padding: 120px 20px;
	text-align: center;
	font-family: var( --serif );
	font-size: 20px;
	font-style: italic;
	color: var( --zloto-etyk );
}

/* ──────────────────────────────  hero  ──────────────────────────────── */

.tks-hero {
	max-width: 1568px;
	margin: 0 auto;
	padding: 54px 24px 30px;
	text-align: center;
}

.tks-hero h1 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin: 0 0 10px;
	font-family: var( --serif );
	font-weight: 400;
	font-size: clamp( 2rem, 5vw, 3.4rem );
	letter-spacing: .06em;
	line-height: 1.1;
	text-transform: uppercase;
	color: var( --zloto-jasne );
}

.tks-hero h1 i { font-style: normal; font-size: .45em; color: var( --zloto ); }

.tks-hero__ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 0 14px;
	color: var( --zloto );
}

.tks-hero__ornament::before,
.tks-hero__ornament::after {
	content: '';
	width: min( 22vw, 190px );
	height: 1px;
	background: linear-gradient( 90deg, transparent, rgba( 240, 217, 160, .5 ), transparent );
}

.tks-hero__ornament i { font-style: normal; font-size: 18px; }

.tks-hero__lede {
	max-width: 52ch;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.75;
	color: var( --tekst-slaby );
}

.tks-hero .tks-przycisk { margin-top: 20px; }

/* ─────────────────────────────  układ  ──────────────────────────────── */

.tks-uklad {
	max-width: 1568px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	gap: 20px;
	align-items: start;
}

.tks-uklad--trzy { grid-template-columns: 300px minmax( 0, 1fr ) 340px; }
.tks-uklad--kalendarz { grid-template-columns: 320px minmax( 0, 1fr ); }
.tks-uklad--droga { grid-template-columns: minmax( 0, 1fr ) 420px; }

.tks-prawa { display: grid; gap: 20px; }
/* Dwa suwaki JEDEN NAD DRUGIM — tak prosił Przemo, i tylko tak mieszczą się
 * w wąskiej prawej kolumnie; obok siebie wychodziły poza jej obrys. */
.tks-legendy { display: grid; grid-template-columns: minmax( 0, 1fr ); gap: 20px; }

/* ─────────────────────────────  panele  ─────────────────────────────── */

.tks-panel {
	position: relative;
	padding: 22px 22px 24px;
	border: 1px solid var( --obrys );
	border-radius: 16px;
	background: var( --tlo-panel );
	backdrop-filter: blur( 3px );
	-webkit-backdrop-filter: blur( 3px );
}

.tks-panel--teraz { text-align: center; }

.tks-naglowek { text-align: center; }

.tks-nad {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 10.5px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var( --zloto-etyk );
}

.tks-nad i { font-style: normal; font-size: 8px; }

.tks-tytul {
	margin: 0 0 6px;
	font-family: var( --serif );
	font-weight: 500;
	font-size: clamp( 1.4rem, 2.6vw, 2rem );
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --zloto-jasne );
}

.tks-etyk {
	margin: 0 0 4px;
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var( --zloto-etyk );
}

.tks-kreska {
	height: 1px;
	margin: 16px 0;
	background: linear-gradient( 90deg, transparent, var( --obrys-zloty ), transparent );
}

.tks-glif {
	font-style: normal;
	font-family: var( --serif );
	color: var( --zloto );
}

/* ──────────────────────  tarcza Księżyca  ───────────────────────────── */

/* Jedna grafika pełni; fazę robi cień terminatora nałożony na nią przez
   skrypt. Dzięki temu każdy procent oświetlenia wygląda właściwie. */
.tks-tarcza {
	position: relative;
	display: inline-block;
	width: 100%;
	aspect-ratio: 1 / 1;
	line-height: 0;
	vertical-align: middle;
}

.tks-tarcza > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tks-tarcza__cien {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.tks-tarcza--duza { width: min( 190px, 60% ); }
.tks-tarcza--hero { width: min( 320px, 62% ); }
.tks-tarcza--mini { width: 26px; flex: 0 0 26px; }
.tks-tarcza--kafel { width: 60%; margin: 2px auto 0; }

/* ────────────────────────  panel „teraz"  ───────────────────────────── */

.tks-teraz__scena { margin: 6px 0 14px; }

.tks-teraz__faza {
	margin: 0 0 2px;
	font-family: var( --serif );
	font-size: 24px;
	color: var( --zloto-jasne );
}

.tks-teraz__proc { margin: 0; font-size: 13px; color: var( --tekst-slaby ); }

.tks-teraz__znak {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 2px;
	font-family: var( --serif );
	font-size: 26px;
	color: var( --zloto-jasne );
}

.tks-teraz__znak .tks-glif { font-size: 24px; }

.tks-teraz__od { margin: 0; font-size: 12px; color: var( --tekst-slaby ); }

.tks-oswietlenie {
	display: flex;
	align-items: center;
	gap: 16px;
	text-align: left;
}

/* Pierścień postępu rysowany gradientem stożkowym — bez dodatkowego SVG. */
.tks-pierscien {
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background:
		conic-gradient( var( --zloto ) calc( var( --proc, 0 ) * 1% ), rgba( 190, 160, 255, .16 ) 0 );
	font-size: 13px;
	color: var( --zloto-jasne );
}

.tks-pierscien > span {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #0b0725;
}

.tks-oswietlenie__stan {
	margin: 0;
	font-family: var( --serif );
	font-size: 18px;
	color: var( --zloto-jasne );
}

.tks-oswietlenie__do { margin: 0; font-size: 12px; color: var( --tekst-slaby ); }

/* ────────────────────────  wydarzenia  ──────────────────────────────── */

.tks-wydarzenia {
	list-style: none;
	margin: 12px 0 18px;
	padding: 0;
	display: grid;
	gap: 8px;
	text-align: left;
}

.tks-wydarzenie {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var( --obrys );
	border-radius: 12px;
	background: var( --tlo-kafel );
}

.tks-wydarzenie__nazwa {
	margin: 0;
	font-family: var( --serif );
	font-size: 16px;
	color: var( --zloto-jasne );
}

.tks-wydarzenie__kiedy,
.tks-wydarzenie__opis { margin: 0; font-size: 11.5px; color: var( --tekst-slaby ); }

.tks-wydarzenie__data { margin-left: auto; text-align: right; }
.tks-wydarzenie__data p { margin: 0; font-size: 12px; color: var( --tekst-slaby ); }
.tks-wydarzenie__godz { color: var( --zloto-etyk ) !important; }

.tks-wydarzenie--pusty { justify-content: center; }
.tks-wydarzenie--pusty p { margin: 0; font-size: 12.5px; color: var( --tekst-slaby ); }

/* Perygeum i apogeum nie mają tarczy — dostają celownik orbity. */
.tks-ikona--orbita {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var( --zloto );
	position: relative;
}

.tks-ikona--orbita::before,
.tks-ikona--orbita::after {
	content: '';
	position: absolute;
	background: var( --zloto );
}

.tks-ikona--orbita::before { left: 50%; top: 3px; bottom: 3px; width: 1px; margin-left: -.5px; }
.tks-ikona--orbita::after { top: 50%; left: 3px; right: 3px; height: 1px; margin-top: -.5px; }
.tks-ikona--daleko { border-style: dashed; opacity: .75; }

/* ──────────────────────────  karta znaku  ───────────────────────────── */

.tks-panel--znak { text-align: center; }

.tks-znak__czas {
	margin: 0 0 16px;
	font-size: 12.5px;
	letter-spacing: .06em;
	color: var( --tekst-slaby );
}

.tks-znak__obraz {
	position: relative;
	margin: 0 0 18px;
	border-radius: 14px;
	overflow: hidden;
	line-height: 0;
}

.tks-znak__obraz > img {
	display: block;
	width: 100%;
	height: clamp( 240px, 34vh, 340px );
	object-fit: cover;
	opacity: .55;
}

.tks-znak__obraz .tks-tarcza--hero {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	filter: drop-shadow( 0 0 40px rgba( 150, 110, 240, .5 ) );
}

.tks-znak__zdanie {
	max-width: 46ch;
	margin: 0 auto 22px;
	font-family: var( --serif );
	font-size: 17px;
	line-height: 1.7;
	color: var( --tekst );
}

.tks-kolumny {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 14px;
	text-align: left;
}

.tks-kolumna {
	padding: 18px 16px;
	border: 1px solid var( --obrys );
	border-radius: 12px;
	background: var( --tlo-kafel );
	text-align: center;
}

.tks-kolumna__ikona {
	display: block;
	margin: 0 0 8px;
	font-size: 20px;
	color: var( --zloto );
}

.tks-kolumna h3 {
	margin: 0 0 12px;
	font-family: var( --serif );
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --zloto-jasne );
}

.tks-kolumna ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
	text-align: left;
}

.tks-kolumna li {
	position: relative;
	padding-left: 16px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var( --tekst );
}

.tks-kolumna li::before {
	content: '•';
	position: absolute;
	left: 2px;
	color: var( --zloto-etyk );
}

/* ────────────────────────  siatka miesiąca  ─────────────────────────── */

.tks-siatka__pasek {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 14px;
}

.tks-siatka__tytul {
	margin: 0;
	font-family: var( --serif );
	font-weight: 500;
	font-size: 17px;
	letter-spacing: .18em;
	color: var( --zloto-jasne );
}

.tks-siatka__tabela {
	display: grid;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	gap: 4px;
}

.tks-siatka__dzien-tyg {
	padding: 4px 0 8px;
	text-align: center;
	font-size: 10px;
	letter-spacing: .16em;
	color: var( --zloto-etyk );
}

.tks-kafel {
	position: relative;
	min-height: 54px;
	padding: 4px 4px 6px;
	border: 1px solid transparent;
	border-radius: 9px;
	text-align: center;
}

.tks-kafel--pusty { visibility: hidden; }

.tks-kafel__gora {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 11px;
	color: var( --tekst-slaby );
}

.tks-kafel__znak { font-size: 10px; color: var( --lawenda ); }

.tks-kafel__podpis {
	display: block;
	margin-top: 2px;
	font-size: 9px;
	letter-spacing: .04em;
	color: var( --zloto-etyk );
}

.tks-kafel--faza {
	border-color: var( --obrys-zloty );
	background: rgba( 240, 217, 160, .06 );
}

.tks-kafel--dzis {
	border-color: var( --zloto );
	background: rgba( 240, 217, 160, .12 );
	box-shadow: 0 0 18px rgba( 240, 217, 160, .22 );
}

.tks-kafel--dzis .tks-kafel__gora { color: var( --zloto-jasne ); }

/* W dużym kalendarzu kafle są wyższe i mieszczą więcej. */
.tks-siatka:not( .tks-siatka--mala ) .tks-kafel { min-height: 92px; padding: 8px 6px 10px; }
.tks-siatka:not( .tks-siatka--mala ) .tks-kafel__gora { font-size: 14px; }
.tks-siatka:not( .tks-siatka--mala ) .tks-tarcza--kafel { width: 52%; margin-top: 6px; }

.tks-legenda-pozioma {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var( --obrys );
	font-size: 11.5px;
	color: var( --tekst-slaby );
}

.tks-legenda-pozioma__poz { display: inline-flex; align-items: center; gap: 8px; }

/* ────────────────────────────  legendy  ─────────────────────────────── */

.tks-legenda__tytul {
	margin: 0 0 14px;
	font-family: var( --serif );
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-align: center;
	color: var( --zloto-jasne );
}

.tks-legenda__wiersz {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 6px 0;
}

.tks-legenda__nazwa {
	margin: 0;
	font-size: 12.5px;
	color: var( --zloto-jasne );
}

.tks-legenda__opis { margin: 0; font-size: 10.5px; line-height: 1.5; color: var( --tekst-slaby ); }

/* ───────────────────────  droga przez znaki  ────────────────────────── */

.tks-os { max-width: 1568px; margin: 0 auto 20px; }
.tks-os__pasek { display: flex; justify-content: center; margin-bottom: 16px; }

.tks-os__tor {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 6px;
	scrollbar-width: thin;
}

.tks-os__znak {
	flex: 1 0 84px;
	display: grid;
	justify-items: center;
	gap: 5px;
	padding: 10px 4px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: none;
	cursor: pointer;
	font-family: var( --sans );
}

.tks-os__kolo {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var( --obrys-zloty );
	border-radius: 50%;
	background: rgba( 16, 10, 46, .8 );
	font-family: var( --serif );
	font-size: 20px;
	color: var( --zloto );
	transition: border-color .2s, box-shadow .2s, color .2s;
}

.tks-os__nazwa { font-size: 9.5px; letter-spacing: .12em; color: var( --tekst-slaby ); }
.tks-os__dni { font-size: 10.5px; color: var( --zloto-etyk ); }

.tks-os__znak:hover .tks-os__kolo,
.tks-os__znak:focus-visible .tks-os__kolo {
	border-color: var( --zloto );
	color: var( --zloto-jasne );
}

.tks-os__znak:focus-visible { outline: none; border-color: var( --obrys-zloty ); }

.tks-os__znak.teraz .tks-os__kolo {
	border-color: var( --zloto );
	color: #fff5da;
	box-shadow: 0 0 22px rgba( 240, 217, 160, .5 );
	background: rgba( 74, 44, 150, .7 );
}

.tks-os__znak.teraz .tks-os__nazwa { color: var( --zloto-jasne ); }

.tks-panel--odcinek {
	display: grid;
	grid-template-columns: 260px minmax( 0, 1fr );
	gap: 22px;
	align-items: start;
}

.tks-odcinek__obraz { border-radius: 14px; overflow: hidden; line-height: 0; }
.tks-odcinek__obraz img { display: block; width: 100%; height: 320px; object-fit: cover; }

.tks-odcinek__tytul {
	margin: 0 0 10px;
	font-family: var( --serif );
	font-weight: 400;
	font-size: 28px;
	color: var( --zloto-jasne );
}

.tks-odcinek__zdanie {
	margin: 0 0 12px;
	font-family: var( --serif );
	font-size: 16px;
	line-height: 1.7;
	color: var( --tekst );
}

.tks-odcinek__esencja { margin: 0 0 16px; font-size: 13px; line-height: 1.75; color: var( --tekst-slaby ); }

.tks-odcinek__lista {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	gap: 7px;
}

.tks-odcinek__lista li {
	position: relative;
	padding-left: 20px;
	font-size: 13px;
	color: var( --tekst );
}

.tks-odcinek__lista li::before {
	content: '✦';
	position: absolute;
	left: 0;
	font-size: 9px;
	color: var( --zloto-etyk );
}

.tks-wydarzenia--pelne { margin-bottom: 0; }

/* ───────────────────────────  przyciski  ────────────────────────────── */

.tks-przycisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	margin-top: 8px;
	padding: 13px 22px;
	border: 1px solid var( --obrys-zloty );
	border-radius: 9999px;
	background: rgba( 40, 22, 92, .5 );
	color: var( --zloto-jasne );
	font-family: var( --sans );
	font-size: 11.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s, color .2s;
}

.tks-przycisk i { font-style: normal; font-size: 13px; }

.tks-przycisk:hover,
.tks-przycisk:focus-visible {
	outline: none;
	border-color: var( --zloto );
	box-shadow: 0 0 24px rgba( 240, 217, 160, .28 );
	color: #fff5da;
}

.tks-przycisk--pelny {
	background: linear-gradient( 100deg, #e6c887, #f6e6b8 );
	border-color: transparent;
	color: #2a1a05;
	font-weight: 500;
}

.tks-przycisk--pelny:hover { color: #1a1003; }

.tks-przycisk--cichy { background: none; width: auto; }

/* ────────────────────────────  stopka  ──────────────────────────────── */

.tks-stopka {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	max-width: 1568px;
	margin: 24px auto 0;
	padding: 20px 24px;
	border-top: 1px solid var( --obrys );
	font-size: 11.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var( --zloto-etyk );
}

.tks-stopka i { font-style: normal; font-size: 9px; }

/* ──────────────────────────────  wąsko  ─────────────────────────────── */

@media ( max-width: 1180px ) {
	.tks-uklad--trzy { grid-template-columns: 280px minmax( 0, 1fr ); }
	.tks-prawa { grid-column: 1 / -1; }
	.tks-uklad--droga { grid-template-columns: minmax( 0, 1fr ); }
	.tks-panel--odcinek { grid-template-columns: 220px minmax( 0, 1fr ); }
}

@media ( max-width: 860px ) {
	.tks-uklad--trzy,
	.tks-uklad--kalendarz { grid-template-columns: minmax( 0, 1fr ); }
	.tks-kolumny { grid-template-columns: minmax( 0, 1fr ); }
	.tks-panel--odcinek { grid-template-columns: minmax( 0, 1fr ); }
	.tks-odcinek__obraz img { height: 220px; }
	.tks-hero { padding-top: 34px; }
	.tks-siatka:not( .tks-siatka--mala ) .tks-kafel { min-height: 66px; }
}

@media ( max-width: 520px ) {
	.tks-uklad { padding: 0 12px; }
	.tks-panel { padding: 18px 14px 20px; }
	.tks-kafel { min-height: 46px; }
	.tks-siatka__dzien-tyg { font-size: 9px; letter-spacing: .08em; }
	.tks-stopka { letter-spacing: .1em; font-size: 10.5px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.tks-przycisk,
	.tks-os__kolo { transition: none; }
}

/* ═══════════════  rama z ornamentami (jak w kole zodiaku)  ═══════════════ */

/* Panel bohater dostaje podwójną złotą linię, cztery narożne ślimacznice
   i gwiazdy na osi — ten sam rysunek, co koło zodiaku na Horoskopie. */
.tks-panel--rama {
	border-color: var( --obrys-zloty );
}

.tks-panel--rama::before {
	content: '';
	position: absolute;
	inset: 8px;
	border: 1px solid rgba( 240, 217, 160, .16 );
	border-radius: 11px;
	pointer-events: none;
}

.tks-rog {
	position: absolute;
	width: 62px;
	height: 62px;
	background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23f0d9a0' stroke-width='1.15' stroke-linecap='round'%3E%3Cpath d='M4 36C4 18 18 4 36 4'/%3E%3Cpath d='M4 47C4 23 23 4 47 4' opacity='.4'/%3E%3Cpath d='M12 36C12 22 22 12 36 12'/%3E%3Cpath d='M36 12c7 0 10 4 8 8s-10 4-10-1c0-3 3-4 5-2'/%3E%3Cpath d='M12 36c0 7 4 10 8 8s4-10-1-10c-3 0-4 3-2 5'/%3E%3C/g%3E%3Cpath d='M31 6l1.8 1.8L31 9.6l-1.8-1.8z' fill='%23f0d9a0'/%3E%3C/svg%3E" ) center / contain no-repeat;
	opacity: .8;
	pointer-events: none;
}

.tks-rog--lg { top: 4px; left: 4px; }
.tks-rog--pg { top: 4px; right: 4px; transform: scaleX( -1 ); }
.tks-rog--ld { bottom: 4px; left: 4px; transform: scaleY( -1 ); }
.tks-rog--pd { bottom: 4px; right: 4px; transform: scale( -1 ); }

.tks-gwiazda {
	position: absolute;
	left: 50%;
	transform: translateX( -50% );
	padding: 0 12px;
	font-size: 14px;
	line-height: 1;
	color: var( --zloto );
	text-shadow: 0 0 12px rgba( 240, 217, 160, .55 );
	pointer-events: none;
}

.tks-gwiazda--gora { top: 1px; }
.tks-gwiazda--dol { bottom: 1px; }

.tks-gwiazda::before,
.tks-gwiazda::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 44px;
	height: 1px;
	background: linear-gradient( 90deg, transparent, rgba( 240, 217, 160, .5 ) );
}

.tks-gwiazda::before { right: 100%; }
.tks-gwiazda::after { left: 100%; transform: scaleX( -1 ); }

/* ═══════════════════════  przejścia tonalne  ════════════════════════════ */

/* Panele nie kończą się twardą krawędzią: u góry przepuszczają trochę
   mgławicy, u dołu gasną w granat. */
.tks-panel {
	background:
		linear-gradient( rgba( 20, 12, 54, .55 ), rgba( 8, 5, 28, .84 ) ),
		var( --tlo-panel );
}

/* Zdjęcia konstelacji wygaszamy w tło panelu — inaczej urywają się prostokątem. */
.tks-znak__obraz::after,
.tks-odcinek__obraz::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient( 62% 62% at 50% 45%, transparent 40%, rgba( 8, 5, 28, .55 ) 100% ),
		linear-gradient( to bottom, rgba( 8, 5, 28, .25 ) 0%, transparent 30%, rgba( 8, 5, 28, .92 ) 100% );
	pointer-events: none;
	z-index: 1;
}

.tks-odcinek__obraz { position: relative; }

/* Chmury mgławicy pod tarczą — miękkie przejście z konstelacji w Księżyc. */
.tks-znak__chmury {
	position: absolute;
	left: 50%;
	top: 52%;
	width: 118%;
	transform: translate( -50%, -50% );
	opacity: .7;
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 1;
}

.tks-znak__obraz .tks-tarcza--hero { z-index: 2; }

/* ══════════════════════  nawigacja miesiąca  ════════════════════════════ */

.tks-siatka__pasek { justify-content: space-between; gap: 14px; }

.tks-strzalka {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var( --obrys );
	border-radius: 50%;
	background: rgba( 16, 10, 46, .7 );
	color: var( --zloto );
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .2s, color .2s;
}

.tks-strzalka:hover,
.tks-strzalka:focus-visible {
	outline: none;
	border-color: var( --zloto );
	color: var( --zloto-jasne );
}

.tks--laduje { opacity: .55; transition: opacity .2s; }

/* ═════════════════  lewy panel w widoku kalendarza  ═════════════════════ */

.tks-teraz__wznaku { margin: 0; font-size: 15px; color: var( --tekst ); }
.tks-teraz__wznaku b { font-weight: 400; color: var( --zloto-jasne ); }

.tks-teraz__wielkie {
	margin: 0 0 14px;
	font-family: var( --serif );
	font-size: 40px;
	line-height: 1;
	color: var( --zloto-jasne );
}

.tks-dwakafle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.tks-kafelek {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border: 1px solid var( --obrys );
	border-radius: 12px;
	background: var( --tlo-kafel );
	text-align: left;
}

.tks-kafelek__data { margin: 0; font-size: 11.5px; color: var( --zloto-jasne ); }
.tks-kafelek__godz { margin: 0; font-size: 10.5px; color: var( --tekst-slaby ); }

.tks-wskazowka {
	margin: 0;
	font-family: var( --serif );
	font-size: 15px;
	line-height: 1.7;
	color: var( --tekst );
}

/* ════════════════════  karta „Planuj z energią"  ════════════════════════ */

.tks-planuj {
	display: grid;
	grid-template-columns: 96px minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 22px;
	max-width: 1568px;
	margin: 20px auto 0;
}

.tks-planuj__ikona {
	width: 96px;
	height: auto;
	filter: drop-shadow( 0 6px 22px rgba( 150, 110, 240, .45 ) );
}

.tks-planuj__tytul {
	margin: 0 0 6px;
	font-family: var( --serif );
	font-weight: 500;
	font-size: 20px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --zloto-jasne );
}

.tks-planuj__opis {
	margin: 0;
	max-width: 52ch;
	font-size: 13px;
	line-height: 1.7;
	color: var( --tekst-slaby );
}

.tks-planuj__akcje { display: flex; gap: 12px; flex-wrap: wrap; }
.tks-planuj__akcje .tks-przycisk { width: auto; margin-top: 0; }

/* ═══════════════════════  droga: oś i CTA  ══════════════════════════════ */

/* Kropki łączą znaki w łańcuch — biegną za kółkami, nie pod podpisami. */
.tks-os__tor { position: relative; }

.tks-os__tor::before {
	content: '';
	position: absolute;
	top: 45px;
	left: 42px;
	right: 42px;
	height: 1px;
	background: repeating-linear-gradient( 90deg,
		rgba( 240, 217, 160, .5 ) 0 3px, transparent 3px 11px );
	pointer-events: none;
}

.tks-os__znak { position: relative; padding-top: 20px; }

.tks-os__etykieta {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX( -50% );
	font-size: 9px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var( --zloto );
}

.tks-os__kolo { position: relative; z-index: 1; }

.tks-cta {
	max-width: 1568px;
	margin: 22px auto 0;
	padding: 0 24px;
	text-align: center;
}

.tks-przycisk--wielki {
	width: auto;
	min-width: min( 560px, 90% );
	padding: 17px 40px;
	font-size: 12.5px;
	letter-spacing: .22em;
}

.tks-przycisk--waski { width: auto; margin-top: 16px; padding: 10px 18px; }
.tks-przycisk--rytual { margin-top: 18px; }
.tks-przycisk--dzwonek { width: auto; margin-top: 0; }
.tks-dzwonek { font-style: normal; font-size: 13px; }

/* Część przycisków to linki — muszą wyglądać identycznie. */
a.tks-przycisk { text-decoration: none; }

/* ═══════════════════════════  zaćmienie  ════════════════════════════════ */

/* Ciemna tarcza w złotej obwódce — tak wygląda zaćmienie i tylko ono. */
.tks-ikona--zacmienie {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: radial-gradient( circle at 50% 50%,
		#0a0722 62%, rgba( 240, 217, 160, .9 ) 66%,
		rgba( 240, 217, 160, .25 ) 78%, transparent 82% );
}

/* ═══════════════════════════  stopka  ═══════════════════════════════════ */

.tks-stopka { flex-wrap: wrap; }
.tks-stopka__tekst { display: inline-flex; align-items: center; gap: 18px; margin: 0; }

.tks-stopka__nota {
	flex-basis: 100%;
	margin: 10px 0 0;
	font-size: 11.5px;
	letter-spacing: normal;
	text-transform: none;
	color: var( --tekst-slaby );
}

@media ( max-width: 860px ) {
	.tks-planuj { grid-template-columns: minmax( 0, 1fr ); text-align: center; justify-items: center; }
	.tks-planuj__akcje { justify-content: center; }
	.tks-dwakafle { grid-template-columns: minmax( 0, 1fr ); }
	.tks-rog { width: 42px; height: 42px; }
	.tks-przycisk--wielki { min-width: 100%; padding: 15px 20px; letter-spacing: .12em; }
	.tks-os__tor::before { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
 *  Coverflow „Droga przez znaki"
 *
 *  Pasek guzików zastąpiony sceną w głąb: znak bieżący duży w środku,
 *  sąsiednie odchodzą bokiem i w cień. Karty to prawdziwe zdjęcia
 *  konstelacji, więc widać dokąd Księżyc idzie, nie tylko glif.
 *  Ten sam gest, co slider konstelacji na Niebie.
 * ══════════════════════════════════════════════════════════════════════ */

.tks-flow {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 auto;
	padding: 0 6px;
}

.tks-flow__scena {
	position: relative;
	flex: 1 1 auto;
	height: clamp( 300px, 36vw, 400px );
	perspective: 1400px;
	overflow: hidden;
	/* mgła po bokach: karty gasną, zamiast urywać się krawędzią */
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 12%, #000 88%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 12%, #000 88%, transparent );
}

.tks-flow__karta {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp( 190px, 21vw, 260px );
	margin: 0;
	padding: 0;
	border: 1px solid var( --obrys );
	border-radius: 16px;
	background: rgba( 10, 6, 32, .9 );
	overflow: hidden;
	cursor: pointer;
	transform:
		translate( -50%, -50% )
		translateX( calc( var( --poz, 0 ) * 58% ) )
		scale( calc( 1 - .13 * var( --abs, 0 ) ) );
	opacity: calc( 1 - .22 * var( --abs, 0 ) );
	filter: brightness( calc( 1 - .16 * var( --abs, 0 ) ) ) saturate( calc( 1 - .12 * var( --abs, 0 ) ) );
	z-index: calc( 10 - var( --abs, 0 ) );
	transition: transform .5s cubic-bezier( .22, .61, .36, 1 ), opacity .5s, filter .5s, border-color .3s, box-shadow .5s;
}

.tks-flow__karta[ aria-hidden='true' ] { opacity: 0; pointer-events: none; }

/* Grafiki konstelacji są 7:9 i mają złoty podpis wtopiony w dole kadru —
 * nie wolno ich przycinać do kwadratu, bo podpis znika. */
.tks-flow__karta > img {
	display: block;
	width: 100%;
	aspect-ratio: 7 / 9;
	object-fit: cover;
}

/* Środkowa karta jest jedynym jasnym punktem sceny — stąd cała poświata. */
.tks-flow__karta.srodek {
	border-color: var( --zloto );
	box-shadow: 0 0 0 1px rgba( 240, 217, 160, .35 ), 0 18px 60px rgba( 120, 80, 220, .45 ), 0 0 90px rgba( 240, 217, 160, .18 );
}

.tks-flow__karta:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

.tks-flow__teraz {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX( -50% );
	padding: 5px 16px;
	border-radius: 9999px;
	background: linear-gradient( 100deg, #e6c887, #f6e6b8 );
	color: #2a1a05;
	font-family: var( --sans );
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Zakres dni idzie paskiem POD obrazkiem, żeby nie zasłonić podpisu. */
.tks-flow__dni {
	display: block;
	padding: 9px 10px 10px;
	border-top: 1px solid var( --obrys );
	background: rgba( 5, 3, 24, .92 );
	color: var( --zloto-etyk );
	font-family: var( --sans );
	font-size: 10.5px;
	letter-spacing: .1em;
	text-align: center;
}

.tks-flow__karta.srodek .tks-flow__dni { color: var( --zloto-jasne ); }

.tks-flow__strzalka {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var( --obrys-zloty );
	border-radius: 50%;
	background: rgba( 16, 10, 46, .7 );
	color: var( --zloto );
	font-family: var( --serif );
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .2s, color .2s, box-shadow .2s, opacity .2s;
	z-index: 12;
}

.tks-flow__strzalka:hover:not( :disabled ),
.tks-flow__strzalka:focus-visible {
	outline: none;
	border-color: var( --zloto );
	color: #fff5da;
	box-shadow: 0 0 22px rgba( 240, 217, 160, .35 );
}

.tks-flow__strzalka:disabled { opacity: .25; cursor: default; }

/* ══════════════════════════  suwaki legend  ══════════════════════════ */

.tks-suwak { padding-bottom: 16px; }

.tks-suwak__scena {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.tks-suwak__karta {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var( --obrys );
	border-radius: 14px;
	background: var( --tlo-kafel );
	text-align: left;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s, background .2s;
}

.tks-suwak__karta:hover,
.tks-suwak__karta:focus-visible {
	outline: none;
	border-color: var( --obrys-zloty );
	box-shadow: 0 0 26px rgba( 240, 217, 160, .16 );
}

.tks-suwak__tresc { min-width: 0; }
.tks-suwak__karta .tks-tarcza--suwak { width: 46px; flex: 0 0 46px; }
.tks-suwak__karta .tks-ikona { flex: 0 0 auto; }

.tks-suwak__wiecej {
	display: inline-block;
	margin-top: 8px;
	color: var( --zloto-etyk );
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: color .2s;
}

.tks-suwak__karta:hover .tks-suwak__wiecej { color: var( --zloto-jasne ); }

.tks-suwak__kropki {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
}

.tks-suwak__kropka {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba( 190, 160, 255, .3 );
	transition: background .25s, transform .25s;
}

.tks-suwak__kropka.teraz { background: var( --zloto ); transform: scale( 1.4 ); }

.tks-strzalka--mala {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	min-width: 0;
	padding: 0;
	font-size: 18px;
}

/* ═══════════════  okno na rozmytym tle (klasy `ak-*` z Nieba)  ═══════ */

body.tks-okno-otwarte { overflow: hidden; }

.tks-okno__hero { display: grid; place-items: center; }
.tks-okno__hero .tks-tarcza--okno { width: min( 190px, 52% ); }
.tks-okno__zacmienie { transform: scale( 2.6 ); }

.tks-okno__listy {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-top: 18px;
}

.tks-okno__lista ul { margin: 6px 0 0; padding: 0; list-style: none; }

.tks-okno__lista li {
	position: relative;
	padding-left: 16px;
	margin-bottom: 5px;
	font-size: 13px;
	line-height: 1.5;
}

.tks-okno__lista li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 10px;
}

.tks-okno__lista--sprzyja li::before { content: '✦'; color: var( --zloto-etyk ); }
.tks-okno__lista--odloz li::before { content: '⊘'; color: rgba( 190, 160, 255, .55 ); }
.tks-okno__rys { margin-top: 6px; }

/* ══════════  przyciski: tekst nie może wyjść poza pigułkę  ══════════ */

.tks-przycisk {
	max-width: 100%;
	flex-wrap: nowrap;
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: center;
	line-height: 1.35;
}

.tks-przycisk--waski { max-width: 100%; }
.tks-przycisk i { flex: 0 0 auto; }

@media ( max-width: 900px ) {
	.tks-flow__scena { height: clamp( 250px, 68vw, 340px ); }
	.tks-flow__karta { width: clamp( 150px, 42vw, 210px ); }
	.tks-okno__listy { grid-template-columns: minmax( 0, 1fr ); gap: 12px; }
	.tks-przycisk { letter-spacing: .12em; font-size: 11px; padding: 12px 16px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.tks-flow__karta { transition: none; }
}

/* ═══════════  okno `ak-*` z Nieba, gdy otwiera je strona Księżyca  ═══════
 *
 * Tam hero to rysowany SVG konstelacji, który sam się skaluje. U nas to
 * fotografia 7:9 z wtopionym złotym podpisem — bez własnej ramy wychodziła
 * poza panel i wchodziła pod tekst. `contain` trzyma cały kadr razem
 * z podpisem, `cover` ucinałby nazwę znaku.
 */
#astro-karta .ak-hero--niebo:has( > img ) { height: clamp( 240px, 34vh, 330px ); }

/* Zdjęcie znaku wypełnia całą górę okna — tak samo jak fotografia planety
 * na Niebie. Złoty podpis wtopiony w dole kadru i tak dubluje tytuł, który
 * stoi tuż pod obrazkiem, więc przycięcie niczego nie zabiera. */
#astro-karta .ak-hero--niebo > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

#astro-karta .ak-hero--niebo:has( > img ) {
	background:
		radial-gradient( 70% 90% at 50% 45%, rgba( 96, 56, 190, .5 ), transparent 72% ),
		#07041c;
}

#astro-karta .tks-okno__hero { height: 260px; }

/* Hero z tarczą Księżyca: przyciemniająca zasłona z Nieba jest tu zbędna —
 * to ona robiła z pełni ciemną kulę. */
#astro-karta .tks-okno__hero::after { display: none; }
#astro-karta .tks-okno__hero {
	background: radial-gradient( 75% 95% at 50% 45%, rgba( 96, 56, 190, .45 ), transparent 72% ), #07041c;
}

/* ══════════════════════════════════════════════════════════════════════
 *  Zaćmienia: hero i płyta z datą
 *
 *  Pusta obręcz nic nie mówiła. Zaćmienie Księżyca to tarcza w rdzawym
 *  cieniu Ziemi, zaćmienie Słońca to czarny krążek z koroną — dwa różne
 *  zjawiska, więc dwa różne rysunki.
 * ══════════════════════════════════════════════════════════════════════ */

.tks-zacm {
	position: relative;
	display: grid;
	place-items: center;
	width: min( 190px, 52% );
	aspect-ratio: 1 / 1;
}

.tks-zacm--ksiezyc .tks-zacm__tarcza {
	width: 100%;
	filter: sepia( .55 ) saturate( 1.5 ) hue-rotate( -18deg ) brightness( .48 );
}

/* Miękki brzeg cienia Ziemi — w naturze też nie jest ostry. */
.tks-zacm__cien-ziemi {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient( circle at 42% 44%, rgba( 128, 32, 16, .55 ), rgba( 48, 10, 12, .78 ) 62%, rgba( 10, 4, 20, .9 ) 100% );
	mix-blend-mode: multiply;
	pointer-events: none;
}

.tks-zacm--slonce .tks-zacm__korona {
	position: absolute;
	inset: -18%;
	border-radius: 50%;
	background:
		radial-gradient( circle, transparent 44%, rgba( 255, 232, 178, .55 ) 47%, rgba( 240, 217, 160, .18 ) 58%, transparent 74% );
	filter: blur( 3px );
}

.tks-zacm--slonce .tks-zacm__krazek {
	position: relative;
	width: 62%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: #07040f;
	box-shadow: 0 0 0 1px rgba( 255, 232, 178, .5 ), 0 0 42px rgba( 255, 226, 160, .35 );
}

/* ───────────────────────  „Dla Twojego miasta"  ────────────────────── */

.tks-data {
	margin: 18px 0 4px;
	padding: 18px 20px 16px;
	border: 1px solid var( --obrys-zloty );
	border-radius: 16px;
	background:
		radial-gradient( 120% 90% at 50% 0%, rgba( 96, 56, 190, .28 ), transparent 70% ),
		rgba( 12, 8, 38, .55 );
	text-align: center;
}

.tks-data__czekam { margin: 0; font-size: 12.5px; color: var( --tekst-slaby ); }

.tks-data__nad {
	margin: 0 0 2px;
	font-family: var( --sans );
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var( --zloto-etyk );
}

.tks-data__linia {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 12px;
	font-family: var( --sans );
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var( --tekst-slaby );
}

.tks-data__linia i { font-style: normal; color: var( --zloto ); font-size: 9px; }

/* Data jest tu bohaterem, więc dzień dostaje rozmiar tytułu. */
.tks-data__plyta {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 10px 22px;
	border-top: 1px solid var( --obrys-zloty );
	border-bottom: 1px solid var( --obrys-zloty );
}

.tks-data__dzien {
	font-family: var( --serif );
	font-size: 54px;
	line-height: .9;
	color: var( --zloto-jasne );
	text-shadow: 0 0 30px rgba( 240, 217, 160, .35 );
}

.tks-data__prawa { display: grid; gap: 3px; text-align: left; }

.tks-data__mies {
	font-family: var( --serif );
	font-size: 21px;
	color: var( --zloto );
}

.tks-data__godz {
	font-family: var( --sans );
	font-size: 11px;
	letter-spacing: .1em;
	color: var( --tekst-slaby );
}

.tks-data__rodzaj {
	margin: 10px 0 0;
	font-family: var( --sans );
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var( --lawenda );
}

.tks-data__widok {
	margin: 12px auto 0;
	max-width: 44ch;
	font-size: 13px;
	line-height: 1.6;
	color: var( --tekst-slaby );
}

.tks-data__widok.widac { color: var( --tekst ); }

.tks-data__ile {
	margin: 8px 0 0;
	font-family: var( --sans );
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var( --zloto-etyk );
}

/* ─────────────────────  kolumny jako przyciski  ─────────────────────── */

/* Kolumna prowadzi teraz do pełnego opisu, więc musi to po sobie pokazać:
 * kursor, obrys na hover i strzałka, która pojawia się dopiero wtedy. */
.tks-kolumna {
	width: 100%;
	text-align: center;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}

.tks-kolumna:hover,
.tks-kolumna:focus-visible {
	outline: none;
	border-color: var( --obrys-zloty );
	box-shadow: 0 0 28px rgba( 240, 217, 160, .16 );
}

.tks-kolumna::after {
	content: 'Czytaj więcej →';
	display: block;
	margin-top: 12px;
	font-family: var( --sans );
	font-size: 9.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var( --zloto-etyk );
	opacity: 0;
	transition: opacity .2s;
}

.tks-kolumna:hover::after,
.tks-kolumna:focus-visible::after { opacity: 1; }

@media ( hover: none ) {
	.tks-kolumna::after { opacity: 1; }
}

@media ( max-width: 900px ) {
	.tks-data__dzien { font-size: 44px; }
	.tks-data__plyta { padding: 10px 14px; gap: 12px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.tks-kolumna { transition: none; }
}