/* Vzhled navazuje na e-shop Dárky.cz (FoxShop_V11): Manrope, modrá značka, barevné tinty, rádius 22/14. */
:root {
	color-scheme: light dark;
	--font: 'Manrope Variable', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	--brand: #1565b6; /* plochy tlačítek */
	--brand-text: #1565b6; /* odkazy a mikropopisky */
	--band: linear-gradient(120deg, #0b406f 0%, #1565b6 100%);
	--top: #22242b;

	--ink: #22242b;
	--ink-2: #5a5e6b;
	--line: #e6e8ee;
	--bg: #f6f7f9;
	--surface: #ffffff;
	--hero: linear-gradient(135deg, #eaf2fa 0%, #fff7f4 100%);

	--blue-bg: #eaf2fa;
	--blue-fg: #0e4f92;
	--purple-bg: #f0eafb;
	--purple-fg: #5a3a9a;
	--red-bg: #fdebee;
	--red-fg: #b02438;
	--teal-bg: #e0f4f1;
	--teal-fg: #0a6b63;
	--orange-bg: #fff3dc;
	--orange-fg: #7a5605;
	--green-bg: #e9f6e6;
	--green-fg: #256b1a;
	--no-bg: #22242b;
	--no-fg: #ffffff;

	--radius: 14px;
	--radius-lg: 22px;
	--shadow-md: 0 6px 24px rgba(34, 36, 43, 0.1);
}

@media (prefers-color-scheme: dark) {
	:root {
		--brand-text: #7db8f2;
		--top: #0d0e12;
		--ink: #f1f2f5;
		--ink-2: #b4b8c2;
		--line: #3a3d47;
		--bg: #15171c;
		--surface: #1e2128;
		--hero: linear-gradient(135deg, #1a2433 0%, #2a2024 100%);
		--blue-bg: #1a2a3d;
		--blue-fg: #9ccbf7;
		--purple-bg: #2a2340;
		--purple-fg: #c9b5f2;
		--red-bg: #3a1e24;
		--red-fg: #ffa3b0;
		--teal-bg: #12312e;
		--teal-fg: #7fe0d4;
		--orange-bg: #3a2d12;
		--orange-fg: #ffd88a;
		--green-bg: #1b3317;
		--green-fg: #9be08c;
		--no-bg: #f1f2f5;
		--no-fg: #22242b;
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--brand-text);
	outline-offset: 2px;
	border-radius: 6px;
}

h1,
h2,
h3,
p,
dl,
dd,
ul {
	margin: 0;
}

.wrap {
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
	padding-inline: 16px;
}

.micro {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.micro small {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

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

/* ---- Horní lišta a hlavička ---- */
.topbar {
	background: var(--top);
	color: #c9ccd4;
}

.topbar__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 44px;
	padding-right: 6px;
}

.langs {
	display: flex;
	flex: none;
}

.langs a {
	width: 38px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #c9ccd4;
	font-size: 12px;
	font-weight: 800;
}

.langs a[aria-current='true'] span {
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
}

.header {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.header__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 10px;
	padding-right: 12px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	text-decoration: none;
}

.logo__mark {
	flex: none;
	display: block;
}

.logo__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.logo__word {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--brand-text);
}

.logo__tag {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink-2);
}

.eco-pill {
	min-height: 44px;
	padding: 0 14px 0 10px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	background: var(--green-bg);
	color: var(--green-fg);
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.2;
}

.eco-pill svg {
	flex: none;
}

/* ---- Záhlaví stránky ---- */
.hero {
	background: var(--hero);
}

.hero__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 24px 26px;
}

.hero__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.hero .micro {
	color: var(--brand-text);
}

.hero h1 {
	font-size: 34px;
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.025em;
	overflow-wrap: anywhere;
}

.hero__lead {
	font-weight: 600;
	color: var(--ink-2);
}

.hero__art {
	flex: none;
}

.hero--band {
	background: var(--band);
	color: #fff;
}

.hero--band .micro {
	color: #cce0f2;
}

.hero--band .hero__lead {
	color: #eaf2fa;
}

.hero--error .micro {
	color: var(--red-fg);
}

.badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2px;
}

.badge {
	padding: 5px 11px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 800;
	align-self: flex-start;
}

.badge--yes {
	background: var(--green-bg);
	color: var(--green-fg);
}

.badge--no {
	background: var(--no-bg);
	color: var(--no-fg);
}

.badge--plain {
	padding: 4px 10px;
	font-weight: 700;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink-2);
}

.badge--pending {
	background: var(--orange-bg);
	color: var(--orange-fg);
}

.notice {
	background: var(--orange-bg);
	color: var(--orange-fg);
	font-size: 14px;
	font-weight: 700;
}

.notice .wrap {
	padding-block: 10px;
}

/* ---- Obsah ---- */
.main {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-block: 16px 32px;
}

.main--tight {
	gap: 12px;
}

.stack {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.h2 {
	font-size: 20px;
	line-height: 1.3;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.fact {
	border-radius: var(--radius);
	padding: 14px 14px 12px;
}

.fact--blue {
	background: var(--blue-bg);
	color: var(--blue-fg);
}

.fact--purple {
	background: var(--purple-bg);
	color: var(--purple-fg);
}

.fact__value {
	font-size: 23px;
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.band {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border-radius: var(--radius-lg);
	text-decoration: none;
	background: var(--band);
	color: #fff;
	box-shadow: var(--shadow-md);
}

.band__icon {
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: 999px;
	background: #3fa42f;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.band__text {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.band__title {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.band__sub {
	font-size: 13.5px;
	font-weight: 600;
	color: #cce0f2;
}

.band > svg {
	flex: none;
}

.band--plain {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink);
	box-shadow: none;
}

.band--plain .band__icon {
	background: var(--green-bg);
	color: var(--green-fg);
}

.band--plain .band__sub {
	color: var(--ink-2);
}

.band--plain > svg {
	color: var(--brand-text);
}

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.rows > * + * {
	border-top: 1px solid var(--line);
}

.row {
	padding: 12px 18px;
}

.row dt,
.row h3 {
	color: var(--ink-2);
}

.row dd {
	font-weight: 700;
	overflow-wrap: anywhere;
}

.row--pad {
	padding: 14px 18px 16px;
}

.row--pad h3 {
	margin-bottom: 8px;
}

.chips {
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.chips li {
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
}

.chips--red li {
	background: var(--red-bg);
	color: var(--red-fg);
}

.chips--teal li {
	background: var(--teal-bg);
	color: var(--teal-fg);
}

.chips--none li {
	padding-inline: 0;
	color: var(--ink-2);
}

.fire {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 18px 16px;
	background: var(--orange-bg);
	color: var(--orange-fg);
}

.fire svg {
	flex: none;
	margin-top: 2px;
}

.fire p {
	margin-top: 2px;
	font-weight: 800;
}

.party {
	display: flex;
	gap: 14px;
	padding: 16px 18px;
}

.party__icon {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.party__icon--teal {
	background: var(--teal-bg);
	color: var(--teal-fg);
}

.party__icon--blue {
	background: var(--blue-bg);
	color: var(--blue-fg);
}

.party dt {
	color: var(--ink-2);
}

.party dd {
	font-size: 15px;
	overflow-wrap: anywhere;
}

.party strong,
.mark strong {
	font-weight: 800;
}

.party a {
	color: var(--brand-text);
	font-weight: 700;
}

.mark {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 16px;
	font-size: 15px;
}

.mark__box {
	width: 76px;
	min-height: 76px;
	flex: none;
	border-radius: var(--radius);
	background: #f6f7f9;
	color: #22242b;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.1;
	padding: 6px 0;
}

.btn {
	min-height: 54px;
	padding: 10px 18px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
	text-align: center;
	background: var(--brand);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
}

.btn svg {
	flex: none;
}

.meta {
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
}

.pending {
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pending p {
	color: var(--ink-2);
}

.pending .btn {
	margin-top: 6px;
	min-height: 50px;
}

/* ---- Seznam modelů ---- */
.group__title {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 800;
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: 10px;
}

.glyph {
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.glyph::before {
	content: '';
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: currentColor;
}

.glyph--cyl::before {
	width: 10px;
	height: 20px;
	border-radius: 3px;
}

.glyph--blue {
	background: var(--blue-bg);
	color: #1565b6;
}

.glyph--purple {
	background: var(--purple-bg);
	color: #7048b6;
}

.glyph--green {
	background: var(--green-bg);
	color: #3fa42f;
}

.glyph--red {
	background: var(--red-bg);
	color: #e63950;
}

.links a {
	min-height: 54px;
	padding: 8px 14px 8px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
}

.links svg {
	flex: none;
	color: var(--brand-text);
}

/* ---- Textová stránka ---- */
.toc {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 6px;
}

.toc a {
	min-height: 64px;
	padding: 10px 12px;
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.25;
}

.num {
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
}

.toc .num {
	background: var(--surface);
}

.tone-0 {
	background: var(--blue-bg);
	color: var(--blue-fg);
}

.tone-1 {
	background: var(--green-bg);
	color: var(--green-fg);
}

.tone-2 {
	background: var(--teal-bg);
	color: var(--teal-fg);
}

.tone-3 {
	background: var(--orange-bg);
	color: var(--orange-fg);
}

.tone-4 {
	background: var(--purple-bg);
	color: var(--purple-fg);
}

.tone-warn {
	background: var(--red-bg);
	color: var(--red-fg);
}

.block {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scroll-margin-top: 12px;
}

.block h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1.25;
}

.block h2 .num {
	width: 32px;
	height: 32px;
	font-size: 15px;
}

.block--warn {
	background: var(--red-bg);
	border-color: transparent;
}

.block--warn h2 {
	color: var(--red-fg);
}

.block--warn h2 .num {
	background: #e63950;
	color: #fff;
}

.prose {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.prose ul,
.prose ol {
	margin: 0;
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.prose a {
	color: var(--brand-text);
	font-weight: 700;
}

.block--warn .prose strong {
	color: var(--red-fg);
}

.symbols {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.symbols .mark {
	padding: 0;
	gap: 14px;
}

.symbols .mark__box {
	width: 64px;
	min-height: 64px;
}

/* ---- Patička ---- */
.footer {
	background: var(--top);
	color: #c9ccd4;
	font-size: 14px;
}

.footer__in {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-block: 28px 32px;
}

.footer__word {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
}

.footer .micro {
	display: block;
	margin-bottom: 4px;
	color: #a9adb9;
}

.footer nav {
	display: flex;
	flex-direction: column;
	border-top: 1px solid #3a3d47;
}

.footer nav a {
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
	color: #fff;
	font-weight: 700;
	border-bottom: 1px solid #3a3d47;
}

.footer nav svg {
	color: #a9adb9;
}

/* ---- Rozvržení sloupců (na telefonu vše pod sebou) ---- */
.col,
.groups,
.blocks {
	display: flex;
	flex-direction: column;
}

.col {
	gap: 28px;
}

.groups {
	gap: 24px;
}

.main--text,
.blocks {
	gap: 14px;
}

/* ---- Odezva na myš (počítač) ---- */
@media (hover: hover) {
	.links a:hover,
	.toc a:hover {
		background-image: linear-gradient(rgba(21, 101, 182, 0.08), rgba(21, 101, 182, 0.08));
	}

	.links a:hover {
		color: var(--brand-text);
	}

	.btn:hover,
	.band:hover,
	.eco-pill:hover {
		filter: brightness(1.08);
	}

	.langs a:hover,
	.footer nav a:hover {
		color: #fff;
		text-decoration: underline;
	}

	.band > svg,
	.links svg {
		transition: transform 0.15s;
	}

	.band:hover > svg,
	.links a:hover svg {
		transform: translateX(3px);
	}
}

/* ---- Tablet ---- */
@media (min-width: 640px) {
	.wrap {
		max-width: 1120px;
		padding-inline: 24px;
	}

	.hero__in {
		padding-block: 32px 34px;
	}

	.hero h1 {
		font-size: 40px;
	}

	/* Popisek vlevo, hodnota vpravo */
	dl.rows .row {
		display: grid;
		grid-template-columns: minmax(160px, 34%) minmax(0, 1fr);
		gap: 16px;
		align-items: baseline;
		padding-block: 14px;
	}

	.groups {
		display: block;
		columns: 2;
		column-gap: 24px;
	}

	.group {
		break-inside: avoid;
		margin-bottom: 24px;
	}

	.toc {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.main--tight {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		align-items: start;
		align-content: start;
	}

	.footer__in {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 24px 48px;
	}

	.footer__word {
		width: 100%;
	}

	.footer nav {
		margin-left: auto;
		min-width: 280px;
	}
}

/* ---- Počítač ---- */
@media (min-width: 960px) {
	.wrap {
		padding-inline: 32px;
	}

	.topbar__in,
	.header__in {
		padding-right: 32px;
	}

	.header__in {
		padding-block: 14px;
	}

	.logo__word {
		font-size: 26px;
	}

	.header .logo__mark {
		width: 46px;
		height: 46px;
	}

	.logo__tag {
		font-size: 12px;
	}

	.eco-pill {
		padding: 0 18px 0 14px;
		font-size: 15px;
	}

	.hero__in {
		padding-block: 48px 52px;
		gap: 40px;
	}

	.hero__text {
		gap: 14px;
		max-width: 760px;
	}

	.hero h1 {
		font-size: 56px;
	}

	.hero__lead {
		font-size: 19px;
	}

	.hero .micro {
		font-size: 12.5px;
	}

	.badge {
		font-size: 14.5px;
		padding: 6px 13px;
	}

	.hero__art {
		width: auto;
		height: 200px;
		margin-right: 40px;
	}

	.main {
		padding-block: 32px 56px;
	}

	.h2 {
		font-size: 22px;
	}

	/* Stránka modelu: údaje vlevo, rychlé hodnoty a subjekty vpravo */
	.main--model {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 380px;
		grid-template-rows: auto 1fr;
		gap: 28px 40px;
		align-items: start;
	}

	.model__top {
		grid-column: 2;
		grid-row: 1;
	}

	.model__main {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.model__side {
		grid-column: 2;
		grid-row: 2;
	}

	.model__meta {
		grid-column: 1 / -1;
		text-align: left;
	}

	.fact__value {
		font-size: 26px;
	}

	.row,
	.row--pad,
	.fire,
	.party {
		padding-inline: 22px;
	}

	.mark {
		padding: 20px 22px;
	}

	/* Seznam modelů */
	.groups {
		columns: 3;
	}

	/* Textová stránka: obsah vlevo drží na místě, text vpravo */
	.main--text.has-toc {
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr);
		gap: 40px;
		align-items: start;
	}

	.main--text .toc {
		grid-template-columns: 1fr;
		position: sticky;
		top: 24px;
		margin: 0;
	}

	.toc a {
		min-height: 56px;
	}

	.main--text:not(.has-toc) .blocks {
		max-width: 800px;
	}

	.blocks {
		gap: 18px;
	}

	.block {
		padding: 26px 28px;
		scroll-margin-top: 24px;
	}

	.main--text .meta {
		text-align: left;
	}

	.symbols {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}

	.symbols .mark {
		flex-direction: column;
		align-items: flex-start;
	}

	.main--tight {
		gap: 24px;
		max-width: 1120px;
	}

	.pending {
		padding: 28px;
	}

	.footer__in {
		padding-block: 40px 44px;
	}

	.footer nav {
		min-width: 340px;
	}
}