/* Panel „Zadaj pytanie” — oprawa 1:1 z mockupu.
 *
 * Nakładka na `tarot-ask.css`: cała warstwa graficzna idzie z zasobów
 * dostarczonych do mockupu (tło z ramą, pole, przycisk, ikony kafli, iskra),
 * a nie z odtwarzania ich gradientami. Układ i typografia są przepisane
 * z makiety: krój szeryfowy na tytuł i przycisk, Jost na drobny tekst.
 *
 * Tło z ramą rozciągamy na cały panel (`100% 100%`), więc ornamenty zostają
 * tam, gdzie mają być — pigułki w górnych rogach, słońca na bokach, rozbłyski
 * na środkach krawędzi — niezależnie od tego, jak wysoki zrobi się panel.
 *
 * Potrójna klasa `.tq.tq.tq` bierze górę nad `.tq.tq` z arkusza bazowego bez
 * sięgania po `!important`.
 */

/* ──────────────────────────────  panel  ────────────────────────────── */

.tq.tq.tq {
	position: relative;
	max-width: 52rem;
	/* Tło niesie własną poświatę i wytapia się na brzegach, więc panel nie ma
	 * już ani ramki, ani cienia — inaczej wróciłby twardy prostokąt. Grafika
	 * ma po ~3,75% marginesu na blask z każdej strony; padding musi go objąć,
	 * żeby treść zaczynała się dopiero za złotą linią. */
	padding: 3.6rem clamp( 2.2rem, 10%, 5.5rem ) 3.9rem;
	border: 0;
	border-radius: 0;
	background: url( gfx/panel-tlo.png?v=5 ) 0 0 / 100% 100% no-repeat;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
}

/* Ornamenty niesie tło, więc glify, które je zastępowały, są zbędne. */
.tq.tq.tq::before,
.tq.tq.tq::after {
	content: none;
}

.tq.tq.tq .tq__eyebrow::before {
	content: none;
}

/* ────────────────────────────  typografia  ──────────────────────────── */

.tq.tq.tq .tq__eyebrow {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp( 1.5rem, 4.4vw, 2.35rem );
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #e4d1a0;
	text-shadow: 0 0 22px rgba( 201, 168, 76, 0.26 );
	margin: 0 0 0.55rem;
}

.tq.tq.tq > .tq__przyklad {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: clamp( 1.05rem, 2.4vw, 1.35rem );
	color: #b7a7dd;
	margin: 0 0 0.35rem;
}

.tq.tq.tq > .tq__hint {
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 0.95rem;
	color: #8d87b1;
	margin: 0 0 1.5rem;
}

/* ──────────────────────────  pole pytania  ─────────────────────────── */

.tq.tq.tq .tq__field {
	width: 100%;
	margin: 0 0 1.6rem;
	padding: 0;
	background: url( gfx/pole.png?v=2 ) 0 0 / 100% 100% no-repeat;
}

.tq.tq.tq .tq__input {
	width: 100%;
	box-sizing: border-box;
	min-height: 4.1rem;
	padding: 1.15rem 3.2rem 1.15rem 1.9rem;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 1.02rem;
	color: #ddd6f2;
	resize: none;
}

.tq.tq.tq .tq__input::placeholder {
	color: #827ca6;
	font-style: italic;
}

.tq.tq.tq .tq__input:focus {
	outline: none;
	box-shadow: none;
}

/* Iskra w prawym końcu pola — jak w makiecie. */
.tq.tq.tq .tq__field::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1.15rem;
	width: 1.35rem;
	height: 1.35rem;
	margin-top: -0.675rem;
	background: url( gfx/iskra.png?v=2 ) center / contain no-repeat;
	pointer-events: none;
}

/* ─────────────────────────  „poznaj rozkład”  ───────────────────────── */

.tq.tq.tq .tq__poznaj {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	width: 100%;
	margin: 0 0 1.1rem;
	padding: 0;
	border: 0;
	background: none;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 0.82rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #ccb88a;
}

.tq.tq.tq .tq__poznaj::before,
.tq.tq.tq .tq__poznaj::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient( 90deg, transparent, rgba( 201, 168, 76, 0.38 ), transparent );
}

/* ────────────────────────────  wybór płci  ──────────────────────────── */

.tq.tq.tq .tq__plec {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin: 0 0 1.4rem;
}

.tq.tq.tq .tq__plec-btn {
	padding: 0.62rem 1.6rem;
	border: 1px solid rgba( 120, 98, 180, 0.6 );
	border-radius: 9999px;
	background: rgba( 26, 20, 52, 0.5 );
	box-shadow: 0 0 14px rgba( 90, 60, 170, 0.2 );
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 0.98rem;
	letter-spacing: 0.06em;
	color: #c9c1e6;
	transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.tq.tq.tq .tq__plec-btn:hover {
	border-color: rgba( 201, 168, 76, 0.55 );
	color: #e2d3a6;
}

.tq.tq.tq .tq__plec-btn[ aria-pressed='true' ],
.tq.tq.tq .tq__plec-btn.is-active,
.tq.tq.tq .tq__plec-btn.is-wybrana {
	border-color: rgba( 201, 168, 76, 0.85 );
	background: rgba( 38, 27, 12, 0.42 );
	box-shadow: 0 0 16px rgba( 201, 168, 76, 0.22 );
	color: #e8d9ab;
}

/* ─────────────────────────────  przycisk  ───────────────────────────── */

.tq.tq.tq .tq__actions {
	display: flex;
	justify-content: center;
	margin: 0 0 1.7rem;
}

.tq.tq.tq .tq__send {
	width: min( 100%, 30rem );
	min-height: 3.8rem;
	padding: 1.05rem 2.4rem;
	border: 0;
	border-radius: 12px;
	background: url( gfx/przycisk.png?v=2 ) 0 0 / 100% 100% no-repeat;
	box-shadow: 0 0 26px rgba( 210, 168, 70, 0.3 );
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp( 1rem, 2.3vw, 1.28rem );
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #2b1d05;
	text-shadow: none;
	transition: box-shadow 0.22s, transform 0.22s;
}

.tq.tq.tq .tq__send:hover {
	box-shadow: 0 0 34px rgba( 210, 168, 70, 0.45 );
	transform: translateY( -1px );
}

/* ──────────────────────────  kafle na dole  ─────────────────────────── */

.tq.tq.tq .tq__benefity {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	align-items: start;
	gap: 1.2rem;
	width: 100%;
	margin: 0;
	padding: 1.2rem 0 0;
	border-top: 0;
	background:
		linear-gradient( 90deg, transparent, rgba( 201, 168, 76, 0.35 ), transparent )
		top / 100% 1px no-repeat;
}

.tq.tq.tq .tq__benefit {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	max-width: none;
	text-align: left;
}

/* Iskra rozdzielająca kafle — z makiety, tylko między nimi. */
.tq.tq.tq .tq__benefit + .tq__benefit::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -0.9rem;
	width: 0.85rem;
	height: 0.85rem;
	margin-top: -0.425rem;
	background: url( gfx/iskra.png?v=2 ) center / contain no-repeat;
	opacity: 0.6;
}

.tq.tq.tq .tq__benefit-ikona {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 0;
	background: center / contain no-repeat;
	box-shadow: none;
	/* Glif i emoji ustępują miejsca ikonie z makiety. */
	font-size: 0;
	color: transparent;
}

.tq.tq.tq .tq__benefit-ikona img {
	display: none;
}

.tq.tq.tq .tq__benefit:nth-of-type( 1 ) .tq__benefit-ikona {
	background-image: url( gfx/ikona-karta.png?v=2 );
}

.tq.tq.tq .tq__benefit:nth-of-type( 2 ) .tq__benefit-ikona {
	background-image: url( gfx/ikona-ksiezyc.png?v=2 );
}

.tq.tq.tq .tq__benefit:nth-of-type( 3 ) .tq__benefit-ikona {
	background-image: url( gfx/ikona-gwiazda.png?v=2 );
}

.tq.tq.tq .tq__benefit-tekst {
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 0.76rem;
	line-height: 1.38;
	color: #8b85ac;
}

.tq.tq.tq .tq__benefit-tekst b {
	display: block;
	margin-bottom: 0.15rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #ddcfa8;
}

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

@media ( max-width: 640px ) {
	.tq.tq.tq {
		padding: 2.4rem 1.8rem 2.2rem;
	}

	.tq.tq.tq .tq__benefity {
		grid-template-columns: 1fr;
		gap: 0.9rem;
	}

	.tq.tq.tq .tq__benefit + .tq__benefit::before {
		content: none;
	}
}