/* ============================================================
   Kvízy — rozcestník, běh kvízu, vyhodnocení (KVIZY-PLAN.md K5)
   Barvy, mezery a rádiusy VŽDY přes tokeny z tokens.css.
   ============================================================ */

/* Atribut [hidden] má v UA stylu jen `display: none`, takže ho přebije jakákoli
   vlastní `display` deklarace se stejnou nebo vyšší specificitou. Bez tohohle
   bloku svítila časomíra i na kvízu bez limitu a tlačítko Sdílet i tam, kde
   prohlížeč Web Share API nemá. Platí pro všechno, co v tomhle modulu skrýváme. */
.quiz-page [hidden],
.quiz-hub [hidden] {
	display: none;
}

/* ── Rozcestník /kvizy ─────────────────────────────────────── */

.quiz-hub {
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--space-xl) var(--space-md) var(--space-3xl);
}

.quiz-hub-header {
	text-align: center;
	margin-bottom: var(--space-xl);
}

.quiz-hub-header p {
	max-width: 620px;
	margin: var(--space-sm) auto 0;
	color: var(--color-text-muted);
}

.quiz-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-xl);
}

.quiz-filter a {
	display: inline-block;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--color-silver);
	border-radius: var(--radius-full);
	background: var(--color-white);
	color: var(--color-iron);
	font-size: 0.9rem;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.quiz-filter a:hover {
	border-color: var(--color-primary);
}

.quiz-filter a.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.quiz-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-lg);
}

.quiz-card {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border: 1px solid var(--color-silver);
	border-radius: var(--radius-md-plus);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.quiz-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px var(--shadow-md);
}

.quiz-card-media {
	/* Musí být pozicovaný: .card-badges je position:absolute a bez toho by se ukotvily
	   k nejbližšímu pozicovanému předkovi — tedy ke stránce, ne ke kartě. */
	position: relative;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--color-blush), var(--color-peach));
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.quiz-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Jen přímý potomek = zástupná ikona kvízu. Bez `>` by pravidlo nafouklo i ikonky
   uvnitř badge, které jsou vnořené v .card-badges. */
.quiz-card-media > svg {
	width: 56px;
	height: 56px;
	color: var(--color-white);
	opacity: 0.85;
}

.quiz-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-md);
}

.quiz-card-body h2 {
	font-size: 1.15rem;
	margin: 0 0 var(--space-sm);
	line-height: 1.35;
}

.quiz-card-perex {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	flex: 1;
	margin: 0 0 var(--space-md);
}

.quiz-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-sm);
}

.quiz-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px var(--space-sm);
	border-radius: var(--radius-full);
	background: var(--color-blush);
	color: var(--color-primary-dark);
	font-size: 0.78rem;
	font-weight: 600;
}

.quiz-badge--neutral {
	background: var(--color-snow);
	color: var(--color-steel);
}

.quiz-card-meta {
	display: flex;
	gap: var(--space-md);
	color: var(--color-stone);
	font-size: 0.83rem;
}

/* ── Detail kvízu: společný rám ────────────────────────────── */

.quiz-page {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--space-xl) var(--space-md) var(--space-3xl);
}

.quiz-stage[hidden] {
	display: none;
}

/* ── Úvodní obrazovka ──────────────────────────────────────── */

.quiz-intro {
	text-align: center;
}

.quiz-intro-hero {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md-plus);
	overflow: hidden;
	margin-bottom: var(--space-lg);
	background: linear-gradient(135deg, var(--color-blush), var(--color-peach));
}

.quiz-intro-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.quiz-intro h1 {
	margin-bottom: var(--space-sm);
}

.quiz-intro-perex {
	color: var(--color-text-muted);
	max-width: 560px;
	margin: 0 auto var(--space-lg);
}

.quiz-facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-md);
	margin-bottom: var(--space-xl);
}

.quiz-fact {
	min-width: 110px;
	padding: var(--space-md);
	border: 1px solid var(--color-silver);
	border-radius: var(--radius-md);
	background: var(--color-white);
}

.quiz-fact-value {
	display: block;
	font-size: 2.5rem;
	font-weight: 600;
	color: var(--color-primary);
	line-height: 1.2;
}

.quiz-fact-label {
	display: block;
	font-size: 0.8rem;
	color: var(--color-text-muted);
	margin-top: 2px;
}

.quiz-start-btn {
	min-width: 240px;
	font-size: 1.05rem;
}

/* ── Průběh kvízu ──────────────────────────────────────────── */

.quiz-progress-bar {
	position: relative;
	height: 8px;
	border-radius: var(--radius-full);
	background: var(--color-silver);
	overflow: hidden;
	margin-bottom: var(--space-sm);
}

.quiz-progress-fill {
	height: 100%;
	width: 0;
	border-radius: var(--radius-full);
	background: var(--color-primary);
	transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-progress-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-bottom: var(--space-lg);
}

.quiz-timer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 2rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1.1;
	color: var(--color-iron);
}

.quiz-timer svg {
	width: 22px;
	height: 22px;
}

.quiz-timer.is-warning {
	color: var(--color-warning);
}

.quiz-timer.is-critical {
	color: var(--color-red);
	animation: quiz-pulse 1s ease-in-out infinite;
}

.quiz-timer-per-question {
	display: block;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--color-stone);
}

@keyframes quiz-pulse {
	50% { opacity: 0.55; }
}

.quiz-question {
	margin-bottom: var(--space-lg);
}

/* ── Nápovědy (K13) ────────────────────────────────────────── */

.quiz-lifelines {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
}

.quiz-lifeline {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 78px;
	padding: var(--space-sm) var(--space-sm-plus);
	border: 2px solid var(--color-silver);
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-iron);
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.quiz-lifeline:hover:not(:disabled) {
	border-color: var(--color-primary);
	background: var(--color-blush);
}

.quiz-lifeline:active:not(:disabled) {
	transform: scale(0.97);
}

.quiz-lifeline:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
}

.quiz-lifeline-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-full);
	background: var(--color-blush);
	color: var(--color-primary-dark);
}

.quiz-lifeline-icon svg {
	width: 19px;
	height: 19px;
}

.quiz-lifeline-label {
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* Vyčerpaná nápověda nemizí — jen zšedne a přeškrtne se. Kdyby zmizela, uživatel
   by nevěděl, jestli ji použil, nebo jestli tam nikdy nebyla. */
.quiz-lifeline.is-spent {
	cursor: default;
	opacity: 0.45;
	border-style: dashed;
}

.quiz-lifeline.is-spent .quiz-lifeline-icon {
	background: var(--color-snow);
	color: var(--color-stone);
}

.quiz-lifeline.is-spent .quiz-lifeline-label {
	text-decoration: line-through;
}

.quiz-lifeline:disabled:not(.is-spent) {
	opacity: 0.5;
	cursor: default;
}

/* ── Výstup nápovědy ───────────────────────────────────────── */

.quiz-lifeline-output {
	margin-bottom: var(--space-lg);
	padding: var(--space-md);
	border-radius: var(--radius-md);
	background: var(--color-blush);
	border-left: 4px solid var(--color-primary);
	animation: quiz-slide-in 0.25s ease;
}

.quiz-lifeline-output[hidden] {
	display: none;
}

.quiz-lifeline-notice {
	margin: 0;
}

/* Nápověda, která se nespotřebovala (nešla použít) — vizuálně tlumená, ať je jasné,
   že to není výsledek, ale vysvětlení. */
.quiz-lifeline-notice.is-muted {
	color: var(--color-text-muted);
}

.quiz-lifeline-tip strong,
.quiz-lifeline-crowd strong {
	display: block;
	margin-bottom: var(--space-xs);
	color: var(--color-primary-dark);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.quiz-lifeline-tip p {
	margin: 0;
}

/* ── Graf „co volili ostatní" ──────────────────────────────── */

.quiz-crowd-chart {
	display: grid;
	gap: var(--space-sm);
	margin: var(--space-sm) 0;
}

.quiz-crowd-bar {
	display: grid;
	grid-template-columns: 24px 1fr 46px;
	align-items: center;
	gap: var(--space-sm);
}

.quiz-crowd-bar-label {
	font-weight: 600;
	text-align: center;
}

.quiz-crowd-bar-track {
	height: 16px;
	border-radius: var(--radius-full);
	background: var(--color-white);
	overflow: hidden;
}

.quiz-crowd-bar-fill {
	display: block;
	height: 100%;
	min-width: 2px;
	border-radius: var(--radius-full);
	/* Záměrně neutrální barva, ne zelená ani červená — graf nesmí naznačit,
	   která odpověď je správná. Ukazuje jen, co si mysleli ostatní. */
	background: var(--color-primary);
	animation: quiz-crowd-grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes quiz-crowd-grow {
	from { width: 0; }
}

.quiz-crowd-bar-value {
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.quiz-crowd-note {
	display: block;
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

/* Možnost odebraná nápovědou 50:50 — místo drží, aby layout neposkočil. */
.quiz-option.is-removed {
	visibility: hidden;
	pointer-events: none;
}

.quiz-question-help {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	margin-bottom: var(--space-md);
}

.quiz-question-image {
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-md);
}

/* ── Možnosti ──────────────────────────────────────────────── */

.quiz-options {
	display: grid;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.quiz-options--image {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.quiz-options--compact .quiz-option {
	padding: var(--space-sm) var(--space-md);
}

.quiz-option {
	display: flex;
	align-items: center;
	gap: var(--space-sm-plus);
	width: 100%;
	padding: var(--space-md);
	border: 2px solid var(--color-silver);
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-iron);
	font-family: inherit;
	font-size: 1rem;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.quiz-option:hover:not(:disabled) {
	border-color: var(--color-primary);
	background: var(--color-blush);
}

.quiz-option:active:not(:disabled) {
	transform: scale(0.99);
}

.quiz-option:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
}

.quiz-option:disabled {
	cursor: default;
}

.quiz-option-key {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-full);
	background: var(--color-snow);
	color: var(--color-steel);
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
}

.quiz-option-label {
	flex: 1;
}

.quiz-option-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.quiz-options--image .quiz-option {
	position: relative;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-sm);
	padding: var(--space-sm);
}

/* Písmeno pod vzorníkem, ne přilepené do rohu obrázku — tam se tísnilo a překrývalo
   samotnou barvu, kterou má návštěvník posuzovat. */
.quiz-options--image .quiz-option-caption {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-height: 30px;
}

/* Název odstínu je vlastně odpověď („Který odstín je marsala?" + popisek Marsala),
   takže se odkrývá až po zodpovězení. visibility, ne display — layout se nesmí hnout. */
.quiz-options--image .quiz-option-label {
	visibility: hidden;
	font-size: 0.9rem;
}

.quiz-options--image .quiz-option.is-correct .quiz-option-label,
.quiz-options--image .quiz-option.is-wrong .quiz-option-label,
.quiz-options--image .quiz-option.is-dimmed .quiz-option-label {
	visibility: visible;
}

/* Stavy po odpovědi */

.quiz-option.is-correct {
	border-color: var(--color-success);
	background: var(--color-green-light);
}

.quiz-option.is-correct .quiz-option-key {
	background: var(--color-success);
	color: var(--color-white);
}

.quiz-option.is-wrong {
	border-color: var(--color-red);
	background: #fee2e2;
}

.quiz-option.is-wrong .quiz-option-key {
	background: var(--color-red);
	color: var(--color-white);
}

.quiz-option.is-dimmed {
	opacity: 0.55;
}

.quiz-option-mark {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
}

/* ── Zpětná vazba ──────────────────────────────────────────── */

.quiz-feedback {
	margin-top: var(--space-md);
	padding: var(--space-md);
	border-radius: var(--radius-md);
	background: var(--color-snow);
	border-left: 4px solid var(--color-primary);
	animation: quiz-slide-in 0.25s ease;
}

.quiz-feedback[hidden] {
	display: none;
}

.quiz-feedback-title {
	font-weight: 600;
	margin-bottom: var(--space-xs);
}

.quiz-feedback.is-correct {
	border-left-color: var(--color-success);
}

.quiz-feedback.is-correct .quiz-feedback-title {
	color: var(--color-success);
}

.quiz-feedback.is-wrong {
	border-left-color: var(--color-red);
}

.quiz-feedback.is-wrong .quiz-feedback-title {
	color: var(--color-red);
}

/* Proklik na svatební paletu s tímhle odstínem — propojení kvízů s Design Studiem (K14). */
.quiz-palette-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--space-sm);
	color: var(--color-primary-dark);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.quiz-palette-link:hover {
	color: var(--color-primary);
}

.quiz-feedback-stat {
	display: block;
	margin-top: var(--space-sm);
	font-size: 0.85rem;
	color: var(--color-stone);
}

@keyframes quiz-slide-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

.quiz-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.quiz-actions [hidden] {
	display: none;
}

/* ── Výsledek ──────────────────────────────────────────────── */

.quiz-result {
	text-align: center;
	/* Odstup pro odrolování na výsledek — jinak kruh se skóre skončí pod lepivou hlavičkou. */
	scroll-margin-top: 90px;
}

.quiz-score-ring {
	position: relative;
	width: 180px;
	height: 180px;
	margin: 0 auto var(--space-lg);
}

.quiz-score-ring svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.quiz-score-ring circle {
	fill: none;
	stroke-width: 12;
	stroke-linecap: round;
}

.quiz-score-track {
	stroke: var(--color-silver);
}

.quiz-score-value-ring {
	stroke: var(--color-primary);
	transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-score-center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.quiz-score-number {
	font-size: 2.6rem;
	font-weight: 600;
	line-height: 1;
	color: var(--color-iron);
	font-variant-numeric: tabular-nums;
}

.quiz-score-total {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-top: 4px;
}

.quiz-band-text {
	color: var(--color-text-muted);
	max-width: 520px;
	margin: 0 auto var(--space-xl);
}

.quiz-result-stats {
	display: flex;
	justify-content: center;
	gap: var(--space-lg);
	margin-bottom: var(--space-xl);
	flex-wrap: wrap;
}

.quiz-result-stat {
	min-width: 90px;
}

.quiz-result-stat-value {
	display: block;
	font-size: 3rem;
	font-weight: 600;
	line-height: 1.2;
}

.quiz-result-stat-value.is-correct { color: var(--color-success); }
.quiz-result-stat-value.is-wrong { color: var(--color-red); }

.quiz-result-stat-label {
	display: block;
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

/* ── Sdílení ───────────────────────────────────────────────── */

.quiz-share {
	padding: var(--space-lg);
	border-radius: var(--radius-md-plus);
	background: var(--color-blush);
	margin-bottom: var(--space-xl);
}

.quiz-share-title {
	font-weight: 600;
	margin-bottom: var(--space-md);
}

.quiz-share-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
}

.quiz-share-buttons .btn svg {
	width: 18px;
	height: 18px;
}

/* ── Rozpad odpovědí ───────────────────────────────────────── */

.quiz-review {
	text-align: left;
	margin-bottom: var(--space-xl);
}

.quiz-review h3 {
	margin-bottom: var(--space-md);
}

.quiz-review-item {
	padding: var(--space-md);
	border: 1px solid var(--color-silver);
	border-left: 4px solid var(--color-silver);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-sm);
}

.quiz-review-item.is-correct { border-left-color: var(--color-success); }
.quiz-review-item.is-wrong { border-left-color: var(--color-red); }

.quiz-review-question {
	font-weight: 600;
	margin-bottom: var(--space-xs);
}

.quiz-review-answer {
	font-size: 0.9rem;
	color: var(--color-text-muted);
}

.quiz-review-answer strong {
	color: var(--color-iron);
}

/* ── Navazující obsah ──────────────────────────────────────── */

.quiz-related {
	text-align: left;
	margin-top: var(--space-2xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--color-silver);
}

.quiz-related-list {
	display: grid;
	gap: var(--space-sm);
}

.quiz-related-list a {
	display: block;
	padding: var(--space-md);
	border: 1px solid var(--color-silver);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--color-iron);
	transition: border-color 0.15s ease;
}

.quiz-related-list a:hover {
	border-color: var(--color-primary);
}

/* ── Návrat na rozcestník ──────────────────────────────────── */

.quiz-back {
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-silver);
	text-align: center;
}

/* Když nad odkazem stojí blok souvisejících článků, má ten už vlastní horní linku —
   druhá hned pod ní by vypadala jako chyba. */
.quiz-related + .quiz-back {
	border-top: 0;
	padding-top: 0;
}

/* ── Blok kvízu pod článkem (K10) ──────────────────────────── */

.article-quiz-cta {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-lg);
	margin: var(--space-xl) 0;
	border-radius: var(--radius-md-plus);
	background: linear-gradient(135deg, var(--color-blush), var(--color-cream));
	border: 1px solid var(--color-peach);
}

.article-quiz-cta-body {
	flex: 1;
}

.article-quiz-cta-label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-primary-dark);
	margin-bottom: 2px;
}

.article-quiz-cta-title {
	font-weight: 600;
	line-height: 1.35;
}

@media (max-width: 600px) {
	.article-quiz-cta {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.quiz-facts {
		gap: var(--space-sm);
	}

	.quiz-fact {
		flex: 1 1 30%;
		min-width: 0;
		padding: var(--space-sm);
	}

	.quiz-score-ring {
		width: 150px;
		height: 150px;
	}
}

/* Uživatel s omezením pohybu nemá dostat žádnou z animací výše. */
@media (prefers-reduced-motion: reduce) {
	.quiz-card,
	.quiz-option,
	.quiz-progress-fill,
	.quiz-score-value-ring {
		transition: none;
	}

	.quiz-feedback,
	.quiz-lifeline-output,
	.quiz-crowd-bar-fill,
	.quiz-timer.is-critical {
		animation: none;
	}

	.quiz-lifeline { transition: none; }

	.quiz-card:hover {
		transform: none;
	}
}