/* Квиз: тёмная панель с белой карточкой шагов и сайдбаром. */

.quiz {
	position: relative;
	/* Меньше стандартного var(--section-gap) - блок должен целиком влезать в экран. */
	padding-block: clamp(28px, 3vw, 56px);
	background: var(--c-white);
}

.quiz__heading {
	/*
	 * Было фиксированные 1100px - на 1920 шрифт (--fs-h2) крупнее, чем на
	 * 1440, а ширина та же, поэтому текст уходил в 3 строки. Растягиваем
	 * следом за шрифтом, чтобы на 1440 и 1920 стабильно было 2 строки.
	 */
	max-width: clamp(1100px, 76vw, 1450px);
	margin-bottom: clamp(14px, 1.6vw, 28px);
}

.quiz__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 400px);
	gap: clamp(16px, 1.5vw, 28px);
	padding: clamp(12px, 1.2vw, 20px);
	border-radius: var(--r-xl);
	background: linear-gradient(197deg, #24221b 0%, #464644 100%);
}

/* --- Левая часть: шаги ------------------------------------------------------- */

.quiz__form {
	display: flex;
	flex-direction: column;
	/*
	 * Фиксированная высота вместо min-height: раньше блок "прыгал" между
	 * шагами (галерея с картинками была почти вдвое выше короткого списка
	 * радиокнопок). Теперь высота одна и та же на любом шаге, а шаг с
	 * контентом занимает оставшееся место и центрирует его по вертикали;
	 * если где-то не влезет - появится внутренний скролл (overflow), а не
	 * разъедется высота панели.
	 */
	height: clamp(470px, 40vw, 620px);
	padding: clamp(18px, 1.9vw, 36px);
	border-radius: var(--r-lg);
	background: var(--c-gray-050);
}

.quiz__tabs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(6px, 0.6vw, 12px);
	margin-bottom: clamp(18px, 1.9vw, 36px);
}

.quiz__tab {
	padding: clamp(8px, 0.75vw, 14px);
	border-radius: var(--r-pill);
	background: var(--c-gray-300);
	font-size: var(--fs-small);
	text-align: center;
	cursor: pointer;
	transition: background-color var(--speed) var(--ease);
}

.quiz__tab.is-done {
	background: var(--c-gold-deep);
}

.quiz__tab.is-active {
	background: linear-gradient(9deg, var(--c-gold) 0%, #ffefd2 100%);
}

.quiz__step {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
	min-height: 0;
}

/*
 * display:flex сразу на fieldset (родитель legend) даёт непредсказуемую
 * высоту в разных браузерах - legend не обычный flex-item. Поэтому сам
 * fieldset остаётся block-подобным, а flex/центрирование/overflow - на
 * вложенном .quiz__step-body (обычный div, без сюрпризов).
 *
 * flex-basis 0, а не auto: в форме фиксированной высоты (компьютер) шаг и так
 * занимает всё место между вкладками и кнопками, но от auto Safari считал его
 * высоту по содержимому и прибавлял к ней вопрос (legend) ещё раз - шаг
 * выходил выше места на 28-36 px, и «Далее» съезжало вниз, за край формы
 * (замер фазы 6б в WebKit на 1100 и 1440 px, главная и лендинги).
 */
.quiz__step.is-active {
	display: flex;
	flex-direction: column;
	flex: 1 1 0%;
	min-height: 0;
}

.quiz__step-body {
	display: flex;
	flex-direction: column;
	/* flex-start, не center: варианты должны идти сразу за вопросом, а не
	   висеть по центру блока с большим пустым отступом сверху. */
	justify-content: flex-start;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	/*
	 * Прокрутка обрезает всё, что выходит за край блока, в том числе кольцо
	 * фокуса (.verest :focus-visible в site.css: контур 2px с отступом 3px и
	 * ореол 6px). Поле телефона, «Позвонить» и галочка согласия стоят вплотную
	 * к левому краю - кольцо у них срезалось слева целиком (замечание владельца
	 * 2026-09-29, квизы главной, лендингов и «Отделки» от 1024px). Поля 8px
	 * дают кольцу место внутри прокрутки, отрицательный отступ возвращает
	 * содержимое на прежнее место: ширина и положение не меняются.
	 */
	padding: 8px;
	margin: -8px;
}

.quiz__question {
	padding: 0;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--fs-quiz);
	line-height: 1.4;
}

.quiz__options {
	display: grid;
	gap: clamp(8px, 0.83vw, 16px);
	margin-top: clamp(16px, 1.66vw, 32px);
}

/* Вариант ответа */
.quiz-option {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-size: var(--fs-lead);
	line-height: 1.3;
}

.quiz-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.quiz-option__mark {
	width: clamp(18px, 1.1vw, 22px);
	aspect-ratio: 1;
	border: 1.5px solid var(--c-gray-400);
	border-radius: var(--r-round);
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.quiz-option:hover .quiz-option__mark {
	border-color: var(--c-gold-deep);
}

.quiz-option input:checked + .quiz-option__mark {
	border-color: var(--c-gold-deep);
	box-shadow: inset 0 0 0 4px var(--c-gold);
}

/*
 * Фокус - двухслойное кольцо, как на всём сайте (site.css). Прежнее золотое
 * кольцо давало 1,55-1,68:1 на светлой панели квиза при норме 3:1
 * (аудит 2026-09-25, 08-В1).
 */
.quiz-option input:focus-visible + .quiz-option__mark {
	outline: 2px solid var(--c-ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(255, 216, 142, 0.6);
}

.quiz-option input:checked:focus-visible + .quiz-option__mark {
	box-shadow: inset 0 0 0 4px var(--c-gold), 0 0 0 6px rgba(255, 216, 142, 0.6);
}

/*
 * На сенсорном экране вариант ответа - зона нажатия не меньше 44 px: при
 * ответе в одну строку было 21 px (аудит 2026-09-25, 01-В4). Зазор между
 * вариантами убираем - шаг вырастает меньше. Во всех квизах, включая
 * рекламные лендинги /bani и /karkasnie-bani (согласие владельца 2026-09-26).
 */
@media (max-width: 1023px), (pointer: coarse) {
	.quiz__options {
		gap: 0;
	}

	.quiz-option {
		min-height: 44px;
	}
}

/* Вариант с картинкой - все 5 карточек в один ряд, фото крупнее и понятнее. */
.quiz__gallery {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(8px, 0.8vw, 14px);
	margin-top: clamp(12px, 1.2vw, 20px);
}

.quiz-card {
	position: relative;
	display: block;
	border-radius: var(--r-md);
	overflow: hidden;
	cursor: pointer;
	background: var(--c-white);
	box-shadow: inset 0 0 0 2px transparent;
	transition: box-shadow var(--speed) var(--ease);
}

.quiz-card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.quiz-card__img {
	width: 100%;
	/* Один ряд из 5 карточек - можно себе позволить более крупный кадр. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.quiz-card__label {
	display: block;
	padding: 8px 6px;
	font-size: var(--fs-small);
	text-align: center;
}

.quiz-card:hover,
.quiz-card:has(input:checked) {
	box-shadow: inset 0 0 0 2px var(--c-gold-deep);
}

/* У карточки с фото фокуса с клавиатуры не было видно вовсе (08-В1). */
.quiz-card:has(input:focus-visible) {
	outline: 2px solid var(--c-ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(255, 216, 142, 0.6);
}

.quiz-card:has(input:checked:focus-visible) {
	box-shadow: inset 0 0 0 2px var(--c-gold-deep), 0 0 0 6px rgba(255, 216, 142, 0.6);
}

/*
 * После смены шага фокус ставится на вопрос (quiz.js), чтобы не терялся.
 * Вопрос - не кнопка, кольцо вокруг него лишнее.
 */
.quiz__form legend.quiz__question:focus {
	outline: none;
	box-shadow: none;
}

.quiz-card:has(input:checked) .quiz-card__label {
	background: var(--c-gold);
}

/* Контакты - отступы ужаты под фиксированную высоту панели квиза. */
.quiz__contacts {
	display: grid;
	gap: clamp(8px, 0.8vw, 14px);
	max-width: 520px;
	margin-top: clamp(8px, 0.9vw, 16px);
}

/* Поля ввода и ловушка для ботов переехали в assets/css/forms.css:
   тот же попап открывается на внутренних страницах, где quiz.css нет. */

.quiz__error {
	margin-top: 12px;
	color: #c0392b;
	font-size: var(--fs-small);
}

.quiz__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: auto;
	padding-top: clamp(16px, 1.66vw, 32px);
}

.quiz__back {
	margin-right: auto;
}

/* --- Сайдбар ------------------------------------------------------------------ */

.quiz__aside {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.25vw, 24px);
	padding-bottom: clamp(40px, 4vw, 80px);
	color: var(--c-white);
}

.quiz-person {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1vw, 20px);
	padding: 8px clamp(14px, 1.25vw, 24px) 8px 8px;
	border-radius: var(--r-pill);
	background: var(--c-gray-050);
	color: var(--c-black);
}

.quiz-person__photo {
	width: clamp(56px, 4.7vw, 90px);
	aspect-ratio: 1;
	border-radius: var(--r-round);
	object-fit: cover;
	flex: none;
}

.quiz-person__name {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(14px, 1.04vw, 20px);
	line-height: 1.2;
	text-transform: uppercase;
}

.quiz-person__role {
	margin-top: 4px;
	font-family: var(--font-head);
	font-size: clamp(12px, 0.83vw, 16px);
	line-height: 1.2;
}

.quiz__remaining {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(16px, 1.15vw, 22px);
	line-height: 1.3;
}

.quiz__benefits {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(12px, 0.83vw, 16px);
	line-height: 1.25;
}

.quiz__discount {
	position: absolute;
	right: 0;
	bottom: 0;
	margin-top: auto;
	transform: translateY(45%);
	animation: verest-discount-pulse 2.4s ease-in-out infinite;
}

/* Лёгкая "дыхательная" пульсация - привлекает взгляд к скидке, не раздражает. */
@keyframes verest-discount-pulse {
	0%, 100% {
		transform: translateY(45%) scale(1);
	}
	50% {
		transform: translateY(45%) scale(1.08);
	}
}

/* Та же пульсация, но без translateY - для мобильной раскладки (position: static). */
@keyframes verest-discount-pulse-static {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.08);
	}
}

/*
 * Для мобильного круга: он центрирован и сдвинут вниз (translate), позиция
 * должна повторяться в каждом кадре анимации - иначе пульсация (transform:
 * scale в -static выше) на середине такта сбрасывала бы sdвиг и круг прыгал
 * бы в левый верхний угол .quiz__aside.
 */
@keyframes verest-discount-pulse-mobile {
	0%, 100% {
		transform: translateY(calc(70% + 30px)) scale(1);
	}
	50% {
		transform: translateY(calc(70% + 30px)) scale(1.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.quiz__discount {
		animation: none;
	}
}

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

@media (max-width: 1023px) {
	.quiz__panel {
		/* minmax(0, ...), а не 1fr: иначе колонку раздвигала строка вкладок, и на 320 px квиз выходил за экран на 4 px (01-В1). */
		grid-template-columns: minmax(0, 1fr);
		/* Круг скидки свисает ниже панели (см. .quiz__discount) - запас, чтобы он не наезжал на следующую секцию, и после него ещё остался отступ. */
		margin-bottom: 86px;
	}

	/*
	 * Тёмная заливка (фон .quiz__panel) заканчивается по границе .quiz__aside -
	 * небольшой отступ вместо 0, чтобы заливка не обрывалась сразу по низу
	 * последнего пункта списка, а круг скидки ниже накладывался на неё сверху.
	 */
	.quiz__aside {
		padding-bottom: clamp(20px, 4vw, 30px);
	}

	/*
	 * Круг скидки - поверх границы тёмной заливки: центр по горизонтали,
	 * translateY уводит вниз так, что большая часть круга оказывается уже на
	 * белом фоне секции, а не на тёмной панели (position:absolute внутри
	 * .quiz__aside, который relative - .quiz__panel ничего не обрезает,
	 * overflow не задан).
	 */
	.quiz__discount {
		position: absolute;
		left: auto;
		/* 12px от правого края .quiz__aside = 40px от края экрана (учтены отступ контейнера и padding .quiz__panel). */
		right: 12px;
		bottom: 0;
		/* +30px по Y поверх базового наклона вниз (70% высоты круга). */
		transform: translateY(calc(70% + 30px));
		animation-name: verest-discount-pulse-mobile;
	}

	/*
	 * Фиксированная высота - только под десктопные 1440/1920, где важно
	 * не прыгать между шагами и уместиться на экране. На планшете/телефоне
	 * панель и так одна колонка, вся страница обычно скроллится - высота
	 * свободная. min-height тоже убран: у шагов разное число вопросов
	 * (3-5 вариантов, галерея фото, форма контактов), панель должна сжиматься
	 * под конкретный шаг, а не держать одну и ту же высоту под самый длинный.
	 */
	/*
	 * display: block - высота здесь свободная, и колонке флексбокса нечего
	 * распределять. Флексбокс ломался в Safari на 768-1023 px: высоту формы он
	 * считал по шагу-fieldset, у которого вопрос (legend) будто перенесён на
	 * вторую строку, - под вариантами первого шага появлялись лишние 22 px,
	 * и «Далее» уезжало ниже (форма 401 px в WebKit против 378 в Chromium,
	 * проверка фазы 4). flex-grow: 0 у тела шага, как и у самого шага, это не
	 * лечит - лишнее место уходит в отступ над кнопками. В блоке шаги,
	 * ошибка и кнопки идут друг под другом так же, отступы те же
	 * (margin-top: auto у кнопок в свободной высоте и так был 0).
	 */
	.quiz__form {
		display: block;
		height: auto;
	}

	/* Без прокрутки кольцу фокуса ничего не мешает - поля из общего правила не нужны. */
	.quiz__step-body {
		overflow-y: visible;
		padding: 0;
		margin: 0;
	}

	/* Меньше var(--fs-quiz) (~19px на этой ширине) - у всех пяти вопросов квиза одинаковый размер на мобильном. */
	.quiz__question {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	/* Меньше, чем в .h2 (там уже минимум по clamp) - иначе заголовок квиза занимает 5 строк на телефоне. */
	.quiz__heading {
		font-size: 20px;
	}

	.quiz__tabs {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 4px;
	}

	.quiz__tab {
		padding: 6px 2px;
		font-size: 10px;
	}

	.quiz__gallery {
		grid-template-columns: repeat(2, 1fr);
	}

	.quiz__actions {
		flex-wrap: wrap;
	}

	.quiz__actions .btn {
		flex: 1 1 auto;
	}
}

/*
 * Число и слово вкладки - отдельными элементами (home/quiz.php) только ради узких экранов:
 * обычно они растворяются в строке, и подпись остаётся «1 Вопрос» одной строкой. Без
 * contents у слова вкладка (flex, site.css) делала его отдельным элементом и съедала
 * пробел: «1Вопрос».
 */
.quiz__tab-num,
.quiz__tab-word {
	display: contents;
}

/*
 * Вкладки квиза главной и «Отделки» на телефоне (С-71 А, владелец 29.09.2026): во вкладке
 * только цифра. «1 Вопрос» помещался в строку только кеглем 10 px - мелко. Слово «Вопрос»
 * скрыто визуально и остаётся для программ чтения с экрана: имя вкладки по-прежнему
 * «1 Вопрос». Последняя вкладка - словами («Подбор проектов» на главной, С-22; «Подбор
 * отделки» на «Отделке»), ей отдан остаток ряда, текст переносится в две строки.
 * С 320 px, а не с 360: прежняя схема 320-359 (число над словом, 01-В1) с «Подбор проектов»
 * не помещалась - слово вылезало из вкладки шириной 42 px. Цифры - не уже 44 px
 * (на 320-359 - 36: иначе последней вкладке не остаётся места). Лендинги - как на Tilda.
 */
@media (max-width: 767px) {
	body:not(.is-landing) .quiz__tabs {
		grid-template-columns: repeat(4, minmax(44px, 1fr)) minmax(0, 2.4fr);
	}

	body:not(.is-landing) .quiz__tab {
		padding: 4px;
		font-size: 14px;
		line-height: 1.15;
	}

	body:not(.is-landing) .quiz__tab-item:last-child .quiz__tab {
		font-size: 12px;
	}

	body:not(.is-landing) .quiz__tab-word {
		display: block;
		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;
	}
}

@media (max-width: 359px) {
	body:not(.is-landing) .quiz__tabs {
		grid-template-columns: repeat(4, minmax(36px, 1fr)) minmax(0, 2.4fr);
	}
}

/*
 * От 768 px вкладки подписаны целиком. «Подбор проектов» на 1024-1200 px не помещался в равную
 * пятую часть ряда и уходил в две строки - вкладка становилась выше соседних (52 px против 44).
 * Последняя колонка берёт ширину по тексту, пока равной доли не хватает; шире - все равны.
 */
@media (min-width: 768px) {
	body:not(.is-landing) .quiz__tabs {
		grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(max-content, 1fr);
	}
}