/**
 * Квиз «Подбери шлем за 2 минуты».
 * Цвета — токены темы edu (_tokens.scss), шрифт наследуется от темы.
 */

.edu-quiz {
	--eq-brand: #3737bf;
	--eq-orange: #fe7f32;
	--eq-blue-soft: #99cdfb;
	--eq-lime: #c7d87a;
	--eq-muted: #757575;
	--eq-text: #000000;
	--eq-white: #ffffff;
	--eq-bg: #f7f7f7;
	--eq-radius: 18px;

	box-sizing: border-box;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
	color: var(--eq-text);
	font-family: inherit;
	line-height: 1.45;
}

.edu-quiz *,
.edu-quiz *::before,
.edu-quiz *::after {
	box-sizing: inherit;
}

.edu-quiz__page-title {
	margin: 0 0 30px;
	font-size: 36px;
	font-weight: 700;
}

/* ── Прогресс ─────────────────────────────────────────────────────────── */

.edu-quiz__progress {
	margin-bottom: 15px;
}

.edu-quiz__progress[hidden] {
	display: none;
}

.edu-quiz__progress-label {
	margin: 0 0 8px;
	color: var(--eq-muted);
	font-size: 15px;
}

.edu-quiz__progress-bar {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 8px;
	border-radius: 4px;
	background: var(--eq-bg);
}

.edu-quiz__progress-fill {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--eq-brand);
	transition: width 0.35s ease;
}

/* ── Экран ────────────────────────────────────────────────────────────── */

.edu-quiz__screen {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.14s ease, transform 0.14s ease;
}

.edu-quiz__screen.is-leaving {
	opacity: 0;
	transform: translateY(8px);
}

.edu-quiz__screen.is-entering {
	opacity: 0;
	transform: translateY(-8px);
	transition: none;
}

.edu-quiz__card {
	padding: 45px;
	border-radius: var(--eq-radius);
	background: var(--eq-bg);
}

.edu-quiz__card--intro {
	background: var(--eq-brand);
	color: var(--eq-white);
}

.edu-quiz__card--intro .edu-quiz__note {
	color: rgba(255, 255, 255, 0.82);
}

/* Шапка результата: текст слева, фотография шлема справа. Раньше снимок
   был float-элементом, и блоки с фоном (маркировка, заметка) затекали под
   него — правый край у них обрывался по границе картинки. Сетка держит
   блоки ниже во всю ширину карточки. */
.edu-quiz__head {
	display: grid;
	gap: 28px;
	align-items: start;
	margin-bottom: 15px;
}

.edu-quiz__head--photo {
	grid-template-columns: minmax(0, 1fr) 280px;
}

.edu-quiz__head-text > :last-child {
	margin-bottom: 0;
}

.edu-quiz__photo {
	margin: 0;
}

.edu-quiz .edu-quiz__photo-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* Скругление как у карточек на сайте. Селектор удвоен классом: тема
	   задаёт .entry__body img { border-radius: 40px } и по специфичности
	   перебивает одиночный класс плагина. */
	border-radius: 45px;
}

@media (max-width: 720px) {
	/* На телефоне текст рядом с картинкой ужался бы до 4–5 слов в строке,
	   поэтому снимок идёт сверху во всю ширину карточки. */
	.edu-quiz__head--photo {
		grid-template-columns: minmax(0, 1fr);
	}

	.edu-quiz__photo {
		order: -1;
	}

	.edu-quiz .edu-quiz__photo-img {
		border-radius: 28px;
	}
}

.edu-quiz__title {
	margin: 0 0 15px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
}

.edu-quiz__title:focus {
	outline: 3px solid var(--eq-orange);
	outline-offset: 6px;
}

.edu-quiz__title:focus:not(:focus-visible) {
	outline: none;
}

.edu-quiz__kicker {
	margin: 0 0 8px;
	color: var(--eq-brand);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.edu-quiz__lead {
	margin: 0 0 15px;
	font-size: 19px;
}

.edu-quiz__note {
	margin: 0 0 15px;
	color: var(--eq-muted);
	font-size: 16px;
}

.edu-quiz__subtitle {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
}

/* ── Варианты ответа ──────────────────────────────────────────────────── */

.edu-quiz__answers {
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.edu-quiz__answer-item + .edu-quiz__answer-item {
	margin-top: 12px;
}

.edu-quiz__answer {
	display: block;
	padding: 20px 24px;
	border: 2px solid transparent;
	border-radius: 14px;
	background: var(--eq-white);
	color: var(--eq-text);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.edu-quiz__answer:hover,
.edu-quiz__answer:focus {
	border-color: var(--eq-brand);
	transform: translateY(-2px);
}

.edu-quiz__answer:focus-visible {
	outline: 3px solid var(--eq-orange);
	outline-offset: 3px;
}

.edu-quiz__answer-label {
	display: block;
	font-size: 18px;
	font-weight: 700;
}

.edu-quiz__answer-hint {
	display: block;
	margin-top: 4px;
	color: var(--eq-muted);
	font-size: 15px;
}

/* ── Блоки результата ─────────────────────────────────────────────────── */

.edu-quiz__marking {
	margin: 30px 0;
	padding: 20px 24px;
	border-left: 6px solid var(--eq-brand);
	border-radius: 0 14px 14px 0;
	background: var(--eq-white);
}

.edu-quiz__marking p,
.edu-quiz__note-block p,
.edu-quiz__callout p {
	margin: 0;
}

.edu-quiz__note-block {
	margin: 0 0 30px;
	padding: 20px 24px;
	border-radius: 14px;
	background: var(--eq-white);
}

.edu-quiz__callout {
	margin: 0 0 15px;
	padding: 20px 24px;
	border-radius: 14px;
}

.edu-quiz__callout--child {
	background: var(--eq-blue-soft);
}

.edu-quiz__callout--toddler {
	background: var(--eq-lime);
}

.edu-quiz__checklist {
	margin: 30px 0;
	padding: 24px;
	border-radius: 14px;
	background: var(--eq-white);
}

.edu-quiz__checklist-list {
	margin: 0;
	padding-left: 20px;
}

.edu-quiz__checklist-list li + li {
	margin-top: 12px;
}

.edu-quiz__checklist-list strong {
	display: block;
}

.edu-quiz__disclaimer {
	margin: 30px 0 0;
	color: var(--eq-muted);
	font-size: 14px;
}

/* ── Кнопки ───────────────────────────────────────────────────────────── */

.edu-quiz__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 30px 0 0;
}

.edu-quiz__actions--secondary {
	margin-top: 30px;
}

.edu-quiz__button {
	display: inline-block;
	padding: 15px 30px;
	border: 2px solid transparent;
	border-radius: 30px;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.edu-quiz__button--primary {
	background: var(--eq-orange);
	color: var(--eq-white);
}

.edu-quiz__button--primary:hover,
.edu-quiz__button--primary:focus {
	background: #e96f24;
	color: var(--eq-white);
}

.edu-quiz__button--ghost {
	border-color: var(--eq-muted);
	background: transparent;
	color: var(--eq-text);
	font-size: 15px;
	padding: 10px 22px;
}

.edu-quiz__button--ghost:hover,
.edu-quiz__button--ghost:focus {
	border-color: var(--eq-brand);
	color: var(--eq-brand);
}

.edu-quiz__button:focus-visible {
	outline: 3px solid var(--eq-brand);
	outline-offset: 3px;
}

.edu-quiz__card--intro .edu-quiz__button--ghost {
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--eq-white);
}

.edu-quiz-empty {
	padding: 15px;
	border-left: 4px solid var(--eq-orange);
	background: #f7f7f7;
}

/* ── Адаптив ──────────────────────────────────────────────────────────── */

@media (max-width: 1199px) {
	.edu-quiz {
		max-width: 100%;
	}
}

@media (max-width: 979px) {
	.edu-quiz__card {
		padding: 30px;
	}

	.edu-quiz__title {
		font-size: 26px;
	}

	.edu-quiz__page-title {
		font-size: 30px;
	}
}

@media (max-width: 639px) {
	.edu-quiz {
		padding: 0 15px;
	}

	.edu-quiz__card {
		padding: 24px 20px;
	}

	.edu-quiz__title {
		font-size: 22px;
	}

	.edu-quiz__lead {
		font-size: 17px;
	}

	.edu-quiz__answer {
		padding: 15px 18px;
	}

	.edu-quiz__answer-label {
		font-size: 16px;
	}
}

@media (max-width: 479px) {
	.edu-quiz__card {
		padding: 20px 15px;
		border-radius: 14px;
	}

	.edu-quiz__actions {
		flex-direction: column;
	}

	.edu-quiz__button {
		width: 100%;
	}

	.edu-quiz__marking,
	.edu-quiz__note-block,
	.edu-quiz__callout,
	.edu-quiz__checklist {
		padding: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.edu-quiz__screen,
	.edu-quiz__answer,
	.edu-quiz__progress-fill {
		transition: none;
	}
}

/* Простой текст результата — первым; стандарты раскрываются по желанию. */
.edu-quiz__photo-caption {
	margin-top: 10px;
	color: var(--eq-muted);
	font-size: 12px;
	line-height: 1.4;
}
.edu-quiz__marking summary {
	cursor: pointer;
	color: var(--eq-brand);
	font-size: 16px;
	font-weight: 700;
}
.edu-quiz__marking summary:focus-visible {
	outline: 3px solid var(--eq-orange);
	outline-offset: 4px;
}
.edu-quiz__marking[open] p {
	margin-top: 15px;
}