/* ═══════════════════════════════════════════════════════
   Průvodce výběrem (.ks-guide) — scoped styly stránky.
   Tokeny a .btn přebírá z globálního design systému
   (kouskysveta-ds-tokens / -components). Mobile-first.
   ═══════════════════════════════════════════════════════ */

.ks-guide {
	font-family: var(--font-body, 'Open Sans', sans-serif);
	color: var(--color-text);
	max-width: var(--max-width, 1170px);
	margin: 0 auto;
	padding: 0 var(--s-md);
	line-height: 1.65;
}

.ks-guide section { margin: var(--s-2xl) 0; }

/* Theme reset přebíjí UA pravidlo pro [hidden] — vrať mu platnost (kvíz). */
.ks-guide [hidden] { display: none !important; }

/* Podtržení odkazů z theme se na tlačítka nevztahuje. */
.ks-guide a.btn { text-decoration: none; }

/* Elementor kit přebarvuje <a>/<button> text na accent (hlavně při hoveru).
   Na plných buttonech tím zmizí text do pozadí — vynuť bílou. Viz lekce
   z konfigurátoru na .com (reference_elementor_kit_button_override). */
.ks-guide .btn-primary,
.ks-guide .btn-primary:hover,
.ks-guide .btn-primary:focus,
.ks-guide .btn-secondary,
.ks-guide .btn-secondary:hover,
.ks-guide .btn-secondary:focus {
	color: var(--color-text-invert) !important;
}

/* ── Sdílené drobnosti ── */
.ks-guide-label {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--color-primary);
	margin: 0 0 var(--s-xs);
}
.ks-guide-label--invert { color: var(--color-primary-light); }

.ks-guide-h1,
.ks-guide-h2,
.ks-guide-h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.1;
	margin: 0 0 var(--s-sm);
}
.ks-guide-h1 { font-size: var(--t-4xl); }
.ks-guide-h2 { font-size: var(--t-2xl); }
.ks-guide-h3 { font-size: var(--t-xl); }

.ks-guide-section-head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--s-lg);
}
.ks-guide-section-text { color: var(--color-grey-accent); margin: 0; }

.ks-guide-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-sm);
	margin-top: var(--s-md);
}

/* ── Hero ── */
.ks-guide-hero {
	display: grid;
	gap: var(--s-lg);
	align-items: center;
	margin-top: var(--s-lg);
}
.ks-guide-hero-media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-l);
	display: block;
}
.ks-guide-lead { color: var(--color-grey-accent); font-size: var(--t-md); margin: 0; }
.ks-guide-micro {
	margin: var(--s-md) 0 0;
	font-size: var(--t-xs);
	color: var(--color-grey);
}
@media (min-width: 768px) {
	.ks-guide-hero { grid-template-columns: 1.1fr 1fr; }
}
@media (max-width: 767px) {
	/* Fotka hned pod nadpisem — nováček musí produkty VIDĚT nad foldem. */
	.ks-guide-hero-media { order: -1; }
}

/* ── Rodinné karty ── */
.ks-guide-families {
	display: grid;
	gap: var(--s-lg);
	scroll-margin-top: 90px;
}
@media (min-width: 900px) {
	.ks-guide-families { grid-template-columns: 1fr 1fr; }
}
.ks-guide-family {
	border: 1px solid var(--color-grey-light);
	border-top: 4px solid var(--color-primary);
	border-radius: var(--radius-m);
	padding: var(--s-lg);
	overflow: hidden; /* fotka přes celou šířku respektuje zaoblené rohy */
}
/* Fotka rodiny — banner nahoře, vytažený z paddingu na kraje karty. */
.ks-guide-family-media {
	margin: calc(var(--s-lg) * -1) calc(var(--s-lg) * -1) var(--s-md);
	aspect-ratio: 16 / 9;
	background: var(--color-grey-light);
}
.ks-guide-family-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ks-guide-family--system { border-top-color: var(--color-secondary); }
.ks-guide-family--system .ks-guide-label { color: var(--color-secondary); }
.ks-guide-family-tagline { color: var(--color-grey-accent); margin: 0 0 var(--s-md); }
.ks-guide-family-bullets {
	list-style: none;
	margin: 0 0 var(--s-md);
	padding: 0;
}
.ks-guide-family-bullets li {
	padding: var(--s-xs) 0;
	border-bottom: 1px solid var(--color-grey-light);
}
.ks-guide-family-bullets li:last-child { border-bottom: none; }
.ks-guide-family-bullets strong { color: var(--color-primary); }
.ks-guide-family--system .ks-guide-family-bullets strong { color: var(--color-secondary-hover); }
.ks-guide-family-meta {
	display: flex;
	gap: var(--s-lg);
	margin: 0 0 var(--s-md);
}
.ks-guide-family-meta dt {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-grey);
}
.ks-guide-family-meta dd {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--t-md);
}

/* ── Produktové karty ── */
.ks-guide-grid {
	display: grid;
	gap: var(--s-md);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.ks-guide-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.ks-guide-grid { grid-template-columns: repeat(3, 1fr); }
	.ks-guide-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.ks-guide-card {
	position: relative;
	border: 1px solid var(--color-grey-light);
	border-radius: var(--radius-m);
	overflow: hidden;
	background: var(--color-bg);
	transition: box-shadow var(--transition-fast, 0.15s), transform var(--transition-fast, 0.15s);
}
.ks-guide-card:hover {
	box-shadow: var(--shadow-s);
	transform: translateY(-2px);
}
.ks-guide-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.ks-guide-card-media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--color-grey-light);
}
.ks-guide-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ks-guide-badge {
	position: absolute;
	top: var(--s-xs);
	right: var(--s-xs);
	z-index: 2;
	background: var(--color-primary);
	color: var(--color-text-invert);
	font-family: var(--font-display);
	font-size: var(--t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	padding: 2px var(--s-xs);
	border-radius: var(--radius-s);
}
.ks-guide-card--system .ks-guide-badge { background: var(--color-secondary); }

/* Hover swap na první fotku galerie (jen živé produkty s galerií) */
.ks-guide-card-img-hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.25s;
}
.ks-guide-card:hover .ks-guide-card-img-hover { opacity: 1; }

/* Šampioni (nejprodávanější) — mírně větší, barevný rámeček, páska nahoře */
.ks-guide-card--featured {
	border: 2px solid var(--color-primary);
	box-shadow: var(--shadow-s);
}
.ks-guide-card--system.ks-guide-card--featured { border-color: var(--color-secondary); }
@media (min-width: 640px) {
	/* scale nemění grid — karta jen opticky vystoupí nad sousedy */
	.ks-guide-card--featured {
		transform: scale(1.06);
		z-index: 1;
	}
	.ks-guide-card--featured:hover { transform: scale(1.06) translateY(-2px); }
}
.ks-guide-card-flag {
	margin: 0;
	background: var(--color-primary);
	color: var(--color-text-invert);
	font-family: var(--font-display);
	font-size: var(--t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	padding: var(--s-2xs) var(--s-xs);
}
.ks-guide-card--system .ks-guide-card-flag { background: var(--color-secondary); }
.ks-guide-card-body { padding: var(--s-md); }
.ks-guide-card-labels {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-primary);
}
.ks-guide-card--system .ks-guide-card-labels { color: var(--color-secondary-hover); }
.ks-guide-card-name {
	font-family: var(--font-display);
	font-size: var(--t-lg);
	text-transform: uppercase;
	margin: var(--s-2xs) 0;
}
.ks-guide-card-desc {
	font-size: var(--t-sm);
	color: var(--color-grey-accent);
	margin: 0 0 var(--s-md);
}
.ks-guide-card-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-2xs) var(--s-sm);
	border-top: 1px solid var(--color-grey-light);
	padding-top: var(--s-sm);
}
.ks-guide-card-price {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--t-md);
	white-space: nowrap;
}
.ks-guide-card-price del { color: var(--color-grey); font-weight: 400; margin-right: var(--s-2xs); }
.ks-guide-card-price ins { text-decoration: none; }
.ks-guide-card-more {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-primary);
	white-space: nowrap;
}

/* ── Konfigurátor banner ── */
.ks-guide-configurator {
	display: grid;
	gap: 0;
	margin-top: var(--s-lg);
	border-radius: var(--radius-l);
	overflow: hidden;
	background: var(--color-text);
	color: var(--color-text-invert);
}
.ks-guide-configurator-text { padding: var(--s-xl) var(--s-lg); }
.ks-guide-configurator-text p { color: rgba(255, 255, 255, 0.8); }
.ks-guide-configurator-media {
	position: relative;
	min-height: 220px;
}
.ks-guide-configurator-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ks-guide-configurator-caption {
	position: absolute;
	right: var(--s-sm);
	bottom: var(--s-sm);
	background: rgba(28, 28, 28, 0.85);
	font-family: var(--font-display);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: var(--s-2xs) var(--s-xs);
	border-radius: var(--radius-s);
}
@media (min-width: 900px) {
	.ks-guide-configurator { grid-template-columns: 1fr 1fr; }
}
/* !important: .btn-outline nastavuje tmavý text a kit ho při hoveru přebarvuje —
   na tmavém banneru by zmizel. Vynuť bílou i v hoveru/fokusu. */
.ks-guide .ks-guide-btn-invert,
.ks-guide .ks-guide-btn-invert:hover,
.ks-guide .ks-guide-btn-invert:focus {
	color: var(--color-text-invert) !important;
	border-color: rgba(255, 255, 255, 0.4);
}
.ks-guide .ks-guide-btn-invert:hover { border-color: var(--color-text-invert); }

/* Nadpisy uvnitř tmavých sekcí (konfigurátor banner + kvíz) dědí tmavou
   --color-text a nejsou vidět — vynuť bílou. */
.ks-guide-configurator .ks-guide-h3,
.ks-guide-quiz .ks-guide-h2,
.ks-guide-quiz .ks-quiz-q,
.ks-guide-quiz .ks-quiz-result-name {
	color: var(--color-text-invert);
}

/* ── Kvíz ── */
.ks-guide-quiz {
	background: var(--color-text);
	color: var(--color-text-invert);
	border-radius: var(--radius-l);
	padding: var(--s-xl) var(--s-md);
	scroll-margin-top: 90px;
}
.ks-guide-quiz .ks-guide-section-text { color: rgba(255, 255, 255, 0.7); }
.ks-quiz {
	max-width: 720px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-m);
	padding: var(--s-lg) var(--s-md);
}
.ks-quiz-progress {
	display: flex;
	gap: var(--s-xs);
	margin-bottom: var(--s-sm);
}
.ks-quiz-bar {
	flex: 1;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.2);
}
.ks-quiz-bar.is-done { background: var(--color-primary); }
.ks-quiz-counter {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 var(--s-xs);
	min-height: 1em;
}
.ks-quiz-q {
	font-family: var(--font-display);
	font-size: var(--t-lg);
	text-transform: uppercase;
	margin: 0 0 var(--s-md);
}
.ks-quiz-options {
	display: grid;
	gap: var(--s-sm);
}
@media (min-width: 640px) {
	.ks-quiz-options { grid-template-columns: 1fr 1fr; }
}
/* !important: Elementor kit styluje všechna <button> (border/barva/zarovnání)
   a přebil by vzhled voleb kvízu — viz lekce z konfigurátoru na .com. */
.ks-guide .ks-quiz-opt {
	display: flex !important;
	align-items: center;
	gap: var(--s-sm);
	text-align: left !important;
	background: rgba(255, 255, 255, 0.07) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: var(--radius-s) !important;
	padding: var(--s-sm) !important;
	color: var(--color-text-invert) !important;
	cursor: pointer;
	min-height: var(--min-touch);
	font: inherit;
	width: 100%;
	transition: border-color 0.15s, background 0.15s;
}
.ks-guide .ks-quiz-opt:hover,
.ks-guide .ks-quiz-opt:focus-visible {
	border-color: var(--color-primary) !important;
	background: rgba(255, 255, 255, 0.1) !important;
}
.ks-quiz-opt-img {
	flex: 0 0 56px;
}
.ks-quiz-opt-img img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--radius-s);
	display: block;
}
.ks-quiz-opt-title {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
}
.ks-quiz-opt-sub {
	display: block;
	font-size: var(--t-xs);
	color: rgba(255, 255, 255, 0.6);
}
.ks-quiz-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--s-md);
}
.ks-guide .ks-quiz-back {
	background: none !important;
	border: none !important;
	color: rgba(255, 255, 255, 0.7) !important;
	font-family: var(--font-display);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	padding: var(--s-xs) 0 !important;
}
.ks-guide .ks-quiz-back:hover { color: var(--color-text-invert) !important; }

/* Restart tlačítko (button, ne <a>) — stejná ochrana před kitem. */
.ks-guide button.btn-outline {
	background: transparent !important;
	border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
	color: var(--color-text-invert) !important;
}
.ks-guide button.btn-outline:hover { border-color: var(--color-text-invert) !important; }
.ks-quiz-hint {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.4);
}

/* Výsledek kvízu */
.ks-quiz-result {
	display: grid;
	gap: var(--s-md);
}
@media (min-width: 640px) {
	.ks-quiz-result { grid-template-columns: 200px 1fr; }
}
.ks-quiz-result-media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-m);
	display: block;
}
.ks-quiz-result-name {
	font-family: var(--font-display);
	font-size: var(--t-2xl);
	text-transform: uppercase;
	margin: 0 0 var(--s-xs);
}
.ks-quiz-result-text { color: rgba(255, 255, 255, 0.8); margin: 0 0 var(--s-xs); }
.ks-quiz-result-price {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--t-xl);
	margin: 0;
}
.ks-quiz-result-price del { color: rgba(255, 255, 255, 0.5); font-weight: 400; margin-right: var(--s-2xs); }
.ks-quiz-result-price ins { text-decoration: none; }
.ks-quiz-result-secondary { margin: var(--s-xs) 0 0; }
.ks-quiz-result-secondary a { color: var(--color-primary-light); }

/* ── Srovnávací tabulka ── */
.ks-guide-compare {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--color-grey-light);
	border-radius: var(--radius-s);
	overflow: hidden;
	scroll-margin-top: 90px;
}
.ks-guide-compare th,
.ks-guide-compare td {
	padding: var(--s-sm) var(--s-md);
	text-align: left;
	border-bottom: 1px solid var(--color-grey-light);
	font-size: var(--t-sm);
	vertical-align: top;
}
.ks-guide-compare thead th {
	background: var(--color-grey-light);
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.ks-guide-compare thead th.ks-guide-compare-kpz { border-bottom: 3px solid var(--color-primary); }
.ks-guide-compare thead th.ks-guide-compare-system { border-bottom: 3px solid var(--color-secondary); }
.ks-guide-compare-label {
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: var(--t-xs);
	color: var(--color-grey);
}
.ks-guide-compare small { color: var(--color-grey); }

/* Mobil: tabulka jako skládané karty — 3 sloupce se na 390 px nevejdou. */
@media (max-width: 639px) {
	.ks-guide-compare thead { display: none; }
	.ks-guide-compare,
	.ks-guide-compare tbody,
	.ks-guide-compare tr,
	.ks-guide-compare td { display: block; width: 100%; }
	.ks-guide-compare tr {
		border-bottom: 1px solid var(--color-grey-light);
		padding: var(--s-xs) 0;
	}
	.ks-guide-compare td { border: none; padding: var(--s-2xs) var(--s-sm); }
	.ks-guide-compare-label { padding-bottom: 0; }
	.ks-guide-compare td[data-col]::before {
		content: attr(data-col) ': ';
		font-family: var(--font-display);
		font-weight: 600;
		text-transform: uppercase;
		font-size: var(--t-xs);
		letter-spacing: 0.5px;
		color: var(--color-primary);
	}
	.ks-guide-compare td[data-col]:last-child::before { color: var(--color-secondary-hover); }
}

/* ── Recenze ── */
.ks-guide-reviews-grid {
	display: grid;
	gap: var(--s-md);
}
@media (min-width: 900px) {
	.ks-guide-reviews-grid { grid-template-columns: repeat(3, 1fr); }
}
.ks-guide-review {
	margin: 0;
	background: var(--color-primary-light);
	border-radius: var(--radius-m);
	padding: var(--s-lg);
	font-size: var(--t-sm);
}
.ks-guide-review p { margin: 0 0 var(--s-sm); }
.ks-guide-review footer {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-grey);
}
.ks-guide-reviews-summary {
	text-align: center;
	margin: var(--s-lg) 0 0;
	font-family: var(--font-display);
	font-weight: 600;
}
.ks-guide-reviews-summary a { color: var(--color-primary); margin-left: var(--s-xs); }

/* ── Výroba + B2B ── */
.ks-guide-made {
	max-width: 640px;
	margin: 0 auto var(--s-lg);
	text-align: center;
	color: var(--color-grey-accent);
}
.ks-guide-b2b-box {
	display: grid;
	gap: var(--s-md);
	align-items: center;
	background: var(--color-primary-light);
	border-radius: var(--radius-l);
	padding: var(--s-xl) var(--s-lg);
}
@media (min-width: 900px) {
	.ks-guide-b2b-box { grid-template-columns: 1fr auto; }
}

/* ── FAQ ── */
.ks-guide-faq { max-width: 760px; margin-left: auto; margin-right: auto; scroll-margin-top: 90px; }
.ks-guide-faq .ks-guide-h2 { text-align: center; margin-bottom: var(--s-lg); }
.ks-guide-faq-item {
	background: var(--color-bg);
	border: 1px solid var(--color-grey-light);
	border-radius: var(--radius-s);
	margin-bottom: var(--s-sm);
}
.ks-guide-faq-item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-sm);
	cursor: pointer;
	list-style: none;
	padding: var(--s-sm) var(--s-md);
	font-weight: 600;
	min-height: var(--min-touch);
}
.ks-guide-faq-item summary::-webkit-details-marker { display: none; }
.ks-guide-faq-marker { flex: 0 0 auto; color: var(--color-primary); font-weight: 700; }
.ks-guide-faq-marker::before { content: '+'; }
.ks-guide-faq-item[open] .ks-guide-faq-marker::before { content: '−'; }
.ks-guide-faq-answer {
	padding: 0 var(--s-md) var(--s-md);
	color: var(--color-grey-accent);
}

/* ── Závěr ── */
.ks-guide-final {
	text-align: center;
	padding-bottom: var(--s-xl);
}
.ks-guide-final .ks-guide-cta-row { justify-content: center; }

/* Kotvy pod sticky hlavičkou */
.ks-guide section[id] { scroll-margin-top: 90px; }