/* ══════════════════════════════════════════════════════════════════════
 *  „Twoje kamienie" — panel doboru z kosmogramu.
 *
 *  Paleta, ramki i krój wzięte z arkusza działu Kamieni, żeby po przeniesieniu
 *  na `/kamienie/` panel nie wyglądał jak wklejka z innej strony. Tokeny są
 *  zadeklarowane lokalnie — panel ma działać także sam, pod `/kamienie-test/`.
 *
 *  Motyw TT25 zostawia `content-box` i wpuszcza treść w wąską kolumnę,
 *  więc strona próbna zaczyna od tego samego resetu co reszta działów.
 * ══════════════════════════════════════════════════════════════════════ */

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

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

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

body:has( .tkd-strona ) { background: #0a0722; }

.tkd-strona {
	min-height: 100vh;
	padding: 26px 20px 60px;
	background:
		radial-gradient( 1100px 620px at 50% -10%, rgba( 92, 62, 168, .30 ), transparent 70% ),
		linear-gradient( 180deg, #150c36, #0a0722 );
	color: #e9e3f6;
	font-family: 'Jost', system-ui, sans-serif;
	font-weight: 300;
}

.tkd-srodek { max-width: 1320px; margin: 0 auto; }

.tkd-proba {
	margin: 0 0 18px;
	font-size: .74rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba( 167, 157, 198, .8 );
}

/* ─────────────────────────  wspólne wartości  ──────────────────────── */

.tkd {
	--panel:    rgba( 26, 16, 62, .62 );
	--panel2:   rgba( 18, 11, 44, .82 );
	--obrys:    rgba( 214, 176, 102, .22 );
	--obrys2:   rgba( 214, 176, 102, .40 );
	--zloto:    #ecd08a;
	--zloto2:   #c9a24a;
	--tekst:    #e9e3f6;
	--przygasz: #a79dc6;
	--cien:     0 18px 50px rgba( 4, 2, 16, .55 );
}

.tkd *,
.tkd *::before,
.tkd *::after { box-sizing: border-box; }

/* `display: grid`/`flex` na stanach bije wbudowane `[hidden]` i oba stany
   pokazywały się naraz. Atrybut ma wygrywać, bo to on niesie stan. */
.tkd [hidden] { display: none !important; }

/* ─────────────────────  szkielet formularza  ──────────────────────────
 *
 * Sam układ, bez wyglądu: wygląd przychodzi z płyty niżej albo — na wąskim
 * ekranie — z bloku awaryjnego. Trzymamy to osobno, żeby zmiana skóry nie
 * rozsypywała siatki.
 */

.tkd-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 16px;
}

.tkd-pole {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.tkd-pole--miasto { grid-column: 1 / -1; }

.tkd-pole > span {
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: .68rem;
	color: var( --przygasz );
}

.tkd-pole input {
	width: 100%;
	border: 1px solid var( --obrys );
	border-radius: 10px;
	background: rgba( 10, 7, 34, .8 );
	color: var( --tekst );
	font: inherit;
	padding: 11px 13px;
}

.tkd-pole input:focus { outline: none; border-color: var( --obrys2 ); }

/* Kalendarz i zegar przeglądarki są czarne na czarnym — odwracamy ikonę. */
.tkd-pole input::-webkit-calendar-picker-indicator { filter: invert( 1 ) opacity( .55 ); cursor: pointer; }

.tkd-podpowiedzi {
	position: absolute;
	z-index: 5;
	top: calc( 100% + 4px );
	left: 0;
	right: 0;
	max-height: 232px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	border: 1px solid var( --obrys2 );
	border-radius: 12px;
	background: #140c34;
	box-shadow: var( --cien );
	text-align: left;
}

.tkd-podpowiedzi li { padding: 9px 11px; border-radius: 8px; cursor: pointer; }
.tkd-podpowiedzi li:hover { background: rgba( 236, 208, 138, .12 ); }
.tkd-podpowiedzi small { display: block; color: var( --przygasz ); }

.tkd-btn {
	grid-column: 1 / -1;
	border: 0;
	border-radius: 999px;
	background: linear-gradient( 100deg, #f4e0ac, var( --zloto2 ) );
	color: #241a06;
	font: inherit;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	cursor: pointer;
	transition: filter .2s, transform .2s;
}

.tkd-btn:hover { filter: brightness( 1.06 ); transform: translateY( -1px ); }
.tkd-btn:disabled { opacity: .55; cursor: default; transform: none; }

.tkd-drobne,
.tkd-blad { grid-column: 1 / -1; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
 *  ZAPROSZENIE — płyta z makiety
 *
 *  Tło to jeden obraz: wąwóz z kryształami po lewej i kamienna rama
 *  z runami po prawej. Tekst i formularz leżą NA nim, w miejscach zmierzonych
 *  na makiecie (pole ramy: 849–1490 px w poziomie, 233–690 w pionie przy
 *  szerokości 1672). Dlatego wszystkie odległości i stopnie pisma są
 *  w `cqw` — jednostce liczonej od szerokości płyty. Zmniejsza się płyta,
 *  zmniejsza się z nią wszystko, a napisy nie wyjeżdżają za obrys ramy.
 * ══════════════════════════════════════════════════════════════════════ */

/* Płyta ma siedzieć w świetle działu, a nie leżeć na nim jak wklejka:
   krawędź jest wygaszona w samym pliku, a pod nią kładziemy przyciemnienie
   i fioletową poświatę tej samej rodziny, co poświaty strony. */
.tkd-plyta {
	container-type: inline-size;
	position: relative;
	aspect-ratio: 1672 / 941;
	background:
		url( "gfx/dobor-plyta.webp" ) center / cover no-repeat,
		radial-gradient( 120% 120% at 50% 50%, rgba( 12, 8, 38, .96 ), rgba( 22, 12, 58, .7 ) 72%, transparent );
	filter: drop-shadow( 0 0 60px rgba( 92, 52, 168, .38 ) );
}

.tkd-plyta__tekst {
	position: absolute;
	left: 6.3%;
	top: 17.4%;
	width: 31.1%;
}

.tkd-plyta .tkd-nad {
	margin: 0;
	font-size: .9cqw;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var( --zloto2 );
}

.tkd-plyta .tkd-nad i { font-style: normal; margin: 0 .5em; }

.tkd-tytul {
	margin: 2.4cqw 0 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 400;
	font-size: 3.47cqw;
	line-height: 1.3;
	color: #e0bd7e;
}

/* Kreska z rombem — ten sam znak, którym makieta dzieli tytuł od objaśnienia. */
.tkd-ozdoba {
	display: flex;
	align-items: center;
	gap: .8cqw;
	margin: 1.5cqw 0 0;
	color: var( --zloto2 );
}

.tkd-ozdoba i { flex: 1; height: 1px; background: linear-gradient( 90deg, transparent, rgba( 201, 162, 74, .55 ), transparent ); }
.tkd-ozdoba b { font-size: .8cqw; font-weight: 400; }

.tkd-plyta .tkd-lead {
	margin: 1.6cqw 0 0;
	max-width: none;
	font-size: 1.14cqw;
	line-height: 1.95;
	color: #cfc7e4;
}

/* ─────────────────────────  formularz na płycie  ───────────────────── */

.tkd-plyta .tkd-form {
	position: absolute;
	left: 50.8%;
	top: 24.8%;
	width: 38.3%;
	display: grid;
	grid-template-columns: 1.29fr 1fr;
	gap: 2cqw 1.6cqw;
	padding: 0;
	border: 0;
	background: none;
}

/* Odstęp podpis → pole zmierzony na makiecie: 40 px przy 1672 szerokości. */
.tkd-plyta .tkd-pole { gap: 2.4cqw; }

.tkd-plyta .tkd-pole > span {
	font-size: .82cqw;
	letter-spacing: .18em;
	color: #cbbfa0;
}

.tkd-plyta .tkd-pole input {
	height: 3.6cqw;
	padding: 0 1.1cqw;
	border: 1px solid rgba( 201, 162, 74, .34 );
	border-radius: .6cqw;
	background: rgba( 6, 6, 16, .55 );
	font-size: 1.02cqw;
	color: #efe7d3;
}

.tkd-plyta .tkd-pole input::placeholder { color: rgba( 205, 195, 170, .5 ); }

.tkd-plyta .tkd-pole input:focus {
	border-color: rgba( 236, 208, 138, .8 );
	box-shadow: 0 0 0 .2cqw rgba( 236, 208, 138, .16 );
}

.tkd-plyta .tkd-podpowiedzi {
	top: calc( 100% + .3cqw );
	padding: .4cqw;
	border-radius: .7cqw;
	background: #0d0a20;
}

.tkd-plyta .tkd-podpowiedzi li { font-size: .95cqw; padding: .6cqw .7cqw; }
.tkd-plyta .tkd-podpowiedzi small { font-size: .8cqw; }

.tkd-plyta .tkd-btn {
	height: 3.95cqw;
	padding: 0;
	border-radius: 999px;
	background: linear-gradient( 180deg, #f6dfa4 0%, #e5c274 46%, #c69a45 100% );
	box-shadow: 0 .3cqw 1.4cqw rgba( 214, 170, 90, .28 );
	font-size: 1.02cqw;
	letter-spacing: .2em;
	color: #241a06;
}

.tkd-plyta .tkd-drobne,
.tkd-plyta .tkd-blad {
	margin: 0;
	font-size: .9cqw;
	line-height: 1.7;
	color: #b3a98c;
}

.tkd-plyta .tkd-blad { color: #f0a58a; }

/* ── wąski ekran: płyta schodzi do tła, treść wraca do zwykłego układu ──
 *
 * Rama z makiety ma sens tylko wtedy, gdy mieści formularz w swoim polu.
 * Poniżej ~900 px pole byłoby węższe niż pojedyncze pole daty, więc
 * zostawiamy z płyty samą atmosferę: wąwóz w tle, treść w kolumnie.
 */
@media ( max-width: 900px ) {
	.tkd-plyta {
		aspect-ratio: auto;
		padding: 26px 20px 28px;
		background-image: linear-gradient( rgba( 8, 6, 22, .74 ), rgba( 8, 6, 22, .84 ) ), url( "gfx/dobor-plyta.webp" );
		background-position: center;
		background-size: cover;
		border: 1px solid var( --obrys );
		border-radius: 16px;
	}

	.tkd-plyta__tekst,
	.tkd-plyta .tkd-form { position: static; left: auto; top: auto; width: auto; }

	.tkd-plyta .tkd-nad { font-size: .7rem; }
	.tkd-tytul { margin-top: 12px; font-size: clamp( 1.5rem, 6vw, 2rem ); }
	.tkd-ozdoba { margin-top: 14px; gap: 10px; }
	.tkd-ozdoba b { font-size: .7rem; }
	.tkd-plyta .tkd-lead { margin-top: 14px; font-size: .95rem; line-height: 1.7; }

	.tkd-plyta .tkd-form {
		grid-template-columns: 1fr 1fr;
		gap: 14px 16px;
		margin-top: 24px;
	}

	.tkd-plyta .tkd-pole { gap: 7px; }
	.tkd-plyta .tkd-pole > span { font-size: .68rem; }
	.tkd-plyta .tkd-pole input { height: auto; padding: 11px 13px; border-radius: 10px; font-size: .95rem; }
	.tkd-plyta .tkd-podpowiedzi { top: calc( 100% + 4px ); padding: 6px; border-radius: 12px; }
	.tkd-plyta .tkd-podpowiedzi li { font-size: .9rem; padding: 9px 11px; }
	.tkd-plyta .tkd-podpowiedzi small { font-size: .76rem; }
	.tkd-plyta .tkd-btn { height: auto; padding: 13px 22px; font-size: .8rem; }
	.tkd-plyta .tkd-drobne,
	.tkd-plyta .tkd-blad { margin-top: 0; font-size: .78rem; }
}

@media ( max-width: 560px ) {
	.tkd-plyta .tkd-form { grid-template-columns: 1fr; }
}

/* ────────────────────────────────  wynik  ──────────────────────────── */

.tkd-wynik {
	padding: 26px 28px 28px;
	border: 1px solid var( --obrys );
	border-radius: 20px;
	background: var( --panel );
	box-shadow: var( --cien );
}

.tkd-glowa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	padding-bottom: 18px;
	margin-bottom: 20px;
	border-bottom: 1px solid var( --obrys );
}

.tkd-osie {
	margin: 10px 0 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp( 1.25rem, 2vw, 1.7rem );
	color: var( --tekst );
}

.tkd-bilans { display: flex; gap: 14px; flex-wrap: wrap; }

.tkd-zywiol {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 78px;
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --przygasz );
}

.tkd-zywiol__pasek {
	height: 4px;
	border-radius: 2px;
	background: rgba( 236, 208, 138, .16 );
}

.tkd-zywiol__pasek i {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: linear-gradient( 90deg, var( --zloto ), var( --zloto2 ) );
}

.tkd-zmien {
	padding: 9px 18px;
	border: 1px solid var( --obrys2 );
	border-radius: 999px;
	background: transparent;
	color: var( --tekst );
	font: inherit;
	font-size: .76rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
}

.tkd-zmien:hover { border-color: var( --zloto ); }

.tkd-siatka {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 18px;
}

/* Kafel jest przyciskiem — zerujemy to, co przeglądarka dokłada guzikom,
   i zostawiamy wygląd karty. */
.tkd-karta {
	appearance: none;
	width: 100%;
	font: inherit;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	padding: 18px 18px 20px;
	border: 1px solid var( --obrys );
	border-radius: 16px;
	background:
		radial-gradient( 120% 80% at 50% 0%, color-mix( in srgb, var( --kk, #6b4bb8 ) 22%, transparent ), transparent 68% ),
		var( --panel2 );
	text-align: left;
	transition: border-color .3s, transform .3s;
}

.tkd-karta:hover { border-color: var( --obrys2 ); transform: translateY( -3px ); }
.tkd-karta:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

.tkd-karta__rola {
	margin: 0 0 12px;
	font-size: .64rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var( --zloto2 );
}

.tkd-karta__obraz { display: grid; place-items: center; height: 132px; margin-bottom: 12px; }
.tkd-karta__obraz img { max-width: 100%; max-height: 132px; object-fit: contain; }

.tkd-karta__nazwa {
	margin: 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.3rem;
	letter-spacing: .06em;
	color: var( --zloto );
}

.tkd-karta__gdzie { margin: 6px 0 0; font-size: .8rem; color: var( --tekst ); }
.tkd-karta__powod { margin: 8px 0 0; font-size: .78rem; line-height: 1.6; color: var( --przygasz ); }

@media ( max-width: 980px ) {
	.tkd-zaproszenie { grid-template-columns: minmax( 0, 1fr ); gap: 22px; }
	.tkd-lead { max-width: none; }
}

@media ( max-width: 560px ) {
	.tkd { padding: 20px 16px 22px; }
	.tkd-form { grid-template-columns: 1fr; }
}

@media ( prefers-reduced-motion: reduce ) {
	.tkd-karta, .tkd-btn { transition: none; }
	.tkd-karta:hover, .tkd-btn:hover { transform: none; }
}