/* Kartka na papier — pamiątka z jednego rozkładu.
 *
 * Nie ma tu biblioteki PDF: dokument budujemy w przeglądarce i oddajemy jej
 * do zapisania. Ten sam mechanizm, którym drukuje się horoskop.
 *
 * Kluczowe ograniczenie kształtuje cały projekt: przeglądarki domyślnie NIE
 * drukują teł. Ozdoba stoi więc na rzeczach, które drukują się zawsze —
 * obrazkach kart i złotych włoskowatych liniach. Wypełnienia i pas nagłówka
 * są dodatkiem dla tych, którzy włączą grafikę tła; bez nich kartka dalej
 * wygląda jak dokument, a nie jak biała strona z tekstem.
 *
 * Ekranowe złoto (#C9A84C) na papierze blednie, dlatego druk ma własne,
 * ciemniejsze (#A8842F). Tak samo tło: pergamin zamiast bieli.
 */

.twd {
	--pergamin: #f6f1e6;
	--atrament: #171232;
	--zloto:    #a8842f;
	--fiolet:   #3c2a6b;
	--popiol:   #6c6584;

	display: none;
}

/* Przycisk „Pobierz PDF" stoi obok odsłuchu i wygląda jak on. */
.twd-przycisk {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 1.4rem;
	border: 1px solid rgba( 201, 168, 76, 0.5 );
	border-radius: 9999px;
	background: rgba( 26, 20, 52, 0.7 );
	color: #e2d3a6;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.twd-przycisk:hover {
	border-color: rgba( 201, 168, 76, 0.9 );
	color: #f0e4c4;
}

.twd-przycisk svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ───────────────────────────  druk  ─────────────────────────── */

@media print {

	@page {
		size: A4;
		margin: 14mm 15mm 16mm;
	}

	/* Na papier idzie tylko kartka. */
	body > *:not( .twd ) {
		display: none !important;
	}

	/* Motyw i Bootstrap potrafią narzucić stronie szerokość; przy druku
	 * kartka wychodziła wtedy szersza od arkusza i prawa krawędź się gubiła. */
	html,
	body {
		background: #fff !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	.twd {
		display: block !important;
		box-sizing: border-box;
		width: auto !important;
		max-width: 100% !important;
		overflow: visible;
		color: var( --atrament );
		font-family: 'Cormorant Garamond', Georgia, serif;
		font-size: 11.5pt;
		line-height: 1.55;
		background: var( --pergamin );
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

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

	/* ── nagłówek ── */

	.twd__marka {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.7em;
		margin: 0 0 4mm;
		font-family: 'Jost', system-ui, sans-serif;
		font-size: 7.5pt;
		letter-spacing: 0.42em;
		text-transform: uppercase;
		color: var( --zloto );
	}

	.twd__marka::before,
	.twd__marka::after {
		content: '';
		flex: 1 1 auto;
		height: 0.6pt;
		background: var( --zloto );
	}

	.twd__tytul {
		margin: 0 0 1.5mm;
		font-size: 27pt;
		font-weight: 500;
		line-height: 1.1;
		letter-spacing: 0.01em;
		text-align: center;
	}

	/* Pytanie jest powodem, dla którego ta kartka istnieje — stoi więc zaraz
	 * pod tytułem, przed metryczką. */
	.twd__pytanie {
		max-width: 120mm;
		margin: 0 auto 2mm;
		font-size: 13pt;
		font-style: italic;
		line-height: 1.4;
		text-align: center;
		color: var( --fiolet );
	}

	.twd__meta {
		margin: 0 0 6mm;
		font-family: 'Jost', system-ui, sans-serif;
		font-size: 8pt;
		letter-spacing: 0.24em;
		text-transform: uppercase;
		text-align: center;
		color: var( --popiol );
	}

	/* ── sygnatura: stół z kartami tego rozkładu ── */

	.twd__stol {
		position: relative;
		margin: 0 0 7mm;
		padding: 5mm 4mm;
		border-top: 0.8pt solid var( --zloto );
		border-bottom: 0.8pt solid var( --zloto );
		background: rgba( 60, 42, 107, 0.06 );
		break-inside: avoid;
	}

	.twd__karty-rzad {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
		gap: 4mm;
	}

	.twd__mini {
		width: 24mm;
		text-align: center;
	}

	.twd__mini img {
		display: block;
		width: 100%;
		height: 36mm;
		object-fit: cover;
		border: 0.6pt solid var( --zloto );
		border-radius: 1mm;
	}

	.twd__mini.odwrocona img {
		transform: rotate( 180deg );
	}

	.twd__mini figcaption {
		margin-top: 1.4mm;
		font-family: 'Jost', system-ui, sans-serif;
		font-size: 6.5pt;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		line-height: 1.3;
		color: var( --popiol );
	}

	/* ── spis kart ── */

	.twd__dzial {
		display: flex;
		align-items: center;
		gap: 0.8em;
		margin: 0 0 4mm;
		font-family: 'Jost', system-ui, sans-serif;
		font-size: 8pt;
		letter-spacing: 0.32em;
		text-transform: uppercase;
		color: var( --zloto );
	}

	.twd__dzial::after {
		content: '';
		flex: 1 1 auto;
		height: 0.5pt;
		background: var( --zloto );
		opacity: 0.55;
	}

	.twd__lista {
		margin: 0 0 7mm;
		padding: 0;
		list-style: none;
	}

	.twd__pozycja {
		padding: 2.4mm 0;
		border-bottom: 0.4pt solid rgba( 168, 132, 47, 0.35 );
		break-inside: avoid;
	}

	.twd__pozycja:last-child {
		border-bottom: 0;
	}

	.twd__pozycja-nag {
		display: flex;
		align-items: baseline;
		gap: 0.5em;
	}

	.twd__numer {
		font-size: 13pt;
		color: var( --zloto );
	}

	.twd__nazwa {
		font-size: 13pt;
		font-weight: 600;
	}

	.twd__orientacja {
		font-family: 'Jost', system-ui, sans-serif;
		font-size: 7pt;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var( --popiol );
	}

	.twd__gdzie {
		margin: 0.6mm 0 0;
		font-family: 'Jost', system-ui, sans-serif;
		font-size: 7.5pt;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var( --fiolet );
	}

	.twd__klucze {
		margin: 1mm 0 0;
		font-size: 10.5pt;
		font-style: italic;
		color: #3a3358;
	}

	/* ── odczytanie ── */

	.twd__tresc p {
		margin: 0 0 3mm;
		text-align: justify;
		hyphens: auto;
	}

	/* Inicjał otwierający odczytanie — jedyny ozdobnik w tej części. */
	.twd__tresc p:first-of-type::first-letter {
		float: left;
		margin: 1mm 1.6mm 0 0;
		font-size: 30pt;
		line-height: 0.82;
		color: var( --zloto );
	}

	/* ── stopka ── */

	.twd__stopka {
		margin-top: 8mm;
		padding-top: 3mm;
		border-top: 0.6pt solid var( --zloto );
		font-family: 'Jost', system-ui, sans-serif;
		font-size: 7pt;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		text-align: center;
		color: var( --popiol );
	}

	.twd__stopka b {
		color: var( --zloto );
		font-weight: 500;
	}
}