/* ==========================================================================
   Horoskop na míru — hlavní styly
   Pořadí: reset → základ → layout → typografie → komponenty → sekce → utility
   Žádná hodnota barvy ani velikosti písma zde nesmí být natvrdo — vše z tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset a základ
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

html.is-locked {
	overflow: hidden;
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}

a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-color: currentColor;
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* Fokus schováme jen tam, kde ho prohlížeč nabízí i bez klávesnice. */
:focus:not(:focus-visible) {
	outline: none;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: var(--z-toast);
	padding: var(--space-3) var(--space-4);
	background: var(--color-gold);
	color: #0b0b12;
	border-radius: var(--radius);
	font-weight: var(--weight-semibold);
	transform: translateY(-200%);
	transition: transform var(--duration) var(--ease-out);
}

.skip-link:focus {
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   2. Layout
   -------------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--wide {
	max-width: var(--container-wide);
}

.container--narrow {
	max-width: var(--container-narrow);
}

/* --container-text je cílová šířka SLOUPCE TEXTU, ne vnějšího boxu.
   Přičtením gutteru zůstane měřítko řádku ~720 px i s odsazením. */
.container--text {
	max-width: calc(var(--container-text) + var(--gutter) * 2);
}

.section {
	padding-block: var(--section-gap);
}

.section--tight {
	padding-block: calc(var(--section-gap) * 0.6);
}

.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

.section__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
}

.section__lead {
	max-width: 62ch;
	margin: var(--space-2) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
}

.section__link {
	color: var(--color-gold);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	white-space: nowrap;
}

.eyebrow {
	margin: 0 0 var(--space-2);
	color: var(--color-gold);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.site-main {
	display: block;
	min-height: 50vh;
	padding-top: var(--header-height);
}

/* --------------------------------------------------------------------------
   3. Typografie
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	text-wrap: balance;
}

h1 {
	font-size: var(--text-4xl);
	line-height: var(--leading-tight);
}

h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p {
	margin: 0 0 var(--space-4);
}

/* --------------------------------------------------------------------------
   4. Tlačítka a chipy
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 46px;
	padding: var(--space-3) var(--space-5);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--duration) var(--ease-out),
		border-color var(--duration) var(--ease-out),
		color var(--duration) var(--ease-out),
		transform var(--duration-fast) var(--ease-out);
}

.btn:hover {
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn--primary {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #0b0b12;
}

.btn--primary:hover {
	background: var(--color-gold-light);
	border-color: var(--color-gold-light);
}

.btn--secondary {
	background: transparent;
	border-color: var(--color-border-strong);
	color: var(--color-text);
}

.btn--secondary:hover {
	border-color: var(--color-gold);
	color: var(--color-gold-light);
}

.btn--ghost {
	padding-inline: var(--space-3);
	background: transparent;
	color: var(--color-gold);
}

.btn--block {
	display: flex;
	width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
}

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background-color var(--duration) var(--ease-out),
		border-color var(--duration) var(--ease-out);
}

.icon-button:hover {
	background: var(--color-gold-dim);
	border-color: var(--color-border);
}

.chip {
	position: relative;
	display: inline-flex;
}

.chip input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.chip span {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: var(--space-2) var(--space-4);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	transition: border-color var(--duration) var(--ease-out),
		color var(--duration) var(--ease-out),
		background-color var(--duration) var(--ease-out);
}

.chip input:checked + span {
	background: var(--color-gold-dim);
	border-color: var(--color-gold);
	color: var(--color-text);
}

.chip input:focus-visible + span {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. Hlavička
   -------------------------------------------------------------------------- */

.site-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: var(--z-header);
	height: var(--header-height);
	background: color-mix(in srgb, var(--color-bg) 88%, transparent);
	border-bottom: 1px solid transparent;
	transition: height var(--duration) var(--ease-out),
		background-color var(--duration) var(--ease-out),
		border-color var(--duration) var(--ease-out);
}

/* Rozostření jen tam, kde ho prohlížeč zvládne bez dopadu na plynulost. */
@supports (backdrop-filter: blur(12px)) {
	.site-header {
		backdrop-filter: blur(14px) saturate(140%);
	}
}

.site-header.is-scrolled {
	height: var(--header-height-scrolled);
	background: color-mix(in srgb, var(--color-bg) 96%, transparent);
	border-bottom-color: var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	height: 100%;
}

.site-header__logo {
	flex: 0 0 auto;
	color: var(--color-text);
	text-decoration: none;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
}

.logo--mark {
	gap: 0;
	color: var(--color-gold);
}

.logo--horizontal {
	max-width: 100%;
}

.logo__mark {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	color: var(--color-gold);
	transition: width var(--duration) var(--ease-out), height var(--duration) var(--ease-out);
}

.is-scrolled .logo__mark {
	width: 30px;
	height: 30px;
}

.logo__words {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.logo__name {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-tight);
}

.logo__tagline {
	margin-top: 3px;
	color: var(--color-text-muted);
	font-size: 0.6rem;
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.site-nav {
	display: none;
	flex: 1 1 auto;
}

.site-nav__list {
	display: flex;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__link {
	position: relative;
	display: inline-block;
	padding: var(--space-2) var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	text-decoration: none;
	transition: color var(--duration) var(--ease-out);
}

.site-nav__link::after {
	content: "";
	position: absolute;
	left: var(--space-3);
	right: var(--space-3);
	bottom: 2px;
	height: 1px;
	background: var(--color-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--duration) var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link.is-current {
	color: var(--color-text);
}

.site-nav__link:hover::after,
.site-nav__link.is-current::after {
	transform: scaleX(1);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-left: auto;
}

.site-header__cta {
	display: none;
}

.icon-button--menu {
	display: inline-flex;
}

@media (min-width: 1024px) {
	.site-nav { display: block; }
	.site-header__cta { display: inline-flex; }
	.icon-button--menu { display: none; }
}

/* --------------------------------------------------------------------------
   6. Mobilní navigace
   -------------------------------------------------------------------------- */

.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: var(--z-dialog);
}

.mobile-nav[hidden] {
	display: none;
}

.mobile-nav__backdrop,
.search-dialog__backdrop,
.sheet__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 5, 12, 0.72);
	animation: hnm-fade var(--duration) var(--ease-out);
}

.mobile-nav__panel {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: min(360px, 88vw);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-5) var(--space-5) calc(var(--space-5) + var(--safe-bottom));
	background: var(--color-bg-soft);
	border-left: 1px solid var(--color-border);
	overflow-y: auto;
	animation: hnm-slide-in var(--duration-slow) var(--ease-out);
}

.mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mobile-nav__title,
.mobile-nav__subtitle {
	margin: 0;
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.mobile-nav__main ul,
.mobile-nav__signs ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-nav__main a {
	display: block;
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-display);
	font-size: var(--text-xl);
	text-decoration: none;
}

.mobile-nav__signs ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-1);
	margin-top: var(--space-3);
}

.mobile-nav__signs a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2);
	border-radius: var(--radius);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	text-decoration: none;
}

.mobile-nav__signs a:hover {
	background: var(--color-gold-dim);
	color: var(--color-text);
}

.mobile-nav__foot {
	margin-top: auto;
}

/* --------------------------------------------------------------------------
   7. Vyhledávání
   -------------------------------------------------------------------------- */

.search-dialog {
	position: fixed;
	inset: 0;
	z-index: var(--z-dialog);
}

.search-dialog[hidden] {
	display: none;
}

.search-dialog__panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: var(--space-4);
	background: var(--color-bg-soft);
	animation: hnm-fade var(--duration) var(--ease-out);
}

@media (min-width: 768px) {
	.search-dialog__panel {
		inset: auto;
		top: 12vh;
		left: 50%;
		width: min(640px, 92vw);
		max-height: 70vh;
		transform: translateX(-50%);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-lg);
	}
}

.search-dialog__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.search-dialog__icon {
	flex: 0 0 auto;
	color: var(--color-text-muted);
}

.search-dialog__form input {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--space-2) 0;
	background: transparent;
	border: 0;
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-lg);
}

.search-dialog__form input:focus {
	outline: none;
}

.search-dialog__hint {
	display: none;
	margin: var(--space-2) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

@media (min-width: 768px) {
	.search-dialog__hint { display: block; }
}

.search-dialog__results {
	flex: 1 1 auto;
	margin-top: var(--space-3);
	overflow-y: auto;
}

.search-dialog__message {
	margin: var(--space-4) 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.search-group + .search-group {
	margin-top: var(--space-4);
}

.search-group__title {
	margin: 0 0 var(--space-2);
	color: var(--color-gold);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.search-result {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3);
	border-radius: var(--radius);
	text-decoration: none;
}

.search-result:hover,
.search-result.is-active {
	background: var(--color-surface);
}

.search-result__title {
	font-weight: var(--weight-medium);
}

.search-result__meta {
	flex: 0 0 auto;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 2rem + 6vw, 7rem);
}

.hero__sky {
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: var(--z-raised);
	display: grid;
	gap: var(--space-8);
	align-items: center;
}

@media (min-width: 1024px) {
	.hero__inner {
		grid-template-columns: 1.05fr 0.95fr;
		gap: var(--space-9);
	}
}

.hero__title {
	margin: 0 0 var(--space-4);
	font-size: var(--text-hero);
	line-height: var(--leading-tight);
}

.hero__lead {
	max-width: 46ch;
	margin: 0 0 var(--space-6);
	color: var(--color-text-muted);
	font-size: var(--text-xl);
	line-height: var(--leading-relaxed);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.hero__wheel {
	display: grid;
	place-items: center;
}

/* Kolo zvěrokruhu */
.zodiac-wheel {
	width: min(420px, 82vw);
	height: auto;
	color: var(--color-lavender);
}

.zodiac-wheel__ring {
	transform-origin: 50% 50%;
	animation: hnm-orbit var(--duration-orbit) linear infinite;
}

.zodiac-wheel__spoke {
	stroke: currentColor;
	opacity: 0.28;
}

.zodiac-wheel__sign {
	color: var(--color-text-muted);
	transition: color var(--duration) var(--ease-out);
}

.zodiac-wheel__sign:hover,
.zodiac-wheel__sign:focus-visible {
	color: var(--color-gold-light);
}

/* --------------------------------------------------------------------------
   9. Znamení — mřížka a karty
   -------------------------------------------------------------------------- */

.zodiac-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) { .zodiac-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .zodiac-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .zodiac-grid { grid-template-columns: repeat(6, 1fr); } }

.zodiac-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	height: 100%;
	padding: var(--space-4) var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	color: var(--color-text);
	text-align: center;
	text-decoration: none;
	transition: transform var(--duration) var(--ease-out),
		border-color var(--duration) var(--ease-out),
		background-color var(--duration) var(--ease-out);
}

.zodiac-card:hover,
.zodiac-card:focus-visible {
	transform: translateY(-3px);
	background: var(--color-surface-raised);
	border-color: var(--color-gold);
}

.zodiac-card__symbol {
	color: var(--color-gold);
	transition: transform var(--duration-slow) var(--ease-out);
}

.zodiac-card:hover .zodiac-card__symbol {
	transform: rotate(8deg) scale(1.06);
}

.zodiac-card__name {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
}

.zodiac-card__dates {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
}

/* --------------------------------------------------------------------------
   10. Karty článků
   -------------------------------------------------------------------------- */

.article-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .article-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .article-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--duration) var(--ease-out),
		border-color var(--duration) var(--ease-out);
}

.card:hover {
	transform: translateY(-3px);
	border-color: var(--color-border-strong);
}

.card__media {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	background: var(--color-bg-soft);
	overflow: hidden;
}

.card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-out);
}

.card:hover .card__image {
	transform: scale(1.03);
}

.card__placeholder {
	color: var(--color-gold);
	opacity: 0.4;
}

.card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
}

.card__category {
	color: var(--color-gold);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.card__title {
	margin: 0;
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
}

.card__title a {
	text-decoration: none;
}

.card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.card__body { position: relative; }

.card__excerpt {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

.card__meta {
	margin-top: auto;
	padding-top: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

/* Hlavní článek */
.featured {
	display: grid;
	gap: var(--space-5);
	align-items: center;
}

@media (min-width: 900px) {
	.featured { grid-template-columns: 1.15fr 1fr; gap: var(--space-8); }
}

.featured__media {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--color-bg-soft);
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.featured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.featured__title {
	margin: var(--space-2) 0 var(--space-3);
	font-size: var(--text-3xl);
}

.featured__title a { text-decoration: none; }

.featured__excerpt {
	max-width: 52ch;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   11. SMS komponenta
   -------------------------------------------------------------------------- */

.sms {
	--sms-radius: var(--radius-xl);
}

.sms--section .sms__inner {
	padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	background: linear-gradient(150deg,
		color-mix(in srgb, var(--color-lavender) 12%, var(--color-surface)),
		var(--color-surface));
	border: 1px solid var(--color-border);
	border-radius: var(--sms-radius);
}

.sms--inline .sms__inner {
	padding: var(--space-5);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.sms--sheet .sms__inner {
	padding: 0;
}

.sms--sheet .sms__head { text-align: left; }

.sms__head {
	margin-bottom: var(--space-5);
}

.sms__eyebrow {
	margin: 0 0 var(--space-2);
	color: var(--color-gold);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.sms__title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-2xl);
}

.sms__lead {
	max-width: 54ch;
	margin: 0;
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
}

.sms__body {
	display: grid;
	gap: var(--space-5);
}

.sms__field {
	margin: 0;
	padding: 0;
	border: 0;
}

.sms__label {
	display: block;
	margin-bottom: var(--space-3);
	padding: 0;
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
}

.sms__categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.sms__textarea {
	width: 100%;
	padding: var(--space-4);
	background: var(--color-bg);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	resize: vertical;
}

.sms__textarea::placeholder {
	color: var(--color-text-muted);
}

.sms__textarea:focus-visible {
	border-color: var(--color-gold);
}

.sms__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

.sms__counter,
.sms__privacy {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

.sms__disclosure {
	padding: var(--space-4);
	background: var(--color-gold-dim);
	border: 1px solid color-mix(in srgb, var(--color-gold) 40%, transparent);
	border-radius: var(--radius);
}

.sms__disclosure p {
	margin: 0;
}

.sms__disclosure p + p {
	margin-top: var(--space-2);
}

.sms__price {
	font-size: var(--text-lg);
}

.sms__oneoff,
.sms__terms,
.sms__note,
.sms__fallback {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.sms__terms a {
	color: var(--color-gold-light);
}

.sms__actions {
	display: grid;
	gap: var(--space-3);
}

.sms__note,
.sms__fallback {
	margin: 0;
	text-align: center;
}

.sms__disclosure--unavailable {
	background: var(--color-surface);
	border-color: var(--color-border);
	color: var(--color-text-muted);
}

/* Bottom sheet */
.sheet {
	position: fixed;
	inset: 0;
	z-index: var(--z-dialog);
}

.sheet[hidden] { display: none; }

.sheet__panel {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	padding: var(--space-3) var(--space-5) calc(var(--space-6) + var(--safe-bottom));
	background: var(--color-bg-soft);
	border-top: 1px solid var(--color-border);
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
	overflow-y: auto;
	animation: hnm-slide-up var(--duration-slow) var(--ease-out);
}

@media (min-width: 768px) {
	.sheet__panel {
		inset: auto;
		top: 50%;
		left: 50%;
		width: min(560px, 92vw);
		transform: translate(-50%, -50%);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-xl);
		animation: hnm-fade var(--duration) var(--ease-out);
	}
}

.sheet__handle {
	width: 44px;
	height: 4px;
	margin: 0 auto var(--space-3);
	background: var(--color-border-strong);
	border-radius: var(--radius-pill);
}

@media (min-width: 768px) {
	.sheet__handle { display: none; }
}

.sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.sheet__body {
	flex: 1 1 auto;
	min-height: 0;
}

.sheet__title {
	margin: 0;
	font-size: var(--text-xl);
}

/* Sticky CTA */
.sticky-cta {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: var(--z-sticky-cta);
	display: flex;
	align-items: center;
	gap: var(--space-3);
	height: var(--sticky-cta-height);
	padding: var(--space-3) var(--gutter) calc(var(--space-3) + var(--safe-bottom));
	background: color-mix(in srgb, var(--color-bg) 94%, transparent);
	border-top: 1px solid var(--color-border);
	transition: transform var(--duration) var(--ease-out);
}

@supports (backdrop-filter: blur(12px)) {
	.sticky-cta { backdrop-filter: blur(14px); }
}

.sticky-cta.is-hidden {
	transform: translateY(120%);
}

.sticky-cta__button {
	flex: 1 1 auto;
}

.sticky-cta__price {
	flex: 0 0 auto;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

:root {
	--sticky-cta-height: 76px;
}

/* Lišta je jen na mobilu; rezervujeme jí místo, aby nic nepřekrývala. */
body:has(.sticky-cta) {
	padding-bottom: calc(var(--sticky-cta-height) + var(--safe-bottom));
}

@media (min-width: 1024px) {
	.sticky-cta { display: none; }

	body:has(.sticky-cta) {
		padding-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
   12. Článek — světlá editorial plocha
   -------------------------------------------------------------------------- */

.article {
	padding-block: var(--space-8) var(--space-9);
}

.article__layout {
	display: grid;
	gap: var(--space-8);
}

@media (min-width: 1100px) {
	.article__layout {
		grid-template-columns: minmax(0, 1fr) 260px;
		align-items: start;
	}
}

.article__header {
	max-width: var(--container-text);
	margin-inline: auto;
	margin-bottom: var(--space-6);
}

.article__title {
	margin: var(--space-3) 0;
	font-size: var(--text-3xl);
}

.article__lead {
	margin: 0 0 var(--space-5);
	color: var(--color-text-muted);
	font-size: var(--text-xl);
	line-height: var(--leading-relaxed);
}

.article__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	padding-block: var(--space-4);
	border-block: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.article__hero {
	margin-bottom: var(--space-6);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.article__hero img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.article__hero figcaption {
	padding: var(--space-2) var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

.entry-content {
	max-width: var(--container-text);
	margin-inline: auto;
	font-size: var(--text-md);
	line-height: var(--leading-article);
}

.entry-content > * + * {
	margin-top: var(--space-5);
}

.entry-content h2 {
	margin-top: var(--space-8);
	margin-bottom: var(--space-4);
	font-size: var(--text-2xl);
}

.entry-content h3 {
	margin-top: var(--space-6);
	font-size: var(--text-xl);
}

.entry-content a {
	color: var(--color-gold);
	text-decoration: underline;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.35em;
}

.entry-content li + li {
	margin-top: var(--space-2);
}

.entry-content img {
	height: auto;
	border-radius: var(--radius);
}

.entry-content figure {
	margin: var(--space-6) 0;
}

.entry-content figcaption {
	margin-top: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	text-align: center;
}

.entry-content blockquote {
	margin: var(--space-6) 0;
	padding: var(--space-4) var(--space-5);
	border-left: 3px solid var(--color-gold);
	background: var(--color-bg-soft);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	line-height: var(--leading-snug);
}

.entry-content blockquote p:last-child { margin-bottom: 0; }

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.entry-content th,
.entry-content td {
	padding: var(--space-3);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

/* Tabulky se na úzkých displejích posouvají uvnitř vlastního rámce. */
.entry-content .table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.highlight-box {
	padding: var(--space-5);
	background: var(--color-gold-dim);
	border: 1px solid color-mix(in srgb, var(--color-gold) 35%, transparent);
	border-radius: var(--radius);
}

/* Obsah článku */
.toc {
	position: sticky;
	top: calc(var(--header-height) + var(--space-4));
	display: none;
	padding: var(--space-4);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

@media (min-width: 1100px) {
	.toc { display: block; }
}

.toc__title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
}

.toc li { margin-bottom: var(--space-2); }

.toc a {
	display: block;
	padding-left: var(--space-3);
	border-left: 2px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	text-decoration: none;
	transition: color var(--duration) var(--ease-out),
		border-color var(--duration) var(--ease-out);
}

.toc a:hover,
.toc a.is-current {
	border-left-color: var(--color-gold);
	color: var(--color-text);
}

/* Breadcrumbs */
.breadcrumbs {
	margin-bottom: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs li::after {
	content: "›";
	margin-left: var(--space-2);
	opacity: 0.5;
}

.breadcrumbs li:last-child::after { content: none; }

.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-text); }

/* Autor */
.author-card {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-5);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.author-card__avatar {
	flex: 0 0 auto;
	border-radius: 50%;
	overflow: hidden;
}

.author-card__name {
	margin: 0 0 var(--space-1);
	font-size: var(--text-lg);
}

.author-card__role {
	margin: 0 0 var(--space-2);
	color: var(--color-gold);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.author-card__bio {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

/* Sdílení */
.share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-block: var(--space-6);
}

.share__label {
	margin: 0 var(--space-2) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   13. Stránka znamení
   -------------------------------------------------------------------------- */

.sign-hero {
	display: grid;
	gap: var(--space-5);
	align-items: center;
	padding-block: var(--space-8);
}

@media (min-width: 768px) {
	.sign-hero { grid-template-columns: auto 1fr; gap: var(--space-8); }
}

.sign-hero__symbol {
	display: grid;
	place-items: center;
	width: 128px;
	height: 128px;
	background: var(--color-surface);
	border: 1px solid var(--color-gold);
	border-radius: 50%;
	color: var(--color-gold);
}

.sign-hero__dates {
	color: var(--color-gold);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.sign-hero__title {
	margin: var(--space-2) 0;
	font-size: var(--text-4xl);
}

.sign-hero__intro {
	max-width: 60ch;
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
}

.sign-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-4);
	padding: 0;
	list-style: none;
}

.sign-facts li {
	padding: var(--space-2) var(--space-4);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: var(--text-sm);
}

.sign-facts strong {
	color: var(--color-text-muted);
	font-weight: var(--weight-regular);
}

/* Kotvová navigace uvnitř stránky */
.anchor-nav {
	position: sticky;
	top: var(--header-height);
	z-index: var(--z-sticky);
	margin-bottom: var(--space-6);
	background: color-mix(in srgb, var(--color-bg) 94%, transparent);
	border-block: 1px solid var(--color-border);
}

.anchor-nav ul {
	display: flex;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.anchor-nav ul::-webkit-scrollbar { display: none; }

.anchor-nav a {
	display: inline-block;
	padding: var(--space-3) var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	white-space: nowrap;
	text-decoration: none;
}

.anchor-nav a:hover { color: var(--color-text); }

.trait-columns {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 768px) {
	.trait-columns { grid-template-columns: repeat(2, 1fr); }
}

.trait-list {
	margin: 0;
	padding-left: 1.2em;
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
}

.compat-columns {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 768px) {
	.compat-columns { grid-template-columns: repeat(2, 1fr); }
}

.compat-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
}

.compat-list a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: var(--text-sm);
	text-decoration: none;
}

.compat-list a:hover { border-color: var(--color-gold); }

/* --------------------------------------------------------------------------
   14. Dnes ve hvězdách
   -------------------------------------------------------------------------- */

.sky {
	display: grid;
	gap: var(--space-6);
	padding: clamp(1.5rem, 1rem + 3vw, 3rem);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

@media (min-width: 768px) {
	.sky { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-8); }
}

.sky__moon {
	display: grid;
	place-items: center;
	color: var(--color-gold-light);
}

.moon {
	display: block;
}

.sky__phase {
	margin-top: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	text-align: center;
}

.sky__date {
	color: var(--color-gold);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
}

.sky__facts {
	display: grid;
	gap: var(--space-3);
	margin: var(--space-4) 0 0;
	padding: 0;
}

.sky__facts div {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	font-size: var(--text-sm);
}

.sky__facts dt {
	color: var(--color-text-muted);
}

.sky__facts dd {
	margin: 0;
}

/* --------------------------------------------------------------------------
   15. Denní horoskop — mřížka
   -------------------------------------------------------------------------- */

.horoscope-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) { .horoscope-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .horoscope-grid { grid-template-columns: repeat(3, 1fr); } }

.horoscope-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	height: 100%;
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.horoscope-card__head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.horoscope-card__symbol { color: var(--color-gold); }

.horoscope-card__name {
	margin: 0;
	font-size: var(--text-lg);
}

.horoscope-card__dates {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

.horoscope-card__text {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

.horoscope-card__link {
	margin-top: auto;
	color: var(--color-gold);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   16. Newsletter
   -------------------------------------------------------------------------- */

.newsletter {
	display: grid;
	gap: var(--space-5);
	padding: clamp(1.5rem, 1rem + 3vw, 3rem);
	background: linear-gradient(140deg,
		color-mix(in srgb, var(--color-gold) 10%, var(--color-surface)),
		var(--color-surface));
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
}

@media (min-width: 900px) {
	.newsletter { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-8); }
}

.newsletter__title { margin: 0 0 var(--space-3); font-size: var(--text-2xl); }

.newsletter__lead {
	margin: 0;
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
}

.newsletter__form,
.form-stack {
	display: grid;
	gap: var(--space-3);
}

.form-stack input[type="search"] {
	width: 100%;
	min-height: 46px;
	padding: var(--space-3) var(--space-4);
	background: var(--color-bg);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
}

.field {
	display: grid;
	gap: var(--space-2);
}

.field__label {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

.field input[type="email"],
.field select {
	width: 100%;
	min-height: 46px;
	padding: var(--space-3) var(--space-4);
	background: var(--color-bg);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
}

.field input:focus-visible,
.field select:focus-visible {
	border-color: var(--color-gold);
}

.field--checkbox {
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.field--checkbox input {
	width: 20px;
	height: 20px;
	margin-top: 2px;
}

.form-status {
	margin: 0;
	min-height: 1.4em;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   17. Prázdné stavy, stránkování, 404
   -------------------------------------------------------------------------- */

.empty-state {
	padding: var(--space-8) var(--space-5);
	background: var(--color-bg-soft);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-lg);
	text-align: center;
}

.empty-state__title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-xl);
}

.empty-state__text {
	max-width: 52ch;
	margin: 0 auto var(--space-5);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
}

.empty-state__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-8);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: var(--text-sm);
	text-decoration: none;
}

.pagination .page-numbers:hover {
	border-color: var(--color-gold);
}

.pagination .page-numbers.current {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #0b0b12;
	font-weight: var(--weight-semibold);
}

.error-404 {
	padding-block: var(--space-10);
	text-align: center;
}

.error-404__title {
	margin: 0 0 var(--space-4);
	font-size: var(--text-4xl);
}

.error-404__text {
	max-width: 48ch;
	margin: 0 auto var(--space-6);
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   18. Patička
   -------------------------------------------------------------------------- */

.site-footer {
	margin-top: var(--section-gap);
	padding-block: var(--space-8) var(--space-6);
	background: var(--color-bg-soft);
	border-top: 1px solid var(--color-border);
}

.site-footer__grid {
	display: grid;
	gap: var(--space-6);
}

@media (min-width: 640px) {
	.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.site-footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-7); }
}

.site-footer__brand {
	max-width: 34ch;
}

.site-footer__claim {
	max-width: 34ch;
	margin: var(--space-4) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

.site-footer__title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--color-gold);
}

.site-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__col li + li { margin-top: var(--space-2); }

.site-footer__col a {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	text-decoration: none;
}

.site-footer__col a:hover { color: var(--color-text); }

.site-footer__col--signs ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2);
}

.site-footer__col--signs li + li { margin-top: 0; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-2);
	margin-top: var(--space-8);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.site-footer__copy,
.site-footer__operator {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   18b. Starý obsah (stránky vzniklé před redesignem)

   Šablona vypíná vlastní emoji styly WordPressu (kvůli 15 kB JS navíc),
   takže si musí velikost emoji ohlídat sama. Bez tohoto pravidla se
   `<img class="emoji">` roztáhne na celou šířku sloupce.
   -------------------------------------------------------------------------- */

img.emoji,
img.wp-smiley,
.entry-content img.emoji,
.entry-content img.wp-smiley {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin: 0 0.07em;
	padding: 0;
	border: 0;
	border-radius: 0;
	vertical-align: -0.12em;
	background: none;
	box-shadow: none;
}

/* Tabulky sloužily jen k rozvržení a nesou pokyn, jak napsat kartářce.
   Vykreslíme je jako call-out box, ne jako tabulku dat. */
.entry-content .legacy-table {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: var(--space-5) 0;
	padding: var(--space-4) var(--space-5);
	background: var(--color-gold-dim);
	border: 1px solid color-mix(in srgb, var(--color-gold) 35%, transparent);
	border-radius: var(--radius);
	border-collapse: collapse;
}

.entry-content .legacy-table tbody,
.entry-content .legacy-table tr {
	display: block;
}

.entry-content .legacy-table td,
.entry-content .legacy-table th {
	display: block;
	padding: 0;
	border: 0;
	color: var(--color-text);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	text-align: left;
	vertical-align: top;
}

.entry-content .legacy-table td:empty {
	display: none;
}

@media (min-width: 600px) {
	.entry-content .legacy-table tr {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2) var(--space-6);
		align-items: baseline;
	}
}

/* Portrét kartářky. */
.entry-content img.hlavnibaba,
.has-legacy-content .entry-content h2 + p img,
.has-legacy-content .entry-content h2 + a img {
	width: 168px;
	height: 168px;
	margin-bottom: var(--space-4);
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var(--shadow);
}

/* Zvýrazněné SMS číslo v původním textu. */
.entry-content strong.sms {
	display: inline-block;
	padding: 0.1em 0.5em;
	background: var(--color-gold-dim);
	border: 1px solid color-mix(in srgb, var(--color-gold) 45%, transparent);
	border-radius: var(--radius-sm);
	color: var(--color-gold);
	font-family: var(--font-body);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* `<code>` se používal jako obálka kontaktu, ne jako kód. */
.has-legacy-content .entry-content code {
	display: block;
	padding: var(--space-4);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-sm);
}

/* Profil kartářky: každý nadpis s kotvou začíná novou sekci. */
.has-legacy-content .entry-content h2[id^="kartarka"] {
	margin-top: var(--space-9);
	padding-top: var(--space-7);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-2xl);
}

.has-legacy-content .entry-content h2[id^="kartarka"]:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.has-legacy-content .entry-content h3 {
	margin-top: var(--space-7);
	color: var(--color-gold);
	font-size: var(--text-xl);
}

/* Původní seznamy s emoji odrážkami — necháme emoji, jen srovnáme rytmus. */
.has-legacy-content .entry-content ul {
	padding-left: 1.1em;
}

.has-legacy-content .entry-content ul li {
	margin-bottom: var(--space-2);
}

/* Starý červený SMS banner nahradila komponenta osobní otázky. */
.has-legacy-content .entry-content img[src*="sms-vestba"],
.has-legacy-content .entry-content .code-block {
	display: none;
}

/* --------------------------------------------------------------------------
   18c. Výstup pluginu souvisejících článků

   Plugin vkládá vlastní markup dovnitř obsahu. Bez stylů vypadá
   jako rozsypaný seznam odkazů.
   -------------------------------------------------------------------------- */

.rltdpstsplgn-related-title {
	margin-top: var(--space-9);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
	font-family: var(--font-display);
	font-size: var(--text-2xl);
}

.rltdpstsplgn-related-posts {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 640px) {
	.rltdpstsplgn-related-posts {
		grid-template-columns: repeat(2, 1fr);
	}
}

.rltdpstsplgn-related-posts .clear {
	display: none;
}

.rltdpstsplgn-related-posts article {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.rltdpstsplgn_posts_title {
	margin: 0;
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
}

.rltdpstsplgn_posts_title a {
	text-decoration: none;
}

.rltdpstsplgn-related-posts .entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

.rltdpstsplgn-related-posts .entry-content {
	max-width: none;
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

.rltdpstsplgn-related-posts .entry-content > * + * {
	margin-top: var(--space-2);
}

.rltdpstsplgn-related-posts img {
	width: 60px;
	height: 60px;
	border-radius: var(--radius);
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   19. Animace
   -------------------------------------------------------------------------- */

@keyframes hnm-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes hnm-slide-in {
	from { transform: translateX(16px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

@keyframes hnm-slide-up {
	from { transform: translateY(24px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

@keyframes hnm-orbit {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes hnm-twinkle {
	0%, 100% { opacity: 0.25; }
	50% { opacity: 0.8; }
}

/* SVG prezentační atributy neumí var(), proto se barva hvězd řídí odsud. */
.star {
	fill: var(--color-gold-light);
	animation: hnm-twinkle 6s var(--ease-in-out) infinite;
}

/* --------------------------------------------------------------------------
   20. Utility
   -------------------------------------------------------------------------- */

.stack > * + * { margin-top: var(--space-4); }
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }