/* ============================================================================
   redesign.css — редизайн главной страницы (ветка redesign)

   Подключается ПОСЛЕ dev.css, поэтому выигрывает при равной специфичности.
   Правило: не поднимать специфичность искусственно и не использовать
   !important — если что-то не перебивается, разбираться с конкретным
   легаси-селектором точечно.

   Старые стили (dev.css, styles.min.css) не трогаем: редизайн пока только
   на главной, остальные страницы продолжают жить на текущем оформлении.
   ========================================================================= */

/* Golos Text — временная замена TT Travels Next (лицензия не куплена).
   Вариативный woff2 (ось wght 400-900), лицензия SIL OFL 1.1.

   Объявления держим здесь, а не через @import: @import создаёт ещё один
   последовательный запрос и откладывает обнаружение шрифта до загрузки
   этого файла — при том что в index.php стоит preload кириллицы.
   Копия деклараций лежит в fonts/golos/golos.css как справка. */
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/golos/golos-text-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/golos/golos-text-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto — основной текст, как в макете. Тоже вариативный (wght 100-900),
   лицензия Apache 2.0. Локальная копия, без обращений к Google CDN. */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/roboto/roboto-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/roboto/roboto-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   1. ТОКЕНЫ
   Цвета из актуального брендбука. В текущем коде они не задокументированы
   как переменные — только россыпью в селекторах (#095ea6, #ffc600).
   Здесь фиксируем канон, дальше по редизайну ссылаемся только на токены.
   ------------------------------------------------------------------------ */
:root {
	/* Бренд */
	--qz-navy: #001A72;
	--qz-blue: #00239C;
	--qz-yellow: #FBE020;

	/* Нейтральные */
	--qz-ink: #101321;
	--qz-muted: #6b7080;
	--qz-bg: #f6f7fb;
	--qz-card: #ffffff;
	--qz-border: #e4e6ee;

	/* Типографика — как в макете: заголовки Golos Text, текст Roboto.
	   Оба лежат локально в fonts/, обращений к Google CDN нет.
	   Системный стек в конце — фолбэк на время загрузки (font-display:swap). */
	--qz-font-h: 'Golos Text', 'Acrom', sans-serif;
	--qz-font-b: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		'Helvetica Neue', Arial, sans-serif;

	/* Геометрия */
	--qz-radius: 14px;
	--qz-radius-sm: 8px;
	--qz-radius-pill: 999px;

	/* Ширина контента — совпадает с .block__inner текущего сайта,
	   чтобы новые секции не разъезжались с легаси-блоками */
	--qz-wrap: 1180px;

	/* Тени */
	--qz-shadow: 0 6px 16px rgba(0, 26, 114, .12);
	--qz-shadow-lg: 0 10px 30px rgba(0, 26, 114, .18);
}

/* ---------------------------------------------------------------------------
   2. БАЗОВЫЕ ПРИМИТИВЫ РЕДИЗАЙНА
   Только то, что переиспользуется между секциями. Секционные стили
   добавляются ниже по мере переверстки (шаги 4-11 SPEC).
   ------------------------------------------------------------------------ */

/* Контейнер новых секций */
.qz-wrap {
	max-width: var(--qz-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

/* Заголовок секции */
.qz-block-head {
	max-width: 640px;
	margin: 0 auto 20px;
	text-align: center;
}

.qz-block-head h2 {
	font-family: var(--qz-font-h);
	font-weight: 700;
	font-size: 22px;
	color: var(--qz-navy);
	margin: 0 0 6px;
}

.qz-block-head p {
	font-size: 14px;
	color: var(--qz-muted);
	margin: 0;
}

/* Кнопки */
.qz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--qz-navy);
	color: #fff;
	font-family: var(--qz-font-b);
	font-size: 13px;
	font-weight: 600;
	padding: 10px 18px;
	border: 0;
	border-radius: var(--qz-radius-pill);
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.qz-btn:hover,
.qz-btn:focus {
	background: var(--qz-blue);
	color: #fff;
	text-decoration: none;
}

.qz-btn--yellow {
	background: var(--qz-yellow);
	color: var(--qz-navy);
}

.qz-btn--yellow:hover,
.qz-btn--yellow:focus {
	background: #e6cc17;
	color: var(--qz-navy);
}

.qz-btn--ghost {
	background: #fff;
	border: 1px solid var(--qz-navy);
	color: var(--qz-navy);
}

.qz-btn--ghost:hover,
.qz-btn--ghost:focus {
	background: var(--qz-navy);
	color: #fff;
}

.qz-btn--block {
	width: 100%;
}

/* Карточка */
.qz-card {
	position: relative;
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius);
	overflow: hidden;
}

/* Плейсхолдер изображения — пока нет реального фото.
   Пропорции задаются на конкретном блоке, не здесь. */
.qz-ph {
	background: linear-gradient(135deg, #e7e9f5, #d9dcef);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #7a80a0;
	font-size: 12px;
	text-align: center;
	padding: 8px;
}

/* Доступность: видимый фокус для клавиатурной навигации.
   В легаси-стилях он местами сброшен в none. */
.qz-btn:focus-visible,
.qz-card a:focus-visible {
	outline: 2px solid var(--qz-blue);
	outline-offset: 2px;
}

/* Уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
	.qz-btn {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   3. ШАПКА
   Разметка и JS-крючки прежние (#site-header, .secondmenu/.menu-toggle,
   #cart-badge, .header__profile.is-authed) — меняется только оформление.
   Логотип остаётся картинкой logo.png, как на текущем сайте: в макете
   его нет, но он часть узнаваемости бренда.
   ------------------------------------------------------------------------ */
.qz-header {
	background: #fff;
	border-bottom: 1px solid var(--qz-border);
	box-shadow: none;
}

.qz-header .qz-header__inner {
	align-items: center;
	gap: 16px;
}

/* Логотип: .logo — span с фоном logo.png (2176×907) и text-indent для текста.
   Схему не меняем, только выравниваем по новой сетке. */
.qz-header .qz-header__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

/* Круглые кнопки-иконки (корзина, кабинет) */
.qz-header .qz-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--qz-radius-sm);
	background: var(--qz-bg);
	border: 1px solid var(--qz-border);
	color: var(--qz-navy);
	transition: background .15s ease, border-color .15s ease;
}

.qz-header .qz-icon-btn:hover {
	background: #fff;
	border-color: var(--qz-blue);
	color: var(--qz-blue);
}

.qz-header .qz-icon-btn svg {
	width: 20px;
	height: 20px;
}

/* Бейдж корзины */
.qz-header .qz-icon-btn #cart-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--qz-radius-pill);
	background: var(--qz-yellow);
	color: var(--qz-navy);
	font-family: var(--qz-font-b);
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* Авторизованный кабинет — заливка жёлтым, как было по смыслу is-authed */
.qz-header .header__profile.is-authed {
	background: var(--qz-yellow);
	border-color: var(--qz-yellow);
	color: var(--qz-navy);
}

/* Телефон в шапке */
.qz-header .header__phone {
	font-family: var(--qz-font-b);
	font-size: 14px;
	font-weight: 500;
	color: var(--qz-ink);
	white-space: nowrap;
}

.qz-header .header__phone:hover {
	color: var(--qz-blue);
}

/* Меню */
.qz-header .topmenu.desktop a {
	font-family: var(--qz-font-b);
	font-size: 13px;
	font-weight: 500;
	color: var(--qz-ink);
}

.qz-header .topmenu.desktop a:hover,
.qz-header .topmenu.desktop .active > a {
	color: var(--qz-blue);
}

/* ---------------------------------------------------------------------------
   4. МОБИЛЬНЫЙ ТАББАР
   Разметка всегда в DOM, видимость — через media query.
   ------------------------------------------------------------------------ */
.qz-tabbar {
	display: none;
}

@media (max-width: 900px) {
	.qz-tabbar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 55;
		background: #fff;
		border-top: 1px solid var(--qz-border);
		/* Вырез под домашний индикатор на iPhone */
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.qz-tabbar__item {
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		padding: 8px 0 10px;
		font-family: var(--qz-font-b);
		font-size: 10px;
		color: var(--qz-muted);
		text-decoration: none;
	}

	.qz-tabbar__item svg {
		width: 22px;
		height: 22px;
	}

	.qz-tabbar__item.is-active {
		color: var(--qz-navy);
	}

	.qz-tabbar__badge {
		position: absolute;
		top: 4px;
		left: 50%;
		margin-left: 4px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: var(--qz-radius-pill);
		background: var(--qz-yellow);
		color: var(--qz-navy);
		font-size: 10px;
		font-weight: 700;
		line-height: 16px;
		text-align: center;
	}

	/* Место под таббар, чтобы он не перекрывал контент и футер */
	body {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}

	/* Кнопка «наверх» и виджет чата поднимаются над таббаром */
	#scrolltop {
		bottom: calc(78px + env(safe-area-inset-bottom, 0px));
	}
}

/* Мобильная шапка: до редизайна элементы помещались впритык, а gap:16px
   добавил отступы — кабинет и бургер уехали за правый край экрана.
   Поджимаем интервалы и разрешаем логотипу сжиматься. */
@media (max-width: 1050px) {
	.qz-header .qz-header__inner {
		gap: 8px;
		padding: 10px 12px;
	}

	/* Логотип: в легаси фиксированные 120px. На узких экранах разрешаем
	   ужиматься, сохраняя пропорции (background-size:contain уже стоит). */
	.qz-header .qz-header__logo {
		min-width: 0;
	}

	/* Ширину сжимаем, высоту считаем от неё: исходник 2176×907 (≈2.4:1).
	   Без этого при фиксированной height:50px из легаси логотип
	   растянулся бы по вертикали. background-size:contain вписывает
	   картинку в блок, поэтому пропорции сохраняются. */
	.qz-header .qz-header__logo .logo {
		width: clamp(84px, 24vw, 120px);
		height: auto;
		aspect-ratio: 2176 / 907;
	}

	/* Телефон — самый гибкий элемент, ему и уступать место первым */
	.qz-header .header__phone--mobile {
		margin-right: 0;
		min-width: 0;
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Иконки не сжимаются, иначе теряется область нажатия */
	.qz-header .qz-icon-btn {
		flex: 0 0 auto;
		width: 36px;
		height: 36px;
	}

	.qz-header .qz-icon-btn svg {
		width: 18px;
		height: 18px;
	}
}

/* Совсем узкие экраны (≤ 380px): телефон уступает место иконкам.
   Позвонить можно из таббара и с карточек — дублирование не критично. */
@media (max-width: 380px) {
	.qz-header .header__phone--mobile {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   5. HERO — карточки-направления
   Данные из c7dol_quest_banners: title, subtitle, cta_text (миграция
   2026-07-31). При >3 активных баннерах включается Slick (common.js),
   при ≤3 — статичная сетка.
   ------------------------------------------------------------------------ */
/* Сброс легаси-правил .main__carousel (dev.css:1697): там aspect-ratio 16/9
   и overflow:hidden под одиночный баннер во всю ширину. Для секции с
   заголовком и рядом карточек это обрезало бы содержимое по высоте. */
.qz-hero {
	max-width: var(--qz-wrap);
	margin: 0 auto;
	padding: 28px 20px 0;
	box-shadow: none;
	aspect-ratio: auto;
	overflow: visible;
}

.qz-hero__head {
	max-width: 640px;
	margin: 0 auto 18px;
	text-align: center;
}

.qz-hero__title {
	font-family: var(--qz-font-h);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.2;
	color: var(--qz-navy);
	margin: 0 0 8px;
}

.qz-hero__lead {
	font-family: var(--qz-font-b);
	font-size: 15px;
	color: var(--qz-muted);
	margin: 0;
}

/* Сетка: три карточки в ряд. Для карусели раскладку задаёт Slick,
   поэтому grid применяем только к статичному варианту. */
.qz-hero__grid:not(.qz-hero__grid--carousel) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
}

/* До инициализации Slick карусель — обычные блоки в полную ширину,
   и первый баннер успевал отрисоваться во весь экран, после чего
   резко схлопывался (FOUC). Поэтому до появления .slick-initialized
   раскладываем карточки той же сеткой из трёх колонок: скачка нет,
   а как только Slick отработает, раскладку задаёт он.
   Лишние карточки прячем — в карусели видно ровно три. */
.qz-hero__grid--carousel:not(.slick-initialized) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	overflow: hidden;
}

.qz-hero__grid--carousel:not(.slick-initialized) > *:nth-child(n + 4) {
	display: none;
}

/* Отступ до инициализации даёт gap — margin от карусельного правила
   сложился бы с ним в двойной. Высоту возвращает aspect-ratio:
   ниже для карусели стоит height:100% + aspect-ratio:auto, что имеет
   смысл только внутри слайда Slick, а до этого схлопывает карточку. */
.qz-hero__grid--carousel:not(.slick-initialized) .qz-hero__card {
	margin: 0;
	height: auto;
	aspect-ratio: 1920 / 1080;
}

@media (max-width: 900px) {
	/* На мобильных Slick показывает один слайд — до инициализации
	   тоже оставляем только первый, иначе мелькают три подряд */
	.qz-hero__grid--carousel:not(.slick-initialized) {
		grid-template-columns: 1fr;
	}

	.qz-hero__grid--carousel:not(.slick-initialized) > *:nth-child(n + 2) {
		display: none;
	}
}

/* Карточка */
.qz-hero .qz-hero__card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--qz-radius);
	aspect-ratio: 1920 / 1080;
	color: #fff;
	text-decoration: none;
}

.qz-hero .qz-hero__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Затемнение снизу, чтобы текст читался на любой картинке */
.qz-hero .qz-hero__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 26, 114, .10), rgba(0, 26, 114, .85));
	pointer-events: none;
}

.qz-hero__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 16px;
}

.qz-hero__card-title {
	font-family: var(--qz-font-h);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	color: #fff;
}

.qz-hero__card-sub {
	font-family: var(--qz-font-b);
	font-size: 12px;
	line-height: 1.35;
	color: rgba(255, 255, 255, .85);
}

.qz-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 8px 14px;
	border-radius: var(--qz-radius-pill);
	background: var(--qz-yellow);
	color: var(--qz-navy);
	font-family: var(--qz-font-b);
	font-size: 13px;
	font-weight: 600;
	transition: background .15s ease;
}

.qz-hero__cta svg {
	width: 15px;
	height: 15px;
}

.qz-hero .qz-hero__card:hover .qz-hero__cta {
	background: #fff;
}

/* Слайдер: расстояние между карточками задаём паддингом слайда,
   потому что gap в Slick-раскладке не работает */
.qz-hero__grid--carousel .qz-hero__card {
	margin: 0 7px;
}

.qz-hero__grid--carousel .slick-list {
	margin: 0 -7px;
}

.qz-hero__grid--carousel .slick-dots {
	position: static;
	margin-top: 12px;
}

@media (max-width: 900px) {
	.qz-hero {
		padding-top: 18px;
	}

	.qz-hero__title {
		font-size: 22px;
	}

	.qz-hero__lead {
		font-size: 14px;
	}

	.qz-hero__grid:not(.qz-hero__grid--carousel) {
		grid-template-columns: 1fr;
	}
}

/* Стрелки карусели hero: в легаси они позиционированы внутри карусели
   (left/right 8-15px) и без фона — на светлой картинке сливаются и
   наезжают на текст карточки. Выносим за пределы карточек и делаем
   видимыми кружками. */
.qz-hero__grid--carousel .slick-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	box-shadow: var(--qz-shadow);
	transition: background .15s ease;
}

.qz-hero__grid--carousel .slick-arrow:hover,
.qz-hero__grid--carousel .slick-arrow:focus {
	background: #fff;
}

/* Стрелки подняты выше центра: внизу карточки заголовок, подпись и
   кнопка, по центру они перекрывали текст. 34% — примерно середина
   свободной верхней части картинки. */
.qz-hero__grid--carousel .slick-prev,
.qz-hero__grid--carousel .slick-next {
	top: 34%;
}

.qz-hero__grid--carousel .slick-prev {
	left: -8px;
}

.qz-hero__grid--carousel .slick-next {
	right: -8px;
}

/* Иконка-шеврон вместо картинки prev.png из slick-theme.css:
   она полупрозрачная и на светлом фоне почти не читается.
   background:none обязателен — иначе картинка темы останется под бордерами. */
.qz-hero__grid--carousel .slick-prev:before,
.qz-hero__grid--carousel .slick-next:before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 auto;
	background: none;
	border-left: 2px solid var(--qz-navy);
	border-bottom: 2px solid var(--qz-navy);
	opacity: 1;
}

/* Шеврон повёрнут на 45°, поэтому его видимый центр смещён относительно
   геометрического — компенсируем 2px, иначе стрелка выглядит не по центру. */
.qz-hero__grid--carousel .slick-prev:before {
	transform: rotate(45deg) translate(1px, -1px);
}

.qz-hero__grid--carousel .slick-next:before {
	transform: rotate(-135deg) translate(1px, -1px);
}

/* Карточка: контент был прижат в угол сплошным блоком и выглядел скомканно.
   Даём воздуха и разносим строки по вертикали. */
.qz-hero__content {
	gap: 8px;
	padding: 20px;
}

/* Круглая стрелка «‹» (40px, left 6–15px) наезжала на первое слово
   заголовка. Отступ слева уводит текст за её полосу.

   Даём его всем карточкам, а не только крайним: Slick клонирует слайды
   и меняет их порядок при прокрутке, поэтому :first-child в карусели
   указывает на произвольную карточку. Единый отступ предсказуем в обоих
   режимах — и в карусели (>3 баннеров), и в легаси-сетке, где стрелку
   рисует dev.css без правила top, по центру карточки. */
.qz-hero__content {
	padding-left: 56px;
}

.qz-hero__card-title {
	font-size: 20px;
}

.qz-hero__card-sub {
	font-size: 13px;
	margin-bottom: 2px;
}

/* Градиент выше и плотнее снизу — текст читается, картинка не гаснет */
.qz-hero .qz-hero__card::after {
	background: linear-gradient(180deg,
		rgba(0, 26, 114, 0) 35%,
		rgba(0, 26, 114, .55) 65%,
		rgba(0, 26, 114, .88) 100%);
}

/* Точки под каруселью — ближе к бренду */
.qz-hero__grid--carousel .slick-dots li button:before {
	font-size: 8px;
	color: var(--qz-navy);
	opacity: .25;
}

.qz-hero__grid--carousel .slick-dots li.slick-active button:before {
	color: var(--qz-navy);
	opacity: 1;
}

@media (max-width: 900px) {
	/* На мобильной карточка одна в ряд и шире — стрелки внутрь,
	   иначе они вылезают за пределы экрана */
	.qz-hero__grid--carousel .slick-prev {
		left: 6px;
	}

	.qz-hero__grid--carousel .slick-next {
		right: 6px;
	}

	.qz-hero__content {
		/* Слева место под стрелку (left:6px + 40px ширины), см. коммент выше */
		padding: 16px 16px 16px 52px;
	}

	.qz-hero__card-title {
		font-size: 18px;
	}
}

/* Высота слайда в карусели.
   Slick оборачивает карточку в .slick-slide с float:left и height:100%,
   и считает высоту трека по содержимому, не учитывая aspect-ratio
   на самой карточке — из-за этого под карточкой оставалась белая полоса
   (инспектор показывал #main-carousel 390×256 при более высокой карточке).
   В режиме карусели пропорцию задаёт картинка, а карточка тянется по ней. */
.qz-hero__grid--carousel .slick-slide {
	height: auto;
}

.qz-hero__grid--carousel .slick-track {
	display: flex;
	align-items: stretch;
}

.qz-hero__grid--carousel .qz-hero__card {
	height: 100%;
	aspect-ratio: auto;
}

.qz-hero__grid--carousel .qz-hero__card img {
	aspect-ratio: 1920 / 1080;
	height: auto;
}

/* Белая полоса под каруселью — это margin-bottom:30px от правила
   .slick-dotted.slick-slider (slick-theme.css:90). Точки мы и так
   прижимаем к карусели через .slick-dots{position:static}, поэтому
   резерв под них не нужен. Два класса в селекторе — чтобы перебить
   специфичность 0-2-0 у правила темы. */
.qz-hero__grid--carousel.slick-dotted {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   6. ТРАСТБАР
   Реальные счётчики из БД (QuestsModel::getTrustStats()).
   Рейтинг Extrareality сознательно не выводится.
   ------------------------------------------------------------------------ */
.qz-trust {
	background: #fff;
}

.qz-trust__inner {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px 28px;
	max-width: var(--qz-wrap);
	margin: 0 auto;
	padding: 18px 20px;
	border-top: 1px solid var(--qz-border);
	border-bottom: 1px solid var(--qz-border);
}

.qz-trust__item {
	text-align: center;
	font-family: var(--qz-font-b);
	font-size: 13px;
	color: var(--qz-muted);
	line-height: 1.3;
}

.qz-trust__item b {
	display: block;
	font-family: var(--qz-font-h);
	font-weight: 700;
	font-size: 20px;
	color: var(--qz-navy);
	/* Табличные цифры: колонки не «дёргаются» при разной ширине глифов */
	font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
	.qz-trust__inner {
		/* Сетка 2×2 вместо ряда: четыре числа в строку на узком экране
		   сжимаются до нечитаемого размера */
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 12px;
		padding: 16px 20px;
	}

	.qz-trust__item b {
		font-size: 18px;
	}

	.qz-trust__item {
		font-size: 12px;
	}
}

/* ---------------------------------------------------------------------------
   7. ЧИПЫ СЕГМЕНТАЦИИ ПО ТИПУ КВЕСТА
   Фильтр data-quest-type существовал и работал, но только на мобильной:
   в dev.css (строки 1864+) под min-width:992px стоит
   .quest-type-chips-wrap{display:none !important} и
   .quest-type-panel{display:block !important} — на десктопе все категории
   выводились простынёй.

   !important здесь вынужденный: перебить !important можно только
   !important. Это единственное место в файле, где он используется —
   альтернатива хуже (правка dev.css задела бы остальные страницы).

   Сегментация по поводу («Вы к нам за: квестом / детским праздником /
   корпоративом») — отдельная задача, см. docs/TODO.md.
   ------------------------------------------------------------------------ */
@media screen and (min-width: 992px) {
	.qz-segment .quest-type-chips-wrap {
		display: block !important;
		position: static;
		background: transparent;
		box-shadow: none;
		margin: 0 0 20px;
		padding: 0;
	}

	.qz-segment .quest-type-chips {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		overflow: visible;
	}

	.qz-segment .quest-type-chip {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		flex: 0 0 auto;
		padding: 9px 18px;
		border: 1px solid var(--qz-border);
		border-radius: var(--qz-radius-pill);
		background: #fff;
		color: var(--qz-ink);
		font-family: var(--qz-font-b);
		font-size: 13px;
		font-weight: 500;
		line-height: 1.2;
		cursor: pointer;
		transition: border-color .15s ease, background .15s ease, color .15s ease;
	}

	.qz-segment .quest-type-chip:hover {
		border-color: var(--qz-blue);
		color: var(--qz-blue);
	}

	.qz-segment .quest-type-chip.is-active {
		background: var(--qz-navy);
		border-color: var(--qz-navy);
		color: #fff;
	}

	.qz-segment .quest-type-chip__count {
		font-size: 11px;
		opacity: .7;
	}

	/* Панели: показываем только активную, как на мобильной.
	   Легаси-правила выше форсируют display:block для всех и прячут
	   панель «Все развлечения» — оба сбрасываем. */
	.qz-segment .quest-type-panel {
		display: none !important;
		margin-bottom: 0;
	}

	.qz-segment .quest-type-panel.is-active,
	.qz-segment .quest-type-panel[data-quest-type="0"].is-active {
		display: block !important;
	}
}

/* Заголовок и описание категории — единый вид на всех разрешениях */
.qz-segment .quest-type-panel__title {
	font-family: var(--qz-font-h);
	font-weight: 700;
	color: var(--qz-navy);
}

.qz-segment .quest-type-panel__intro {
	font-family: var(--qz-font-b);
	color: var(--qz-muted);
}

/* ---------------------------------------------------------------------------
   8. КАРТОЧКА КВЕСТА
   Легаси-раскладка: фото на всю площадь карточки, а h3/.address/.gamers/
   .duration/.btn-book — абсолютом поверх него белым текстом
   (styles.min.css: h3 top:25px, .gamers/.address bottom:30px и т.д.).
   Редизайн: фото сверху, белое тело под ним, текст в потоке.
   Поэтому первым делом сбрасываем position:absolute у всех внутренностей.
   ------------------------------------------------------------------------ */
.qz-quest-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.qz-quest-card:hover {
	border-color: #cfd5ea;
	box-shadow: var(--qz-shadow);
}

/* Сброс абсолютного позиционирования из styles.min.css */
.quests-and-shedule .qz-quest-card h3,
.quests-and-shedule .qz-quest-card .address,
.quests-and-shedule .qz-quest-card .gamers,
.quests-and-shedule .qz-quest-card .duration,
.quests-and-shedule .qz-quest-card .btn.btn-book,
.quests-and-shedule .qz-quest-card .quest-block__reviews {
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
}

/* Фото */
.qz-quest-card__media {
	position: relative;
	background: var(--qz-bg);
	aspect-ratio: 460 / 300;
	overflow: hidden;
}

.qz-quest-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}

.qz-quest-card:hover .qz-quest-card__media img {
	transform: scale(1.03);
}

/* Тело карточки */
.qz-quest-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 8px;
	padding: 14px 16px 16px;
}

.quests-and-shedule .qz-quest-card .qz-quest-card__title {
	font-family: var(--qz-font-h);
	font-size: 16px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--qz-ink);
	/* Легаси: uppercase + белый цвет поверх фото — здесь не нужно */
	text-transform: none;
	text-align: left;
	margin: 0;
}

.quests-and-shedule .qz-quest-card .qz-quest-card__title a {
	color: inherit;
	text-decoration: none;
}

.quests-and-shedule .qz-quest-card .qz-quest-card__title a:hover {
	color: var(--qz-blue);
}

/* Игроки и длительность — в строку, с иконками из легаси-спрайта */
.qz-quest-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}

.quests-and-shedule .qz-quest-card .gamers,
.quests-and-shedule .qz-quest-card .duration {
	font-family: var(--qz-font-b);
	font-size: 13px;
	line-height: 20px;
	font-weight: 500;
	color: var(--qz-ink);
	/* Спрайт quest-info-icons.png рассчитан на белый текст поверх фото;
	   на светлом теле карточки он не читается — убираем, оставляя отступ */
	background: none;
	padding: 0;
}

.quests-and-shedule .qz-quest-card .gamers small,
.quests-and-shedule .qz-quest-card .duration small {
	font-size: 12px;
	font-weight: 400;
	color: var(--qz-muted);
}

/* Цена «от N р/чел» в строке метаданных карточки. Селектор без
   .quests-and-shedule: та же карточка выводится в «похожих квестах»
   на странице квеста, где этой обёртки нет. Оформление единое
   с соседними «2-6 игроков» и «60 минут» — цветом не выделяем. */
.qz-quest-card .price-per-player {
	font-family: var(--qz-font-b);
	font-size: 13px;
	line-height: 20px;
	font-weight: 500;
	color: var(--qz-ink);
	background: none;
	padding: 0;
	white-space: nowrap;
}

.qz-quest-card .price-per-player small {
	font-size: 12px;
	font-weight: 400;
	color: var(--qz-muted);
}

.quests-and-shedule .qz-quest-card .address {
	font-family: var(--qz-font-b);
	font-size: 12px;
	line-height: 1.35;
	font-weight: 400;
	color: var(--qz-muted);
	background: none;
	padding: 0;
}

/* Низ карточки: отзывы слева, кнопка справа. margin-top:auto прижимает
   блок к низу, чтобы у карточек разной высоты кнопки были на одной линии. */
.qz-quest-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 4px;
}

.quests-and-shedule .qz-quest-card .quest-block__reviews {
	font-family: var(--qz-font-b);
	font-size: 12px;
	line-height: 1.2;
	color: var(--qz-muted);
	text-shadow: none;
	text-decoration: none;
}

.quests-and-shedule .qz-quest-card .quest-block__reviews:hover {
	color: var(--qz-blue);
	opacity: 1;
}

/* Кнопка брони: легаси — прозрачная с белой рамкой поверх фото,
   здесь — сплошная тёмная на светлом теле */
.quests-and-shedule .qz-quest-card .btn.btn-book {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	padding: 8px 16px;
	border: 0;
	border-radius: var(--qz-radius-pill);
	background: var(--qz-navy);
	color: #fff;
	font-family: var(--qz-font-b);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}

.quests-and-shedule .qz-quest-card .btn.btn-book:hover {
	background: var(--qz-blue);
	color: #fff;
}

/* Анимация заливки из легаси (::before с жёлтым фоном) не нужна */
.quests-and-shedule .qz-quest-card .btn.btn-book:before {
	display: none;
}

/* Бейдж-плашка: см. блок «Бейджи карточек» ниже — легаси-лента из PNG
   заменена на текстовую пилюлю. */

/* Карточка «скоро» (state 2/3) */
.quests-and-shedule .qz-quest-card .anons {
	font-family: var(--qz-font-b);
	font-size: 13px;
	color: var(--qz-muted);
}

@media (max-width: 600px) {
	.qz-quest-card__body {
		padding: 12px 14px 14px;
	}

	.quests-and-shedule .qz-quest-card .btn.btn-book {
		padding: 8px 14px;
		font-size: 12px;
	}
}

/* Сетка карточек. Раньше PHP резал их на Bootstrap-ряды по две штуки
   ($i % 2), и на широком экране третья карточка не помещалась.
   Теперь одна grid-сетка на категорию: три в ряд на десктопе,
   две на планшете, одна на телефоне. */
.qz-quest-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

@media (max-width: 991px) {
	.qz-quest-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.qz-quest-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   9. РАСПИСАНИЕ
   Стили выносной секции внизу и кнопки-якоря удалены: расписание
   вернулось вкладкой наверх (см. блок «ПЕРЕКЛЮЧАТЕЛЬ» ниже).
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   10. ОСТАЛЬНЫЕ СЕКЦИИ ГЛАВНОЙ
   Акции, отзывы, форма заявки, FAQ, контакты. Разметка и логика этих
   блоков рабочие (AJAX-форма, Bootstrap-карусель отзывов, аккордеон FAQ) —
   меняем только оформление, ничего не переписываем.
   ------------------------------------------------------------------------ */

/* Ритм секций: чередование белого и серого фона */
.qz-section {
	padding: 40px 0;
}

.qz-section--alt {
	background: var(--qz-bg);
}

/* Легаси даёт секции акций margin: 60px 0 — под старый дизайн,
   где над ней рисовался декоративный уголок. Уголка нет (файл
   corner-orange.svg отсутствует, псевдоэлемент погашен ниже),
   и отступ оставался белой полосой между секциями, у которых
   свой фон. Обнуляем. */
.discounts.discounts-frontpage {
	margin: 0;
}

.qz-section__more {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

/* --- Акции --- */
.qz-sales-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
}

.discounts-frontpage .qz-sale-card {
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius);
	overflow: hidden;
	padding: 0 0 16px;
	/* Легаси-раскладка была на Bootstrap-колонках с внешними отступами */
	width: auto;
	float: none;
	margin: 0;
}

/* Кадр картинки акции — 16:7, та же пропорция, что у .qz-promo-card__media
   на странице акций: карточки на главной и в /discounts выглядят одинаково.
   Раньше здесь было height:auto, и при исходных 460x100 (4.6:1) карточка
   получалась узкой полосой. */
.discounts-frontpage .qz-sale-card__media {
	aspect-ratio: 16 / 7;
	background: var(--qz-bg);
	overflow: hidden;
	margin-bottom: 14px;
}

.discounts-frontpage .qz-sale-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin-bottom: 0;
}

/* Запасное правило для картинки без обёртки — на случай, если
   где-то остался старый вывод <img> прямым потомком карточки */
.discounts-frontpage .qz-sale-card > img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 14px;
}

.discounts-frontpage .qz-sale-card h3 {
	font-family: var(--qz-font-h);
	font-size: 16px;
	font-weight: 700;
	color: var(--qz-navy);
	margin: 0 16px 8px;
	text-transform: none;
}

.discounts-frontpage .qz-sale-card p,
.discounts-frontpage .qz-sale-card div {
	font-family: var(--qz-font-b);
	font-size: 13px;
	line-height: 1.5;
	color: var(--qz-muted);
	margin-left: 16px;
	margin-right: 16px;
}

/* --- Отзывы --- */
.testimonials-frontpage .testimonial-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.testimonials-frontpage .testimonial-grid__item {
	display: flex;
	flex-direction: column;
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius);
	padding: 18px;
	/* Легаси мог задавать ширину под float-раскладку */
	width: auto;
	float: none;
	margin: 0;
}

.testimonials-frontpage .testimonial__text {
	font-family: var(--qz-font-b);
	font-size: 13px;
	line-height: 1.55;
	color: var(--qz-ink);
	margin: 0 0 14px;
	/* Обрезаем длинные отзывы: карточки в ряду остаются одной высоты */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
}

.testimonials-frontpage .testimonial__author {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--qz-border);
}

.testimonials-frontpage .testimonial__author img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.testimonials-frontpage .testimonial__author strong {
	font-family: var(--qz-font-b);
	font-size: 13px;
	font-weight: 600;
	color: var(--qz-ink);
}

.testimonials-frontpage .testimonial__author strong span {
	font-weight: 400;
	color: var(--qz-muted);
}

.testimonials-frontpage .testimonial__quest-link {
	font-size: 12px;
	color: var(--qz-blue);
	flex-basis: 100%;
	padding-left: 44px;
}

/* --- FAQ --- */
.faq-frontpage .faq__item {
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius-sm);
	margin-bottom: 8px;
	overflow: hidden;
	box-shadow: none;
}

.faq-frontpage .faq__question {
	background: transparent;
	border: 0;
	padding: 0;
}

.faq-frontpage .faq__question .panel-title a {
	display: block;
	padding: 14px 16px;
	font-family: var(--qz-font-b);
	font-size: 14px;
	font-weight: 500;
	color: var(--qz-ink);
	text-decoration: none;
}

.faq-frontpage .faq__question .panel-title a:hover {
	color: var(--qz-blue);
}

.faq-frontpage .faq__answer .panel-body {
	padding: 0 16px 16px;
	border: 0;
	font-family: var(--qz-font-b);
	font-size: 13px;
	line-height: 1.55;
	color: var(--qz-muted);
}

/* --- Контакты --- */
/* (display:flex здесь убран: в flex-контексте ::before у блоков адресов
   сжимался и иконка обрезалась. Раскладка задана ниже инлайн-блоками,
   как в легаси.) */
.contacts-frontpage .contacts__addresses {
	margin-bottom: 20px;
}

.contacts-frontpage .contacts__addresses-block {
	font-family: var(--qz-font-b);
	font-size: 14px;
	color: var(--qz-ink);
}

/* (display:flex убран по той же причине, что и у адресов: иконка
   соцсети — фон самой ссылки с padding-top, в flex она сжималась.) */
.contacts-frontpage .contacts__social {
	text-align: center;
}

/* --- Форма заявки --- */
.qz-cb-section.qz-section {
	background: var(--qz-bg);
}

.qz-cb-section .qz-cb-inline__text.qz-block-head h2 {
	font-family: var(--qz-font-h);
	color: var(--qz-navy);
}

@media (max-width: 991px) {
	.testimonials-frontpage .testimonial-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.qz-section {
		padding: 28px 0;
	}

	.testimonials-frontpage .testimonial-grid {
		grid-template-columns: 1fr;
	}

	.contacts-frontpage .contacts__addresses {
		gap: 12px 20px;
	}
}

/* ---------------------------------------------------------------------------
   11. ДОСТИЖЕНИЯ (заглушка)
   Разметка в default.php закомментирована: в БД нет ни таблицы достижений,
   ни связи с квестами. Стили готовы заранее — когда появится бэкенд,
   секцию достаточно раскомментировать. См. docs/TODO.md.
   ------------------------------------------------------------------------ */
.qz-achv-strip {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding: 4px 2px 10px;
	-webkit-overflow-scrolling: touch;
}

.qz-achv-chip {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	padding: 6px 18px 6px 6px;
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius-pill);
	white-space: nowrap;
}

.qz-achv-chip__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	/* Квадрат со скруглением, а не круг: картинки наград — детализированные
	   бейджи 160x160, у которых элементы доходят до краёв холста. Круглая
	   маска срезала им углы (книга и плёнка у «Лучшего сюжета») */
	border-radius: 10px;
	background: var(--qz-bg);
	color: var(--qz-blue);
	font-size: 17px;
}

.qz-achv-chip__year {
	position: absolute;
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%);
	padding: 1px 6px;
	border-radius: 6px;
	background: var(--qz-navy);
	color: #fff;
	font-family: var(--qz-font-b);
	font-size: 9px;
	font-weight: 700;
}

.qz-achv-chip__text b {
	display: block;
	font-family: var(--qz-font-h);
	font-size: 12px;
	font-weight: 600;
	color: var(--qz-ink);
}

.qz-achv-chip__text span {
	font-family: var(--qz-font-b);
	font-size: 11px;
	color: var(--qz-muted);
}

/* ===========================================================================
   ФИКСЫ ПО ИТОГАМ ПРОВЕРКИ НА ТЕСТЕ (2026-07-31)
   ======================================================================== */

/* --- 1. Бейджи «Новый» / «Акция» на карточках ---
   Легаси рисует их через ::after картинкой 110×112 с right:-9px, top:6px.
   После переверстки карточки (overflow:hidden + фото в своём контейнере)
   бейдж обрезался краем. Привязываем к области фото и разрешаем показ. */
.quests-and-shedule .qz-quest-card {
	overflow: visible;
}

.quests-and-shedule .qz-quest-card .qz-quest-card__media {
	border-radius: var(--qz-radius) var(--qz-radius) 0 0;
}

/* (Правила размера/позиции ленты-PNG удалены — бейдж переверстан
   на текстовую пилюлю, см. блок «Бейджи карточек» ниже.) */

/* --- 2. FAQ: рамка была на .faq__item, а Bootstrap рисует свою на .panel,
   из-за чего вопрос и ответ выглядели как два разных блока --- */
.faq-frontpage .faq__item.panel {
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius-sm);
	background: var(--qz-card);
	box-shadow: none;
	margin-bottom: 8px;
	overflow: hidden;
}

.faq-frontpage .faq__item .panel-heading {
	background: transparent;
	border: 0;
	padding: 0;
}

.faq-frontpage .faq__item .panel-collapse {
	border-top: 1px solid var(--qz-border);
}

.faq-frontpage .faq__item .panel-title a:focus {
	outline: none;
}

/* Стрелка-индикатор, чтобы было видно, что блок раскрывается */
.faq-frontpage .faq__question .panel-title a {
	position: relative;
	padding-right: 44px;
}

.faq-frontpage .faq__question .panel-title a:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid var(--qz-muted);
	border-bottom: 2px solid var(--qz-muted);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.faq-frontpage .faq__question .panel-title a[aria-expanded="true"]:after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

/* --- 3. Контакты: иконки рисуются спрайтом contacts-icos.png —
   у адресов через ::before, у соцсетей через padding-top:50px + background.
   Мои display:flex и gap сломали эту раскладку. Возвращаем инлайн-блоки. --- */
.contacts-frontpage .contacts__addresses {
	display: block;
	text-align: center;
	margin-bottom: 20px;
}

.contacts-frontpage .contacts__addresses-block {
	display: inline-block;
	width: 200px;
	vertical-align: top;
	margin: 0 10px 24px;
	font-family: var(--qz-font-b);
	font-size: 14px;
	color: var(--qz-ink);
}

.contacts-frontpage .contacts__social {
	display: block;
	text-align: center;
}

.contacts-frontpage .contacts__social > a {
	display: inline-block;
	width: 132px;
	vertical-align: top;
	margin: 0 4px 12px;
	font-family: var(--qz-font-b);
	font-size: 13px;
	color: var(--qz-ink);
}

.contacts-frontpage .contacts__social > a:hover {
	color: var(--qz-blue);
}

/* --- 4. Отзывы: фиксированная высота + многоточие ---
   Текст обрезался без визуального признака, а карточки разной высоты
   дёргали страницу ниже. Высота фиксируется по 6 строкам текста. */
.testimonials-frontpage .testimonial-grid__item {
	height: 100%;
	min-height: 280px;
}

.testimonials-frontpage .testimonial__text {
	/* -webkit-line-clamp уже даёт многоточие, но только при overflow:hidden
	   и display:-webkit-box — оба стоят выше. Фиксируем высоту в строках,
	   чтобы карточки не различались по высоте при разной длине отзыва. */
	height: calc(1.55em * 6);
	cursor: help;
}

/* Отзывы в карусели: слайд не должен менять высоту при переключении */
.testimonials-frontpage .carousel-inner > .item {
	min-height: 320px;
}

/* --- 5. Акции: отступы текста и ограничение высоты --- */
.discounts-frontpage .qz-sale-card {
	display: flex;
	flex-direction: column;
	padding: 0 0 16px;
}

.discounts-frontpage .qz-sale-card > *:not(img) {
	margin-left: 20px;
	margin-right: 20px;
}

/* Картинка теперь в обёртке .qz-sale-card__media, а та попадает под
   правило `> *:not(img)` выше и получила бы поля по 20px. Картинка
   должна доходить до краёв карточки — отступы снимаем. */
.discounts-frontpage .qz-sale-card > .qz-sale-card__media {
	margin-left: 0;
	margin-right: 0;
}

/* Горизонтальные отступы повторяем явно: это правило идёт после
   `> *:not(img)` с той же специфичностью, поэтому сокращённая запись
   margin здесь перекрыла бы margin-left/right и заголовок прижимался
   бы к левому краю, в отличие от текста под ним. */
.discounts-frontpage .qz-sale-card h3 {
	margin: 16px 20px 10px;
}

/* Свёрнутое состояние: показываем первые ~10 строк с растворением снизу */
.discounts-frontpage .qz-sale-card__text {
	position: relative;
	max-height: 260px;
	overflow: hidden;
	transition: max-height .25s ease;
}

.discounts-frontpage .qz-sale-card__text:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
}

.discounts-frontpage .qz-sale-card__text.is-expanded {
	max-height: none;
}

.discounts-frontpage .qz-sale-card__text.is-expanded:after {
	display: none;
}

.discounts-frontpage .qz-sale-card__toggle {
	align-self: flex-start;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--qz-blue);
	font-family: var(--qz-font-b);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.discounts-frontpage .qz-sale-card__toggle:hover {
	text-decoration: underline;
}

/* --- 6. Карточка квеста: характеристики в один ряд --- */
.qz-quest-card__meta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
}

.quests-and-shedule .qz-quest-card .gamers,
.quests-and-shedule .qz-quest-card .duration {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	line-height: 1.2;
}

.quests-and-shedule .qz-quest-card .gamers small,
.quests-and-shedule .qz-quest-card .duration small {
	display: inline;
}

/* --- Бейджи карточек: пилюля вместо диагональной ленты ---

   Было: PNG 110×112 в ::after, повёрнутый лентой в правом верхнем углу
   с right:-6px — он вылезал за скруглённый край карточки и на широких
   карточках выглядел оторванным. Плюс битый путь в styles.min.css
   ('../images/' указывает в templates/qz/images/, а файлы лежат в
   /images/) и badge-partner.png, которого нет вовсе.

   Стало: текстовая пилюля слева сверху внутри фото. Картинки не нужны
   (у метки «партнёр» больше нет битой ссылки), текст задаётся content
   и читается скринридерами, цвет — фирменные жёлтый и синий. */
.quests-and-shedule .qz-quest-card[class*="badge-"]:after {
	content: "";
	position: absolute;
	left: 12px;
	top: 12px;
	right: auto;
	bottom: auto;
	z-index: 3;
	width: auto;
	height: auto;
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: var(--qz-radius-pill);
	background: var(--qz-yellow);
	background-image: none;
	color: var(--qz-navy);
	font-family: var(--qz-font-h);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: .01em;
	white-space: nowrap;
	box-shadow: 0 1px 4px rgba(0, 26, 114, .18);
	transform: none;
}

.quests-and-shedule .qz-quest-card.badge-new:after {
	content: "Новый";
}

.quests-and-shedule .qz-quest-card.badge-discont:after {
	content: "Акция";
}

/* «Партнёр» — синяя плашка: жёлтый занят под «Новый»/«Акция»,
   которые обозначают выгоду, а партнёрство — нейтральная пометка. */
.quests-and-shedule .qz-quest-card.badge-partner:after {
	content: "Партнёр";
	background: var(--qz-navy);
	color: #fff;
}

/* (Правило background-image для иконок контактов удалено: одинарная
   цепочка .contacts-frontpage не перебивала легаси. См. ниже.) */

/* --- Лишние отступы вокруг карточки квеста ---
   Легаси .quests-and-shedule .quest-block задаёт border:3px #fff solid,
   padding:5px и margin-bottom:120px — под старую раскладку, где карточка
   была фоновым фото с белой окантовкой. В новой карточке это давало
   белую полосу над фото и пустоту под кнопкой. */
.quests-and-shedule .qz-quest-card {
	border: 1px solid var(--qz-border);
	padding: 0;
	margin: 0;
}

/* Фото вплотную к верхнему краю, со скруглением по карточке */
.quests-and-shedule .qz-quest-card .qz-quest-card__media {
	margin: 0;
	border-radius: calc(var(--qz-radius) - 1px) calc(var(--qz-radius) - 1px) 0 0;
}

/* Скругление задаём и картинке: у карточки overflow:visible (иначе
   обрезался бы бейдж «Новый»), поэтому обрезать фото по контейнеру
   нечем — только собственным border-radius. */
.quests-and-shedule .qz-quest-card .qz-quest-card__media img {
	border-radius: calc(var(--qz-radius) - 1px) calc(var(--qz-radius) - 1px) 0 0;
}

/* Низ карточки: у .qz-quest-card__foot был padding-top, а тело уже
   имеет нижний padding — вместе давали лишний воздух под кнопкой */
.qz-quest-card__foot {
	padding-top: 0;
}

.qz-quest-card__body {
	gap: 6px;
	padding: 14px 16px;
}

/* Карточки акций не растягиваем до высоты самой длинной: у grid по
   умолчанию align-items:stretch, и рядом с корпоративными скидками
   (список ~50 компаний) короткая акция получала экран пустоты.
   align-items:start — каждая карточка по своему содержимому. */
.qz-sales-grid {
	align-items: start;
}

/* --- Отзывы: жёсткая фиксация высоты + многоточие + свой хинт ---
   Карточки прыгали при переключении слайдов: высота зависела от длины
   имени автора, названия квеста (одна строка или две) и числа строк
   текста. Раньше стояла height у текста — но -webkit-line-clamp даёт
   многоточие только вместе с max-height, поэтому текст просто резался.

   Теперь фиксируем каждую зону карточки:
   текст 6 строк + автор + ссылка на квест в 2 строки. */
.testimonials-frontpage .testimonial-grid__item {
	height: 340px;
	min-height: 0;
	justify-content: flex-start;
	overflow: hidden;
}

.testimonials-frontpage .testimonial__text {
	/* max-height вместо height — иначе line-clamp не рисует многоточие */
	height: auto;
	max-height: calc(1.55em * 6);
	-webkit-line-clamp: 6;
	flex: 0 0 auto;
}

/* Блок автора всегда внизу карточки, фиксированной высоты */
.testimonials-frontpage .testimonial__author {
	min-height: 52px;
	margin-top: auto;
}

/* Название квеста — максимум две строки, дальше многоточие:
   иначе длинные названия («Классический квест "В плену у пирата
   Генри Моргана"») распирали карточку на строку больше соседних */
.testimonials-frontpage .testimonial__quest-link {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: 32px;
	margin-top: 6px;
	padding-left: 0;
}

/* Слайд карусели тоже фиксируем, иначе прыгает контейнер целиком */
.testimonials-frontpage .carousel-inner > .item {
	min-height: 0;
	height: 340px;
}

.testimonials-frontpage .testimonial-grid {
	align-items: stretch;
}

/* --- Свой хинт вместо браузерного title ---
   Браузерный выглядит чужеродно (системный шрифт, чёрный фон)
   и появляется с задержкой ~1с. Свой — сразу и в стиле сайта. */
.testimonials-frontpage .testimonial__text {
	position: relative;
}

.qz-review-tip {
	position: fixed;
	z-index: 200;
	max-width: 420px;
	max-height: 60vh;
	overflow-y: auto;
	padding: 14px 16px;
	border-radius: var(--qz-radius);
	background: var(--qz-navy);
	color: #fff;
	font-family: var(--qz-font-b);
	font-size: 13px;
	line-height: 1.55;
	/* Отзывы часто написаны в несколько абзацев — сохраняем переносы,
	   иначе хинт слипается в сплошную простыню */
	white-space: pre-wrap;
	box-shadow: var(--qz-shadow-lg);
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease;
}

.qz-review-tip.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 900px) {
	/* На тач-устройствах хинта нет — там работает переход на страницу отзывов */
	.qz-review-tip {
		display: none;
	}

	.testimonials-frontpage .testimonial-grid__item {
		height: auto;
		min-height: 300px;
	}

	.testimonials-frontpage .carousel-inner > .item {
		height: auto;
	}
}

/* Две линии в карточке отзыва: яркая синяя — border-bottom у
   .testimonial__text из легаси (styles.min.css), бледная — мой
   border-top у блока автора. Оставляем одну, легаси-линию,
   перекрасив её в актуальный синий брендбука (#095ea6 → --qz-blue). */
.testimonials-frontpage .testimonial__text {
	border-bottom: 2px solid var(--qz-blue);
	padding-bottom: 14px;
	margin-bottom: 0;
}

.testimonials-frontpage .testimonial__author {
	border-top: 0;
	padding-top: 14px;
}

/* Заголовок акции всё ещё прижимался влево: легаси-правило
   `.discounts.discounts-frontpage .discounts__block h3` имеет
   специфичность 0-4-1 (четыре класса) и ставит margin:0 — моё
   правило с 0-3-1 проигрывало. Повторяем ту же цепочку классов
   и добавляем свой, чтобы гарантированно перебить. */
.discounts.discounts-frontpage .discounts__block.qz-sale-card h3 {
	margin: 16px 20px 10px;
	padding: 0;
}

/* Текст и кнопка — той же цепочкой, чтобы отступы не разъезжались */
.discounts.discounts-frontpage .discounts__block.qz-sale-card .qz-sale-card__text,
.discounts.discounts-frontpage .discounts__block.qz-sale-card .qz-sale-card__toggle {
	margin-left: 20px;
	margin-right: 20px;
}

/* --- FAQ: чужая стрелка и вторая полоска ---
   Легаси (styles.min.css) для развёрнутого вопроса рисует свою
   стрелку картинкой arrow-down-yellow.png через :after с left:35px —
   она наезжала на текст вопроса. И держит border-bottom 2px:
   #d0d0d0 в свёрнутом состоянии, #f0c52e в развёрнутом — вместе
   с моим разделителем получалось две полоски.

   Гасим легаси-стрелку, оставляем одну линию — жёлтую из брендбука. */
.faq-frontpage .faq__question a[aria-expanded="true"]:after {
	background: none;
	width: auto;
	height: auto;
	position: static;
}

/* Линия под вопросом: одна, в цвет бренда. Ставим на саму ссылку —
   там, где её рисует легаси, чтобы не плодить второй разделитель. */
.faq-frontpage .faq__question .panel-title a {
	border-bottom: 2px solid transparent;
	margin: 0;
	transition: border-color .15s ease;
}

.faq-frontpage .faq__question .panel-title a[aria-expanded="true"] {
	border-bottom-color: var(--qz-yellow);
}

/* Мой разделитель у раскрывающейся части убираем — линия уже есть */
.faq-frontpage .faq__item .panel-collapse {
	border-top: 0;
}

/* Возвращаем свою стрелку-шеврон: она рисуется тем же :after,
   что выше сброшен, поэтому объявляем её после сброса */
.faq-frontpage .faq__question .panel-title a:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	left: auto;
	bottom: auto;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	background: none;
	border-right: 2px solid var(--qz-muted);
	border-bottom: 2px solid var(--qz-muted);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.faq-frontpage .faq__question .panel-title a[aria-expanded="true"]:after {
	margin-top: -2px;
	border-color: var(--qz-navy);
	transform: rotate(-135deg);
}

/* Заголовки секций: в styles.min.css есть голый селектор
   `h2 { text-align: left }`, и прямое объявление на элементе сильнее
   унаследованного center от .qz-block-head. Задаём выравнивание
   самим заголовкам, иначе в части секций они прижимаются влево. */
.qz-block-head h2,
.qz-block-head p {
	text-align: center;
}

/* --- Контакты: иконки так и не появились ---
   Одного background-image мало. Спрайт contacts-icos.png работает
   в паре с геометрией: у адресов иконка рисуется в ::before размером
   40×40 со сдвигом background-position по вертикали для каждого типа,
   у соцсетей — фоном самой ссылки с padding-top:50px под картинку.
   Мои правила задавали шрифт и раскладку, но не воспроизводили эту
   геометрию, а сокращённый `background` в легаси перебивал одиночный
   background-image. Прописываем полностью. */

/* (Блок правил иконок с одинарной цепочкой .contacts-frontpage удалён:
   он целиком перекрывался легаси со специфичностью 0-3-1 и не работал.
   Рабочая версия — ниже, с цепочкой .contacts.contacts-frontpage.) */

/* --- Контакты: перебиваем специфичность легаси ---
   Инспектор показал: побеждает `.contacts.contacts-frontpage
   .contacts__social>a` (0-3-1) с битым путём '../images/...'.
   Мои правила были 0-2-1 и перечёркивались целиком.
   Повторяем ту же цепочку — .contacts.contacts-frontpage. */
.contacts.contacts-frontpage .contacts__social > a {
	display: inline-block;
	width: 132px;
	padding: 50px 0 0;
	margin: 0 4px 12px;
	background: url('/images/contacts-icos.png') 50% 0 no-repeat;
	text-align: center;
	text-decoration: none;
	vertical-align: top;
	font-family: var(--qz-font-b);
	font-size: 13px;
	color: var(--qz-ink);
}

.contacts.contacts-frontpage .contacts__social > a:hover {
	color: var(--qz-blue);
}

.contacts.contacts-frontpage .contacts__social > a.contacts__skype {
	background-position: 50% -420px;
}

.contacts.contacts-frontpage .contacts__social > a.contacts__vk {
	background-position: 50% -490px;
}

.contacts.contacts-frontpage .contacts__social > a.contacts__fb {
	background-position: 50% -560px;
}

.contacts.contacts-frontpage .contacts__social > a.contacts__in {
	background-position: 50% -630px;
}

.contacts.contacts-frontpage .contacts__social > a.contacts__tt {
	background-position: 50% -700px;
}

/* Адреса — той же цепочкой */
.contacts.contacts-frontpage .contacts__addresses-block {
	display: inline-block;
	position: relative;
	width: 200px;
	margin: 0 10px 24px;
	vertical-align: top;
	text-align: center;
	font-family: var(--qz-font-b);
	font-size: 14px;
	color: var(--qz-ink);
}

.contacts.contacts-frontpage .contacts__addresses-block:before {
	content: '';
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto 10px;
	background: url('/images/contacts-icos.png') 50% 0 no-repeat;
}

.contacts.contacts-frontpage .contacts__email:before {
	background-position: 50% -140px;
}

.contacts.contacts-frontpage .contacts__phones:before {
	background-position: 50% -70px;
}

.contacts.contacts-frontpage .contacts__address:before {
	background-position: 50% 0;
}

/* --- Контакты: наложение иконок и лишние пустоты ---
   1) Базовое .contacts__addresses-block даёт padding:10px 10px 10px 60px —
      левый отступ 60px рассчитан на иконку, которая в старом макете
      стояла абсолютом слева. У нас иконка сверху в потоке, поэтому
      отступ съезжал текст вправо и наезжал на неё.
   2) Вертикальных пустот было втрое больше нужного: padding 40px
      у .qz-section + padding-bottom 40px у списков + margin 24-30px
      у элементов. На проде блок заметно компактнее. */
.contacts.contacts-frontpage {
	padding: 30px 0;
}

.contacts.contacts-frontpage .contacts__addresses,
.contacts.contacts-frontpage .contacts__social {
	padding-bottom: 0;
}

.contacts.contacts-frontpage .contacts__addresses {
	margin-bottom: 28px;
}

.contacts.contacts-frontpage .contacts__addresses-block {
	/* Сбрасываем левый отступ под абсолютную иконку старого макета */
	padding: 0;
	margin: 0 10px 16px;
	min-height: 0;
}

.contacts.contacts-frontpage .contacts__social > a {
	margin: 0 4px 4px;
}

/* Заголовок «Контакты» ближе к содержимому */
.contacts-frontpage .qz-block-head {
	margin-bottom: 24px;
}

/* Секция контактов идёт последней перед картой — снизу отступ не нужен */
.contacts-frontpage.qz-section {
	padding-bottom: 16px;
}

/* --- Контакты: иконки адресов обрезались снизу ---
   Ранний блок правил (шаг 10) задавал контейнеру .contacts__addresses
   display:flex — в flex-контексте блоки адресов растягивались,
   а ::before внутри ужимался по высоте и картинка обрезалась.
   Более поздний display:block с той же специфичностью побеждал не всегда
   (зависит от порядка загрузки), поэтому фиксируем цепочкой .contacts. */
.contacts.contacts-frontpage .contacts__addresses {
	display: block;
	text-align: center;
	padding-bottom: 0;
	margin-bottom: 28px;
}

.contacts.contacts-frontpage .contacts__social {
	display: block;
	text-align: center;
	padding-bottom: 0;
}

/* Иконка не должна сжиматься ни при каких раскладках родителя */
.contacts.contacts-frontpage .contacts__addresses-block:before {
	flex: none;
	box-sizing: content-box;
	background-size: auto;
}

/* ---------------------------------------------------------------------------
   SEO-БЛОК (модуль seo-homepage, позиция map)
   Контент приходит из редактора Joomla с классами MsoNormal (следы Word)
   и обёрткой .footer — саму разметку модуля не трогаем, приводим к
   брендингу через CSS.
   ------------------------------------------------------------------------ */
.qz-seo-block {
	background: var(--qz-bg);
	color: var(--qz-ink);
	padding: 40px 0;
}

.qz-seo-block .footer__inner {
	max-width: var(--qz-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

/* Заголовки: в модуле стоит <h1>, но настоящий <h1> страницы — в hero.
   Понижаем визуально до уровня заголовка секции, чтобы не спорил
   с главным. Сам тег меняется только в админке (см. docs/TODO.md). */
.qz-seo-block h1 {
	font-family: var(--qz-font-h);
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--qz-navy);
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 18px;
	padding-top: 0 !important;
}

.qz-seo-block h2 {
	font-family: var(--qz-font-h);
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--qz-navy);
	text-transform: none;
	text-align: left;
	margin: 28px 0 12px;
}

.qz-seo-block p,
.qz-seo-block li {
	font-family: var(--qz-font-b);
	font-size: 15px;
	line-height: 1.6;
	color: var(--qz-ink);
}

.qz-seo-block p {
	margin: 0 0 14px;
}

.qz-seo-block ul,
.qz-seo-block ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.qz-seo-block li {
	margin-bottom: 8px;
}

.qz-seo-block a {
	color: var(--qz-blue);
	text-decoration: underline;
}

.qz-seo-block a:hover {
	color: var(--qz-navy);
}

@media (max-width: 700px) {
	.qz-seo-block {
		padding: 28px 0;
	}

	.qz-seo-block h1 {
		font-size: 19px;
	}

	.qz-seo-block h2 {
		font-size: 16px;
	}

	.qz-seo-block p,
	.qz-seo-block li {
		font-size: 14px;
	}
}

/* Внутренний .footer из контента модуля — не настоящий футер сайта.
   Гасим наследование его оформления (тёмный фон, светлый текст,
   отступы), чтобы SEO-текст читался на светлой секции. */
.qz-seo-block .footer {
	width: auto;
	background: none;
	color: inherit;
	padding: 0;
	margin: 0;
	z-index: auto;
}

.qz-seo-block .footer__inner {
	background: none;
	color: inherit;
}

/* --- Контакты: финальная нормализация блоков адресов ---
   Инспектор показывал ::before 40×40 применённым, но визуально он
   растягивался на ширину блока и текст ложился поверх. Причина —
   конкуренция нескольких моих же правил с равной специфичностью
   (.contacts.contacts-frontpage ... :before объявлен трижды в разных
   местах файла) плюс остатки flex-раскладки у родителя.

   Собираем всё в одном месте и фиксируем геометрию жёстко. */
.contacts.contacts-frontpage .contacts__addresses-block {
	display: inline-block;
	position: static;
	width: 220px;
	padding: 0;
	margin: 0 8px 20px;
	vertical-align: top;
	text-align: center;
	line-height: 1.4;
}

.contacts.contacts-frontpage .contacts__addresses-block:before {
	content: '';
	display: block;
	width: 40px;
	height: 40px;
	max-width: 40px;
	min-height: 40px;
	margin: 0 auto 10px;
	padding: 0;
	position: static;
	float: none;
	background-image: url('/images/contacts-icos.png');
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: auto;
	box-sizing: content-box;
	flex: none;
}

/* Содержимое блока — на своей строке под иконкой */
.contacts.contacts-frontpage .contacts__addresses-block > a,
.contacts.contacts-frontpage .contacts__addresses-block > span {
	display: block;
	color: var(--qz-ink);
	text-decoration: none;
}

.contacts.contacts-frontpage .contacts__addresses-block > a:hover {
	color: var(--qz-blue);
}

/* Пустота между FAQ и контактами: у легаси .faq стоит margin:60px 0,
   и вместе с моими padding:40px у обеих секций набегало ~130px.
   Секции и так разделены сменой фона — внешние отступы не нужны. */
.faq.faq-frontpage.qz-section {
	margin: 0;
	padding: 40px 0;
}

/* Скошенный угол у секции FAQ (::after из легаси) при обнулённом
   margin наезжал бы на контакты — гасим, в новом дизайне его нет. */
.faq.faq-frontpage.qz-section:after,
.faq.faq-frontpage.qz-section:before {
	display: none;
}

/* Декоративные «уголки» секций — скошенные полосы 60px из старого
   дизайна (corner-orange.svg, corner-gray.svg, corner-white.svg).
   Картинки на месте и рисуются штатно, но в новом дизайне таких
   диагональных врезок нет: секции разделяются фоном. Оранжевые
   треугольники вокруг «Акций» на главной и белый уголок над
   расписанием квеста — ровно они.

   Гасим и ::before (верхний уголок), и ::after (нижний) у всех
   секций, где легаси их рисует. */
.discounts.discounts-frontpage:before,
.discounts.discounts-frontpage:after,
.kids-page .quests-and-shedule:before,
.kids-page .quests-and-shedule:after,
.faq:before,
.faq:after,
.quest-shedule:before,
.quest-shedule:after,
.quest-winners:before,
.quest-winners:after {
	display: none;
}

/* «Хвостик» у отзыва в карусели: в новом дизайне карточка отзыва
   без указателя вниз — он остался от старой вёрстки с «облачком». */
.testimonials__carousel .testimonial__text:after {
	display: none;
}

/* Сдвиги по спрайту — ПОСЛЕ общего правила иконки.
   Раньше они стояли выше, а блок с background-position:50% 0
   шёл ниже и затирал их: все три иконки рисовались верхним
   фрагментом спрайта, а текст ложился поверх пустого места. */
.contacts.contacts-frontpage .contacts__address:before {
	background-position: 50% 0;
}

.contacts.contacts-frontpage .contacts__phones:before {
	background-position: 50% -70px;
}

.contacts.contacts-frontpage .contacts__email:before {
	background-position: 50% -140px;
}

/* --- Точные позиции спрайта contacts-icos.png ---
   Легаси-значения (0, -70, -140, -420...) не подходят текущему файлу:
   спрайт 40×782, иконки высотой 40px с шагом 70px, но первая начинается
   с y=19, а не с нуля. Из-за этого картинка рисовалась ниже отведённого
   места и обрезалась — визуально выглядело как наложение текста.

   Позиции измерены по самому файлу (полосы непрозрачных пикселей):
   19, 89, 159, 229, 299, 369, 439, 509, 579, 649, 717. */
.contacts.contacts-frontpage .contacts__address:before {
	background-position: 50% -19px;
}

.contacts.contacts-frontpage .contacts__phones:before {
	background-position: 50% -89px;
}

.contacts.contacts-frontpage .contacts__email:before {
	background-position: 50% -159px;
}

.contacts.contacts-frontpage .contacts__social > a.contacts__skype {
	background-position: 50% -439px;
}

.contacts.contacts-frontpage .contacts__social > a.contacts__vk {
	background-position: 50% -509px;
}

.contacts.contacts-frontpage .contacts__social > a.contacts__fb {
	background-position: 50% -579px;
}

.contacts.contacts-frontpage .contacts__social > a.contacts__in {
	background-position: 50% -649px;
}

.contacts.contacts-frontpage .contacts__social > a.contacts__tt {
	background-position: 50% -717px;
}

/* ===========================================================================
   КОНТАКТЫ — итоговые отступы (перекрывают все предыдущие правки этой секции)
   Отступы задавались в нескольких местах по ходу правок и конфликтовали.
   Здесь единственный источник истины, ритм совпадает с .qz-section (40px).
   ======================================================================== */
.contacts.contacts-frontpage.qz-section {
	padding: 40px 0;
	margin: 0;
}

/* Заголовок — как у остальных секций */
.contacts.contacts-frontpage .qz-block-head {
	margin: 0 auto 28px;
}

/* Группа адресов и группа соцсетей */
.contacts.contacts-frontpage .contacts__addresses {
	padding: 0;
	margin: 0 0 8px;
}

.contacts.contacts-frontpage .contacts__social {
	padding: 0;
	margin: 0;
}

/* Элементы внутри групп: нижний отступ формирует расстояние
   между строками при переносе на узких экранах */
.contacts.contacts-frontpage .contacts__addresses-block {
	margin: 0 8px 24px;
}

.contacts.contacts-frontpage .contacts__social > a {
	margin: 0 4px;
}

@media (max-width: 700px) {
	.contacts.contacts-frontpage.qz-section {
		padding: 28px 0;
	}

	.contacts.contacts-frontpage .qz-block-head {
		margin-bottom: 20px;
	}

	.contacts.contacts-frontpage .contacts__addresses-block {
		margin-bottom: 20px;
	}

	.contacts.contacts-frontpage .contacts__social > a {
		margin-bottom: 12px;
	}
}

/* ===========================================================================
   ПЕРЕКЛЮЧАТЕЛЬ «КВЕСТЫ | РАСПИСАНИЕ»
   Возврат к варианту с кнопками наверху: перенос расписания вниз делал
   страницу слишком длинной. Кнопки-пилюли вместо табов Bootstrap,
   логика переключения своя (без data-toggle).
   ======================================================================== */
.qz-view-switch {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 0 0 24px;
}

.qz-view-switch__btn {
	padding: 11px 30px;
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius-pill);
	background: #fff;
	color: var(--qz-muted);
	font-family: var(--qz-font-b);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.qz-view-switch__btn:hover {
	border-color: var(--qz-blue);
	color: var(--qz-blue);
}

.qz-view-switch__btn.is-active {
	background: var(--qz-navy);
	border-color: var(--qz-navy);
	color: #fff;
}

.qz-view-switch__btn:focus-visible {
	outline: 2px solid var(--qz-blue);
	outline-offset: 2px;
}

/* Панели переключаются классом is-active, а не Bootstrap-логикой */
.quests-and-shedule .tab-content > .tab-pane {
	display: none;
}

.quests-and-shedule .tab-content > .tab-pane.is-active {
	display: block;
}

/* Панель расписания: убираем внешние отступы секции, которые
   были нужны, пока расписание жило отдельным блоком внизу */
.qz-schedule-pane {
	padding: 0;
	background: none;
}

.qz-schedule-pane .qz-block-head {
	margin-bottom: 24px;
}

@media (max-width: 700px) {
	.qz-view-switch {
		gap: 8px;
		margin-bottom: 18px;
	}

	.qz-view-switch__btn {
		flex: 1 1 0;
		padding: 11px 12px;
		font-size: 12px;
	}
}

/* Панель расписания оставалась видимой при активной вкладке «Квесты».
   Правило пряталось за конкурирующими объявлениями (.qz-schedule от
   старой секции внизу + Bootstrap .tab-content>.active). Задаём
   видимость по id, однозначно и с запасом по специфичности. */
#quests-block .tab-content > #quests,
#quests-block .tab-content > #shedule {
	display: none;
}

#quests-block .tab-content > #quests.is-active,
#quests-block .tab-content > #shedule.is-active {
	display: block;
}

/* ===========================================================================
   СТРАНИЦА КВЕСТА — редизайн
   Шаг 1: шапка (крошки, h1, мета-строка).
   Разметка не менялась, только классы оформления .qz-quest-header /
   .qz-quest-meta поверх существующих. Легаси-структура сохранена целиком.
   ======================================================================== */

/* --- Хлебные крошки и заголовок --- */
.qz-quest-header {
	background: #fff;
	padding: 20px 0 18px;
}

.qz-quest-header .breadcrumb > li,
.qz-quest-header .breadcrumb > li a {
	font-family: var(--qz-font-b);
	font-size: 13px;
	color: var(--qz-muted);
}

.qz-quest-header .breadcrumb > li a:hover {
	color: var(--qz-blue);
}

.qz-quest-header .breadcrumb > li.active {
	color: var(--qz-ink);
}

.qz-quest-header h1 {
	font-family: var(--qz-font-h);
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--qz-navy);
	/* Легаси: uppercase + letter-spacing 1px — в новом дизайне заголовок
	   в обычном регистре, как на главной */
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
}

/* --- Мета-строка: игроки, время, адрес, телефон --- */
.qz-quest-meta .quest-info__item {
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius-sm);
	box-shadow: none;
	padding: 12px 18px;
}

.qz-quest-meta .quest-info__label {
	font-family: var(--qz-font-b);
	font-size: 11px;
	font-weight: 500;
	color: var(--qz-muted);
	letter-spacing: .04em;
}

.qz-quest-meta .quest-info__value {
	font-family: var(--qz-font-h);
	font-size: 15px;
	font-weight: 700;
	color: var(--qz-ink);
}

.qz-quest-meta .quest-info__value a {
	color: var(--qz-ink);
}

.qz-quest-meta .quest-info__value a:hover {
	color: var(--qz-blue);
}

/* Кнопка «Забронировать» в шапке */
.qz-quest-meta .quest-info__book-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	border: 0;
	border-radius: var(--qz-radius-pill);
	background: var(--qz-yellow);
	color: var(--qz-navy);
	font-family: var(--qz-font-b);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	text-transform: none;
	transition: background .15s ease;
}

.qz-quest-meta .quest-info__book-btn:hover {
	background: #e6cc17;
	color: var(--qz-navy);
}

/* Вторичные ссылки: отзывы, сертификат */
.qz-quest-meta .quest-info__link {
	font-family: var(--qz-font-b);
	font-size: 13px;
	color: var(--qz-blue);
	text-decoration: none;
}

.qz-quest-meta .quest-info__link:hover {
	color: var(--qz-navy);
	text-decoration: underline;
}

/* Ограничения по возрасту под мета-строкой */
.quest-info__restrictions {
	font-family: var(--qz-font-b);
	font-size: 12px;
	color: var(--qz-muted);
}

@media (max-width: 900px) {
	.qz-quest-header {
		padding: 14px 0 12px;
	}

	.qz-quest-header h1 {
		font-size: 21px;
	}
}

/* ---------------------------------------------------------------------------
   Шаг 2: галерея квеста
   Логика переключения десктоп/мобильная уже была реализована в легаси
   (.has-mobile-images, 56.25vw против 149vw = 500:745) — не трогаем.
   Меняем только оформление: скругление, стрелки, кнопка видео.
   ------------------------------------------------------------------------ */
.quest-page .page-wrapper-top .background {
	border-radius: var(--qz-radius);
	overflow: hidden;
}

/* Стрелки карусели фото — как в hero на главной: белый круг с шевроном.
   Легаси-стрелки Slick тут полупрозрачные и почти не видны на фото. */
.quest-page .page-wrapper-top .background .slick-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-top: -21px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	box-shadow: var(--qz-shadow);
	transition: background .15s ease;
}

.quest-page .page-wrapper-top .background .slick-arrow:hover {
	background: #fff;
}

.quest-page .page-wrapper-top .background .slick-prev:before,
.quest-page .page-wrapper-top .background .slick-next:before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	background: none;
	border-left: 2px solid var(--qz-navy);
	border-bottom: 2px solid var(--qz-navy);
	opacity: 1;
	font-size: 0;
}

.quest-page .page-wrapper-top .background .slick-prev:before {
	transform: rotate(45deg) translate(1px, -1px);
}

.quest-page .page-wrapper-top .background .slick-next:before {
	transform: rotate(-135deg) translate(1px, -1px);
}

/* Кнопка запуска видео.
   ВАЖНО: легаси ссылался на ../images/play-button.png — файла нет
   нигде (ни в templates/qz/images/, ни в /images/), поэтому кнопка
   показывалась пустым полупрозрачным прямоугольником. Рисуем
   треугольник средствами CSS, без зависимости от картинки.
   Логику показа (fadeIn из common.js) и полноэкранный режим не трогаем. */
.quest-page .quest-youtube-button {
	width: 72px;
	height: 72px;
	/* Легаси: top:200px + margin-left:-30px под старую раскладку */
	top: 50%;
	left: 50%;
	margin: -36px 0 0 -36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: var(--qz-shadow-lg);
	opacity: 1;
	transition: background .15s ease, transform .15s ease;
	z-index: 5;
}

.quest-page .quest-youtube-button:hover {
	background: #fff;
	transform: scale(1.06);
	opacity: 1;
}

/* Треугольник play — вместо отсутствующей картинки */
.quest-page .quest-youtube-button:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	margin: -11px 0 0 -7px;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent var(--qz-navy);
}

@media (prefers-reduced-motion: reduce) {
	.quest-page .quest-youtube-button {
		transition: none;
	}

	.quest-page .quest-youtube-button:hover {
		transform: none;
	}
}

@media (max-width: 900px) {
	.quest-page .page-wrapper-top .background {
		border-radius: 0;
	}

	.quest-page .quest-youtube-button {
		width: 60px;
		height: 60px;
		margin: -30px 0 0 -30px;
	}

	.quest-page .quest-youtube-button:after {
		margin: -9px 0 0 -6px;
		border-width: 9px 0 9px 15px;
	}
}

/* ---------------------------------------------------------------------------
   Шаг 3: описание квеста
   Шкала сложности из макета (.difficulty, «7 из 10») НЕ реализуется:
   в c7dol_quests нет числового поля сложности. Заглушку не рисуем —
   выдуманная цифра хуже её отсутствия. Задача в docs/TODO.md.
   ------------------------------------------------------------------------ */
.quest-page__text h2 {
	font-family: var(--qz-font-h);
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--qz-navy);
	/* Легаси: uppercase «описание» — в новом дизайне обычный регистр */
	text-transform: none;
	text-align: left;
	margin: 0 0 14px;
}

.quest-page__text p,
.quest-page__text li {
	font-family: var(--qz-font-b);
	font-size: 15px;
	line-height: 1.6;
	color: var(--qz-ink);
}

.quest-page__text p {
	margin: 0 0 14px;
}

.quest-page__text a {
	color: var(--qz-blue);
}

.quest-page__text ul,
.quest-page__text ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.quest-page__text li {
	margin-bottom: 8px;
}

/* Баннер детских праздников под описанием (for_kids) */
.quest-page .banner img {
	max-width: 100%;
	height: auto;
	border-radius: var(--qz-radius);
	display: block;
}

@media (max-width: 900px) {
	.quest-page__text h2 {
		font-size: 19px;
	}

	.quest-page__text p,
	.quest-page__text li {
		font-size: 14px;
	}
}

/* ---------------------------------------------------------------------------
   Шаг 5: похожие квесты
   Карточка теперь та же .qz-quest-card, что и на главной — стили карточки
   применяются автоматически. Здесь только сетка, слайдер и его кнопки.
   ------------------------------------------------------------------------ */

/* Заголовок секции: инлайн-стиль в шаблоне задаёт uppercase и Acrom */
.quest-related .qz-block-head .quest-related__title {
	font-family: var(--qz-font-h);
	font-size: 22px;
	font-weight: 700;
	color: var(--qz-navy);
	text-transform: none;
	margin: 0;
}

/* Одна-две карточки не должны растягиваться на всю ширину */
.qz-quest-grid--related {
	grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
	justify-content: center;
}

/* Ширина слайда задана инлайном в шаблоне (рядом со скриптом слайдера,
   чтобы CSS и perView() не разъезжались). Здесь только отступы. */
.quest-related .quest-related__slide {
	padding: 0 8px;
}

.quest-related .quest-related__track {
	margin: 0 -8px;
}

/* Кнопки слайдера — в стиле стрелок галереи и hero */
.quest-related .quest-related__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	box-shadow: var(--qz-shadow);
	color: var(--qz-navy);
	font-size: 22px;
	line-height: 1;
	transition: background .15s ease;
}

.quest-related .quest-related__btn:hover {
	background: #fff;
	color: var(--qz-blue);
}

@media (max-width: 600px) {
	.qz-quest-grid--related {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Шаг 8: расписание квеста (#book_block)
   ВНИМАНИЕ: слоты .quest-day-time не трогаем — на них завязан калькулятор
   (data-datetime, data-price, классы is-selected / in-cart / is-slot-selected).
   Меняем только обёртку: заголовок, шапку недели, навигацию.
   ------------------------------------------------------------------------ */
.qz-quest-schedule > .block__inner > h2 {
	font-family: var(--qz-font-h);
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--qz-navy);
	text-transform: none;
	text-align: left;
	margin: 0 0 12px;
}

/* Бейдж дефицита «Осталось N слотов сегодня» (аудит конверсии, на проде).
   Оформление в бренд, логика вывода не тронута. */
.qz-quest-schedule .quest-shedule__deficit {
	display: inline-block;
	padding: 6px 14px;
	border-radius: var(--qz-radius-pill);
	background: rgba(251, 224, 32, .28);
	color: var(--qz-navy);
	font-family: var(--qz-font-b);
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 16px;
}

/* Шапка недели: диапазон дат + навигация «раньше / позже» */
.qz-quest-schedule > .block__inner > header {
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--qz-border);
}

.qz-quest-schedule > .block__inner > header b {
	font-family: var(--qz-font-h);
	font-size: 15px;
	font-weight: 700;
	color: var(--qz-ink);
}

.qz-quest-schedule .book_nav a {
	display: inline-block;
	margin-left: 14px;
	font-family: var(--qz-font-b);
	font-size: 13px;
	font-weight: 500;
	color: var(--qz-blue);
	text-decoration: none;
}

.qz-quest-schedule .book_nav a:hover {
	color: var(--qz-navy);
	text-decoration: underline;
}

/* Дата слева от строки слотов */
.qz-quest-schedule .shedule-date {
	font-family: var(--qz-font-b);
	font-size: 13px;
	color: var(--qz-ink);
}

@media (max-width: 900px) {
	.qz-quest-schedule > .block__inner > h2 {
		font-size: 19px;
	}
}

/* ---------------------------------------------------------------------------
   Расписание: заголовок дня/квеста — строкой над слотами (все экраны)

   Легаси-раскладка держит .col-xs-3 (заголовок) и .col-xs-9 (слоты)
   в одном ряду на любой ширине. Заголовок съедает ~20% строки:
   на телефоне название квеста переносилось на 3-4 строки, а на ПК
   слотам оставалось 80% ширины и они шли слишком плотно.

   Разворачиваем обе колонки на полную ширину: заголовок компактной
   плашкой сверху, слоты под ним во всю ширину. Сначала это было
   сделано только для мобильных, потом распространено на десктоп —
   там раскладка выигрывает так же (больше места слотам, меньше
   высота строки). Слоты растягиваются сами: их ширина считается
   в PHP процентом от контейнера.

   Это же касается шапки на главной — дата с подписью «сегодня»
   встают в строку, а полоса выбора дат со стрелками получает
   всю ширину.
   --------------------------------------------------------------------------- */
.timetable section > .row > .col-xs-3,
.timetable section > .row > .col-xs-9 {
	width: 100%;
	float: none;
}

/* Слева легаси даёт 32px отступа под колонку заголовка — на всю
   ширину он не нужен, слоты должны начинаться от края.
   Сверху — воздух между плашкой заголовка и рядом слотов. */
.timetable section > .row > .col-xs-9 {
	padding-left: 0;
	padding-top: 14px;
}

/* Шапка расписания на главной: заголовок «01 августа — сегодня»
   одной строкой сверху, под ним полоса дат со стрелками на всю
   ширину. Раньше заголовок занимал узкую колонку слева и текст
   растягивался на три строки, отъедая место у полосы дат. */
.quests-and-shedule .timetable .shedule-header {
	margin: 0 0 10px;
}

.quests-and-shedule .timetable .shedule-header p {
	display: flex;
	align-items: baseline;
	gap: 8px;
	text-align: left;
	line-height: 1.3;
}

.quests-and-shedule .timetable .shedule-header b {
	display: inline;
	border-bottom: 0;
	font-size: 17px;
}

.quests-and-shedule .timetable .shedule-header__rel {
	font-size: 13px;
	color: var(--qz-muted);
}

/* Легаси поднимает полосу дат на -38px, чтобы она встала справа
   от заголовка в узкой колонке. Заголовок теперь сверху отдельной
   строкой — без сброса полоса наехала бы на него. */
.quests-and-shedule .timetable .shedule-header-dates {
	margin-top: 0;
}

/* Плашка заголовка: по содержимому, а не в полстроки. Легаси задаёт
   ей width:190px в своём медиа-запросе до 1050px (dev.css) — сбрасываем,
   иначе на планшете плашка осталась бы обрезанной. */
.timetable .shedule-date {
	display: inline-block;
	width: auto;
	max-width: 100%;
	margin-left: 0;
	padding: 8px 14px;
	line-height: 18px;
	font-size: 13px;
}

/* Промежутки между днями: было 15px сверху и снизу у каждой
   строки — при полной ширине это лишний воздух */
/* Воздух между днями/квестами. 8px были подобраны, когда раскладку
   ужимали под мобильные; на всю ширину строки шли слишком плотно —
   зебра сливалась в сплошную полосу. */
.timetable section > .row {
	padding-top: 14px;
	padding-bottom: 14px;
}

/* Зазор между слотами: легаси даёт margin 0.4% (≈4px на широком
   экране) — ряд читался как сплошная лента. Горизонтальные проценты
   не трогаем, иначе поедет расчёт ширины в PHP (100/count - 0.8);
   добавляем только вертикальный отступ.
   Медиа-запрос обязателен: у мобильных свой margin 2.3% 0.8%
   (dev.css), а правило отсюда специфичнее и перебило бы его. */
@media (min-width: 1051px) {
	.timetable .quest-day-time {
		margin-top: 3px;
		margin-bottom: 3px;
	}
}

/* Вторая часть подписи дня — день недели («1 августа — суббота»)
   или параметры квеста («2-6 чел, 60 мин»). Приглушена, чтобы
   в строке читалось главное: дата или название. */
.timetable .shedule-date__dow {
	font-weight: 400;
	color: var(--qz-muted);
}

/* --- Зебра по дням/квестам ---
   Плашка с датой и её слоты лежат в соседних колонках одного .row,
   поэтому подсвечиваем строку целиком: и заголовок, и время.
   Чередование даёт границу между днями без утяжеления тёмными
   полосами и без роста высоты. Класс проставляется в шаблоне
   (см. tmpl/quests/default.php) — через :nth-child отсчёт сбился бы
   из-за шапки-переключателя дат в том же section. */
/* .row в bootstrap идёт с margin: 0 -15px — фон подсвеченной полосы
   вылезал бы за края контейнера и на узких экранах давал бы
   горизонтальный скролл. Гасим поля и возвращаем те же 15px
   паддингом. Применяем ко ВСЕМ строкам расписания, а не только
   к подсвеченным: иначе чётные и нечётные различались бы шириной. */
.timetable .shedule-row {
	margin-left: 0;
	margin-right: 0;
	padding-left: 15px;
	padding-right: 15px;
}

.timetable .shedule-row--alt {
	background: var(--qz-bg);
	border-radius: 8px;
}

/* ---------------------------------------------------------------------------
   Шаг 9: калькулятор и sticky-карточка — ТОЛЬКО ЦВЕТА И ШРИФТЫ

   🛑 Разметка калькулятора и его JS не тронуты вообще.
   Здесь нет ни одного правила, меняющего display, position, размеры
   или структуру — только цвет, шрифт и радиус. Причина: initStickySync()
   переносит узлы между полоской и sticky-карточкой, а 23 id и классы
   состояния (is-checked, is-selected, calc-service-pill--collapsed)
   держат логику расчёта.

   Старый акцент #095ea6 → --qz-blue, #ffc602 → --qz-yellow.
   ------------------------------------------------------------------------ */

/* Подписи полей */
.quest-page .calc-label,
.quest-page .field-label {
	font-family: var(--qz-font-b);
	color: var(--qz-muted);
}

/* Счётчик игроков */
.quest-page .calc-stepper {
	border-color: var(--qz-border);
	border-radius: var(--qz-radius-sm);
}

.quest-page .calc-stepper__btn {
	color: var(--qz-navy);
	font-family: var(--qz-font-b);
}

.quest-page .calc-stepper__btn:hover {
	background: var(--qz-bg);
}

.quest-page .calc-stepper__val {
	font-family: var(--qz-font-h);
	color: var(--qz-ink);
}

/* Доп. услуги — «пилюли» */
.quest-page .calc-service-pill {
	border-color: var(--qz-border);
	font-family: var(--qz-font-b);
}

.quest-page .calc-service-pill:hover {
	border-color: var(--qz-blue);
}

.quest-page .calc-service-pill.is-checked {
	background: var(--qz-navy);
	border-color: var(--qz-navy);
}

.quest-page .calc-service-pill__price {
	color: var(--qz-muted);
}

/* Промокод */
.quest-page .calc-promo-input {
	border-color: var(--qz-border);
	border-radius: var(--qz-radius-sm);
	font-family: var(--qz-font-b);
}

.quest-page .calc-promo-input:focus {
	border-color: var(--qz-blue);
}

.quest-page .calc-promo-btn {
	border-color: var(--qz-border);
	border-radius: var(--qz-radius-sm);
	color: var(--qz-navy);
	font-family: var(--qz-font-b);
	font-weight: 600;
}

.quest-page .calc-promo-btn:hover {
	border-color: var(--qz-blue);
	background: var(--qz-bg);
	color: var(--qz-blue);
}

/* Строки разбивки цены */
.quest-page .calc-total-row,
.quest-page .calc-total-key,
.quest-page .calc-total-val {
	font-family: var(--qz-font-b);
}

.quest-page .calc-total-key {
	color: var(--qz-muted);
}

.quest-page .calc-total-val {
	color: var(--qz-ink);
}

.quest-page .calc-total-val--final {
	font-family: var(--qz-font-h);
	font-weight: 700;
	color: var(--qz-navy);
}

/* Кнопки брони: основная жёлтая, вторичная — контур */
.quest-page .calc-total-btn--book,
.quest-page .quest-sticky-btn--primary {
	background: var(--qz-yellow);
	color: var(--qz-navy);
	font-family: var(--qz-font-b);
	font-weight: 600;
	border-radius: var(--qz-radius-pill);
}

.quest-page .calc-total-btn--book:hover,
.quest-page .quest-sticky-btn--primary:hover {
	background: #e6cc17;
	color: var(--qz-navy);
}

.quest-page .calc-total-btn--cart,
.quest-page .quest-sticky-btn--secondary {
	background: #fff;
	border: 1px solid var(--qz-navy);
	color: var(--qz-navy);
	font-family: var(--qz-font-b);
	font-weight: 600;
	border-radius: var(--qz-radius-pill);
}

.quest-page .calc-total-btn--cart:hover,
.quest-page .quest-sticky-btn--secondary:hover {
	background: var(--qz-navy);
	color: #fff;
}

/* Кнопка «в корзине» — подтверждённое состояние */
.quest-page .quest-sticky-btn--added {
	background: var(--qz-blue);
	border-color: var(--qz-blue);
	color: #fff;
}

/* Ссылка сброса параметров */
.quest-page .calc-reset-btn,
.quest-page .reset-link {
	font-family: var(--qz-font-b);
	color: var(--qz-muted);
}

.quest-page .calc-reset-btn:hover {
	color: var(--qz-blue);
}

/* Sticky-карточка «Ваше бронирование» */
.quest-page .quest-sticky-card {
	border-color: var(--qz-border);
	border-radius: var(--qz-radius);
	box-shadow: var(--qz-shadow);
}

.quest-page .quest-sticky-card__title {
	font-family: var(--qz-font-h);
	font-weight: 700;
	color: var(--qz-navy);
}

.quest-page .quest-sticky-label {
	font-family: var(--qz-font-b);
	color: var(--qz-muted);
}

/* Мобильный sticky-бар прокрутки */
.quest-page .quest-page__sticky-bar {
	border-color: var(--qz-border);
}

.quest-page .quest-page__sticky-bar .btn.btn-book {
	background: var(--qz-yellow);
	border-color: var(--qz-yellow);
	color: var(--qz-navy);
	font-family: var(--qz-font-b);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Шаг 10: достижения на странице квеста (заглушка)
   Разметка в default.php закомментирована — в БД нет ни таблицы наград,
   ни связи с квестами. Стили готовы заранее: появится бэкенд —
   секцию достаточно раскомментировать. См. docs/TODO.md.
   ------------------------------------------------------------------------ */
.qz-achv-card {
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius);
	padding: 20px;
	margin: 0 0 24px;
}

.qz-achv-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--qz-border);
	font-family: var(--qz-font-h);
	font-size: 16px;
	font-weight: 700;
	color: var(--qz-navy);
}

.qz-achv-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.qz-achv-item {
	text-align: center;
	font-family: var(--qz-font-b);
	font-size: 12px;
	line-height: 1.35;
	color: var(--qz-muted);
}

.qz-achv-item__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 8px;
	/* Квадрат со скруглением — см. .qz-achv-chip__icon */
	border-radius: 12px;
	background: var(--qz-bg);
	color: var(--qz-blue);
	font-size: 24px;
}

.qz-achv-item__year {
	position: absolute;
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%);
	padding: 1px 6px;
	border-radius: 6px;
	background: var(--qz-navy);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.qz-achv-grid {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 18px;
	}
}

@media (max-width: 600px) {
	.qz-achv-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Отзывы: убраны пустоты внутри карточки ---
   Высота 340px + margin-top:auto у автора прижимали его к самому низу,
   и при коротком отзыве между линией и именем зияла пустота.
   На странице квеста отзывы короче, чем на главной, поэтому там
   это особенно заметно.

   Теперь: высота ограничена сверху (max-height), а не задана жёстко,
   автор идёт сразу за текстом. Карусель всё равно не прыгает —
   слайд держит min-height. */
.testimonials-frontpage .testimonial-grid__item {
	height: auto;
	min-height: 0;
	max-height: 340px;
}

.testimonials-frontpage .testimonial__author {
	margin-top: 0;
}

/* Текст занимает столько строк, сколько есть, но не больше шести */
.testimonials-frontpage .testimonial__text {
	margin-bottom: 0;
}

/* Слайд карусели держит высоту по самой высокой карточке ряда,
   чтобы переключение не дёргало страницу */
.testimonials-frontpage .carousel-inner > .item {
	height: auto;
	min-height: 260px;
}

.testimonials-frontpage .testimonial-grid {
	align-items: start;
}

@media (max-width: 900px) {
	.testimonials-frontpage .testimonial-grid__item {
		max-height: none;
	}

	.testimonials-frontpage .carousel-inner > .item {
		min-height: 0;
	}
}

/* Аватар и имя разъезжались по краям карточки: в легаси у img стоит
   float:left, а у strong — display:block. Во flex-контексте float
   игнорируется, а блочный strong растягивается на всю оставшуюся
   ширину и отжимает имя вправо. */
.testimonials-frontpage .testimonial__author img {
	float: none;
	margin-right: 0;
	flex: 0 0 auto;
}

.testimonials-frontpage .testimonial__author strong {
	display: inline-block;
	width: auto;
	flex: 0 1 auto;
	padding-top: 0;
}

/* ===========================================================================
   ОТЗЫВЫ — единые правила для главной и страницы квеста
   Перекрывают все предыдущие правки этой секции: они накапливались
   и конфликтовали. Здесь единственный источник истины.
   ======================================================================== */

/* --- 1. Жёсткая высота карточки ---
   Максимум = 6 строк текста (после них многоточие) + блок автора.
   Именно жёсткая height, а не max-height: при max-height карточки
   с коротким текстом остаются низкими и ряд прыгает. */
.testimonials-frontpage .testimonial-grid__item {
	display: flex;
	flex-direction: column;
	height: 280px;
	min-height: 280px;
	max-height: 280px;
	overflow: hidden;
}

/* Текст: ровно 6 строк, дальше многоточие. Занимает всё свободное
   место, чтобы автор всегда стоял внизу на одной линии во всех карточках. */
.testimonials-frontpage .testimonial__text {
	flex: 1 1 auto;
	height: auto;
	max-height: calc(1.55em * 6);
	margin: 0 0 12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
}

/* --- 2. Аватар и имя всегда в строку ---
   На части карточек аватар уезжал над текстом: в легаси у img стоит
   float:left, у strong — display:block, а на странице квеста ещё и
   padding-top:26px (dev.css:750). В flex это давало разъезд. */
.testimonials-frontpage .testimonial__author {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: 10px;
	min-height: 0;
	margin: auto 0 0;
	padding-top: 12px;
}

.testimonials-frontpage .testimonial__author img {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border-radius: 50%;
	object-fit: cover;
	float: none;
	margin: 0;
}

.testimonials-frontpage .testimonial__author strong {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 0;
	font-family: var(--qz-font-b);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--qz-ink);
	/* Длинное имя не должно ломать строку */
	overflow: hidden;
	text-overflow: ellipsis;
}

.testimonials-frontpage .testimonial__author strong span {
	font-weight: 400;
	color: var(--qz-muted);
	white-space: nowrap;
}

/* Ссылка на квест (только на главной) — под блоком автора */
.testimonials-frontpage .testimonial__quest-link {
	flex: 0 0 auto;
	min-height: 0;
	margin: 8px 0 0;
	padding: 0;
}

/* --- 3. Кнопки навигации карусели ---
   Легаси рисует их картинкой ../images/arrows.png — путь ведёт
   в templates/qz/images/, а файл лежит в /images/. Кнопки были
   на месте, но невидимы. Рисуем шевроны средствами CSS. */
.testimonials-frontpage .testimonials__carousel .carousel-control,
.testimonials-frontpage .testimonials__carousel .carousel-control:active,
body.quest-page .testimonials .testimonials__carousel .carousel-control,
body.quest-page .testimonials .testimonials__carousel .carousel-control:active {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	top: auto;
	bottom: -58px;
	border-radius: 50%;
	background: #fff;
	background-image: none;
	border: 1px solid var(--qz-border);
	box-shadow: none;
	opacity: 1;
	text-shadow: none;
	filter: none;
	transition: border-color .15s ease, background .15s ease;
}

.testimonials-frontpage .testimonials__carousel .carousel-control.left,
body.quest-page .testimonials .testimonials__carousel .carousel-control.left {
	left: 50%;
	right: auto;
	margin-left: -110px;
}

.testimonials-frontpage .testimonials__carousel .carousel-control.right,
body.quest-page .testimonials .testimonials__carousel .carousel-control.right {
	left: auto;
	right: 50%;
	margin-right: -110px;
}

.testimonials-frontpage .testimonials__carousel .carousel-control:hover,
body.quest-page .testimonials .testimonials__carousel .carousel-control:hover {
	border-color: var(--qz-blue);
	background: var(--qz-bg);
}

/* Шеврон вместо картинки arrows.png */
.testimonials-frontpage .testimonials__carousel .carousel-control:before,
body.quest-page .testimonials .testimonials__carousel .carousel-control:before {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	border-left: 2px solid var(--qz-navy);
	border-bottom: 2px solid var(--qz-navy);
}

.testimonials-frontpage .testimonials__carousel .carousel-control.left:before,
body.quest-page .testimonials .testimonials__carousel .carousel-control.left:before {
	transform: rotate(45deg) translate(1px, -1px);
}

.testimonials-frontpage .testimonials__carousel .carousel-control.right:before,
body.quest-page .testimonials .testimonials__carousel .carousel-control.right:before {
	transform: rotate(-135deg) translate(1px, -1px);
}

/* Место под кнопки: они вынесены под карусель */
.testimonials-frontpage .testimonials__carousel {
	position: relative;
	padding-bottom: 12px;
	margin-bottom: 58px;
}

.testimonials-frontpage .carousel-inner > .item {
	height: auto;
	min-height: 0;
}

@media (max-width: 900px) {
	.testimonials-frontpage .testimonial-grid__item {
		height: auto;
		min-height: 240px;
		max-height: none;
	}

	.testimonials-frontpage .testimonial__text {
		flex: 0 1 auto;
	}
}

/* --- Блок автора: аватар слева, справа колонка «имя + квест» ---
   Имя, дата и ссылка на квест лежат внутри .testimonial__author вместе
   с аватаром. Прошлое правило выстраивало всё в одну строку (nowrap),
   из-за чего имя вытеснялось, а длинное название квеста обрезалось.

   Теперь аватар — отдельная колонка, остальное переносится под ним
   на новую строку. Текст центрируется по высоте аватара. */
.testimonials-frontpage .testimonial__author {
	display: grid;
	grid-template-columns: 36px 1fr;
	align-items: center;
	column-gap: 10px;
	row-gap: 2px;
	flex-wrap: wrap;
}

.testimonials-frontpage .testimonial__author img {
	grid-row: 1 / span 2;
	align-self: center;
}

.testimonials-frontpage .testimonial__author strong {
	grid-column: 2;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
}

/* Название квеста — во второй колонке под именем, переносится
   на несколько строк вместо обрезки */
.testimonials-frontpage .testimonial__quest-link {
	grid-column: 2;
	display: block;
	margin: 0;
	padding: 0;
	min-height: 0;
	font-size: 12px;
	line-height: 1.3;
	color: var(--qz-blue);
	/* Максимум две строки, дальше многоточие — чтобы не распирало карточку */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* Если ссылки на квест нет (страница квеста), имя центрируется
   по аватару — grid сам растянет его на обе строки */
.testimonials-frontpage .testimonial__author strong:last-child {
	grid-row: 1 / span 2;
	align-self: center;
}

/* Высота карточки с запасом под две строки блока автора
   (аватар 36px + имя + название квеста). На странице квеста
   ссылки на квест нет, но высоту держим одинаковую для обеих
   страниц — так карточки не прыгают при переключении слайдов. */
.testimonials-frontpage .testimonial-grid__item {
	height: 300px;
	min-height: 300px;
	max-height: 300px;
}

@media (max-width: 900px) {
	.testimonials-frontpage .testimonial-grid__item {
		height: auto;
		min-height: 250px;
		max-height: none;
	}
}

/* Имя наезжало на аватар: у аватара была задана только строка
   (grid-row), без колонки. Браузер размещал его автоматически,
   и он мог попасть во вторую колонку под текст. Фиксируем обе
   координаты явно и запрещаем сжатие. */
.testimonials-frontpage .testimonial__author img {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
	justify-self: start;
	width: 36px;
	height: 36px;
	min-width: 36px;
	float: none;
	margin: 0;
}

/* Имя и название квеста — строго во второй колонке, каждое в свою строку */
.testimonials-frontpage .testimonial__author strong {
	grid-column: 2;
	grid-row: 1;
}

.testimonials-frontpage .testimonial__quest-link {
	grid-column: 2;
	grid-row: 2;
}

/* Без ссылки на квест (страница квеста) имя занимает обе строки
   и центрируется по аватару */
.testimonials-frontpage .testimonial__author strong:last-child {
	grid-row: 1 / span 2;
}

/* --- Аватар: перебиваем легаси с нужной специфичностью ---
   Правило `.testimonials .testimonials__carousel .testimonial__author img`
   в styles.min.css имеет специфичность 0-3-1 и задаёт float:left,
   width:55px, margin-right:15px. Мои правила были 0-2-1 и проигрывали —
   аватар выпадал из grid-сетки и текст ложился на него.
   Повторяем ту же цепочку классов. */
.testimonials .testimonials__carousel .testimonial__author img {
	display: block;
	float: none;
	width: 36px;
	height: 36px;
	min-width: 36px;
	margin: 0;
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
	justify-self: start;
	border-radius: 50%;
	object-fit: cover;
}

/* Пустота между чертой под текстом и аватаром: у блока автора
   в легаси стоит верхний margin (~24px), плюс мой margin:auto
   прижимал его к низу карточки. Прижатие оставляем — оно держит
   автора на одной линии во всех карточках, но лишний отступ убираем. */
.testimonials .testimonials__carousel .testimonial__author {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: 14px;
}

/* Текст отзыва: черта под ним — это его border-bottom, поэтому
   отступ до автора формируем сверху у автора, а не снизу у текста */
.testimonials-frontpage .testimonial__text {
	margin-bottom: 0;
	padding-bottom: 14px;
}

/* Имя автора: легаси задаёт padding-top:35px (под старый аватар 55px
   с float). В grid-раскладке это опускало имя ниже аватара и создавало
   ощущение наложения. Та же цепочка классов, что у легаси. */
.testimonials .testimonials__carousel .testimonial__author strong {
	display: block;
	grid-column: 2;
	grid-row: 1;
	padding-top: 0;
	font-family: var(--qz-font-b);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--qz-ink);
}

.testimonials .testimonials__carousel .testimonial__author strong span {
	font-weight: 400;
	color: var(--qz-muted);
}

/* Без ссылки на квест имя занимает обе строки */
.testimonials .testimonials__carousel .testimonial__author strong:last-child {
	grid-row: 1 / span 2;
	align-self: center;
}

/* Название квеста — вторая строка второй колонки */
.testimonials .testimonials__carousel .testimonial__quest-link {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	padding: 0;
}

/* ===========================================================================
   ОТЗЫВЫ: убираем пустоты внутри карточки (финальная правка)

   Было две пустоты, обе — следствие моих же прошлых правил:
   1) текст с flex:1 растягивался на всё свободное место, а черта
      (border-bottom у .testimonial__text) рисовалась по низу
      растянутого блока — отсюда провал между текстом и чертой;
   2) блок автора с margin-top:auto прижимался к самому низу карточки —
      отсюда провал между чертой и аватаром.

   Решение: текст занимает ровно свою высоту (без flex-растяжки),
   черта идёт сразу под ним, автор — сразу под чертой. Свободное
   место остаётся ВНИЗУ карточки, а не разрывает содержимое.
   Одинаковая высота карточек при этом сохраняется.
   ======================================================================== */
.testimonials .testimonials__carousel .testimonial__text {
	flex: 0 0 auto;
	height: auto;
	max-height: calc(1.55em * 6);
	margin: 0;
	padding: 0 0 12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
}

.testimonials .testimonials__carousel .testimonial__author {
	/* Сразу под чертой, без прижатия к низу карточки */
	margin: 0;
	padding-top: 12px;
}

/* Высота карточки: жёсткие 300px больше не нужны — содержимое
   не растягивается, и у коротких отзывов оставался бы пустой низ.
   Выравнивание в ряду делает grid (align-items:stretch по умолчанию),
   а слайд карусели держит min-height, чтобы переключение не дёргало
   страницу. */
.testimonials-frontpage .testimonial-grid__item {
	height: auto;
	min-height: 0;
	max-height: none;
}

.testimonials-frontpage .testimonial-grid {
	align-items: stretch;
}

/* Слайд карусели: одинаковая высота, чтобы страница не прыгала
   при переключении. Считаем по максимуму: 6 строк текста + автор. */
.testimonials-frontpage .carousel-inner > .item {
	min-height: 290px;
}

@media (max-width: 900px) {
	.testimonials-frontpage .carousel-inner > .item {
		min-height: 0;
	}
}

/* Пустота между карточками и кнопками навигации: min-height:290px
   у слайда резервировал место под 6 строк текста, даже когда все
   отзывы в слайде короткие.

   Убираем резерв — слайд по содержимому. Прыжки при переключении
   компенсируем иначе: карусель Bootstrap меняет слайды абсолютным
   позиционированием во время анимации, поэтому достаточно, чтобы
   контейнер брал высоту активного слайда. */
.testimonials-frontpage .carousel-inner > .item {
	min-height: 0;
}

/* Кнопки навигации прижаты к карточкам, а не к низу секции */
.testimonials-frontpage .testimonials__carousel {
	padding-bottom: 0;
	margin-bottom: 56px;
}

.testimonials-frontpage .testimonials__carousel .carousel-control,
body.quest-page .testimonials .testimonials__carousel .carousel-control {
	bottom: -50px;
}

/* --- Черта на одном уровне во всех карточках ряда ---
   Блоку текста возвращаем фиксированную высоту в 6 строк: тогда
   border-bottom (синяя черта) выравнивается по всем карточкам,
   независимо от длины отзыва.

   Отличие от прошлой версии: фиксируем ТОЛЬКО текст. Блок автора
   идёт сразу под чертой (без margin-top:auto), а карточка не имеет
   жёсткой высоты — поэтому пустоты под автором не возникает. */
.testimonials .testimonials__carousel .testimonial__text {
	height: calc(1.55em * 6);
	max-height: calc(1.55em * 6);
	flex: 0 0 auto;
}

/* Короткий отзыв не должен растягивать строку — текст прижат к верху */
.testimonials-frontpage .testimonial__text {
	align-self: stretch;
}

@media (max-width: 900px) {
	/* На мобильной карточки идут в столбец — выравнивать не с чем,
	   пусть текст занимает свою высоту */
	.testimonials .testimonials__carousel .testimonial__text {
		height: auto;
	}
}

/* ===========================================================================
   СТРАНИЦА КОНТАКТОВ
   Данные локаций приходят из #__quest_locations (админка: com_quest →
   Локации). Разметка переписана по макету qz-page-contacts.html,
   форма обратной связи и её id сохранены полностью.
   ======================================================================== */
.qz-contacts-page .page-wrapper {
	padding: 24px 0 0;
}

/* --- Быстрые контакты --- */
.qz-quick-contacts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 28px;
}

.qz-qc {
	display: block;
	padding: 18px 16px;
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius);
	text-align: center;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.qz-qc:hover {
	border-color: var(--qz-blue);
	box-shadow: var(--qz-shadow);
	text-decoration: none;
}

.qz-qc__icon {
	display: block;
	margin: 0 auto 10px;
	color: var(--qz-blue);
}

.qz-qc__icon svg {
	width: 26px;
	height: 26px;
}

.qz-qc b {
	display: block;
	font-family: var(--qz-font-h);
	font-size: 14px;
	font-weight: 700;
	color: var(--qz-ink);
	margin-bottom: 2px;
}

.qz-qc span {
	display: block;
	font-family: var(--qz-font-b);
	font-size: 12px;
	color: var(--qz-muted);
}

/* --- Вкладки локаций --- */
.qz-loc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.qz-loc-tab {
	padding: 10px 20px;
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius-pill);
	background: #fff;
	color: var(--qz-ink);
	font-family: var(--qz-font-b);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.qz-loc-tab:hover {
	border-color: var(--qz-blue);
	color: var(--qz-blue);
}

.qz-loc-tab.is-active {
	background: var(--qz-navy);
	border-color: var(--qz-navy);
	color: #fff;
}

/* --- Карточка локации --- */
.qz-loc-card {
	display: none;
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius);
	overflow: hidden;
	margin-bottom: 28px;
}

.qz-loc-card.is-active {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.qz-loc-card__map {
	position: relative;
	min-height: 320px;
	background: var(--qz-bg);
}

/* Виджет Яндекс.Карт из админки вставляется своим кодом —
   растягиваем всё, что он создаст, на контейнер */
.qz-loc-card__map iframe,
.qz-loc-card__map > div,
.qz-loc-card__map ymaps {
	width: 100% !important;
	height: 100% !important;
	min-height: 320px;
	border: 0;
	display: block;
}

.qz-loc-card__map-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 320px;
	color: var(--qz-muted);
	font-family: var(--qz-font-b);
	font-size: 13px;
}

.qz-loc-card__info {
	padding: 24px;
}

.qz-contacts-page .qz-loc-card__info h2 {
	font-family: var(--qz-font-h);
	font-size: 18px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--qz-navy);
	text-transform: none;
	text-align: left;
	border: 0;
	margin: 0 0 8px;
	padding: 0;
}

.qz-loc-open {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: var(--qz-radius-pill);
	background: #e8f8ee;
	color: #1a7a3c;
	font-family: var(--qz-font-b);
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 16px;
}

.qz-loc-row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 14px;
	font-family: var(--qz-font-b);
	font-size: 13px;
	line-height: 1.5;
	color: var(--qz-ink);
}

.qz-loc-row__icon {
	flex: 0 0 20px;
	color: var(--qz-blue);
	margin-top: 1px;
}

.qz-loc-row__icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

.qz-loc-row a {
	color: var(--qz-ink);
	text-decoration: none;
}

.qz-loc-row a:hover {
	color: var(--qz-blue);
}

.qz-loc-note {
	color: var(--qz-muted);
	font-size: 12px;
}

.qz-loc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

/* --- Видео «как нас найти» --- */
.qz-howto-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.qz-howto-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--qz-radius);
	overflow: hidden;
	background: #12142a;
	cursor: pointer;
}

.qz-howto-video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease, opacity .2s ease;
}

.qz-howto-video:hover img {
	transform: scale(1.03);
	opacity: .85;
}

.qz-howto-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.qz-howto-video__label {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 4px 12px;
	border-radius: var(--qz-radius-pill);
	background: var(--qz-yellow);
	color: var(--qz-navy);
	font-family: var(--qz-font-b);
	font-size: 11px;
	font-weight: 700;
}

/* Кнопка play — рисуем CSS, без зависимости от картинки */
.qz-howto-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: var(--qz-shadow-lg);
	transition: background .15s ease, transform .15s ease;
}

.qz-howto-video__play:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	margin: -10px 0 0 -6px;
	border-style: solid;
	border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent var(--qz-navy);
}

.qz-howto-video:hover .qz-howto-video__play {
	background: #fff;
	transform: scale(1.06);
}

.qz-howto-video.is-playing .qz-howto-video__play,
.qz-howto-video.is-playing .qz-howto-video__label {
	display: none;
}

/* --- Две колонки: общие контакты и форма --- */
.qz-contacts-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}

.qz-block-head--left {
	max-width: none;
	margin: 0 0 20px;
	text-align: left;
}

.qz-contacts-page .qz-block-head--left h2,
.qz-contacts-page .qz-block-head--left p {
	text-align: left;
}

.qz-block-head--sub {
	margin-top: 28px;
}

.qz-contacts-page .qz-block-head--sub h2 {
	font-size: 17px;
}

/* Список общих контактов */
.qz-info-row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 18px;
}

.qz-info-row__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--qz-bg);
	color: var(--qz-navy);
}

.qz-info-row__icon svg {
	width: 19px;
	height: 19px;
}

.qz-info-row b {
	display: block;
	font-family: var(--qz-font-h);
	font-size: 15px;
	font-weight: 700;
	color: var(--qz-ink);
	margin-bottom: 2px;
}

.qz-info-row b a {
	color: inherit;
	text-decoration: none;
}

.qz-info-row b a:hover {
	color: var(--qz-blue);
}

.qz-info-row span {
	font-family: var(--qz-font-b);
	font-size: 13px;
	color: var(--qz-muted);
}

/* Соцсети */
.qz-social-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.qz-social-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 16px 7px 7px;
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius-pill);
	background: var(--qz-card);
	color: var(--qz-ink);
	font-family: var(--qz-font-b);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.qz-social-item:hover {
	border-color: var(--qz-blue);
	color: var(--qz-blue);
	text-decoration: none;
}

.qz-social-item__ic {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--qz-bg);
	color: var(--qz-navy);
}

.qz-social-item__ic svg {
	width: 16px;
	height: 16px;
}

/* --- Форма обратной связи --- */
.qz-lead-form {
	padding: 24px;
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius);
}

.qz-lead-form .form-control {
	width: 100%;
	height: auto;
	padding: 11px 14px;
	margin-bottom: 12px;
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius-sm);
	background: #fff;
	box-shadow: none;
	font-family: var(--qz-font-b);
	font-size: 14px;
	color: var(--qz-ink);
}

.qz-lead-form .form-control:focus {
	border-color: var(--qz-blue);
	box-shadow: none;
	outline: none;
}

.qz-lead-form textarea.form-control {
	min-height: 110px;
	resize: vertical;
}

.qz-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 4px 0 16px;
	font-family: var(--qz-font-b);
	font-size: 12px;
	line-height: 1.45;
	color: var(--qz-muted);
	font-weight: 400;
	cursor: pointer;
}

.qz-consent input[type="checkbox"] {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
}

.qz-consent a {
	color: var(--qz-blue);
	text-decoration: underline;
}

.qz-form-error {
	display: none;
	margin-bottom: 10px;
	font-family: var(--qz-font-b);
	font-size: 13px;
	color: #c0392b;
}

.qz-form-success {
	display: none;
	padding: 24px 0;
	text-align: center;
}

.qz-form-success__icon {
	display: block;
	font-size: 34px;
	line-height: 1;
	color: #1a7a3c;
	margin-bottom: 10px;
}

.qz-form-success h3 {
	font-family: var(--qz-font-h);
	font-size: 17px;
	font-weight: 700;
	color: #1a7a3c;
	margin: 0 0 6px;
}

.qz-form-success p {
	font-family: var(--qz-font-b);
	font-size: 14px;
	color: var(--qz-muted);
	margin: 0;
}

/* Кнопка отправки в неактивном состоянии */
.qz-lead-form .qz-btn[disabled] {
	opacity: .55;
	cursor: not-allowed;
}

@media (max-width: 991px) {
	.qz-quick-contacts {
		grid-template-columns: repeat(2, 1fr);
	}

	.qz-loc-card.is-active {
		grid-template-columns: 1fr;
	}

	.qz-loc-card__map,
	.qz-loc-card__map iframe,
	.qz-loc-card__map > div,
	.qz-loc-card__map-empty {
		min-height: 260px;
	}

	.qz-contacts-cols {
		grid-template-columns: 1fr;
	}

	.qz-howto-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.qz-loc-card__info {
		padding: 18px;
	}

	.qz-lead-form {
		padding: 18px;
	}

	.qz-loc-tab {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* ===========================================================================
   ФУТЕР — тёмный, как в макетах
   Проверено по истории: тёмного футера в коде никогда не было. В легаси
   у .footer заданы только ширина и рамки, в index.php — позиционирование.
   Макеты (главная, квест, контакты) рисуют его на --qz-navy — приводим
   к макету, разметку не трогаем.
   ======================================================================== */
.footer {
	background: var(--qz-navy);
	color: #c9d1f5;
	padding: 32px 0 0;
}

.footer .footer__inner {
	max-width: var(--qz-wrap);
	padding: 0 20px;
}

/* Разделители: в легаси светло-серые рамки — на тёмном фоне не видны */
.footer .footer__top,
.footer .footer__middle {
	border-top: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.footer .footer__top {
	padding: 0 0 16px;
}

.footer .footer__middle {
	padding: 22px 0;
}

.footer .footer__bottom {
	padding: 18px 0;
	border: 0;
}

/* Нижнее меню */
.footer .bottom-menu a {
	font-family: var(--qz-font-b);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #b7c0ec;
	text-decoration: none;
	transition: color .15s ease;
}

.footer .bottom-menu a:hover {
	color: var(--qz-yellow);
}

/* Контакты и реквизиты */
.footer .contacts-bottom,
.footer .contacts-bottom p,
.footer .contacts-bottom div,
.footer .contacts-bottom span {
	font-family: var(--qz-font-b);
	font-size: 13px;
	line-height: 1.6;
	color: #b7c0ec;
}

.footer .contacts-bottom a {
	color: #dfe4ff;
	text-decoration: none;
}

.footer .contacts-bottom a:hover {
	color: var(--qz-yellow);
	text-decoration: underline;
}

.footer .contacts-bottom .footer-block__title,
.footer .contacts-bottom h4 {
	font-family: var(--qz-font-h);
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 10px;
}

/* Иконки соцсетей: на тёмном фоне серые круги из легаси теряются */
.footer .contacts-bottom .social__link,
.footer .contacts-bottom .social_link {
	background-color: rgba(255, 255, 255, .1);
	transition: background-color .15s ease;
}

.footer .contacts-bottom .social__link:hover,
.footer .contacts-bottom .social_link:hover {
	background-color: rgba(255, 255, 255, .2);
}

/* Копирайт */
.footer .copyright {
	font-family: var(--qz-font-b);
	font-size: 12px;
	color: #8f9bd4;
	text-align: center;
}

@media (max-width: 700px) {
	.footer {
		padding-top: 24px;
	}

	.footer .footer__middle {
		padding: 18px 0;
	}
}

/* --- Правки футера по факту вёрстки ---
   1) Пустая полоса сверху: padding-top у .footer давал отступ
      до первой секции, а у неё уже есть свой.
   2) Ссылки-политики почти чёрные: приходят из mod_custom
      (id 89 «Футер. Информация») и наследуют тёмный цвет — на navy
      не читаются. Селектор должен доставать до .mod-custom.
   3) Иконки соцсетей белыми плашками: это спрайт social-links.png,
      у которого белый фон запечён в саму картинку. Полупрозрачный
      фон под ней не помогает — делаем круг и осветляем сам спрайт. */
.footer {
	padding-top: 0;
}

.footer .footer__top {
	padding: 18px 0;
}

/* Все ссылки и текст в контактах футера — светлые, включая контент
   из модулей mod_custom (реквизиты, политики, телефоны) */
.footer .contacts-bottom .mod-custom,
.footer .contacts-bottom .mod-custom *,
.footer .contacts-bottom .footer-block,
.footer .contacts-bottom .footer-block * {
	color: #b7c0ec;
}

.footer .contacts-bottom .mod-custom a,
.footer .contacts-bottom .footer-block a {
	color: #dfe4ff;
	text-decoration: none;
}

.footer .contacts-bottom .mod-custom a:hover,
.footer .contacts-bottom .footer-block a:hover {
	color: var(--qz-yellow);
	text-decoration: underline;
}

/* Иконки соцсетей: спрайт social-links.png с белым фоном, запечённым
   в саму картинку. Оставляем белый круг — он и был задуман как плашка,
   просто на светлом футере сливался с фоном. На тёмном фоне это
   читается нормально, поэтому просто скругляем и добавляем hover.
   Инвертировать нельзя: фильтр перекрасил бы и сами логотипы. */
.footer .contacts-bottom .social_link,
.footer .contacts-bottom .social__link {
	border-radius: 50%;
	opacity: .9;
	transition: opacity .15s ease, transform .15s ease;
}

.footer .contacts-bottom .social_link:hover,
.footer .contacts-bottom .social__link:hover {
	opacity: 1;
	transform: translateY(-2px);
}

/* Кнопка «наверх» на тёмном футере */
#scrolltop {
	opacity: .8;
}

#scrolltop:hover {
	opacity: 1;
}

/* --- Нижнее меню футера: высота и цвет ---
   Полоса была ~90px: собственный padding:25px 0 у .bottom-menu
   складывался с padding:18px 0 у секции. Убираем внутренний.

   Цвет #737373 из легаси (.bottom-menu__link) на navy читается плохо —
   мой селектор `.bottom-menu a` до этого класса не доставал. */
.footer .footer__top {
	padding: 10px 0;
}

.footer .bottom-menu {
	padding: 0;
}

.footer .bottom-menu .bottom-menu__link,
.footer .bottom-menu a {
	color: #c9d1f5;
	font-family: var(--qz-font-b);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .15s ease;
}

.footer .bottom-menu .bottom-menu__link:hover,
.footer .bottom-menu a:hover {
	color: var(--qz-yellow);
}

/* Реквизиты и политики в футере компактнее: у каждого <p> из модулей
   стоит margin:8px 0 (index.php), плюс line-height 1.6 — строки
   расходились почти на два интервала. */
.footer .contacts-bottom .footer-block p,
.footer .contacts-bottom .mod-custom p {
	margin: 0 0 6px;
}

.footer .contacts-bottom,
.footer .contacts-bottom p,
.footer .contacts-bottom div,
.footer .contacts-bottom span,
.footer .contacts-bottom a {
	line-height: 1.45;
}

.footer .contacts-bottom .footer-block p:last-child,
.footer .contacts-bottom .mod-custom p:last-child {
	margin-bottom: 0;
}

/* Секция с реквизитами: вертикальный отступ ужимаем следом за строками */
.footer .footer__middle {
	padding: 18px 0;
}

/* --- Hero-полоса страницы контактов ---
   Фото на всю ширину с крошками и заголовком поверх. Картинка та же,
   что легаси использовал фоном .page-wrapper-top (1280×250).

   В макете полоса нарисована как четыре плейсхолдера «фото 1..4» —
   это заготовка под будущую подборку фото, а не готовый спрайт.
   Пока выводим одно изображение целиком: на десктопе оно занимает
   всю ширину, на мобильной кадрируется по центру. Когда появятся
   реальные фото локаций — сюда встанет grid из четырёх картинок. */
.qz-page-hero {
	position: relative;
	margin: 20px 0 0;
	border-radius: var(--qz-radius);
	overflow: hidden;
	background: var(--qz-navy);
}

.qz-page-hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1280 / 250;
}

/* Затемнение слева направо: под текстом плотное, к правому краю сходит
   на нет — фото остаётся видно, но заголовок читается на любой картинке */
.qz-page-hero:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(0, 26, 114, .82) 0%,
		rgba(0, 26, 114, .45) 45%,
		rgba(0, 26, 114, .05) 100%);
	pointer-events: none;
}

.qz-page-hero__caption {
	position: absolute;
	left: 28px;
	bottom: 22px;
	z-index: 2;
	color: #fff;
}

.qz-page-hero__caption h1 {
	font-family: var(--qz-font-h);
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	color: #fff;
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
}

/* Крошки поверх фото — светлые, активный пункт жёлтый */
.qz-page-hero__caption .breadcrumb {
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 6px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.qz-page-hero__caption .breadcrumb > li,
.qz-page-hero__caption .breadcrumb > li a {
	font-family: var(--qz-font-b);
	font-size: 12px;
	color: #cfd6ff;
	text-decoration: none;
}

.qz-page-hero__caption .breadcrumb > li a:hover {
	color: #fff;
}

.qz-page-hero__caption .breadcrumb > li.active {
	color: var(--qz-yellow);
	font-weight: 600;
}

.qz-page-hero__caption .breadcrumb > li + li:before {
	content: "›";
	margin: 0 6px;
	color: rgba(255, 255, 255, .5);
}

@media (max-width: 900px) {
	.qz-page-hero {
		margin-top: 14px;
	}

	/* На мобильной полоса выше: узкая лента 1280×250 при ширине экрана
	   превратилась бы в полоску ~70px, в которой заголовок не помещается */
	.qz-page-hero img {
		aspect-ratio: 750 / 400;
	}

	.qz-page-hero__caption {
		left: 18px;
		bottom: 16px;
	}

	.qz-page-hero__caption h1 {
		font-size: 21px;
	}
}

/* Подпись hero выравниваем по левому краю контента страницы, а не
   по краю картинки: карточки ниже начинаются с отступа контейнера,
   и заголовок, прижатый к самому краю фото, с ними не совпадал.
   28px = padding контейнера (20px) + оптическая компенсация скругления. */
.qz-contacts-page .qz-page-hero__caption {
	left: 0;
	right: 0;
	padding: 0 28px;
}

@media (max-width: 900px) {
	.qz-contacts-page .qz-page-hero__caption {
		padding: 0 18px;
	}
}

/* Подпись hero: отступ от левого края картинки.

   Настоящая причина расхождения была не здесь, а в разметке:
   ширина .block__inner в styles.min.css задана селектором
   `.block .block__inner`, поэтому без родителя .block блок
   растягивался на всю ширину экрана. Обёртка добавлена в шаблон.

   Здесь остаётся только внутренний отступ подписи — такой же,
   как у контента карточек локаций. */
.qz-contacts-page .qz-page-hero__caption {
	left: 24px;
	right: 24px;
	padding: 0;
}

/* ===========================================================================
   ВНУТРЕННИЕ СТРАНИЦЫ (отзывы, акции, цены, новости)
   Общие блоки: hero-полоса, статистика, сетки карточек, «показать ещё».
   ======================================================================== */

/* Hero-полоса — те же правила, что на контактах, но для всех страниц */
.qz-inner-page .qz-page-hero__caption {
	left: 24px;
	right: 24px;
	padding: 0;
}

/* Кнопка «Показать ещё» под сетками */
.qz-load-more {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

/* --- Панель статистики (отзывы) --- */
.qz-stat-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	padding: 20px 24px;
	margin: 24px 0;
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius);
}

/* Цифры по центру блока, а не прижаты к левому краю */
.qz-stat-bar__items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 48px;
}

.qz-stat {
	text-align: center;
}

.qz-stat b {
	display: block;
	font-family: var(--qz-font-h);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--qz-navy);
	font-variant-numeric: tabular-nums;
}

.qz-stat span {
	font-family: var(--qz-font-b);
	font-size: 12px;
	color: var(--qz-muted);
}

/* --- Страница отзывов --- */
.qz-reviews-page .page-wrapper {
	padding-top: 0;
}

/* Сетка отзывов: две колонки. Скрытые пагинацией и фильтром карточки
   должны исчезать из потока — иначе grid оставит пустые ячейки. */
/* Сетка и карточки повторяют отзывы на главной и странице квеста:
   три колонки, текст обрезан до 6 строк, автор прижат к низу —
   карточки в ряду одной высоты. Полный текст показывает хинт
   (templates/qz/js/review-tooltip.js), как и в карусели главной. */
.qz-reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	/* stretch, а не start: карточки в ряду тянутся до общей высоты,
	   но высоту эту задаёт самый длинный отзыв, а не жёсткое число */
	align-items: stretch;
}

.qz-reviews-grid .testimonials__block {
	display: flex;
	flex-direction: column;
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius);
	padding: 18px;
	margin: 0;
	width: auto;
	float: none;
	/* Высота по содержимому. Фиксированные 300px (как в карусели
	   главной) оставляли пустоту под коротким отзывом — в статичной
	   сетке в этом нет нужды, а ровный ряд даёт align-items: stretch
	   у грида. */
	height: auto;
}

.qz-reviews-grid .testimonials__block.hidden,
.qz-reviews-grid .testimonials__block.review-filter-hidden {
	display: none;
}

/* Текст отзыва: обрезка до 6 строк и синяя черта снизу — ровно как
   в карточках главной. Полный текст показывает хинт по наведению
   (data-full + review-tooltip.js).

   flex: 1 1 auto обязателен: текст должен занимать всё свободное
   место карточки, иначе между ним и блоком автора зияет пустота
   (у коротких отзывов автор уезжал к нижнему краю). */
.qz-reviews-grid .testimonial__text {
	flex: 1 1 auto;
	margin: 0 0 12px;
	padding-bottom: 14px;
	border: 0;
	border-bottom: 2px solid var(--qz-blue);
	font-family: var(--qz-font-b);
	font-size: 13px;
	line-height: 1.55;
	color: var(--qz-ink);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
	/* max-height, а не height: иначе line-clamp не рисует многоточие */
	height: auto;
	max-height: calc(1.55em * 6);
	cursor: help;
}

/* Автор: аватар слева, справа имя с датой и ссылка на квест.
   margin-top:auto здесь НЕ нужен — высоту добирает сам текст
   (flex: 1 1 auto выше), а auto-отступ добавлял бы вторую распорку
   и отрывал автора от черты. */
.qz-reviews-grid .testimonial__author {
	display: grid;
	grid-template-columns: 36px 1fr;
	align-items: center;
	column-gap: 10px;
	row-gap: 2px;
	margin: 0;
	padding-top: 0;
	border: 0;
	min-height: 52px;
}

.qz-reviews-grid .testimonial__author .author {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 50%;
	object-fit: cover;
	float: none;
	margin: 0;
	align-self: center;
}

.qz-reviews-grid .testimonial__author .author-name {
	grid-column: 2;
	grid-row: 1;
	font-family: var(--qz-font-b);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--qz-ink);
	padding: 0;
}

.qz-reviews-grid .testimonial__author .author-name span {
	font-weight: 400;
	color: var(--qz-muted);
}

.qz-reviews-grid .testimonial__author .quest {
	grid-column: 2;
	grid-row: 2;
	font-family: var(--qz-font-b);
	font-size: 12px;
	line-height: 1.3;
	color: var(--qz-blue);
	text-decoration: none;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.qz-reviews-grid .testimonial__author .quest:hover {
	text-decoration: underline;
}

/* Фильтр по квестам: select на десктопе, чипы на мобильной —
   логика прежняя, меняем оформление */
.qz-review-filter {
	margin-bottom: 20px;
}

.qz-review-filter .review-filter-label {
	font-family: var(--qz-font-b);
	font-size: 13px;
	font-weight: 500;
	color: var(--qz-ink);
	margin-right: 10px;
}

.qz-review-filter .review-filter-select {
	padding: 10px 16px;
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius-pill);
	background: #fff;
	font-family: var(--qz-font-b);
	font-size: 13px;
	color: var(--qz-ink);
}

.qz-review-filter .review-filter-chip {
	border-radius: var(--qz-radius-pill);
	border: 1px solid var(--qz-border);
	background: #fff;
	font-family: var(--qz-font-b);
	font-size: 13px;
	color: var(--qz-ink);
}

.qz-review-filter .review-filter-chip.is-active {
	background: var(--qz-navy);
	border-color: var(--qz-navy);
	color: #fff;
}

/* Кнопка «Показать ещё» — по центру пустоты между сеткой и футером:
   сверху 48px, снизу 56px даёт padding секции .qz-inner-page
   .page-wrapper. Базовых 28px сверху было мало — кнопка липла к сетке. */
.qz-reviews-page .qz-load-more {
	margin-top: 48px;
}

@media (max-width: 600px) {
	.qz-reviews-page .qz-load-more {
		margin-top: 32px;
	}
}

/* Развёрнутый по тапу отзыв (тач-устройства, review-tooltip.js).
   Снимаем обрезку по строкам — текст показывается целиком.
   -webkit-line-clamp: none не сбрасывает ограничение во всех
   браузерах, поэтому возвращаем display: block. */
.qz-reviews-grid .testimonial__text.is-expanded,
.testimonials-frontpage .testimonial__text.is-expanded {
	display: block;
	max-height: none;
	height: auto;
	-webkit-line-clamp: unset;
	overflow: visible;
}

/* На тач-устройствах хинта по наведению нет — вместо него тап
   по тексту. cursor: help там неуместен, а сам текст должен
   читаться как интерактивный. */
@media (hover: none) {
	.qz-reviews-grid .testimonial__text {
		cursor: pointer;
		/* Тап не должен выделять текст вместо разворота */
		-webkit-tap-highlight-color: transparent;
	}
}

/* Промежуточный шаг: с трёх колонок на две, иначе на планшете
   карточки становятся неоправданно широкими */
@media (max-width: 1100px) {
	.qz-reviews-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.qz-reviews-grid {
		grid-template-columns: 1fr;
	}

	/* В одну колонку фиксированная высота не нужна — текст короткий
	   и карточки не выравниваются в ряд */
	.qz-reviews-grid .testimonials__block {
		height: auto;
		min-height: 0;
	}

	.qz-stat-bar {
		padding: 16px 18px;
	}

	.qz-stat b {
		font-size: 19px;
	}
}

/* --- Страница акций --- */
.qz-promo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	align-items: start;
	margin-bottom: 32px;
}

.qz-promo-page .qz-promo-card {
	display: flex;
	flex-direction: column;
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius);
	overflow: hidden;
	/* Легаси-раскладка на Bootstrap-колонках */
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
}

.qz-promo-card__media {
	aspect-ratio: 16 / 7;
	background: var(--qz-bg);
	overflow: hidden;
}

.qz-promo-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.qz-promo-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
}

.qz-promo-card__tag {
	align-self: flex-start;
	padding: 4px 12px;
	margin-bottom: 10px;
	border-radius: var(--qz-radius-pill);
	background: var(--qz-yellow);
	color: var(--qz-navy);
	font-family: var(--qz-font-b);
	font-size: 11px;
	font-weight: 700;
}

.qz-promo-page .qz-promo-card h3 {
	font-family: var(--qz-font-h);
	font-size: 16px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--qz-navy);
	text-transform: none;
	margin: 0 0 10px;
	padding: 0;
}

.qz-promo-card__text,
.qz-promo-card__text p {
	font-family: var(--qz-font-b);
	font-size: 13px;
	line-height: 1.55;
	color: var(--qz-muted);
	margin: 0 0 10px;
}

.qz-promo-card__text p:last-child {
	margin-bottom: 0;
}

.qz-promo-card__text a {
	color: var(--qz-blue);
}

.qz-promo-card__foot {
	margin-top: auto;
	padding-top: 16px;
}

/* Текст статьи под карточками (условия, список компаний) */
.qz-article {
	max-width: 860px;
	margin: 0 auto;
}

/* Легаси .articles даёт padding: 40px 0. Снизу этот отступ лишний:
   он складывался с margin последнего абзаца и отступом кнопки,
   из-за чего под текстом зияла пустота, а кнопка «Все условия»
   оказывалась прижата к футеру. */
.qz-promo-page .articles.qz-article {
	padding-bottom: 0;
}

/* Последний абзац не должен добавлять свой margin к отступу кнопки */
.qz-promo-page .qz-article > article > p:last-child {
	margin-bottom: 0;
}

/* Кнопка по центру пустоты: сверху 48px, снизу 56px даёт padding
   секции .qz-inner-page .page-wrapper. Раньше секция акций
   (.page-wrapper.page-discounts, без .block) вовсе не получала
   нижнего отступа, из-за чего кнопка упиралась в футер. */
.qz-promo-page .qz-load-more {
	margin-top: 48px;
}

@media (max-width: 600px) {
	.qz-promo-page .qz-load-more {
		margin-top: 32px;
	}
}

.qz-article p,
.qz-article li {
	font-family: var(--qz-font-b);
	font-size: 14px;
	line-height: 1.6;
	color: var(--qz-ink);
}

.qz-article h2,
.qz-article h3 {
	font-family: var(--qz-font-h);
	font-weight: 700;
	color: var(--qz-navy);
	text-transform: none;
	text-align: left;
	margin: 24px 0 10px;
}

.qz-article h2 {
	font-size: 19px;
}

.qz-article h3 {
	font-size: 16px;
}

.qz-article a {
	color: var(--qz-blue);
}

.qz-article ul,
.qz-article ol {
	padding-left: 22px;
	margin: 0 0 16px;
}

.qz-article li {
	margin-bottom: 6px;
}

@media (max-width: 900px) {
	.qz-promo-grid {
		grid-template-columns: 1fr;
	}

	.qz-promo-card__body {
		padding: 18px;
	}
}

/* --- Страница цен --- */
.qz-price-cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 24px 0 32px;
}

.qz-price-cat {
	display: block;
	padding: 18px;
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius);
	text-align: center;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.qz-price-cat:hover {
	border-color: var(--qz-blue);
	box-shadow: var(--qz-shadow);
	text-decoration: none;
}

.qz-price-cat b {
	display: block;
	margin-bottom: 6px;
	font-family: var(--qz-font-h);
	font-size: 14px;
	font-weight: 700;
	color: var(--qz-ink);
}

.qz-price-cat__from {
	font-family: var(--qz-font-h);
	font-size: 19px;
	font-weight: 700;
	color: var(--qz-navy);
}

.qz-price-cat__unit {
	font-family: var(--qz-font-b);
	font-size: 12px;
	font-weight: 400;
	color: var(--qz-muted);
}

/* Сетка дней и времени */
.qz-price-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	align-items: start;
}

.qz-price-card {
	padding: 20px;
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius);
}

.qz-price-card__day {
	margin-bottom: 14px;
	font-family: var(--qz-font-h);
	font-size: 14px;
	font-weight: 700;
	color: var(--qz-navy);
	text-align: center;
}

.qz-price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	margin-bottom: 8px;
	border-radius: var(--qz-radius-sm);
	background: var(--qz-bg);
	font-family: var(--qz-font-b);
	font-size: 12px;
	color: var(--qz-muted);
	text-decoration: none;
	transition: background .15s ease;
}

.qz-price-row:last-child {
	margin-bottom: 0;
}

.qz-price-row:hover {
	background: #eef1fb;
	text-decoration: none;
}

.qz-price-row b {
	font-family: var(--qz-font-h);
	font-size: 15px;
	font-weight: 700;
	color: var(--qz-navy);
	white-space: nowrap;
}

/* Блок перехода на акции */
.qz-discount-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	padding: 22px 26px;
	margin: 28px 0;
	border-radius: var(--qz-radius);
	background: var(--qz-yellow);
}

.qz-discount-cta h3 {
	margin: 0 0 4px;
	font-family: var(--qz-font-h);
	font-size: 17px;
	font-weight: 700;
	color: var(--qz-navy);
	text-transform: none;
}

.qz-discount-cta p {
	margin: 0;
	font-family: var(--qz-font-b);
	font-size: 13px;
	color: #5a4d00;
}

@media (max-width: 900px) {
	.qz-price-cats {
		grid-template-columns: repeat(2, 1fr);
	}

	.qz-price-grid {
		grid-template-columns: 1fr;
	}

	.qz-discount-cta {
		flex-direction: column;
		align-items: flex-start;
		padding: 18px 20px;
	}
}

/* --- Страница новостей --- */

/* Легаси-обёртка .articles из styles.min.css задаёт max-width:720px —
   это осталось от старой раскладки, где новости шли узкой текстовой
   лентой. Новая сетка карточек должна идти во всю ширину .block__inner
   (980px), поэтому ограничение снимаем — только на странице новостей,
   чтобы не задеть другие места, где .articles ещё используется. */
.qz-news-page .articles {
	max-width: none;
}

.qz-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	align-items: start;
	margin-top: 24px;
}

/* Карточки используются и в списке новостей, и в блоке «Другие
   новости» на самой статье — отсюда двойные селекторы. Привязка
   к странице нужна, чтобы перебить легаси-стили списков. */
.qz-news-page .qz-news-card,
.qz-news-article .qz-news-card {
	display: flex;
	flex-direction: column;
	background: var(--qz-card);
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius);
	overflow: hidden;
	/* Легаси-раскладка была списком <li> */
	list-style: none;
	margin: 0;
	padding: 0;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.qz-news-page .qz-news-card:hover,
.qz-news-article .qz-news-card:hover {
	border-color: #cfd5ea;
	box-shadow: var(--qz-shadow);
}

.qz-news-card__media {
	display: block;
	aspect-ratio: 460 / 300;
	background: var(--qz-bg);
	overflow: hidden;
}

.qz-news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.qz-news-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px;
}

.qz-news-page .qz-news-card__title,
.qz-news-article .qz-news-card__title {
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--qz-font-h);
	font-size: 15px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--qz-ink);
	text-transform: none;
	text-align: left;
}

.qz-news-card__title a {
	color: inherit;
	text-decoration: none;
}

.qz-news-card__title a:hover {
	color: var(--qz-blue);
}

/* Анонс: три строки, дальше многоточие — карточки в ряду
   остаются сопоставимой высоты */
.qz-news-card__intro {
	flex: 1;
	margin: 0 0 14px;
	font-family: var(--qz-font-b);
	font-size: 13px;
	line-height: 1.5;
	color: var(--qz-muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* Дата публикации из карточки убрана (см. blog_item.php), поэтому
   подвал прижимает единственную ссылку к левому краю, а не разносит
   её с датой по краям */
.qz-news-card__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
}

.qz-news-page .qz-news-card__more,
.qz-news-article .qz-news-card__more {
	font-family: var(--qz-font-b);
	font-size: 12px;
	font-weight: 600;
	color: var(--qz-blue);
	text-decoration: none;
	white-space: nowrap;
	/* Легаси .learn-more — кнопка со своим фоном, здесь ссылка */
	background: none;
	border: 0;
	padding: 0;
}

.qz-news-page .qz-news-card__more:hover,
.qz-news-article .qz-news-card__more:hover {
	color: var(--qz-navy);
	text-decoration: underline;
}

/* --- «Показать ещё» --- */

/* Карточки сверх текущей порции. Скрываем через display, чтобы они
   выпадали из грид-потока и не оставляли пустых ячеек в сетке.
   Класс снимает JS в common.js порциями по data-news-step. */
.qz-news-card.is-hidden {
	display: none;
}

.qz-news-more {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.qz-news-more__btn {
	font-family: var(--qz-font-b);
	font-size: 14px;
	font-weight: 600;
	color: var(--qz-navy);
	background: transparent;
	border: 1px solid var(--qz-navy);
	border-radius: var(--qz-radius);
	padding: 12px 32px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.qz-news-more__btn:hover {
	background: var(--qz-navy);
	color: #fff;
}

/* Пагинация Joomla */
.qz-news-pagination {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.qz-news-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.qz-news-pagination a,
.qz-news-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--qz-border);
	border-radius: var(--qz-radius-pill);
	background: #fff;
	font-family: var(--qz-font-b);
	font-size: 13px;
	color: var(--qz-ink);
	text-decoration: none;
}

.qz-news-pagination a:hover {
	border-color: var(--qz-blue);
	color: var(--qz-blue);
}

.qz-news-pagination .active span,
.qz-news-pagination .active a {
	background: var(--qz-navy);
	border-color: var(--qz-navy);
	color: #fff;
}

.qz-news-empty {
	font-family: var(--qz-font-b);
	font-size: 14px;
	color: var(--qz-muted);
	text-align: center;
	padding: 32px 0;
}

@media (max-width: 900px) {
	.qz-news-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.qz-news-grid {
		grid-template-columns: 1fr;
	}
}

/* Внутренние страницы: секция контента должна совпадать по ширине
   с hero-полосой. У .page-wrapper свои max-width 980px и padding 20px,
   и вместе с вложенным .block__inner (те же 980 + 20px) контент
   оказывался уже hero на 40px. Внешние ограничения снимаем —
   ширину задаёт .block__inner. */
/* padding-bottom — отбивка от футера. У .page-wrapper вертикальный
   padding нулевой (padding: 0 20px в styles.min.css), а легаси-отступ
   давал .articles со своими padding: 40px 0 — на новых страницах его
   нет, и контент упирался в синюю полосу футера вплотную. */
.qz-inner-page .page-wrapper.block {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Отбивка от футера — всем внутренним страницам, а не только тем,
   где у секции есть класс .block. На акциях и отзывах секция идёт
   как .page-wrapper без .block, и правило выше их не задевало:
   контент упирался в синюю полосу футера. */
.qz-inner-page .page-wrapper {
	padding-bottom: 56px;
}

@media (max-width: 600px) {
	.qz-inner-page .page-wrapper {
		padding-bottom: 36px;
	}
}

/* --- Страница отдельной новости --- */

/* Текст статьи в узкой колонке: строка на все 980px читается плохо.
   Внутри — произвольная разметка из редактора Joomla, поэтому
   типографику задаём потомкам, а не одному элементу. */
.qz-news-article .qz-article-body {
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 0 0;
	font-family: var(--qz-font-b);
	font-size: 15px;
	line-height: 1.7;
	color: var(--qz-ink);
}

.qz-news-article .qz-article-body p {
	margin: 0 0 16px;
}

.qz-news-article .qz-article-body h2,
.qz-news-article .qz-article-body h3,
.qz-news-article .qz-article-body h4 {
	margin: 28px 0 12px;
	font-family: var(--qz-font-h);
	line-height: 1.3;
	font-weight: 700;
	color: var(--qz-ink);
	/* Легаси-заголовки шли капсом и по центру */
	text-transform: none;
	text-align: left;
}

.qz-news-article .qz-article-body h2 {
	font-size: 22px;
}

.qz-news-article .qz-article-body h3 {
	font-size: 18px;
}

.qz-news-article .qz-article-body h4 {
	font-size: 16px;
}

.qz-news-article .qz-article-body ul,
.qz-news-article .qz-article-body ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.qz-news-article .qz-article-body li {
	margin-bottom: 8px;
	/* Легаси-списки сбрасывали маркеры под свою вёрстку */
	list-style: revert;
}

.qz-news-article .qz-article-body a {
	color: var(--qz-blue);
	text-decoration: underline;
}

.qz-news-article .qz-article-body a:hover {
	color: var(--qz-navy);
}

/* Картинки из редактора приходят с инлайновыми width/height —
   не даём им вылезать за колонку */
.qz-news-article .qz-article-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--qz-radius);
	margin: 8px 0 16px;
}

.qz-news-article .qz-article-body blockquote {
	margin: 0 0 16px;
	padding: 12px 18px;
	border-left: 3px solid var(--qz-yellow);
	background: var(--qz-bg);
	border-radius: 0 var(--qz-radius) var(--qz-radius) 0;
	font-style: normal;
}

.qz-news-article .qz-article-body table {
	width: 100%;
	margin: 0 0 16px;
	border-collapse: collapse;
	/* Широкие таблицы из редактора не должны распирать страницу */
	display: block;
	overflow-x: auto;
}

/* --- CTA после текста статьи --- */

/* Паттерн взят с .qz-discount-cta на странице цен, но ширина —
   по текстовой колонке, чтобы плашка не выпадала из ритма статьи */
.qz-article-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	max-width: 720px;
	margin: 36px auto 0;
	padding: 22px 26px;
	border-radius: var(--qz-radius);
	background: var(--qz-yellow);
}

.qz-article-cta__text {
	/* Не даём тексту схлопнуться в узкий столбик рядом с кнопками */
	flex: 1 1 260px;
}

.qz-article-cta h3 {
	margin: 0 0 4px;
	font-family: var(--qz-font-h);
	font-size: 17px;
	font-weight: 700;
	color: var(--qz-navy);
	text-transform: none;
	text-align: left;
}

.qz-article-cta p {
	margin: 0;
	font-family: var(--qz-font-b);
	font-size: 13px;
	line-height: 1.5;
	color: #5a4d00;
}

.qz-article-cta__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.qz-article-cta__phone {
	font-family: var(--qz-font-h);
	font-size: 15px;
	font-weight: 700;
	color: var(--qz-navy);
	text-decoration: none;
	white-space: nowrap;
}

.qz-article-cta__phone:hover {
	text-decoration: underline;
	color: var(--qz-navy);
}

@media (max-width: 600px) {
	.qz-article-cta {
		padding: 18px 20px;
	}

	/* На узком экране кнопка и телефон в строку не помещаются —
	   разводим по вертикали и растягиваем кнопку на всю ширину */
	.qz-article-cta__actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.qz-article-cta__phone {
		text-align: center;
	}
}

/* --- Блок «Другие новости» --- */
.qz-article-more {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--qz-border);
}

/* Базовый .qz-block-head центрирован и ограничен 640px — здесь
   заголовок должен идти по левому краю сетки карточек */
.qz-article-more .qz-block-head {
	max-width: none;
	margin: 0 0 4px;
	text-align: left;
}

@media (max-width: 600px) {
	.qz-news-article .qz-article-body {
		font-size: 14px;
	}

	.qz-article-more {
		margin-top: 32px;
		padding-top: 24px;
	}
}

/* ---------------------------------------------------------------------------
   Карта локации на странице квеста
   Виджет приходит из настроек локации (map_embed_wide) и растягивается
   на всю ширину — в отличие от квадратных карт на странице контактов.
   --------------------------------------------------------------------------- */
.qz-quest-map {
	padding: 32px 0 0;
}

.qz-quest-map .qz-block-head {
	margin-bottom: 16px;
}

/* Виджет Яндекс.Карт приходит со своими инлайновыми размерами —
   заставляем вписаться в контейнер и держим высоту через min-height */
.qz-quest-map__frame {
	position: relative;
	width: 100%;
	min-height: 320px;
	overflow: hidden;
}

.qz-quest-map__frame iframe,
.qz-quest-map__frame > div,
.qz-quest-map__frame ymaps {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 320px;
	border: 0;
	display: block;
}

@media (max-width: 900px) {
	.qz-quest-map {
		padding-top: 24px;
	}

	.qz-quest-map__frame,
	.qz-quest-map__frame iframe,
	.qz-quest-map__frame > div,
	.qz-quest-map__frame ymaps {
		min-height: 260px;
	}
}

/* ---------------------------------------------------------------------------
   Сложность квеста — полоса «7 из 10» (макет qz-quest-page-mockup.html).
   Выводится только при difficulty > 0: у пространств и шоу-программ
   параметра нет.
   --------------------------------------------------------------------------- */
.qz-difficulty {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 18px 0 4px;
	font-family: var(--qz-font-b);
	font-size: 13px;
	color: var(--qz-muted);
}

.qz-difficulty__track {
	flex: 1 1 120px;
	max-width: 220px;
	height: 6px;
	background: var(--qz-border);
	border-radius: 999px;
	overflow: hidden;
}

.qz-difficulty__fill {
	display: block;
	height: 100%;
	background: var(--qz-yellow);
	border-radius: 999px;
}

.qz-difficulty__value {
	font-weight: 600;
	color: var(--qz-ink);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Достижения: картинка награды вместо иконки

   В админке у награды можно задать либо CSS-класс иконки (tabler-icons),
   либо картинку. Картинка приоритетнее — вписываем её в ту же область,
   что и иконку, чтобы лента и сетка не разъезжались.

   border-radius картинке НЕ задаём: круглая маска срезала углы у бейджей,
   элементы которых доходят до краёв холста (книга и плёнка у «Лучшего
   сюжета»). object-fit: contain и так вписывает картинку целиком.
   --------------------------------------------------------------------------- */
.qz-achv-chip__icon img,
.qz-achv-item__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ---------------------------------------------------------------------------
   Подсказка у награды

   Нативный title заменён на qz-svc-hint (service-tooltip.js): title всплывал
   лишь через 1-2 секунды, а на тач-устройствах не показывался вообще.
   Значок «?» нужен как раз для мобильной: без него непонятно, что у награды
   есть описание и её вообще можно тапнуть.
   --------------------------------------------------------------------------- */
/* Значок «?» — ОТДЕЛЬНЫЙ вложенный элемент .qz-svc-hint, а не класс
   на самой плашке: в dev.css у .qz-svc-hint заданы width/height 16px
   и border-radius:50%, то есть это стиль самой иконки. Повешенный
   на обёртку, он схлопывал плашку награды до 16x16.

   Плашке нужен position:relative — значок позиционируется от неё. */
.qz-achv-chip,
.qz-achv-item {
	position: relative;
}

/* Выносим значок из потока, чтобы он не растягивал flex-плашку
   в ленте и не сдвигал текст в grid-сетке на странице квеста */
.qz-achv-chip__hint,
.qz-achv-item__hint {
	position: absolute;
	z-index: 2;
	background: var(--qz-border);
	color: var(--qz-muted);
}

.qz-achv-chip__hint:hover,
.qz-achv-item__hint:hover {
	background: var(--qz-navy);
	color: #fff;
}

/* В ленте на главной плашка горизонтальная — знак в правом верхнем углу.
   Базовый padding-right у плашки (18px) рассчитан на текст без иконки,
   поэтому резервируем поле под значок отступом у самого текста: «?»
   иначе ложится на заголовок награды, который длиннее подписи.
   Отступ на .qz-achv-chip__text, а не через :has() у плашки —
   :has() не работает в старых браузерах, а лишние 14px справа
   у плашки без значка незаметны. */
.qz-achv-chip__text {
	padding-right: 14px;
}

.qz-achv-chip__hint {
	top: 5px;
	right: 6px;
}

/* В сетке на странице квеста — у правого края карточки */
.qz-achv-item__hint {
	top: 0;
	right: 4px;
}

/* Тач: значок крупнее — по нему целятся пальцем */
@media (hover: none) {
	.qz-achv-chip__hint,
	.qz-achv-item__hint {
		width: 18px;
		height: 18px;
		font-size: 12px;
	}
}

/* ---------------------------------------------------------------------------
   Расписание: цена на линии — без белой подложки

   Легаси разрывает линию под текстом белым фоном у .quest-price span
   и белыми «заглушками» :before/:after по краям (фоновые картинки
   price_start.png / price_end.png, которых в templates/qz/images/ нет —
   оставались просто белые прямоугольники и два 404).

   На белой строке это незаметно, но на подсвеченной строке зебры
   белые пятна бросаются в глаза. Наследуем фон родителя вместо
   жёсткого #fff — работает и на белой, и на серой строке.
   --------------------------------------------------------------------------- */
/* Подложка нужна, чтобы линия не шла сквозь текст, но жёсткий #fff
   на подсвеченной строке зебры выглядит белым пятном. Задаём фон
   строки явно: inherit тут не годится — у самой .quest-price фона
   нет, и подложка стала бы прозрачной.
   background-color, а не background: у :before/:after фоном идёт
   картинка конца линии (price_start/price_end.png), её сохраняем. */
.timetable .shedule-row--alt .quest-price span,
.timetable .shedule-row--alt .quest-price:before,
.timetable .shedule-row--alt .quest-price:after {
	background-color: var(--qz-bg);
}

/* ---------------------------------------------------------------------------
   Контакты на главной: компактный мобильный вид

   Было: адреса блоками по 200px с иконкой СВЕРХУ (::before 40x40) и соцсети
   по 132px с padding-top:50px под спрайт. На узком экране всё вставало
   в один столбик, и каждый пункт занимал ~90px высоты — блок растягивался
   на два экрана.

   Стало: адреса — строки «иконка слева + текст», соцсети — сетка 3 в ряд.
   Иконки рисуются спрайтом contacts-icos.png с ФИКСИРОВАННЫМИ позициями
   (см. правила с .contacts.contacts-frontpage выше), поэтому размеры
   40x40 у адресов и 50px-полосу у соцсетей не трогаем — сдвигаем только
   раскладку вокруг них, иначе иконки поедут.

   Цепочка .contacts.contacts-frontpage повторяет специфичность легаси —
   с одинарным классом правила не перебивают базовые.
   ------------------------------------------------------------------------ */
@media (max-width: 600px) {
	.contacts.contacts-frontpage {
		padding: 24px 0;
	}

	/* --- Адреса: иконка слева, текст справа --- */
	.contacts.contacts-frontpage .contacts__addresses {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-bottom: 18px;
	}

	/* padding сокращённой записью гасит легаси `padding:10px 10px 10px 60px`
	   (отступ под иконку, стоявшую слева абсолютом в старом макете) */
	.contacts.contacts-frontpage .contacts__addresses-block {
		display: flex;
		align-items: center;
		gap: 12px;
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 10px 14px;
		box-sizing: border-box;
		background: var(--qz-card);
		border: 1px solid var(--qz-border);
		border-radius: 12px;
		text-align: left;
		font-size: 14px;
		line-height: 1.35;
	}

	/* Иконку из ::before ужимаем до 32px и ставим в строку.
	   Спрайт масштабируем background-size: позиции в нём заданы
	   для 40px-сетки, поэтому пропорционально уменьшаем и сдвиг. */
	/* Иконку НЕ масштабируем — оставляем натуральные 40x40.
	   Спрайт свёрстан так, что символы начинаются с y=19 и идут
	   с шагом 70px (позиции -19/-89/-159 заданы выше по файлу).
	   При background-size:32px все эти сдвиги становятся дробными
	   (-15.2, -71.2, -127.2) и иконка дрожит на полпикселя.
	   Выигрыш в 8px высоты того не стоит: меняем только раскладку —
	   иконка встаёт слева от текста, а не над ним. */
	.contacts.contacts-frontpage .contacts__addresses-block:before {
		margin: 0;
		flex: none;
	}

	/* Ссылка внутри плашки — во всю ширину, чтобы попадать пальцем */
	.contacts.contacts-frontpage .contacts__addresses-block a {
		display: block;
		color: inherit;
		text-decoration: none;
	}

	/* --- Соцсети: сетка 3 в ряд вместо столбика --- */
	.contacts.contacts-frontpage .contacts__social {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
		padding-bottom: 0;
	}

	/* Легаси-клиффикс (styles.min.css) вешает на .contacts__social
	   псевдоэлементы :before/:after с display:table. В grid они
	   становятся полноценными ячейками и сдвигают первую ссылку,
	   ломая ряд. Для flex/grid клиффикс не нужен — убираем. */
	.contacts.contacts-frontpage .contacts__social:before,
	.contacts.contacts-frontpage .contacts__social:after {
		display: none;
	}

	/* Тот же клиффикс висит и на блоке адресов, который стал flex */
	.contacts.contacts-frontpage .contacts__addresses:before,
	.contacts.contacts-frontpage .contacts__addresses:after {
		display: none;
	}

	/* Иконка остаётся сверху (спрайт в background с отступом padding-top),
	   но полосу сжимаем с 50px до 42px и уменьшаем подпись —
	   пять ссылок укладываются в две строки вместо пяти. */
	/* padding задаём в сокращённой записи, чтобы погасить легаси
	   `.contacts__social a { padding: 10px 10px 10px 60px }`: левый
	   отступ 60px рассчитан на иконку слева и в узкой колонке
	   выталкивал текст за край. box-sizing и min-width:0 не дают
	   ячейке grid распираться шире своей доли. */
	/* Спрайт тоже не масштабируем (см. комментарий у адресов): позиции
	   -439/-509/-579/-649/-717 заданы выше по файлу и при уменьшении
	   стали бы дробными. Иконка остаётся 40px сверху — меняем только
	   ширину ячейки и подпись под ней.

	   padding сокращённой записью гасит легаси
	   `.contacts__social a { padding: 10px 10px 10px 60px }`: левый
	   отступ 60px рассчитан на иконку слева и в узкой колонке
	   выталкивал текст за край. Верхние 46px — полоса под иконку. */
	.contacts.contacts-frontpage .contacts__social > a {
		width: auto;
		min-width: 0;
		height: auto;
		margin: 0;
		padding: 46px 4px 8px;
		box-sizing: border-box;
		border: 1px solid var(--qz-border);
		border-radius: 12px;
		font-size: 11px;
		line-height: 1.2;
		overflow-wrap: anywhere;
	}
}

/* ---------------------------------------------------------------------------
   Контакты на главной: телефон и адреса стали ссылками

   Раньше это был текст в <span>: телефон нельзя было набрать с мобильной,
   адрес никуда не вёл. Теперь телефон — tel:, адреса ведут на /contacts
   с картами. Внешне ссылки не должны отличаться от прежнего текста,
   поэтому наследуем цвет и убираем подчёркивание; обратная связь —
   только по наведению и нажатию.
   ------------------------------------------------------------------------ */
.contacts.contacts-frontpage .contacts__addresses-block a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s;
}

.contacts.contacts-frontpage .contacts__addresses-block a:hover,
.contacts.contacts-frontpage .contacts__addresses-block a:focus-visible {
	color: var(--qz-blue);
}

@media (max-width: 600px) {
	/* Плашка целиком — зона нажатия: попадать пальцем в текст телефона
	   неудобно, а ссылка внутри flex-строки занимает только свою ширину. */
	.contacts.contacts-frontpage .contacts__addresses-block a {
		display: block;
		flex: 1;
		min-width: 0;
		padding: 4px 0;
	}

	.contacts.contacts-frontpage .contacts__addresses-block a:active {
		color: var(--qz-blue);
	}
}

/* ---------------------------------------------------------------------------
   Страница квеста: адрес прокручивает к карте

   Адрес в шапке карточки — ссылка на #quest-map внизу страницы,
   с классом .scroll-to: плавную прокрутку делает jQuery-обработчик
   из common.js, тот же, что у кнопок «Забронировать» на этой странице.

   Ни scroll-behavior, ни scroll-margin-top здесь не нужны: при
   JS-анимации ($('html,body').animate) браузерная прокрутка не
   участвует, и эти свойства не применяются. Отступ над картой
   уже даёт padding-top:32px у самой секции.
   ------------------------------------------------------------------------ */
/* Пунктир под адресом — намёк, что это не просто текст. У телефона
   рядом такого нет: там и так понятно, что номер нажимают. */
.qz-quest-meta .quest-info__value a.scroll-to {
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	text-decoration-color: var(--qz-border);
}

.qz-quest-meta .quest-info__value a.scroll-to:hover {
	text-decoration-color: currentColor;
}

/* ============================================================
   Квест «в разработке» (state 2 или 3)
   ------------------------------------------------------------
   Как на старом сайте: фото размыто, поверх замок и дата
   открытия из soon_text. Легаси-правила .quest-block-locked
   в dev.css рассчитаны на прежнюю вёрстку (абсолютные top в px
   от края всей карточки) — здесь перекрываем их под новую
   карточку, где фото лежит в .qz-quest-card__media.
   ============================================================ */

/* Блюр самого фото. Масштаб 1.06 прячет прозрачные края,
   которые даёт blur() у границ картинки */
.qz-quest-card.quest-block-locked .qz-quest-card__media img {
	filter: blur(4px);
	transform: scale(1.06);
}

/* Ховер-зум для неактивных карточек не нужен */
.qz-quest-card.quest-block-locked:hover .qz-quest-card__media img {
	transform: scale(1.06);
}

/* Затемнение, чтобы белый текст читался на любом фото */
.qz-quest-card.quest-block-locked .qz-quest-card__media:after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 26, 114, .45);
	pointer-events: none;
	z-index: 1;
}

/* Замок + подпись: колонка по центру фото */
.qz-quest-card__soon {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px;
	text-align: center;
	pointer-events: none;
}

.qz-quest-card__soon:before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	background: url(../images/locked.png) no-repeat center / contain;
	opacity: .9;
	flex: none;
}

/* Перебиваем легаси .anons: там position:absolute и top в px,
   из-за чего подпись уезжала за пределы карточки.
   Селектор с .qz-quest-card обязателен — легаси-правило
   `.quests-and-shedule .quest-block-locked .anons` (0,3,0)
   специфичнее короткого варианта и перебило бы его */
.qz-quest-card .qz-quest-card__soon .anons,
.quests-and-shedule .qz-quest-card .qz-quest-card__soon .anons {
	position: static;
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	font-family: var(--qz-font-h);
	font-size: 15px;
	line-height: 1.3;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

/* Легаси-замок :before от .quest-block-locked — он позиционирован
   от края всей карточки и в новой вёрстке висит поверх текста */
.qz-quest-card.quest-block-locked:before {
	content: none;
}

@media (max-width: 600px) {
	.qz-quest-card__soon:before {
		width: 38px;
		height: 38px;
	}

	.qz-quest-card__soon .anons {
		font-size: 13px;
	}
}

/* ── Доступность: кнопка «Читать все отзывы» (2026-08-03) ──────────────
   Lighthouse: «Цвета фона и переднего плана недостаточно контрастны».
   Кнопка использовала .btn-default из bootstrap (#333 на #fff), но на
   фоне секции --qz-bg (#f6f7fb) в состоянии hover/focus bootstrap
   переключает фон на #e6e6e6, и контраст падает ниже нормы.

   Задаём явные цвета фирменной палитры: тёмно-синий текст на белом
   (контраст ~14:1) и инверсия на hover — вместо серого на сером.
   Селектор с двумя классами перебивает .btn-default без !important. */
.testimonials-frontpage .testimonials__all-link .btn.btn-default {
	color: var(--qz-navy);
	background-color: var(--qz-card);
	border-color: var(--qz-navy);
	font-weight: 600;
}

.testimonials-frontpage .testimonials__all-link .btn.btn-default:hover,
.testimonials-frontpage .testimonials__all-link .btn.btn-default:focus,
.testimonials-frontpage .testimonials__all-link .btn.btn-default:active {
	color: #fff;
	background-color: var(--qz-navy);
	border-color: var(--qz-navy);
}

/* ── Доступность: зоны нажатия в футере (2026-08-03) ──────────────────
   Lighthouse: «Области прикосновения и расстояние между ними
   недостаточно большие» — ссылки info@qz.by и пункты нижнего меню
   (ОТЗЫВЫ / НОВОСТИ / АКЦИИ / ЦЕНЫ) были ниже рекомендуемых 24 CSS-px.

   Наращиваем высоту вертикальным padding, а не min-height: строчные
   <a> в <li> не реагируют на min-height без смены display, а менять
   display у легаси-меню рискованно — поплывут отступы. padding
   увеличивает кликабельную площадь, не трогая поток. */
.footer .bottom-menu .bottom-menu__link,
.footer .bottom-menu a,
.footer .contact-footer {
	display: inline-block;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* info@qz.by живёт НЕ в футере, а в секции «Контакты» на странице
   (.contacts__email внутри .contacts-frontpage) — первая версия этого
   фикса целилась в .footer и до ссылки не доставала. Класса
   contact-footer у неё тоже нет, поэтому селектор по блоку. */
.contacts.contacts-frontpage .contacts__email a,
.contacts.contacts-frontpage .contacts__addresses-block a[href^="mailto:"],
.contacts.contacts-frontpage .contacts__addresses-block a[href^="tel:"] {
	display: inline-block;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* Разводим соседние пункты нижнего меню: Lighthouse считает не только
   размер зоны, но и расстояние между целями. */
.footer .bottom-menu li {
	margin-bottom: 2px;
}