/* =====================================================================
 * Tarot Card single, szata BIAŁA ZE ZŁOTEM (2026-08-19).
 *
 * Poprzednia wersja stała na kremowym papierze (#f7f3ec) z granatowymi
 * blokami. Ta wersja: tło białe, granat zostaje WYŁĄCZNIE jako kolor
 * tekstu i cienkich kresek, cały akcent niesie złoto.
 *
 * Paleta i typografia wzięte z horoskopów (`wiemwiecej-horoskopy/assets/
 * horoskop.css`), żeby serwis czytał się jako jedna całość: granat #0d1240,
 * złoto ciemne #b3922e, tekst #4a4860, kreska chłodna #ecebf3, kreska
 * ciepła #ece5d6. Strona karty NIE jest kopią horoskopu: hero to jasny
 * panel z kartą w białym passe-partout, treść rozdzielają włosowe kreski,
 * a jedyny pas w kolorze to sekcja narzędzia i FAQ.
 *
 * Konwencje serwisu respektowane tutaj:
 *   - bez szeryfów i kursyw ozdobnych (i tak wymusza to plain-font.css),
 *   - pigułki wycofane: przycisk narzędzia to link tekstowy ze złotą
 *     strzałką, hasła w hero to rząd słów rozdzielony złotą kropką,
 *   - słowa klucze zostają znacznikami, ale płaskimi, nie pigułkami.
 *
 * Wszystko scoped pod `.wiem-single--tarot-card`, zero kolizji z wtyczką
 * kategorii (`wiem-cp-*`) i motywem potomnym.
 * ===================================================================== */

.wiem-single--tarot-card {
	/* PALETA */
	--c-ink: #0d1240;          /* granat, nagłówki i wyróżnienia */
	--c-ink-soft: #4a4860;     /* tekst akapitów */
	--c-ink-mute: #8a87a0;     /* etykiety drugiego planu */
	--c-paper: #fff;
	--c-paper-2: #faf7f0;      /* ciepły pas (FAQ, tła kart) */
	--c-cream: #faf7f0;
	--c-line: #ecebf3;         /* kreska chłodna, rozdziela sekcje */
	--c-line-warm: #ece5d6;    /* kreska ciepła, obwódki kafli */
	--c-line-strong: #e2d5b0;
	--c-gold: #b3922e;         /* złoto czytelne na bieli */
	--c-gold-2: #b88a3a;
	--c-gold-soft: #d8b15e;    /* złoto jaśniejsze, kreski i liczby */
	--c-gold-line: rgba(187, 154, 87, 0.45);
	--c-gold-wash: rgba(187, 154, 87, 0.08);
	--c-navy: #0d1240;
	--c-navy-2: #1c2559;
	--c-navy-deep: #0b1038;

	/* Krój: globalny plain-font.css i tak wymusza bezszeryfowy na całym
	   froncie, więc zmienna „serif" wskazuje ten sam stos. Zostaje tylko
	   po to, żeby reguły niżej nie kłamały o swoim zamiarze. */
	--ff-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
	--ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

	background: var(--c-paper);
	color: var(--c-ink-soft);
	font-family: var(--ff-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.wiem-single--tarot-card .container,
.wiem-single--tarot-card .post-hero .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}

/* Złoty akcent w nagłówkach (znacznik {{accent}}). Bez kursywy, bo ta
   w serwisie jest wycofana, a plain-font.css i tak by ją zdjął. */
.wiem-single--tarot-card .accent {
	color: var(--c-gold);
	font-style: normal;
}

/* ============================================================
 * HERO: biały pasek okruszków, pod nim złoty pas przez cały ekran
 * ============================================================ */
.wiem-single--tarot-card .post-crumbs-bar {
	background: var(--c-paper);
}

.wiem-single--tarot-card .post-hero-crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	padding: 18px 0 18px;
	margin-bottom: 0;
}
.wiem-single--tarot-card .post-hero-crumbs a {
	color: #5b6280;
	text-decoration: none;
	transition: color 0.2s;
}
.wiem-single--tarot-card .post-hero-crumbs a:hover { color: var(--c-ink); }
.wiem-single--tarot-card .post-hero-crumbs .sep { opacity: 0.4; }
.wiem-single--tarot-card .post-hero-crumbs .cur { color: var(--c-gold-2); }

/* Pas przez całą szerokość ekranu, te same odcienie kremu co hero
   horoskopów (#fbf6e8 do #f4ead0). Kreska u dołu jest konieczna, bo pas
   z metryką pod spodem jest tylko o pół tonu ciemniejszy i bez niej oba
   zlewałyby się w jedną plamę. */
.wiem-single--tarot-card .post-hero {
	background: linear-gradient(180deg, #fbf6e8 0%, #f4ead0 100%);
	border-top: 1px solid #efe6d2;
	border-bottom: 1px solid #e6d9b8;
	padding: 46px 0 52px;
	position: relative;
	overflow: hidden;
}
/* Rozświetlenie w lewym górnym rogu, białe a nie złote: złoto na złocie
   przy tej przezroczystości jest niewidoczne. */
.wiem-single--tarot-card .post-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 14% 16%, rgba(255, 255, 255, 0.7), transparent 56%);
}
.wiem-single--tarot-card .post-hero .container {
	position: relative;
	z-index: 1;
}

.wiem-single--tarot-card .post-hero-grid {
	display: grid;
	grid-template-columns: 272px minmax(0, 1fr);
	gap: 52px;
	align-items: center;
}

/* HERO: karta w białym passe-partout */
.wiem-single--tarot-card .post-card {
	position: relative;
	width: 100%;
	aspect-ratio: 2/3;
	background: #fff;
	border: 1px solid var(--c-gold-line);
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(13, 18, 64, 0.16);
	overflow: hidden;
	margin: 0;
}

/* Fallback dla przeglądarek bez aspect-ratio (Safari < 15, Android < 87).
   Bez tego kontener miał height: 0 i obrazek się nie pokazywał. */
@supports not (aspect-ratio: 2/3) {
	.wiem-single--tarot-card .post-card {
		height: 0;
		padding-bottom: 150%; /* 3/2 = 1.5, odpowiednik aspect-ratio 2/3 */
	}
}

/* Grafikę karty pokazujemy w CAŁOŚCI. Wcześniej szła przez object-fit:
   cover w kadrze 2:3 i skanom Rider-Waite ścinało góry i doły. */
.wiem-single--tarot-card .post-card-img {
	position: absolute;
	top: 10px;
	left: 10px;
	/* Rozmiar liczony wprost, a nie przez inset. Obrazek to element
	   zastępowany: przy width/height auto przeglądarka bierze rozmiar
	   własny pliku i ignoruje prawą oraz dolną krawędź, więc grafika
	   wychodziła poza passe-partout, a object-fit nie miał czego dopasować. */
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	object-fit: contain;
	border-radius: 4px;
	z-index: 1;
}

/* Ozdobna ramka wewnętrzna, numer i nazwa na karcie mają sens tylko wtedy,
   gdy grafiki NIE MA. Na realnym skanie leżały na rysunku i go zaśmiecały. */
.wiem-single--tarot-card .post-card:has(.post-card-img) .post-card-frame,
.wiem-single--tarot-card .post-card:has(.post-card-img) .post-card-roman,
.wiem-single--tarot-card .post-card:has(.post-card-img) .post-card-name {
	display: none;
}

/* Wariant bez grafiki: kremowe tło i złota typografia. */
.wiem-single--tarot-card .post-card:has(.post-card-ph) {
	background: linear-gradient(180deg, #fdfaf2 0%, #f6efdd 100%);
}

.wiem-single--tarot-card .post-card-frame {
	position: absolute;
	inset: 12px;
	border: 1px solid var(--c-gold-line);
	border-radius: 4px;
	pointer-events: none;
	z-index: 2;
}

.wiem-single--tarot-card .post-card-roman {
	position: absolute;
	top: 26px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.3em;
	color: var(--c-gold);
	z-index: 3;
}

.wiem-single--tarot-card .post-card-ph {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: rgba(179, 146, 46, 0.55);
	gap: 16px;
	padding: 60px 24px;
	z-index: 1;
}
.wiem-single--tarot-card .post-card-ph svg {
	width: 56px;
	height: 84px;
}
.wiem-single--tarot-card .post-card-ph .hint {
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-gold-2);
}
.wiem-single--tarot-card .post-card-ph .lbl {
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(179, 146, 46, 0.55);
}

.wiem-single--tarot-card .post-card-name {
	position: absolute;
	bottom: 26px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 3;
}
.wiem-single--tarot-card .post-card-name .nm {
	font-size: 18px;
	font-weight: 700;
	color: var(--c-ink);
	letter-spacing: 0.02em;
}
.wiem-single--tarot-card .post-card-name .ln {
	display: block;
	width: 48px;
	height: 1px;
	background: var(--c-gold-soft);
	margin: 12px auto 0;
}

/* HERO: kolumna tytułowa */
.wiem-single--tarot-card .post-title-side .post-eyebrow {
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--c-gold);
	margin-bottom: 14px;
	font-weight: 700;
}

/* Duży numer rzymski nad tytułem powtarzał to, co stoi już w etykiecie
   („Kielichy · Karta I"), więc schodzi ze strony. Reguła zostaje, bo
   szablon nadal ten element renderuje. */
.wiem-single--tarot-card .post-title-side .roman-big {
	display: none;
}

.wiem-single--tarot-card .post-title-side h1 {
	font-size: clamp(38px, 5vw, 58px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--c-ink);
	margin: 0 0 12px;
}

.wiem-single--tarot-card .post-title-side .h-pron {
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--c-ink-mute);
	margin-bottom: 20px;
}

.wiem-single--tarot-card .post-title-side .lead {
	/* Motyw potomny ma własną regułę `.wiem-single .lead`: kursywa, szeryfy,
	   kreska u dołu i 48 px dopełnienia. Zdejmujemy ją tu w całości, bo
	   w hero karty kreskę niesie już rząd słów kluczy. */
	font-style: normal;
	font-size: 17px;
	line-height: 1.75;
	color: var(--c-ink-soft);
	max-width: 560px;
	margin: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* Słowa klucze w hero: rząd określeń rozdzielony złotą kropką, tak jak
   hasła prognozy w horoskopie. Świadomie NIE pigułki, te są wycofane. */
.wiem-single--tarot-card .post-hero-keywords {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--c-gold-line);
	max-width: 560px;
}
.wiem-single--tarot-card .post-hero-keyword {
	display: inline-flex;
	align-items: center;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-ink);
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}
.wiem-single--tarot-card .post-hero-keyword:not(:last-child)::after {
	content: "";
	flex: none;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #c9a14a;
	margin: 0 14px;
}

/* ============================================================
 * KARTA W SKRÓCIE: drugi pas pod hero
 *
 * Metryka karty i słowa klucze, które wcześniej stały w kolumnie bocznej
 * jako drobne znaczniki. Pas jest o pół tonu ciemniejszy od hero, żeby
 * czytał się jako osobne piętro strony, a nie jego przedłużenie.
 * Słowa klucze idą tu zwykłym pismem rozdzielonym złotą kropką: wersaliki
 * w ramkach przy dwunastu hasłach robiły się nie do przeczytania.
 * ============================================================ */
.wiem-single--tarot-card .card-facts {
	background: linear-gradient(180deg, #f2e6c9 0%, #ebdcb6 100%);
	border-bottom: 1px solid #dccb9d;
	padding: 22px 0 24px;
}

/* Elastyczny rząd, a nie siatka na równe kolumny: karta ma od trzech do
   siedmiu pozycji i przy siatce trzy z nich rozjeżdżały się na całą
   szerokość ekranu z wielkimi dziurami pomiędzy. */
.wiem-single--tarot-card .cf-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 54px;
	margin: 0;
}
.wiem-single--tarot-card .cf-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* Bez `flex: none` pozycje ściskały się nawzajem i „Litera" (hebrajska
	   litera plus nazwa) była ucinana w połowie. */
	flex: none;
	max-width: 100%;
}
.wiem-single--tarot-card .cf-item dt {
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8f7526;
	font-weight: 700;
	margin: 0;
}
.wiem-single--tarot-card .cf-item dd {
	/* Litery hebrajskie są pisane od prawej i bez izolacji przestawiały
	   nawiasy w sąsiednim tekście. */
	direction: ltr;
	unicode-bidi: isolate;
	font-size: 15px;
	font-weight: 700;
	color: var(--c-ink);
	margin: 0;
	line-height: 1.3;
}

.wiem-single--tarot-card .cf-keys {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(143, 117, 38, 0.28);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wiem-single--tarot-card .cf-kw {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 14px;
	align-items: baseline;
}
.wiem-single--tarot-card .cf-kw-lbl {
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8f7526;
	font-weight: 700;
}
.wiem-single--tarot-card .cf-kw--rev .cf-kw-lbl { color: #6f6a52; }
.wiem-single--tarot-card .cf-kw-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--c-ink);
	font-weight: 600;
}
.wiem-single--tarot-card .cf-kw--rev .cf-kw-list { color: #4a4860; font-weight: 500; }
.wiem-single--tarot-card .cf-kw-list li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}
.wiem-single--tarot-card .cf-kw-list li::before { content: none; }
.wiem-single--tarot-card .cf-kw-list li:not(:last-child)::after {
	content: "";
	flex: none;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #c9a14a;
	margin: 0 12px;
}

/* ============================================================
 * POST-SHELL: siatka TOC | treść | kolumna boczna
 * ============================================================ */
.wiem-single--tarot-card .post-shell {
	background: var(--c-paper);
	padding: 52px 0 76px;
}

/* Pusty element rozpychający z poprzedniej szaty. Odstęp niesie teraz
   dopełnienie sekcji. */
.wiem-single--tarot-card .post-shell::before {
	display: none;
}

.wiem-single--tarot-card .post-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr) 300px;
	gap: 56px;
	align-items: flex-start;
}

/* ============================================================
 * SPIS TREŚCI: przyklejona lewa kolumna
 * ============================================================ */
.wiem-single--tarot-card .toc {
	position: sticky;
	top: 32px;
	font-size: 13px;
}

.wiem-single--tarot-card .toc-eyebrow {
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-gold);
	font-weight: 700;
	margin-bottom: 14px;
}

.wiem-single--tarot-card .toc-list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	border-left: 1px solid var(--c-line);
}
.wiem-single--tarot-card .toc-list li {
	margin: 0;
	padding: 0;
}
.wiem-single--tarot-card .toc-list a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 7px 0 7px 16px;
	color: #6f6c86;
	text-decoration: none;
	font-size: 12.5px;
	line-height: 1.45;
	border-left: 2px solid transparent;
	margin-left: -1px;
	transition: color 0.2s, border-color 0.2s;
}
.wiem-single--tarot-card .toc-list a:hover,
.wiem-single--tarot-card .toc-list a.is-active {
	color: var(--c-ink);
	border-left-color: var(--c-gold-soft);
}
.wiem-single--tarot-card .toc-list .toc-num {
	font-size: 10.5px;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.06em;
	color: var(--c-gold-soft);
	flex-shrink: 0;
	min-width: 18px;
}

.wiem-single--tarot-card .share-rail {
	display: flex;
	gap: 8px;
	padding: 16px 0 0;
	border-top: 1px solid var(--c-line);
}
.wiem-single--tarot-card .share-btn {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--c-line);
	border-radius: 4px;
	color: var(--c-ink-mute);
	background: transparent;
	transition: border-color 0.2s, color 0.2s;
}
.wiem-single--tarot-card .share-btn:hover {
	border-color: var(--c-gold-soft);
	color: var(--c-gold);
}
.wiem-single--tarot-card .share-btn svg {
	width: 16px;
	height: 16px;
}

/* ============================================================
 * TREŚĆ: typografia i sekcje
 * ============================================================ */
.wiem-single--tarot-card .post-content {
	min-width: 0;
}

.wiem-single--tarot-card .post-content > section {
	padding: 36px 0;
	border-bottom: 1px solid var(--c-line);
	scroll-margin-top: 32px;
}
.wiem-single--tarot-card .post-content > section:first-child {
	padding-top: 0;
}
.wiem-single--tarot-card .post-content > section:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.wiem-single--tarot-card .sec-eyebrow {
	display: inline-block;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-gold);
	font-weight: 700;
	margin-bottom: 10px;
}

.wiem-single--tarot-card .post-content h2 {
	font-size: clamp(24px, 2.6vw, 30px);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -0.02em;
	color: var(--c-ink);
	margin: 0 0 18px;
}
.wiem-single--tarot-card .post-content h3 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-ink);
	margin: 0 0 10px;
}
.wiem-single--tarot-card .post-content p {
	font-size: 15.5px;
	line-height: 1.8;
	color: var(--c-ink-soft);
	margin: 0 0 18px;
}
.wiem-single--tarot-card .post-content p strong {
	color: var(--c-ink);
	font-weight: 600;
}
.wiem-single--tarot-card .post-content p em {
	font-style: normal;
	color: var(--c-ink);
	font-weight: 600;
}
.wiem-single--tarot-card .post-content a {
	color: var(--c-gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(179, 146, 46, 0.4);
}
.wiem-single--tarot-card .post-content a:hover {
	color: var(--c-ink);
	border-color: var(--c-ink);
}
.wiem-single--tarot-card .post-content ul {
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
}
.wiem-single--tarot-card .post-content ul li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 11px;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--c-ink-soft);
}
.wiem-single--tarot-card .post-content ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 11px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--c-gold-soft);
}
.wiem-single--tarot-card .post-content ul li strong {
	color: var(--c-ink);
	font-weight: 600;
}

/* Inicjał w pierwszym akapicie wstępu. */
.wiem-single--tarot-card .lead-section > p:first-of-type::first-letter,
.wiem-single--tarot-card #wstep > p:first-of-type::first-letter {
	font-style: normal;
	font-weight: 700;
	float: left;
	font-size: 52px;
	line-height: 0.86;
	margin: 5px 10px 0 0;
	color: var(--c-gold);
}

/* ============================================================
 * CYTAT
 * ============================================================ */
.wiem-single--tarot-card .pull-quote {
	background: none;
	border: 0;
	border-left: 2px solid var(--c-gold-soft);
	padding: 4px 0 4px 26px;
	margin: 4px 0 0;
	position: relative;
	border-radius: 0;
}
/* Wielki cudzysłów był ozdobą poprzedniej szaty i przy jasnym tle robił
   za plamę bez treści. */
.wiem-single--tarot-card .pull-quote .qmark {
	display: none;
}
.wiem-single--tarot-card .pull-quote q {
	display: block;
	font-style: normal;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--c-ink);
	quotes: none;
	margin-bottom: 14px;
}
.wiem-single--tarot-card .pull-quote q::before,
.wiem-single--tarot-card .pull-quote q::after { content: ""; }
.wiem-single--tarot-card .pull-quote cite {
	display: block;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-style: normal;
	font-weight: 700;
	color: var(--c-gold);
}

/* ============================================================
 * PROSTO I ODWROTNIE
 * Obie karty jasne. Rozróżnia je kreska u góry (złota kontra granatowa)
 * i tło, a nie ciemny prostokąt jak wcześniej.
 * ============================================================ */
.wiem-single--tarot-card .ur-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 22px;
}
.wiem-single--tarot-card .ur-card {
	background: #fff;
	border: 1px solid var(--c-line);
	border-top: 2px solid var(--c-gold-soft);
	border-radius: 0;
	padding: 24px;
	color: var(--c-ink-soft);
}
.wiem-single--tarot-card .ur-card.rev {
	background: var(--c-paper-2);
	border-color: var(--c-line-warm);
	border-top-color: var(--c-ink);
	color: var(--c-ink-soft);
}
.wiem-single--tarot-card .ur-card .lbl {
	display: inline-block;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--c-gold);
	margin-bottom: 10px;
}
.wiem-single--tarot-card .ur-card.rev .lbl,
.wiem-single--tarot-card .ur-card .lbl.rev { color: var(--c-ink); }
.wiem-single--tarot-card .ur-card h3 {
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 10px;
	color: var(--c-ink);
}
.wiem-single--tarot-card .ur-card.rev h3 { color: var(--c-ink); }
.wiem-single--tarot-card .ur-card p {
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--c-ink-soft);
	margin: 0 0 16px;
}
.wiem-single--tarot-card .ur-card.rev p { color: var(--c-ink-soft); }
.wiem-single--tarot-card .ur-card p strong,
.wiem-single--tarot-card .ur-card.rev p strong { color: var(--c-ink); font-weight: 600; }
.wiem-single--tarot-card .ur-card p em,
.wiem-single--tarot-card .ur-card.rev p em { font-style: normal; color: var(--c-ink); font-weight: 600; }

/* Znaczniki słów kluczy: płaskie, prostokątne, obrysowane. Nie pigułki. */
.wiem-single--tarot-card .ur-keys {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.wiem-single--tarot-card .ur-keys span {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 3px;
	background: none;
	border: 1px solid rgba(187, 154, 87, 0.45);
	color: #8a6f28;
}
.wiem-single--tarot-card .ur-card.rev .ur-keys span {
	background: #fff;
	border-color: rgba(13, 18, 64, 0.16);
	color: #5a5870;
}

/* ============================================================
 * OBSZARY ŻYCIA (miłość, praca, duchowość, zdrowie)
 * ============================================================ */
.wiem-single--tarot-card .life-areas {
	/* korzysta ze standardowej kreski sekcji */
}
.wiem-single--tarot-card .life-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 22px;
}
.wiem-single--tarot-card .life-card-section .life-card {
	margin-top: 14px;
}
.wiem-single--tarot-card .life-card {
	display: flex;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-left: 2px solid var(--c-gold-soft);
	border-radius: 0;
	padding: 22px 24px;
}
.wiem-single--tarot-card .life-card .ico {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 999px;
	background: #fdf8ec;
	box-shadow: 0 0 0 1px rgba(187, 154, 87, 0.35);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-gold);
}
.wiem-single--tarot-card .life-card .ico svg { width: 20px; height: 20px; }
.wiem-single--tarot-card .life-card .body { min-width: 0; }
.wiem-single--tarot-card .life-card h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--c-ink);
}
.wiem-single--tarot-card .life-card p {
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--c-ink-soft);
	margin: 0 0 12px;
}
.wiem-single--tarot-card .life-card p:last-child { margin-bottom: 0; }
.wiem-single--tarot-card .life-card .body strong,
.wiem-single--tarot-card .life-card .body b {
	color: var(--c-ink);
	font-weight: 600;
}
.wiem-single--tarot-card .life-card .body em,
.wiem-single--tarot-card .life-card .body i {
	font-style: normal;
	font-weight: 600;
	color: var(--c-ink);
}

/* ============================================================
 * KARTA W PRAKTYCE: pięć sekcji odpowiadających na „a konkretnie?"
 * (karta dnia, rada, człowiek, wydarzenia, przestrzeń).
 *
 * Stoją w treści obok siebie i wcześniej niczym nie różniły się od reszty
 * akapitów, przez co najbardziej praktyczna część strony była najnudniejsza.
 * Każda dostaje jasny kafel ze złotą obwódką i okrągłym znaczkiem, więc
 * czytelniczka widzi je jako jedną, osobną rodzinę.
 *
 * Sterowanie przez identyfikatory sekcji, bo są stałe w szablonach
 * (`#dnia`, `#rada`, `#osoba`, `#wydarzenia`, `#miejsce`) i dzięki temu
 * nie trzeba ruszać markupu ani spisu treści.
 * ============================================================ */
.wiem-single--tarot-card .post-content > section#dnia,
.wiem-single--tarot-card .post-content > section#rada,
.wiem-single--tarot-card .post-content > section#osoba,
.wiem-single--tarot-card .post-content > section#wydarzenia,
.wiem-single--tarot-card .post-content > section#miejsce {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	column-gap: 22px;
	background: linear-gradient(180deg, #fffdf9 0%, #f8f3e7 100%);
	border: 1px solid rgba(187, 154, 87, 0.38);
	border-radius: 14px;
	padding: 24px 28px 26px;
	margin: 0 0 14px;
}
.wiem-single--tarot-card .post-content > section#dnia > *,
.wiem-single--tarot-card .post-content > section#rada > *,
.wiem-single--tarot-card .post-content > section#osoba > *,
.wiem-single--tarot-card .post-content > section#wydarzenia > *,
.wiem-single--tarot-card .post-content > section#miejsce > * {
	grid-column: 2;
}
/* Znaczek w kółku. Krój emoji wymuszony, bo globalny plain-font.css
   podstawia bezszeryfowy, w którym części tych znaków nie ma. */
.wiem-single--tarot-card .post-content > section#dnia::before,
.wiem-single--tarot-card .post-content > section#rada::before,
.wiem-single--tarot-card .post-content > section#osoba::before,
.wiem-single--tarot-card .post-content > section#wydarzenia::before,
.wiem-single--tarot-card .post-content > section#miejsce::before {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: start;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(187, 154, 87, 0.45), 0 6px 16px rgba(13, 18, 64, 0.07);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 23px;
	line-height: 1;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}
.wiem-single--tarot-card .post-content > section#dnia::before { content: "\2600\FE0F"; }
.wiem-single--tarot-card .post-content > section#rada::before { content: "\1F9ED"; }
.wiem-single--tarot-card .post-content > section#osoba::before { content: "\1F464"; }
.wiem-single--tarot-card .post-content > section#wydarzenia::before { content: "\23F3"; }
.wiem-single--tarot-card .post-content > section#miejsce::before { content: "\1F4CD"; }

/* W kaflu nagłówek jest mniejszy, bo konkuruje z sąsiadami z rodziny,
   a nie z całą stroną. */
.wiem-single--tarot-card .post-content > section#dnia h2,
.wiem-single--tarot-card .post-content > section#rada h2,
.wiem-single--tarot-card .post-content > section#osoba h2,
.wiem-single--tarot-card .post-content > section#wydarzenia h2,
.wiem-single--tarot-card .post-content > section#miejsce h2 {
	font-size: 22px;
	margin-bottom: 12px;
}
.wiem-single--tarot-card .post-content > section#dnia p:last-child,
.wiem-single--tarot-card .post-content > section#rada p:last-child,
.wiem-single--tarot-card .post-content > section#osoba p:last-child,
.wiem-single--tarot-card .post-content > section#wydarzenia p:last-child,
.wiem-single--tarot-card .post-content > section#miejsce p:last-child {
	margin-bottom: 0;
}

/* ============================================================
 * TABELA CECH (astrologia, kabała)
 * ============================================================ */
.wiem-single--tarot-card .attr-grid {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 0;
	border: 1px solid var(--c-line);
	border-radius: 0;
	overflow: hidden;
	margin: 0 0 22px;
	background: #fff;
}
.wiem-single--tarot-card .attr-cell {
	padding: 13px 18px;
	font-size: 14.5px;
	border-bottom: 1px solid var(--c-line);
}
.wiem-single--tarot-card .attr-grid .attr-cell:nth-last-child(-n+2) {
	border-bottom: 0;
}
.wiem-single--tarot-card .attr-cell.k {
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-gold);
	font-weight: 700;
	background: #fdfbf5;
	border-right: 1px solid var(--c-line);
}
.wiem-single--tarot-card .attr-cell.v {
	color: var(--c-ink);
	font-weight: 600;
}

/* ============================================================
 * KOMBINACJE
 * ============================================================ */
.wiem-single--tarot-card .combo-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
}
.wiem-single--tarot-card .combo-item {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 22px;
	align-items: flex-start;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 0;
}
.wiem-single--tarot-card .combo-pair {
	display: flex;
	align-items: center;
	gap: 8px;
}
.wiem-single--tarot-card .combo-mini {
	width: 42px;
	height: 62px;
	border: 1px solid var(--c-gold-line);
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
	font-weight: 700;
	font-size: 13px;
	color: var(--c-gold);
	background: #fdfbf5;
	letter-spacing: 0.1em;
	flex-shrink: 0;
}
.wiem-single--tarot-card .combo-plus {
	color: var(--c-gold-soft);
	font-weight: 700;
	font-size: 16px;
}
.wiem-single--tarot-card .combo-text strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--c-ink);
	margin-bottom: 6px;
}
.wiem-single--tarot-card .combo-text p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--c-ink-soft);
}

/* ============================================================
 * PYTANIA DO SIEBIE: lista numerowana
 * ============================================================ */
.wiem-single--tarot-card .reflect-list {
	counter-reset: reflect;
	list-style: none;
	padding: 0;
	margin: 16px 0 0;
}
.wiem-single--tarot-card .reflect-list li {
	counter-increment: reflect;
	position: relative;
	padding: 15px 0 15px 52px;
	border-bottom: 1px solid var(--c-line);
	font-size: 16px;
	line-height: 1.65;
	color: var(--c-ink);
	font-style: normal;
}
.wiem-single--tarot-card .reflect-list li:first-child { padding-top: 0; }
.wiem-single--tarot-card .reflect-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.wiem-single--tarot-card .reflect-list li::before {
	content: counter(reflect, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 16px;
	font-style: normal;
	color: var(--c-gold-soft);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.wiem-single--tarot-card .reflect-list li:first-child::before { top: 1px; }

/* ============================================================
 * CIEKAWOSTKI
 * ============================================================ */
.wiem-single--tarot-card .trivia-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 18px;
}
.wiem-single--tarot-card .trivia-item {
	display: flex;
	gap: 14px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-top: 2px solid var(--c-gold-soft);
	border-radius: 0;
}
.wiem-single--tarot-card .trivia-item .num {
	flex-shrink: 0;
	font-style: normal;
	font-size: 22px;
	font-weight: 700;
	color: var(--c-gold-soft);
	line-height: 1.2;
}
.wiem-single--tarot-card .trivia-item p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--c-ink-soft);
}

/* ============================================================
 * KOLUMNA BOCZNA
 * Kafle bez ramek, oddziela je odstęp i złota etykieta. Wyjątkiem jest
 * pierwszy kafel („Dane karty"), który dostaje złotą obwódkę, bo to on
 * niesie metrykę karty i ma być zakotwiczeniem wzroku.
 * ============================================================ */
.wiem-single--tarot-card .sidebar {
	position: sticky;
	top: 32px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.wiem-single--tarot-card .side-card {
	background: #fff;
	border: 0;
	border-radius: 0;
	padding: 0;
}
.wiem-single--tarot-card .sidebar .side-card:first-child {
	background: linear-gradient(180deg, #fffdf9 0%, #f5f2ea 100%);
	border: 1.5px solid rgba(187, 154, 87, 0.5);
	border-radius: 14px;
	padding: 22px;
}
.wiem-single--tarot-card .side-card .eyb {
	display: inline-block;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-gold);
	font-weight: 700;
	margin-bottom: 12px;
}
.wiem-single--tarot-card .sidebar .side-card:first-child .eyb { color: var(--c-gold-2); }
.wiem-single--tarot-card .side-card h4 {
	font-size: 17px;
	font-weight: 700;
	color: var(--c-ink);
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(187, 154, 87, 0.35);
}

.wiem-single--tarot-card .data-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.wiem-single--tarot-card .data-list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(187, 154, 87, 0.22);
	font-size: 13px;
}
.wiem-single--tarot-card .data-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.wiem-single--tarot-card .data-list .k {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
}
.wiem-single--tarot-card .data-list .v {
	color: var(--c-ink);
	font-weight: 600;
	font-size: 12.5px;
	text-align: right;
}

.wiem-single--tarot-card .kw-block {
	margin-top: 16px;
}
.wiem-single--tarot-card .kw-block:first-child { margin-top: 0; }
.wiem-single--tarot-card .kw-block .lbl {
	display: block;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	margin-bottom: 8px;
	font-weight: 700;
}
.wiem-single--tarot-card .kw-block.rev .lbl { color: var(--c-ink-mute); }
.wiem-single--tarot-card .kw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.wiem-single--tarot-card .kw-chips span {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 3px;
	background: none;
	border: 1px solid rgba(187, 154, 87, 0.4);
	color: #8a6f28;
}
.wiem-single--tarot-card .kw-block.rev .kw-chips span {
	background: none;
	border-color: rgba(13, 18, 64, 0.16);
	color: #5a5870;
}

.wiem-single--tarot-card .nav-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wiem-single--tarot-card .nav-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border: 1px solid var(--c-line);
	border-radius: 0;
	text-decoration: none;
	transition: border-color 0.2s, background 0.2s;
}
.wiem-single--tarot-card .nav-card:hover {
	border-color: var(--c-gold-line);
	background: #fdfbf5;
}
.wiem-single--tarot-card .nav-card .mini {
	width: 30px;
	height: 44px;
	border: 1px solid var(--c-gold-line);
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
	font-weight: 700;
	font-size: 11px;
	color: var(--c-gold);
	background: #fdfbf5;
	flex-shrink: 0;
}
.wiem-single--tarot-card .nav-card .lbl {
	font-size: 9.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	margin-bottom: 4px;
	font-weight: 700;
}
.wiem-single--tarot-card .nav-card .nm {
	font-size: 14px;
	font-weight: 600;
	color: var(--c-ink);
	line-height: 1.25;
}

/* ============================================================
 * PAS NARZĘDZIA
 * Był granatowy, jest jasnozłoty, w tej samej konwencji co kafel
 * kontaktowy pod FAQ kategorii i kafel „Niebo dziś" w horoskopie.
 * ============================================================ */
.wiem-single--tarot-card .tool-cta {
	background: linear-gradient(180deg, #fffdf9 0%, #f5f2ea 100%);
	color: var(--c-ink);
	padding: 46px 0;
	border-top: 1px solid var(--c-gold-line);
	border-bottom: 1px solid var(--c-gold-line);
}
.wiem-single--tarot-card .tool-cta-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: center;
}
.wiem-single--tarot-card .tool-cta-text { min-width: 0; }
.wiem-single--tarot-card .tool-cta-eyb {
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-gold-2);
	font-weight: 700;
	margin-bottom: 10px;
}
.wiem-single--tarot-card .tool-cta-text h2 {
	font-size: clamp(23px, 2.6vw, 28px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--c-ink);
	margin: 0 0 10px;
}
.wiem-single--tarot-card .tool-cta-text h2 .accent { color: var(--c-gold); }
.wiem-single--tarot-card .tool-cta-text p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--c-ink-soft);
	margin: 0;
	max-width: 620px;
}
/* Przycisk jako link tekstowy ze złotą strzałką. Pigułki w serwisie są
   wycofane, kanon to link 13 px w granacie. */
.wiem-single--tarot-card .tool-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 0 6px;
	background: none;
	color: var(--c-ink);
	border: 0;
	border-bottom: 1px solid var(--c-gold-line);
	border-radius: 0;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: color 0.2s, border-color 0.2s;
	white-space: nowrap;
}
.wiem-single--tarot-card .tool-cta-btn:hover {
	background: none;
	color: var(--c-gold);
	border-color: var(--c-gold);
}
.wiem-single--tarot-card .tool-cta-btn svg {
	width: 15px;
	height: 15px;
	color: var(--c-gold);
}

/* ============================================================
 * SĄSIEDNIE KARTY
 * ============================================================ */
/* Selektor z nazwą znacznika, bo motyw potomny ma `.wiem-single .related`
   o tej samej sile, a jego arkusz ładuje się później i wygrywał remis:
   sekcja dostawała piaskowe tło i dopełnienie 80/48 px. */
.wiem-single--tarot-card section.related {
	background: var(--c-paper);
	padding: 66px 0;
	border-bottom: 0;
}
.wiem-single--tarot-card .related .related-head {
	max-width: 1200px;
	margin: 0 auto 30px;
	padding: 0 32px;
	text-align: left;
}
.wiem-single--tarot-card .related .related-head .eyebrow {
	display: inline-block;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-gold);
	font-weight: 700;
	margin-bottom: 10px;
}
.wiem-single--tarot-card .related .related-head h2 {
	font-size: clamp(24px, 2.6vw, 30px);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -0.02em;
	color: var(--c-ink);
	margin: 0 0 12px;
}
.wiem-single--tarot-card .related .related-head p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--c-ink-soft);
	max-width: 640px;
	margin: 0;
}

.wiem-single--tarot-card .related-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.wiem-single--tarot-card .rel-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 0;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.wiem-single--tarot-card .rel-card:hover {
	border-color: var(--c-gold-line);
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(13, 18, 64, 0.08);
}
/* Bez grafiki kadr 4:5 był wielką pustą plamą, więc kurczy się do niskiego
   paska z numerem i nazwą. */
.wiem-single--tarot-card .rel-card:not(:has(.rel-img-thumb)) .rel-img {
	aspect-ratio: 16/6;
}
.wiem-single--tarot-card .rel-card:not(:has(.rel-img-thumb)) .rel-img .roman {
	top: 18px;
}
.wiem-single--tarot-card .rel-card:not(:has(.rel-img-thumb)) .rel-img .nm {
	bottom: 18px;
}

/* Kadr pionowy i grafika w całości, bo w poprzednim kadrze 4:3 skan karty
   był ścinany w pół. */
.wiem-single--tarot-card .rel-img {
	position: relative;
	aspect-ratio: 4/5;
	background: var(--c-paper-2);
	border-bottom: 1px solid var(--c-line-warm);
	overflow: hidden;
}
.wiem-single--tarot-card .rel-img-thumb {
	position: absolute;
	top: 14px;
	left: 14px;
	width: calc(100% - 28px);
	height: calc(100% - 28px);
	object-fit: contain;
}
.wiem-single--tarot-card .rel-card:has(.rel-img-thumb) .rel-img .roman,
.wiem-single--tarot-card .rel-card:has(.rel-img-thumb) .rel-img .nm {
	display: none;
}
.wiem-single--tarot-card .rel-img .roman {
	position: absolute;
	top: 16px;
	left: 0;
	right: 0;
	text-align: center;
	font-style: normal;
	font-size: 13px;
	font-weight: 700;
	color: var(--c-gold);
	letter-spacing: 0.2em;
	z-index: 2;
}
.wiem-single--tarot-card .rel-img .nm {
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	color: var(--c-ink);
	z-index: 2;
}
.wiem-single--tarot-card .rel-body {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.wiem-single--tarot-card .rel-body .pos {
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-gold);
	font-weight: 700;
	margin-bottom: 8px;
}
.wiem-single--tarot-card .rel-body h3 {
	font-size: 19px;
	font-weight: 700;
	color: var(--c-ink);
	margin: 0 0 8px;
}
.wiem-single--tarot-card .rel-body p {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--c-ink-soft);
	margin: 0 0 16px;
	flex: 1;
}
.wiem-single--tarot-card .rel-body .more {
	display: inline-block;
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-gold);
	font-weight: 700;
}
.wiem-single--tarot-card .rel-card:hover .rel-body .more { color: var(--c-ink); }

/* ============================================================
 * FAQ
 * Jedyny ciepły pas na stronie, domyka ją tak, jak sekcja „Inne znaki"
 * domyka horoskop.
 * ============================================================ */
.wiem-single--tarot-card .post-faq {
	background: var(--c-paper-2);
	border-top: 1px solid var(--c-line-warm);
	padding: 66px 0;
}
.wiem-single--tarot-card .post-faq-inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 32px;
}
.wiem-single--tarot-card .post-faq-head {
	text-align: left;
	margin-bottom: 26px;
}
.wiem-single--tarot-card .post-faq-head .eyebrow {
	display: inline-block;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-gold);
	font-weight: 700;
	margin-bottom: 10px;
}
.wiem-single--tarot-card .post-faq-head h2 {
	font-size: clamp(24px, 2.6vw, 30px);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -0.02em;
	color: var(--c-ink);
	margin: 0;
}

.wiem-single--tarot-card .faq-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.wiem-single--tarot-card .faq-item {
	background: #fff;
	border: 1px solid var(--c-line-warm);
	border-radius: 0;
	overflow: hidden;
	transition: border-color 0.2s;
}
.wiem-single--tarot-card .faq-item.open {
	border-color: rgba(187, 154, 87, 0.6);
}
.wiem-single--tarot-card .faq-q {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 19px 22px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	color: var(--c-ink);
	/* Motyw zamienia tekst każdego przycisku na wersaliki, a pytanie FAQ
	   ma się czytać jak zdanie, nie jak etykieta. */
	text-transform: none;
	letter-spacing: normal;
}
.wiem-single--tarot-card .faq-num {
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	color: var(--c-gold-soft);
	letter-spacing: 0.1em;
	flex-shrink: 0;
	min-width: 24px;
}
.wiem-single--tarot-card .faq-qtext {
	flex: 1;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--c-ink);
	text-transform: none;
}
.wiem-single--tarot-card .faq-toggle {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	position: relative;
	transition: transform 0.2s;
}
.wiem-single--tarot-card .faq-toggle::before,
.wiem-single--tarot-card .faq-toggle::after {
	content: "";
	position: absolute;
	background: var(--c-gold);
	top: 50%;
	left: 50%;
	transition: transform 0.2s;
}
.wiem-single--tarot-card .faq-toggle::before {
	width: 12px;
	height: 1.5px;
	transform: translate(-50%, -50%);
}
.wiem-single--tarot-card .faq-toggle::after {
	width: 1.5px;
	height: 12px;
	transform: translate(-50%, -50%);
}
.wiem-single--tarot-card .faq-item.open .faq-toggle::after {
	transform: translate(-50%, -50%) scaleY(0);
}
.wiem-single--tarot-card .faq-a {
	max-height: 0;
	overflow: hidden;
	padding: 0 22px;
	transition: max-height 0.3s, padding 0.3s;
}
.wiem-single--tarot-card .faq-item.open .faq-a {
	max-height: 600px;
	padding: 0 22px 22px 60px;
}
.wiem-single--tarot-card .faq-a p {
	font-size: 14.5px;
	line-height: 1.78;
	color: #5a5870;
	margin: 0 0 12px;
}
.wiem-single--tarot-card .faq-a p:last-child { margin-bottom: 0; }
.wiem-single--tarot-card .faq-a a {
	color: var(--c-gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(179, 146, 46, 0.4);
}
.wiem-single--tarot-card .faq-a a:hover { color: var(--c-ink); border-color: var(--c-ink); }

/* ============================================================
 * BLOKI WŁASNE: tekst i obraz
 * ============================================================ */
.wiem-single--tarot-card .cb-text {
	padding: 36px 0;
	border-bottom: 1px solid var(--c-line);
	scroll-margin-top: 32px;
}
.wiem-single--tarot-card .cb-text:first-child { padding-top: 0; }
.wiem-single--tarot-card .cb-text:last-child { border-bottom: 0; padding-bottom: 0; }

.wiem-single--tarot-card .cb-image {
	margin: 30px 0;
}
.wiem-single--tarot-card .cb-image::after {
	content: "";
	display: table;
	clear: both;
}
.wiem-single--tarot-card .cb-image-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}
.wiem-single--tarot-card .cb-image figcaption {
	font-size: 12.5px;
	color: var(--c-ink-mute);
	text-align: center;
	margin-top: 10px;
	font-style: normal;
	line-height: 1.6;
}
.wiem-single--tarot-card .cb-image--full {
	margin-left: 0;
	margin-right: 0;
}
.wiem-single--tarot-card .cb-image--center {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.wiem-single--tarot-card .cb-image--left {
	float: left;
	max-width: 48%;
	margin: 8px 28px 16px 0;
}
.wiem-single--tarot-card .cb-image--right {
	float: right;
	max-width: 48%;
	margin: 8px 0 16px 28px;
}

@media (max-width: 640px) {
	.wiem-single--tarot-card .cb-image--left,
	.wiem-single--tarot-card .cb-image--right {
		float: none;
		max-width: 100%;
		margin: 24px 0;
	}
}

/* ============================================================
 * RESPONSYWNOŚĆ
 * ============================================================ */
@media (max-width: 1100px) {
	.wiem-single--tarot-card .post-grid {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 40px;
	}
	.wiem-single--tarot-card .toc { display: none; }
	.wiem-single--tarot-card .post-hero-grid {
		grid-template-columns: 214px minmax(0, 1fr);
		gap: 34px;
	}
}

@media (max-width: 860px) {
	.wiem-single--tarot-card .post-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.wiem-single--tarot-card .sidebar {
		position: static;
		order: 2;
	}
	.wiem-single--tarot-card .ur-grid,
	.wiem-single--tarot-card .life-grid,
	.wiem-single--tarot-card .trivia-grid,
	.wiem-single--tarot-card .related-grid {
		grid-template-columns: 1fr;
	}
	.wiem-single--tarot-card .combo-item {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.wiem-single--tarot-card .tool-cta-inner {
		grid-template-columns: 1fr;
		gap: 22px;
	}
	/* Bez tego link rozciągał się na całą szerokość kolumny i jego złota
	   kreska szła przez cały ekran. */
	.wiem-single--tarot-card .tool-cta-btn { justify-self: start; }
}

@media (max-width: 640px) {
	.wiem-single--tarot-card .container,
	.wiem-single--tarot-card .post-hero .container,
	.wiem-single--tarot-card .post-grid,
	.wiem-single--tarot-card .tool-cta-inner,
	.wiem-single--tarot-card .related .related-head,
	.wiem-single--tarot-card .related-grid,
	.wiem-single--tarot-card .post-faq-inner,
	.wiem-single--tarot-card .card-facts .container,
	.wiem-single--tarot-card .post-crumbs-bar .container { padding-left: 20px; padding-right: 20px; }

	.wiem-single--tarot-card .post-hero { padding: 30px 0 34px; }
	.wiem-single--tarot-card .post-hero-crumbs { padding: 14px 0; font-size: 10px; letter-spacing: 0.12em; }
	.wiem-single--tarot-card .post-hero-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.wiem-single--tarot-card .post-card {
		max-width: 240px;
		margin: 0 auto;
	}
	.wiem-single--tarot-card .post-title-side { text-align: center; }
	.wiem-single--tarot-card .post-title-side .lead { margin: 0 auto; }
	.wiem-single--tarot-card .post-hero-keywords { justify-content: center; margin-left: auto; margin-right: auto; }
	.wiem-single--tarot-card .post-shell { padding: 36px 0 56px; }
	.wiem-single--tarot-card .post-content > section { padding: 30px 0; }
	.wiem-single--tarot-card section.related,
	.wiem-single--tarot-card .post-faq { padding: 48px 0; }
	.wiem-single--tarot-card .pull-quote { padding-left: 20px; }
	.wiem-single--tarot-card .pull-quote q { font-size: 18px; }
	.wiem-single--tarot-card .attr-grid { grid-template-columns: 110px 1fr; }
	.wiem-single--tarot-card .attr-cell { padding: 12px 14px; font-size: 14px; }
	.wiem-single--tarot-card .faq-item.open .faq-a { padding-left: 22px; }
	.wiem-single--tarot-card .cf-grid { gap: 14px 28px; }
	.wiem-single--tarot-card .cf-kw { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	/* Znaczek nad nagłówkiem, bo przy 375 px kolumna na kółko zjadałaby
	   jedną piątą szerokości tekstu. */
	.wiem-single--tarot-card .post-content > section#dnia,
	.wiem-single--tarot-card .post-content > section#rada,
	.wiem-single--tarot-card .post-content > section#osoba,
	.wiem-single--tarot-card .post-content > section#wydarzenia,
	.wiem-single--tarot-card .post-content > section#miejsce {
		grid-template-columns: minmax(0, 1fr);
		padding: 22px 20px 24px;
	}
	.wiem-single--tarot-card .post-content > section#dnia > *,
	.wiem-single--tarot-card .post-content > section#rada > *,
	.wiem-single--tarot-card .post-content > section#osoba > *,
	.wiem-single--tarot-card .post-content > section#wydarzenia > *,
	.wiem-single--tarot-card .post-content > section#miejsce > * { grid-column: 1; }
	.wiem-single--tarot-card .post-content > section#dnia::before,
	.wiem-single--tarot-card .post-content > section#rada::before,
	.wiem-single--tarot-card .post-content > section#osoba::before,
	.wiem-single--tarot-card .post-content > section#wydarzenia::before,
	.wiem-single--tarot-card .post-content > section#miejsce::before {
		grid-column: 1;
		grid-row: auto;
		width: 44px;
		height: 44px;
		font-size: 20px;
		margin-bottom: 14px;
	}
}