/*
Theme Name: Миргородкурорт
Theme URI: https://mirgorodkurort.ua
Author: ПрАТ «Миргородкурорт»
Description: Індивідуальна тема санаторно-курортного комплексу «Миргородкурорт». Без конструкторів сторінок: розмітка, стилі й скрипти написані під цей проєкт. Базовий кегль 17 px, контраст не нижче 4,5:1, повна робота з клавіатури — аудиторія сайту це люди 45–75 років, і доступність тут вимога приймання, а не побажання.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.2
License: GNU General Public License v2 or later
Text Domain: mirgorodkurort
*/

/* ═══════════════════════════════════════════════════════════
   1. ЗМІННІ
   Кольори взяті з погодженого прототипу. --ink-3 затемнено
   проти прототипу (#6d827a → #55695f): на білому тлі старе
   значення давало 3,9:1 і не проходило рівень AA.

   Зелений замінено на бірюзу: попередній відтінок разом із
   темними смугами читався як гнітючий. Насичена бірюза лишилася
   кнопкам і акцентам, великі блоки стали світлими — див. розділи
   «Факти», «Заклик до дії» та «Підвал».
   ═══════════════════════════════════════════════════════════ */

:root {
	--ink: #12211c;
	--ink-2: #40524b;
	--ink-3: #55695f;
	--bg: #fff;
	--bg-2: #f2f7f7;
	--line: #dde9e8;
	--brand: #14746e;
	--brand-d: #0e5b57;
	--brand-l: #e3f2f0;
	--accent: #c8a24a;
	--warn: #8a2424;
	--warn-bg: #fcf0f1;
	--r: 14px;
	--max: 1180px;
	--e: cubic-bezier(0.22, 0.61, 0.36, 1);
	/* Пом'якшення для повільного наїзду фото: рух починається майже непомітно
	   й так само згасає, без ривка на старті, який давало --e. */
	--e-photo: cubic-bezier(0.33, 0, 0.2, 1);
	--tap: 44px;
}

/* ═══════════════════════════════════════════════════════════
   2. ОСНОВА
   ═══════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font: 400 17px/1.65 Georgia, "Times New Roman", serif;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
.ui {
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--brand);
}

img {
	max-width: 100%;
	height: auto;
}

.wrap {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 24px;
}

section {
	padding: 92px 0;
}

/* Видимий фокус — обов'язкова умова роботи з клавіатури. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Перехід одразу до контенту — перше, що знаходить клавіатура. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 14px 22px;
	background: var(--brand-d);
	color: #fff;
	font: 600 17px/1 -apple-system, "Segoe UI", sans-serif;
	text-decoration: none;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ═══════════════════════════════════════════════════════════
   3. КНОПКИ Й ПОСИЛАННЯ
   Зона натискання не менша за 44 px — вимога п. 6.4 ТЗ.
   ═══════════════════════════════════════════════════════════ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap);
	position: relative;
	background: var(--brand);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 13px 22px;
	font: 600 17px/1 -apple-system, "Segoe UI", sans-serif;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.25s var(--e), box-shadow 0.25s var(--e), background 0.25s var(--e);
}

.btn:hover {
	background: var(--brand-d);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(22, 77, 57, 0.28);
	color: #fff;
}

.btn:active {
	transform: translateY(0);
}

.btn.ghost {
	background: transparent;
	color: var(--brand);
	border: 1.5px solid var(--brand);
	box-shadow: none;
}

.btn.ghost:hover {
	background: var(--brand-l);
	color: var(--brand-d);
	box-shadow: none;
}

/* Компактна кнопка лишається компактною лише за рахунок відступів:
   висота зони натискання не зменшується нижче 44 px навіть тут. */
.btn.small {
	min-height: var(--tap);
	padding: 10px 16px;
	font-size: 17px;
}

.lnk {
	color: var(--brand);
	text-decoration: none;
	/* Посилання-стрілка всередині картки теж має зону натискання 44 px:
	   інакше на планшеті в нього не влучає палець. */
	min-height: var(--tap);
	font: 600 17px/1.4 -apple-system, "Segoe UI", sans-serif;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.lnk:hover {
	text-decoration: underline;
}

.lnk i {
	font-style: normal;
	display: inline-block;
	transition: transform 0.3s var(--e);
}

.lnk:hover i {
	transform: translateX(5px);
}

/* ═══════════════════════════════════════════════════════════
   4. СМУГА ПРОГРЕСУ Й ШАПКА
   ═══════════════════════════════════════════════════════════ */

.bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--accent);
	z-index: 60;
	transition: width 0.12s linear;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.35s var(--e), box-shadow 0.35s var(--e), background 0.35s var(--e);
}

.site-header.on {
	border-color: var(--line);
	box-shadow: 0 6px 24px rgba(20, 60, 45, 0.07);
	background: rgba(255, 255, 255, 0.97);
}

/* Шапка ширша за колонку тексту: у неї треба вмістити логотип, меню,
   телефон і кнопку заявки, а 1180 px на це не вистачає — меню переносилося
   на другий рядок, а кнопка вилазила за край екрана. */
.site-header .wrap {
	max-width: 1560px;
}

.nav {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 20px;
	min-height: 86px;
	transition: min-height 0.35s var(--e);
}

.site-header.on .nav {
	min-height: 66px;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: var(--tap);
	font: 700 20px/1 -apple-system, "Segoe UI", sans-serif;
	letter-spacing: -0.02em;
	color: var(--brand-d);
	white-space: nowrap;
	text-decoration: none;
	/* Не стискатися. Шапка — флекс-ряд, і за замовчуванням браузер має
	   право звузити логотип, коли решті бракує місця. Разом із nowrap це
	   означає не перенесення, а виліз: підпис «Санаторно-курортний
	   комплекс» ішов поверх першого пункту меню. */
	flex: 0 0 auto;
}

/* Знак курорту вертикальний, тож задаємо висоту, а ширину лишаємо
   пропорційній: якщо колись замінять знак іншої форми, шапка не поїде. */
.logo-mark {
	display: block;
	height: 46px;
	width: auto;
	flex: none;
	transition: height 0.35s var(--e);
}

.site-header.on .logo-mark {
	height: 38px;
}

.logo-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Підпис під назвою — пояснення, а не другий заголовок: 12 px проти
   20 px у самої назви. Великі літери й розріджені проміжки лишаються,
   на них він і тримається при такому кеглі. */
.logo-sub {
	display: block;
	font: 400 12px/1.4 -apple-system, sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-top: 3px;
}

.menu {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	margin-left: auto;
	list-style: none;
	margin-block: 0;
	padding: 0;
	font: 500 17px/1 -apple-system, "Segoe UI", sans-serif;
}

.menu > li > a {
	white-space: nowrap;
}

.menu li {
	position: relative;
}

.menu a {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--tap);
	text-decoration: none;
	color: var(--ink-2);
	padding: 8px 2px;
}

.menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 6px;
	height: 2px;
	background: var(--brand);
	transition: right 0.3s var(--e);
}

.menu a:hover,
.menu .current-menu-item > a,
.menu .current_page_item > a {
	color: var(--brand);
}

.menu a:hover::after,
.menu .current-menu-item > a::after,
.menu .current_page_item > a::after {
	right: 0;
}

/* Підменю: розкривається і мишкою, і клавіатурою. */
.menu .sub-menu {
	position: absolute;
	left: -14px;
	top: 100%;
	min-width: 250px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(20, 70, 50, 0.13);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.25s var(--e), transform 0.25s var(--e), visibility 0.25s;
}

.menu li:hover > .sub-menu,
.menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.menu .sub-menu a {
	padding: 10px 18px;
	font-size: 17px;
}

.menu .sub-menu a::after {
	display: none;
}

.menu .sub-menu a:hover {
	background: var(--brand-l);
}

.header-phone {
	font: 600 18px/1 -apple-system, sans-serif;
	color: var(--brand-d);
	text-decoration: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
}

.header-phone:hover {
	text-decoration: underline;
}

.lang-switch {
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	font: 600 16px/1 -apple-system, sans-serif;
}

.lang-switch a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 8px;
	text-decoration: none;
	color: var(--ink-3);
	border-radius: 6px;
}

.lang-switch .is-active a {
	background: var(--brand-l);
	color: var(--brand-d);
}

/* Мова без перекладу — неактивна, а не посилання в нікуди (п. 6.3 ТЗ). */
.lang-switch .is-missing span {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 8px;
	color: #9aa8a1;
	cursor: not-allowed;
}

/* Мобільне меню на <details>: працює без JavaScript. */
.menu-toggle {
	display: none;
	margin-left: auto;
}

.menu-toggle > summary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	border: 1.5px solid var(--line);
	border-radius: 10px;
	cursor: pointer;
	list-style: none;
	color: var(--brand-d);
}

.menu-toggle > summary::-webkit-details-marker {
	display: none;
}

.menu-toggle[open] > summary {
	background: var(--brand-l);
	border-color: var(--brand);
}

.menu-toggle .mobile-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #fff;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 14px 34px rgba(20, 70, 50, 0.13);
	padding: 12px 24px 22px;
	max-height: 74vh;
	overflow-y: auto;
}

.menu-toggle .mobile-panel .menu {
	display: block;
	margin-left: 0;
}

.menu-toggle .mobile-panel .menu a {
	border-bottom: 1px solid var(--line);
	font-size: 17px;
}

.menu-toggle .mobile-panel .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	border: 0;
	box-shadow: none;
	padding: 0 0 0 16px;
	min-width: 0;
}

/* ═══════════════════════════════════════════════════════════
   5. ПЕРШИЙ ЕКРАН
   ═══════════════════════════════════════════════════════════ */

/* Перший екран: знімок на всю ширину, текст поверх нього. Це мінімум,
   а не жорстка висота: якщо текст не вміщається, смуга росте під нього,
   інакше заголовок і кнопки вилізли б за межі знімка. Чинний текст
   займає 377 px, тож на широкому екрані працює саме задане значення. */
.hero {
	position: relative;
	min-height: 520px;
	display: flex;
	align-items: center;
	overflow: hidden;
	color: var(--ink);
	background: var(--brand-l);
	/* Відступи задає .hero-in; спільне правило для секцій додало б ще
	   по 92 px і роздуло перший екран. */
	padding: 0;
}

.hero-bg {
	position: absolute;
	inset: -2%;
	animation: kb 30s ease-in-out infinite alternate;
	will-change: transform;
}

/* Два шари одного розміру: нижній показує поточний кадр, верхній проявляється
   з наступним. Масштаб задає спільний контейнер, тому зміна знімка
   не супроводжується стрибком розміру. */
.hero-frame {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.hero-frame--next {
	opacity: 0;
	transition: opacity 1.8s ease-in-out;
}

.hero-frame--next.is-in {
	opacity: 1;
}

@keyframes kb {
	from {
		transform: scale(1) translate(0, 0);
	}
	to {
		transform: scale(1.09) translate(-1.2%, -1%);
	}
}

/* Підкладка під текст: без неї літери лягають просто на фото й читаються
   як доведеться. Раніше знімок для цього гасили темним — тепер навпаки
   висвітлюють, тому текст на ній темний. Праворуч пелена сходить нанівець,
   і знімок видно чистим. */
.hero-veil {
	position: absolute;
	inset: 0;
	/* Щільна частина пелени тягнеться до 68% ширини. Це не запас на око:
	   на вужчих екранах рядки переносяться пізніше й текст сягає далі
	   праворуч — на 1100 px його край уже на 64%. Якби пелена починала
	   світлішати раніше, останні рядки лягали б майже на чисте фото.

	   Щільність 0,62 — це межа, за якою текст перестає проходити рівень AA
	   на темному знімку (5,5:1 у найгіршому випадку). Саме заради неї весь
	   текст першого екрана переведено на найтемніший колір: із приглушеним
	   пелену довелося б тримати на 0,8 і фото було б майже не видно. */
	background: linear-gradient(
		90deg,
		rgba(227, 242, 240, 0.66) 0%,
		rgba(227, 242, 240, 0.62) 68%,
		rgba(227, 242, 240, 0.18) 88%,
		rgba(227, 242, 240, 0) 100%
	);
}

/* Ширину обмежують самі рядки, а не контейнер: .hero-in — це .wrap, і якби
   звузити його, колонка тексту поїхала б до центру екрана замість лівого краю. */
.hero-in {
	position: relative;
	padding: 34px 0;
	/* .hero — флекс-контейнер, і без цього рядка колонка звужується
	   до ширини найдовшого рядка та відʼїжджає на середину екрана. */
	width: 100%;
}

.eyebrow {
	font: 600 15px/1 -apple-system, sans-serif;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: 20px;
}

/* Смуга стала вдвічі нижчою, тож заголовок і відступи підтягнуто під неї:
   з колишніми 58 px текст просто не влазив у 320. */
.hero h1 {
	font-size: clamp(30px, 3.2vw, 42px);
	margin-bottom: 16px;
	max-width: 700px;
}

/* Увесь текст першого екрана — найтемнішим кольором. Він лежить не на рівному
   тлі, а на фотографії, і приглушений сірий тут коштував би вдвічі щільнішої
   пелени. Надзаголовок теж: бірюза на просвіченому знімку дає 2,1:1. */
.hero p,
.hero .eyebrow {
	color: var(--ink);
}

.hero p {
	font-size: 18px;
	max-width: 660px;
}

.hero-cta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 24px;
}

/* Друга кнопка на першому екрані заливається майже білим, а не лишається
   контуром: контур бірюзою на просвіченому фото читався б як 1,9:1,
   і жоден відтінок цього не рятує — рятує власне тло під написом. */
.hero .btn.ghost {
	background: rgba(255, 255, 255, 0.94);
	border-color: rgba(255, 255, 255, 0.94);
	color: var(--brand-d);
}

.hero .btn.ghost:hover {
	background: #fff;
	border-color: #fff;
	color: var(--brand-d);
}

/* Поява тексту з затримкою: веде око порядком читання. */
.up {
	opacity: 0;
	transform: translateY(22px);
	animation: up 0.9s var(--e) forwards;
	animation-delay: var(--d, 0ms);
}

@keyframes up {
	to {
		opacity: 1;
		transform: none;
	}
}

.scroll-hint {
	position: absolute;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	width: 24px;
	height: 38px;
	/* Перший екран став світлим, тож підказка про прокручування
	   перефарбована з білої на темну — вона лежить на просвіченому фото. */
	border: 2px solid rgba(18, 33, 28, 0.5);
	border-radius: 13px;
}

.scroll-hint::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 8px;
	width: 3px;
	height: 7px;
	margin-left: -1.5px;
	background: rgba(14, 116, 110, 0.8);
	border-radius: 2px;
	animation: wheel 1.9s var(--e) infinite;
}

@keyframes wheel {
	0% {
		opacity: 0;
		transform: translateY(0);
	}
	25% {
		opacity: 1;
	}
	70% {
		opacity: 0;
		transform: translateY(12px);
	}
	100% {
		opacity: 0;
	}
}

/* ═══════════════════════════════════════════════════════════
   6. ФАКТИ Й ЗАГОЛОВКИ СЕКЦІЙ
   ═══════════════════════════════════════════════════════════ */

.facts {
	background: var(--brand-l);
	color: var(--ink);
	padding: 0;
}

.facts .wrap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	padding: 42px 24px;
}

.fact b {
	display: block;
	font: 700 36px/1 -apple-system, sans-serif;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--brand-d);
}

.fact span {
	display: block;
	font-size: 17px;
	color: var(--ink-2);
	margin-top: 9px;
	font-family: -apple-system, sans-serif;
}

.sec-head {
	max-width: 660px;
	margin-bottom: 46px;
}

.sec-head .eyebrow {
	color: var(--brand);
	margin-bottom: 14px;
}

.sec-head h2 {
	font-size: clamp(28px, 3.4vw, 40px);
	margin-bottom: 14px;
}

.sec-head p {
	color: var(--ink-2);
}

.more {
	margin-top: 36px;
	text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   7. ПОЯВА БЛОКІВ ПРИ ПРОКРУЧУВАННІ
   ═══════════════════════════════════════════════════════════ */

.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.75s var(--e) var(--d, 0ms), transform 0.75s var(--e) var(--d, 0ms);
}

.reveal.in {
	opacity: 1;
	transform: none;
}

/* Без JavaScript блоки мають бути видимі одразу. */
.no-js .reveal {
	opacity: 1;
	transform: none;
}

/* ═══════════════════════════════════════════════════════════
   8. СІТКИ Й КАРТКИ
   ═══════════════════════════════════════════════════════════ */

.grid2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

.grid3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.grid4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.card {
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color 0.3s var(--e), box-shadow 0.3s var(--e), transform 0.3s var(--e);
}

.card:hover,
.card:focus-within {
	border-color: var(--brand);
	box-shadow: 0 14px 34px rgba(20, 70, 50, 0.12);
	transform: translateY(-4px);
}

.card-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.card h3 {
	font-size: 19px;
	margin-bottom: 10px;
}

.card h3 a {
	color: inherit;
	text-decoration: none;
}

.card h3 a:hover {
	color: var(--brand);
}

.card p {
	font-size: 17px;
	color: var(--ink-2);
	margin-bottom: 14px;
}

.card-foot {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-family: -apple-system, sans-serif;
}

/* Санаторій, де проводиться напрям, — не позначка, а відповідь на питання
   «куди мені їхати». Тому кегль такий самий, як в основного тексту. */
.where {
	font: 600 17px/1.3 -apple-system, sans-serif;
	color: var(--brand-d);
	background: var(--brand-l);
	padding: 6px 10px;
	border-radius: 6px;
	display: inline-block;
}

.pill {
	font: 600 15px/1 -apple-system, sans-serif;
	background: #f0e6cc;
	color: #6b4f0f;
	padding: 6px 9px;
	border-radius: 5px;
	white-space: nowrap;
}

.pill.warn {
	background: var(--warn-bg);
	color: var(--warn);
}

/* Назва санаторію в картці — головний орієнтир при виборі, не позначка. */
.tag {
	font: 600 17px/1.2 -apple-system, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 10px;
	display: block;
}

.meta {
	font: 500 17px/1.4 -apple-system, sans-serif;
	color: var(--ink-3);
	margin-bottom: 14px;
}

.card-img {
	display: block;
	height: 210px;
	overflow: hidden;
	background: var(--bg-2);
}

/* Наїзд має бути помітним, але не різким. Півтори секунди й три відсотки
   виявилися за межею помітності — рух є, а око його не читає. Дев'ять
   десятих секунди на шість відсотків із м'яким початком дають рух,
   який видно й від якого не смикається зображення (п. 12.1 ТЗ). */
.card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--e-photo);
	will-change: transform;
}

.card:hover .card-img img,
.card:focus-within .card-img img {
	transform: scale(1.06);
}

.card-img.empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-3);
	font: 500 17px/1 -apple-system, sans-serif;
}

.price {
	font: 700 24px/1 -apple-system, sans-serif;
	color: var(--brand-d);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.per {
	font: 400 17px/1.3 -apple-system, sans-serif;
	color: var(--ink-3);
}

.amenities {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	font: 500 17px/1 -apple-system, sans-serif;
}

.amenities li {
	background: var(--bg-2);
	color: var(--ink-2);
	border-radius: 5px;
	padding: 6px 9px;
}

/* ═══════════════════════════════════════════════════════════
   9. КАТАЛОГ НОМЕРІВ: ФІЛЬТР
   Звичайна форма GET — працює без JavaScript і посилається.
   ═══════════════════════════════════════════════════════════ */

.catalog {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 34px;
	align-items: start;
}

.filter {
	position: sticky;
	top: 96px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 24px;
	background: #fff;
}

.filter h2 {
	font-size: 20px;
	margin-bottom: 18px;
}

.filter fieldset {
	border: 0;
	margin: 0 0 20px;
	padding: 0;
}

.filter legend {
	font: 600 18px/1 -apple-system, sans-serif;
	color: var(--ink);
	margin-bottom: 10px;
	padding: 0;
}

.filter label {
	display: block;
	font: 600 17px/1.3 -apple-system, sans-serif;
	color: var(--ink-2);
	margin-bottom: 6px;
}

.filter .range {
	display: flex;
	gap: 10px;
	align-items: flex-end;
}

.filter .range > div {
	flex: 1;
}

.filter .check {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--tap);
	font: 400 17px/1.4 -apple-system, sans-serif;
	color: var(--ink);
	margin-bottom: 2px;
	cursor: pointer;
}

.filter .check input {
	width: 26px;
	height: 26px;
	margin: 0;
	accent-color: var(--brand);
}

.filter-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
	width: 100%;
	min-height: var(--tap);
	padding: 12px 14px;
	border: 1px solid #b9c8c1;
	border-radius: 9px;
	font: 400 17px/1.4 -apple-system, sans-serif;
	background: #fff;
	color: var(--ink);
	transition: border-color 0.25s var(--e), box-shadow 0.25s var(--e);
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-l);
}

textarea {
	min-height: 110px;
	resize: vertical;
}

.catalog-head {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.catalog-count {
	font: 500 17px/1.4 -apple-system, sans-serif;
	color: var(--ink-2);
}

.sort-form {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sort-form label {
	font: 600 17px/1 -apple-system, sans-serif;
	color: var(--ink-2);
	white-space: nowrap;
}

.sort-form select {
	width: auto;
	min-width: 210px;
}

.empty-state {
	border: 1px dashed var(--line);
	border-radius: var(--r);
	padding: 40px;
	text-align: center;
	background: var(--bg-2);
}

/* ═══════════════════════════════════════════════════════════
   10. СТОРІНКА НОМЕРА
   ═══════════════════════════════════════════════════════════ */

/* Бічні відступи беремо ті самі, що в .wrap: скорочений запис padding
   із двома значеннями обнуляв їх, і заголовок ставав на 24 px лівіше
   за картки під ним. */
.entry-head {
	padding: 44px 24px 0;
}

.breadcrumbs {
	font: 400 17px/1.5 -apple-system, sans-serif;
	color: var(--ink-3);
	margin-bottom: 18px;
}

.breadcrumbs a {
	color: var(--ink-3);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--brand);
	text-decoration: underline;
}

.entry-title {
	font-size: clamp(28px, 3.6vw, 42px);
	margin-bottom: 12px;
}

.room-layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 40px;
	align-items: start;
	padding: 34px 0 92px;
}

.room-aside {
	position: sticky;
	top: 96px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(20, 70, 50, 0.07);
}

.price-big {
	font: 700 42px/1 -apple-system, sans-serif;
	color: var(--brand-d);
	font-variant-numeric: tabular-nums;
	display: block;
}

/* «За добу на одну особу» — уточнення, без якого ціну читають неправильно.
   Тому кегль основного тексту, а не дрібний шрифт. */
.price-note {
	display: block;
	font: 400 17px/1.4 -apple-system, sans-serif;
	color: var(--ink-3);
	margin: 8px 0 20px;
}

.specs {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 26px;
	font-size: 17px;
}

.specs th,
.specs td {
	text-align: left;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.specs th {
	font: 500 17px/1.4 -apple-system, sans-serif;
	color: var(--ink-2);
	width: 46%;
}

.specs td {
	font-family: -apple-system, sans-serif;
}

/* Галерея: однаково гідно і на 2 фото, і на 28. */
.gallery {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	margin-bottom: 30px;
}

/* Одне фото не розтягуємо на всю колонку: на широкому екрані це 1130 px,
   а вихідні знімки курорту здебільшого вужчі. Точну межу ставить шаблон
   через `max-width` — вона залежить від сторін самого знімка. */
.gallery.count-1 {
	grid-template-columns: minmax(0, 1fr);
	max-width: 640px;
}

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

.gallery a {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	background: var(--bg-2);
	aspect-ratio: 4 / 3;
}

.gallery.count-2 a {
	aspect-ratio: 3 / 2;
}

/* Єдиний знімок не підганяємо під спільні пропорції — він тут не плитка
   в сітці, а ілюстрація сторінки, і обрізати в ньому нічого. */
.gallery.count-1 a {
	aspect-ratio: auto;
}

.gallery.count-1 img {
	height: auto;
	/* Без цього під знімком лишається смужка тла у вісім пікселів —
	   місце під нижні виносні літери рядка, у якому лежить картинка. */
	display: block;
}

.gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--e-photo);
	will-change: transform;
}

.gallery a:hover img,
.gallery a:focus-visible img {
	transform: scale(1.06);
}

.gallery-rest {
	margin: -18px 0 30px;
	font: 500 17px/1.4 -apple-system, sans-serif;
	color: var(--ink-3);
}

.gallery-more {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: -14px 0 30px;
}

.gallery-progress {
	font: 500 17px/1.4 -apple-system, sans-serif;
	color: var(--ink-3);
}

/* Перемикачі колекцій — звичайні посилання, тому кожна колекція
   має власну адресу й працює без JavaScript. */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 26px;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--tap);
	padding: 8px 16px;
	border: 1.5px solid var(--line);
	border-radius: 24px;
	background: #fff;
	color: var(--ink-2);
	font: 500 17px/1.2 -apple-system, "Segoe UI", sans-serif;
	text-decoration: none;
	transition: border-color 0.2s var(--e), background 0.2s var(--e), color 0.2s var(--e);
}

.chip:hover {
	border-color: var(--brand);
	color: var(--brand-d);
}

.chip.is-active {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.chip__count {
	font-size: 15px;
	opacity: 0.75;
	font-variant-numeric: tabular-nums;
}

/* Зайві кадри ховаємо лише тоді, коли перегляд справді працює:
   без JavaScript вони лишаються видимими, інакше частина фото зникла б. */
.lb-ready .gallery a.is-extra {
	display: none;
}

/* ═══════════════════════════════════════════════════════════
   ЗНІМОК ПІД ЗАГОЛОВКОМ
   ═══════════════════════════════════════════════════════════ */

/* Знімки напрямів і екскурсій прийшли зі старого сайту невеликими —
   від 550 до 835 px завширшки. Тому вони показуються у власних пропорціях
   і на всю ширину колонки, а не смугою на весь екран: розтягнутий
   на 1900 px кадр 552 px завширшки виглядав би розмитим. */
.entry-photo {
	margin: 0 0 32px;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--bg-2);
}

.entry-photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* ═══════════════════════════════════════════════════════════
   ПЕРЕГЛЯД ФОТОГРАФІЙ
   ═══════════════════════════════════════════════════════════ */

.lb {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	padding: 0;
	border: 0;
	/* Перегляд фотографій лишається темним навмисно — на світлому тлі знімок
	   читається гірше. Відтінок лише зсунуто в бірюзу разом з рештою теми. */
	background: #0c1a19;
	color: #fff;
	overflow: hidden;
}

.lb::backdrop {
	background: rgba(7, 17, 17, 0.92);
}

html.lb-open {
	overflow: hidden;
}

.lb__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 64px 76px 92px;
}

.lb__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 8px;
	animation: lb-in 0.28s var(--e);
}

@keyframes lb-in {
	from {
		opacity: 0;
		transform: scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.lb__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px 22px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
	font-family: -apple-system, "Segoe UI", sans-serif;
}

.lb__caption {
	margin: 0;
	font-size: 17px;
	color: #e6efe9;
}

.lb__count {
	margin: 0;
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: #b9cdc2;
}

.lb__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s var(--e);
}

.lb__btn:hover {
	background: rgba(255, 255, 255, 0.28);
}

.lb__btn:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

.lb__close {
	top: 14px;
	right: 14px;
	font-size: 22px;
}

.lb__prev {
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
}

.lb__next {
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
}

.lb__btn[hidden] {
	display: none;
}

@media (max-width: 620px) {
	.lb__stage {
		padding: 60px 12px 96px;
	}

	.lb__prev {
		left: 8px;
	}

	.lb__next {
		right: 8px;
	}

	.lb__caption {
		font-size: 16px;
	}
}

.included {
	background: var(--brand-l);
	border-radius: var(--r);
	padding: 26px;
	margin: 30px 0;
}

.included h2 {
	font-size: 21px;
	margin-bottom: 14px;
}

.list-clean {
	list-style: none;
	margin: 0;
	padding: 0;
}

.list-clean li {
	position: relative;
	padding: 0 0 0 26px;
	margin-bottom: 10px;
}

.list-clean li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--brand);
}

/* Протипоказання оформлюються помітно (п. 5.4 ТЗ). */
.contra {
	border: 1px solid #eccfd0;
	border-left: 5px solid var(--warn);
	background: var(--warn-bg);
	border-radius: var(--r);
	padding: 26px;
	margin: 30px 0;
}

.contra h2 {
	font-size: 21px;
	margin-bottom: 14px;
	color: var(--warn);
}

.contra .list-clean li::before {
	color: var(--warn);
}

.notice-strip {
	background: var(--warn-bg);
	border: 1px solid #eccfd0;
	border-radius: var(--r);
	padding: 18px 22px;
	margin-bottom: 26px;
	color: var(--warn);
	font: 600 17px/1.5 -apple-system, sans-serif;
}

/* ═══════════════════════════════════════════════════════════
   11. ПРАЙС
   ═══════════════════════════════════════════════════════════ */

.price-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 40px;
	font-size: 17px;
}

.price-table caption {
	text-align: left;
	font: 600 21px/1.3 -apple-system, sans-serif;
	padding: 22px 0 12px;
	color: var(--brand-d);
}

.price-table th,
.price-table td {
	padding: 13px 12px;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

.price-table thead th {
	font: 600 15px/1.3 -apple-system, sans-serif;
	color: var(--ink-2);
	background: var(--bg-2);
	border-bottom: 2px solid var(--line);
}

.price-table td.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-family: -apple-system, sans-serif;
	white-space: nowrap;
}

.price-table tbody tr:hover {
	background: var(--bg-2);
}

.table-scroll {
	overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════
   12. ФОРМА ЗАЯВКИ
   ═══════════════════════════════════════════════════════════ */

.cta {
	background: var(--brand-l);
	color: var(--ink);
}

.cta h2 {
	font-size: clamp(28px, 3.4vw, 38px);
	margin-bottom: 16px;
}

.cta p {
	color: var(--ink-2);
}

.mk-form {
	background: #fff;
	border-radius: var(--r);
	padding: 30px;
	color: var(--ink);
	/* На світлому тлі блоку заявки біла картка форми без межі зливається з ним. */
	border: 1px solid var(--line);
}

.mk-form label {
	display: block;
	font: 600 17px/1.3 -apple-system, sans-serif;
	margin-bottom: 7px;
	color: var(--ink-2);
}

.mk-form .field {
	margin-bottom: 18px;
}

.mk-form .req {
	color: var(--warn);
}

.mk-form .hint {
	font: 400 17px/1.4 -apple-system, sans-serif;
	color: var(--ink-3);
	margin: 6px 0 0;
}

.mk-form .error {
	font: 600 17px/1.4 -apple-system, sans-serif;
	color: var(--warn);
	margin: 6px 0 0;
}

.mk-form input[aria-invalid="true"],
.mk-form textarea[aria-invalid="true"] {
	border-color: var(--warn);
}

/* Пастка для роботів замість CAPTCHA: вона недоступна частині аудиторії. */
.mk-form .trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-message {
	border-radius: var(--r);
	padding: 20px 24px;
	margin-bottom: 22px;
	font: 500 17px/1.5 -apple-system, sans-serif;
}

.form-message.ok {
	background: var(--brand-l);
	color: var(--brand-d);
	border: 1px solid #bcdccb;
}

.form-message.bad {
	background: var(--warn-bg);
	color: var(--warn);
	border: 1px solid #eccfd0;
}

/* ═══════════════════════════════════════════════════════════
   13. ПІДВАЛ
   ═══════════════════════════════════════════════════════════ */

.site-footer {
	background: #eef5f4;
	color: var(--ink-2);
	padding: 56px 0 30px;
	font-size: 17px;
	border-top: 1px solid var(--line);
}

.site-footer .cols {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.4fr;
	gap: 36px;
	margin-bottom: 38px;
}

.site-footer h2 {
	font: 600 18px/1.2 -apple-system, sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brand-d);
	margin: 0 0 16px;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer a {
	color: var(--ink-2);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	transition: color 0.2s, transform 0.2s var(--e);
}

.site-footer a:hover {
	color: var(--brand-d);
	transform: translateX(3px);
	text-decoration: underline;
}

.site-footer .copy {
	border-top: 1px solid var(--line);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 16px;
	color: var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════
   СОЦМЕРЕЖІ
   ═══════════════════════════════════════════════════════════ */

.social {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Знак — 20 px, але натиснути треба по площі не менше за 44 px:
	   це та сама вимога п. 2.4 ТЗ, що й для решти посилань. */
	width: var(--tap);
	height: var(--tap);
	border-radius: 10px;
	color: var(--ink-3);
	text-decoration: none;
	transition: color 0.2s, background 0.2s;
}

.social-link:hover,
.social-link:focus-visible {
	color: var(--brand-d);
	background: var(--brand-l);
}

/* Мережа без власного знака показується підписом, тож їй потрібні поля. */
.social-link--text {
	width: auto;
	padding: 0 10px;
	font: 500 15px/1 -apple-system, sans-serif;
}

/* У шапці ряд і без того тісний: значки стоять упритул одне до одного,
   а від'ємне поле з'їдає проміжок, який шапка ставить між своїми
   частинами. Разом це 68 px замість 108 — саме та різниця, через яку
   ряд лишається в межах екрана на ноутбуках 1366. */
.social--header {
	margin-left: -14px;
	margin-right: -8px;
	gap: 0;
}

.social--header .social-link {
	width: 34px;
	height: 34px;
}

.social--panel {
	margin-top: 10px;
	gap: 4px;
}

/* Селектор із `.site-footer` навмисно: підвал скидає поля всім своїм
   перелікам правилом `.site-footer ul`, і воно вагоміше за самий клас.
   Від'ємне поле зліва — рівно та відстань, на яку значок 20 px відступає
   всередині своєї площі дотику 44 px: без нього ряд значків стояв би
   з вирізом відносно тексту над ним. */
.site-footer .social--footer {
	margin: 14px 0 0 -12px;
}

.social--footer .social-link {
	color: var(--ink-2);
}

/* ═══════════════════════════════════════════════════════════
   КОРПОРАТИВНІ ДОКУМЕНТИ
   ═══════════════════════════════════════════════════════════ */

.docs-day {
	padding-top: 22px;
	border-top: 1px solid var(--line);
	margin-top: 22px;
}

.docs-day:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

/* Дата — не заголовок розділу, а мітка: тому дрібна й приглушена,
   щоб не перебивати назви самих документів. */
.docs-date {
	font: 600 14px/1.2 -apple-system, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 12px;
}

.docs-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.docs-list li {
	margin-bottom: 10px;
}

.doc-main,
.doc-key {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 10px;
	color: var(--brand-d);
	text-decoration: none;
	/* Мінімальна висота дотику — вимога п. 2.4 ТЗ; на телефоні перелік
	   посилань інакше не втрапити пальцем. */
	min-height: var(--tap);
	padding: 4px 0;
}

.doc-main {
	font-weight: 500;
}

.doc-main:hover,
.doc-key:hover,
.doc-main:focus-visible,
.doc-key:focus-visible {
	text-decoration: underline;
}

/* Тип і вага файлу — щоб людина знала, що відкриється й скільки важить,
   ще до натискання. */
.doc-meta {
	font: 400 15px/1.2 -apple-system, sans-serif;
	color: var(--ink-3);
	white-space: nowrap;
}

.doc-key {
	margin-left: 18px;
	font-size: 16px;
	color: var(--ink-3);
}

@media (max-width: 620px) {
	.doc-key {
		margin-left: 0;
		display: flex;
	}
}

/* Знак «Договір з НСЗУ». Ширину задаємо один раз, висоту рахує браузер за
   атрибутами width/height у розмітці — тому місце під знак резервується ще
   до завантаження файлу й підвал не сіпається. */
.nszu-mark {
	margin-top: 24px;
}

.nszu-mark img {
	width: 78px;
	height: auto;
}

/* На першому екрані знак стоїть на місці колишнього абзацу. Він там сам за
   себе, тому трохи більший і з повітрям згори й знизу — щоб не тиснувся
   між заголовком і кнопками. Правило йде після базового: клас той самий
   вагою, тож вирішує порядок. */
.nszu-mark--hero {
	margin: 20px 0 28px;
}

.nszu-mark--hero img {
	width: 92px;
}

/* Підвал став світлим, тож дрібний текст бере звичайний приглушений колір
   для білого тла — 5,3:1. */
.site-footer .per {
	color: var(--ink-3);
}

/* Правові посилання — теж навігація, тож кегль основного тексту. */
.legal-menu ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
}

.legal-menu a {
	font-size: 17px;
}

/* ═══════════════════════════════════════════════════════════
   14. ЗМІСТ СТОРІНКИ, ПОШУК, ПАГІНАЦІЯ
   ═══════════════════════════════════════════════════════════ */

.entry-content {
	font-size: 17px;
}

.entry-content h2 {
	font-size: 27px;
	margin: 36px 0 14px;
}

.entry-content h3 {
	font-size: 21px;
	margin: 28px 0 12px;
}

.entry-content ul,
.entry-content ol {
	padding-left: 24px;
	margin: 0 0 1em;
}

.entry-content li {
	margin-bottom: 8px;
}

.entry-content img {
	border-radius: var(--r);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 24px;
}

.entry-content th,
.entry-content td {
	border-bottom: 1px solid var(--line);
	padding: 12px;
	text-align: left;
	vertical-align: top;
}

.entry-content thead th {
	border-bottom: 2px solid var(--brand);
	color: var(--brand-d);
	font: 600 17px/1.3 -apple-system, "Segoe UI", sans-serif;
}

/* Широка таблиця прокручується всередині себе, а не розсуває сторінку
   й не змушує гортати весь макет убік. */
.table-scroll {
	overflow-x: auto;
	margin-bottom: 26px;
	-webkit-overflow-scrolling: touch;
}

.table-scroll table {
	margin-bottom: 0;
	min-width: 560px;
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 40px 0 0;
	font-family: -apple-system, sans-serif;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap);
	min-height: var(--tap);
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 9px;
	text-decoration: none;
	color: var(--ink-2);
	font-weight: 600;
}

.pagination .page-numbers:hover {
	border-color: var(--brand);
	color: var(--brand);
}

.pagination .current {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.search-form {
	display: flex;
	gap: 10px;
}

.search-form input[type="search"] {
	flex: 1;
}

/* ═══════════════════════════════════════════════════════════
   15. АДАПТИВНІСТЬ
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
	.catalog {
		grid-template-columns: 1fr;
	}

	.filter {
		position: static;
	}

	.room-layout {
		grid-template-columns: 1fr;
	}

	.room-aside {
		position: static;
	}
}

/* Підзаголовок логотипа — прикраса, і саме він з'їдає місце в шапці.
   Він додає до логотипа 139 px, і після появи перемикача мов та значків
   соцмереж ряд перестав його витримувати навіть на 1600: заміряно,
   бракує 67 px. Заміряно й далі: на 1701 бракувало ще чотирьох.
   Тому межа 1720, а не колишні 1500.

   Логотип при цьому не стискається (`flex: 0 0 auto` вище): інакше
   браузер звужував би його, а підпис із `nowrap` не переносився б,
   а лізв поверх меню — саме це й було видно на широкому екрані. */
@media (max-width: 1720px) {
	.logo-sub {
		display: none;
	}

	/* Проміжок між частинами шапки — 12 px замість 20: сім розділів,
	   телефон, перемикач мов, два значки соцмереж і кнопка інакше
	   не вміщаються. Це 32 px, рівно та різниця, якої бракувало на 1341. */
	.nav {
		gap: 12px;
	}

	.menu {
		gap: 16px;
	}

	/* Перемикач мов тіснимо так само, як значки соцмереж. */
	.lang-switch {
		gap: 0;
	}

	.lang-switch a,
	.lang-switch .is-missing span {
		padding: 0 6px;
		font-size: 15px;
	}
}

/* Значки соцмереж у шапці — приємне доповнення, а не навігація: вони є
   і в підвалі, і в панелі меню на телефоні. Тому на ноутбуках, де ряд
   і без них тісний, у шапці їх немає. Без цього на 1366 шапка вилазила
   за екран на 73 px — переважно через перемикач мов, який додався
   разом із Polylang. */
@media (max-width: 1440px) {
	.social--header {
		display: none;
	}
}

/* Компактне меню вмикається раніше, ніж вміст почне тіснитися.
   Перевірено на реальних ширинах, не на око. Верхній ряд — логотип 177,
   сім розділів 728, телефон 165, перемикач мов 67 і кнопка 141, плюс
   проміжки. На 1366 лишається 25 px запасу, на 1361 бракує чотирьох.
   Тому межа 1365: 1366 — найпоширеніша ширина ноутбука, і меню має
   лишатися на ній. Колишні 1300 були підігнані під шапку без «Новин»,
   без значків соцмереж і без перемикача мов. */
@media (max-width: 1365px) {
	.menu,
	.header-desktop {
		display: none;
	}

	.menu-toggle {
		display: block;
	}

	.menu-toggle .mobile-panel .menu {
		display: block;
	}
}

@media (max-width: 960px) {
	.grid3,
	.grid4 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* На вузькому екрані пелена вже не може сходити нанівець праворуч —
	   текст займає всю ширину, тож підкладка стає рівною. Щільність трохи
	   вища за настільну: тут під текстом уся площа знімка, і темна ділянка
	   може трапитися будь-де. */
	.hero-veil {
		background: rgba(227, 242, 240, 0.7);
	}

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

	.site-footer .cols {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 620px) {
	.grid2,
	.grid3,
	.grid4 {
		grid-template-columns: 1fr;
	}

	section {
		padding: 60px 0;
	}

	.hero {
		min-height: 540px;
	}

	.hero-in {
		padding: 70px 0;
	}

	.wrap {
		padding: 0 18px;
	}

	.site-footer .cols {
		grid-template-columns: 1fr;
	}

	.price-big {
		font-size: 34px;
	}

	/* Шапка на телефоні складається у два рядки: логотип із кнопкою меню
	   зверху, телефон і кнопка заявки — окремим рядом. Це вимога п. 3.2 ТЗ:
	   телефон і кнопка мають лишатися видимими. В один ряд вони не вміщаються
	   ні за яких розмірів шрифту, тому не тиснемо їх, а переносимо. */
	.nav {
		flex-wrap: wrap;
		row-gap: 12px;
		min-height: 0;
		/* Бічні відступи — ті самі, що в .wrap на цій ширині. */
		padding: 12px 18px;
	}

	.site-header.on .nav {
		min-height: 0;
	}

	.logo {
		order: 1;
		flex: 1 1 auto;
		font-size: 19px;
		gap: 10px;
	}

	.logo-mark,
	.site-header.on .logo-mark {
		height: 36px;
	}

	.menu-toggle {
		order: 2;
		margin-left: auto;
	}

	.header-phone {
		order: 3;
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
		border: 1.5px solid var(--line);
		border-radius: 10px;
		font-size: 17px;
	}

	.nav .btn.header-desktop {
		order: 4;
		display: inline-flex;
		flex: 0 0 auto;
		font-size: 16px;
		padding: 10px 14px;
	}

	.lang-switch {
		order: 5;
	}
}

/* Сайт лишається читабельним при збільшенні до 200% (п. 6.4 ТЗ):
   на вузькому екрані липкі елементи звільняють висоту. */
@media (max-height: 560px) {
	.site-header {
		position: static;
	}

	.filter,
	.room-aside {
		position: static;
	}
}

/* ═══════════════════════════════════════════════════════════
   16. ПОВАГА ДО НАЛАШТУВАННЯ «ЗМЕНШИТИ РУХ»
   Без цього запобіжника сайт не відповідає рівню WCAG AA,
   зафіксованому в п. 2.4 ТЗ.
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.reveal,
	.up {
		opacity: 1 !important;
		transform: none !important;
	}

	.hero-bg {
		animation: none !important;
	}

	.scroll-hint {
		display: none;
	}

	.bar {
		display: none;
	}

	.lb__img {
		animation: none !important;
	}

	.card:hover .card-img img,
	.card:focus-within .card-img img,
	.gallery a:hover img,
	.gallery a:focus-visible img {
		transform: none !important;
	}

	.hero-frame--next {
		transition: none !important;
		opacity: 0 !important;
	}
}

/* Друк: прайс має друкуватися нормально (п. 5.6 ТЗ). */
@media print {
	.site-header,
	.site-footer,
	.bar,
	.filter,
	.hero,
	.cta,
	.no-print {
		display: none !important;
	}

	body {
		font-size: 12pt;
		color: #000;
	}

	.price-table th,
	.price-table td {
		border-bottom: 1px solid #999;
	}

	a[href]::after {
		content: "";
	}
}