/* ==========================================================================
   [KU:] — оболочка страницы
   Рельс, шапка, мобильное меню, CTA, футер.

   Одна раскладка на все ширины. В дизайн-экспорте было два отдельных файла
   (PageDesktop / PageMobile); здесь их различия сведены к брейкпоинту 1000px.
   Мобильная колонка в макете была зажата в 430px — это артефакт фрейма
   дизайнера, а не требование: на планшете такая колонка выглядит потерянной,
   поэтому ниже 1000px раскладка тянется, а одноколоночные секции
   ограничиваются --ku-maxw-narrow.
   ========================================================================== */

/* --- Каркас ------------------------------------------------------------- */

.ku-shell {
	min-height: 100vh;
	padding-left: var(--ku-rail-w-mobile);
}

.ku-main {
	display: block;
}

/* Секции получают поля отсюда, а не каждая от себя: так вертикальный ритм
   не разъезжается, когда блок ставят в редакторе в непредусмотренном порядке. */
.ku-section {
	padding: var(--ku-section-y) var(--ku-gutter);
}

.ku-section--flush {
	padding: 0;
}

.ku-section--surface {
	background: var(--ku-surface);
	border-top: 1px solid var(--ku-line);
}

.ku-container {
	max-width: var(--ku-maxw);
	margin: 0 auto;
}

.ku-container--narrow {
	max-width: var(--ku-maxw-narrow);
	margin: 0 auto;
}

/* --- Рельс (красная вертикальная панель) --------------------------------- */

.ku-rail {
	position: fixed;
	left: 0;
	top: 0;
	z-index: var(--ku-z-rail);
	width: var(--ku-rail-w-mobile);
	background: var(--ku-accent);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0 10px;

	/* Высота задана явно, а не через bottom: 0.
	   На iOS у фиксированного элемента bottom: 0 привязан к МАЛОМУ
	   вьюпорту — тому, что остаётся под развёрнутой панелью Safari.
	   Когда панель сворачивается, открывшаяся полоса высотой с эту панель
	   оказывается ниже рельса, и в левом нижнем углу видно фон страницы
	   вместо красного.
	   100lvh — большой вьюпорт, состояние со свёрнутой панелью. Рельс
	   всегда перекрывает с запасом, а лишнее просто обрезается. */
	height: 100vh;
	height: 100lvh;
}

.ku-rail__text {
	writing-mode: vertical-rl;
	font-family: var(--ku-font-jp);
	font-weight: 900;
	font-size: 17px;
	line-height: var(--ku-rail-w-mobile);
	letter-spacing: 0.22em;
	color: var(--ku-text);
	white-space: nowrap;
	/* Строка длиннее экрана — обрезаем, а не переносим: в макете это
	   бесконечная вертикальная лента иероглифов. */
	overflow: hidden;
	flex: 1;
}

/* Две ленты в разметке, видна одна: на десктопе крупная короткая надпись,
   на мобильном — повторяющаяся строка иероглифов. Разметка одна на обе
   ширины, поэтому переключаем показом, а не условием в PHP. */
.ku-rail__text--desktop {
	display: none;
}

.ku-rail__home {
	flex: none;
	font-weight: 800;
	font-size: var(--ku-fs-label);
	color: var(--ku-text);
	padding: 5px 0;
	text-align: center;
}

.ku-rail__home:hover {
	color: var(--ku-ink);
}

/* --- Шапка --------------------------------------------------------------- */

.ku-header {
	position: sticky;
	top: 0;
	z-index: var(--ku-z-header);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: calc(var(--ku-header-h-mobile) + env(safe-area-inset-top));
	padding: env(safe-area-inset-top) 14px 0;
	border-bottom: 1px solid var(--ku-hairline);
	/* isolate, чтобы подложка ниже не «протекала» в блендинг соседей. */
	isolation: isolate;
}

/*
   Блюр вынесен на псевдоэлемент, а не стоит на самой шапке.

   Причина: на iOS Safari связка «position: sticky + backdrop-filter»
   заставляет браузер растеризовать прокручиваемое содержимое в слой
   размером с МАЛЫЙ вьюпорт. Когда нижняя панель браузера сворачивается,
   открывшаяся полоса высотой с эту панель остаётся непрокрашенной —
   внизу появляется чёрный прямоугольник, и обрезан не только фон, но и
   контент. Пропадает он после любой принудительной перерисовки: например
   когда попап переключает overflow у body.

   Фильтр на absolute-потомке даёт ту же картинку, но липкое
   позиционирование и backdrop-filter больше не на одном элементе.
*/
.ku-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ku-glass);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	pointer-events: none;
}

.ku-header__brand {
	display: flex;
	align-items: center;
	gap: 36px;
	min-width: 0;
}

.ku-header__logo img {
	height: 26px;
	width: auto;
}

.ku-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Десктопное меню и блок соцсетей в шапке скрыты до 1000px — там бургер. */
.ku-header__nav,
.ku-header__socials,
.ku-header__buttons--desktop {
	display: none;
}

.ku-header__buttons--mobile {
	display: flex;
	gap: 8px;
}

/* Мобильные кнопки шапки ниже по высоте, чем базовая .ku-btn: рядом с ними
   стоит бургер 38×38, и разнобой сразу видно. */
.ku-header__buttons--mobile .ku-btn {
	height: 38px;
	padding: 0 12px;
	font-size: var(--ku-fs-micro);
	letter-spacing: 0.12em;
}

.ku-header__burger {
	width: 38px;
	height: 38px;
	font-size: 16px;
}

/* --- Основное меню (десктоп) ---------------------------------------------- */

.ku-nav {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ku-nav__item {
	margin: 0;
}

.ku-nav__link {
	display: block;
	font-family: var(--ku-font-mono);
	font-size: var(--ku-fs-ui);
	letter-spacing: var(--ku-ls-wide);
	text-transform: uppercase;
	color: var(--ku-text);
	white-space: nowrap;
}

/* Пункт с классом «accent» в админке (Внешний вид → Меню → CSS-классы) —
   это «Доставка ↗» и подобные внешние ссылки. */
.ku-nav__item--accent > .ku-nav__link {
	color: var(--ku-accent);
	font-weight: 700;
}

.ku-nav__item--accent > .ku-nav__link:hover {
	color: var(--ku-text);
}

.ku-nav__item.current-menu-item > .ku-nav__link {
	color: var(--ku-accent);
}

/* --- Соцсети -------------------------------------------------------------- */

.ku-socials {
	display: flex;
	gap: 8px;
}

.ku-socials--lg .ku-icon-btn {
	width: 44px;
	height: 44px;
	font-size: var(--ku-fs-ui);
}

/* --- Мобильное меню -------------------------------------------------------- */

.ku-menu {
	position: fixed;
	inset: 0;
	/* Как и у рельса: inset:0 на iOS оставляет полосу высотой с панель
	   браузера незакрытой. Подложка меню обязана перекрывать экран целиком. */
	height: 100vh;
	height: 100lvh;
	z-index: var(--ku-z-menu);
	background: var(--ku-overlay);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ku-dur) var(--ku-ease), visibility var(--ku-dur);
}

.ku-menu.is-open {
	opacity: 1;
	visibility: visible;
}

.ku-menu__panel {
	position: absolute;
	inset: 0;
	left: var(--ku-rail-w-mobile);
	display: flex;
	flex-direction: column;
	background: var(--ku-bg);
	padding: env(safe-area-inset-top) 14px 22px 15px;
	overflow: auto;
	overscroll-behavior: contain;
	transform: translateY(-8px);
	transition: transform var(--ku-dur) var(--ku-ease);
}

.ku-menu.is-open .ku-menu__panel {
	transform: translateY(0);
}

/* Декоративные иероглифы в углу — под контентом и мимо скринридеров. */
.ku-menu__glyph {
	position: absolute;
	right: 6px;
	top: 70px;
	writing-mode: vertical-rl;
	font-family: var(--ku-font-jp);
	font-weight: 900;
	font-size: 64px;
	line-height: 1;
	color: var(--ku-accent-ghost);
	pointer-events: none;
	user-select: none;
}

.ku-menu__head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--ku-header-h-mobile);
	flex: none;
}

.ku-menu__head img {
	height: 26px;
	width: auto;
}

.ku-menu__nav {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.ku-menu__link {
	display: block;
	padding: 13px 0;
	border-bottom: 1px solid var(--ku-line-soft);
	font-size: 24px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--ku-text);
}

.ku-menu__item--accent > .ku-menu__link {
	color: var(--ku-accent);
}

.ku-menu__socials {
	position: relative;
	margin-top: 24px;
}

.ku-menu__foot {
	position: relative;
	margin-top: auto;
	padding-top: 28px;
}

/* --- CTA (красный блок перед футером) --------------------------------------- */

.ku-cta {
	background: var(--ku-accent);
	color: var(--ku-text);
	padding: 52px var(--ku-gutter);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ku-cta__title {
	margin: 0;
	font-size: 38px;
	line-height: 0.95;
	font-weight: 900;
	letter-spacing: var(--ku-ls-tight);
}

.ku-cta__note {
	font-family: var(--ku-font-mono);
	font-size: var(--ku-fs-label);
	line-height: 1.9;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-top: 14px;
	color: rgba(255, 255, 255, 0.92);
}

/* На мобильном обе кнопки — во всю ширину колонки, как в макете. */
.ku-cta__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.ku-cta__actions .ku-btn--invert {
	display: block;
	width: 100%;
	text-align: center;
	font-size: var(--ku-fs-body-s);
	padding: 17px 20px;
}

.ku-cta__phone {
	display: block;
	text-align: center;
	font-family: var(--ku-font-mono);
	font-size: var(--ku-fs-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ku-text);
}

.ku-cta__phone:hover {
	color: var(--ku-ink);
}

/* --- Футер ------------------------------------------------------------------ */

.ku-footer {
	background: var(--ku-bg);
	color: var(--ku-text);
	padding: clamp(40px, 5vw, 72px) var(--ku-gutter) 32px;
}

.ku-footer__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.ku-footer__logo img {
	height: 40px;
	width: auto;
}

.ku-footer__tagline {
	font-family: var(--ku-font-mono);
	font-size: var(--ku-fs-ui);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ku-text-muted);
}

.ku-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	margin-top: clamp(28px, 4vw, 52px);
}

.ku-footer__col-title {
	font-family: var(--ku-font-mono);
	font-size: var(--ku-fs-label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ku-text-muted);
	margin-bottom: 16px;
}

.ku-footer__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--ku-font-mono);
	font-size: var(--ku-fs-ui);
	letter-spacing: 0.04em;
}

/* Строка точки: название слева, телефон справа. */
.ku-footer__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.ku-footer__row-note {
	color: var(--ku-text-muted);
}

.ku-footer__row-soon {
	color: var(--ku-accent);
}

.ku-footer__row-none {
	color: var(--ku-text-dim);
}

/* Пункты меню в столбцах футера — тот же волкер, что и в шапке,
   поэтому классы приходят с префиксом ku-footer. */
.ku-footer__item {
	margin: 0;
}

.ku-footer__link {
	color: var(--ku-text);
}

.ku-footer__legal {
	display: block;
	margin-top: 6px;
	color: var(--ku-text-dim);
	line-height: 1.7;
}

.ku-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: clamp(28px, 4vw, 48px);
	padding-top: 20px;
	border-top: 1px solid var(--ku-line-soft);
	font-family: var(--ku-font-mono);
	font-size: var(--ku-fs-label);
	letter-spacing: 0.1em;
	color: var(--ku-text-muted);
}

.ku-footer__legal-menu {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

/* --- Служебные шаблоны -------------------------------------------------------
   Архив, поиск, 404, текстовые страницы. Контентные страницы собираются
   блоками, сюда попадает только то, что рисует сама тема.
   -------------------------------------------------------------------------- */

/* Связный текст — единственное место, где нужен просторный межстрочный:
   на body он стоять не может, см. комментарий в base.css. */
.ku-prose {
	font-size: var(--ku-fs-body-lg);
	line-height: var(--ku-lh-body);
}

.ku-prose h1,
.ku-prose h2,
.ku-prose h3 {
	margin: 1.4em 0 0.5em;
}

.ku-prose h1:first-child {
	margin-top: 0;
}

.ku-prose a {
	color: var(--ku-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ku-archive__head {
	margin-bottom: clamp(28px, 4vw, 48px);
}

.ku-archive__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1px;
	background: var(--ku-line);
	border: 1px solid var(--ku-line);
}

.ku-archive__item {
	background: var(--ku-bg);
}

.ku-archive__link {
	display: block;
	height: 100%;
}

.ku-archive__media img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.ku-archive__body {
	padding: 20px;
}

.ku-archive__title {
	margin-top: 8px;
	font-size: var(--ku-fs-h4);
}

.ku-search {
	display: flex;
	gap: 8px;
	margin-top: 24px;
	max-width: 480px;
}

.ku-search .ku-btn {
	flex: none;
}

.pagination,
.nav-links {
	display: flex;
	gap: 8px;
	margin-top: 40px;
	font-family: var(--ku-font-mono);
	font-size: var(--ku-fs-ui);
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--ku-line-strong);
	border-radius: var(--ku-radius);
}

.nav-links .page-numbers.current {
	background: var(--ku-accent);
	border-color: var(--ku-accent);
}

/* ==========================================================================
   Десктоп
   ========================================================================== */

@media (min-width: 1000px) {

	.ku-shell {
		padding-left: var(--ku-rail-w);
	}

	.ku-rail {
		width: var(--ku-rail-w);
		padding: 26px 0;
	}

	.ku-rail__text--mobile {
		display: none;
	}

	.ku-rail__text--desktop {
		display: block;
		font-size: 58px;
		line-height: var(--ku-rail-w);
		letter-spacing: normal;
		/* На десктопе лента короткая — центрируем, а не растягиваем. */
		flex: 0 1 auto;
	}

	.ku-rail__home {
		font-size: 20px;
	}

	.ku-header {
		position: static;
		height: var(--ku-header-h);
		padding: 0 var(--ku-gutter);
		background: var(--ku-bg);
		border-bottom: 1px solid var(--ku-line-soft);
	}

	/* На десктопе шапка непрозрачная и стоит в потоке — блюр не нужен
	   вовсе, а лишний композитный слой тем более. */
	.ku-header::before {
		display: none;
	}

	.ku-header__logo img {
		height: 40px;
	}

	.ku-header__nav,
	.ku-header__socials,
	.ku-header__buttons--desktop {
		display: flex;
		gap: 8px;
	}

	.ku-header__actions {
		gap: 24px;
	}

	.ku-header__buttons--mobile,
	.ku-header__burger {
		display: none;
	}

	.ku-menu {
		display: none;
	}

	.ku-cta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 48px;
		padding: 80px var(--ku-gutter);
	}

	.ku-cta__title {
		font-size: clamp(48px, 5vw, 72px);
	}

	.ku-cta__note {
		font-size: var(--ku-fs-ui-lg);
		/* На десктопе подпись однострочная, и межстрочный ей не нужен:
		   мобильные 1.9 добавляли блоку лишние 8px высоты. */
		line-height: normal;
		letter-spacing: var(--ku-ls-ui);
		margin-top: 20px;
	}

	.ku-cta__actions {
		align-items: flex-end;
		gap: 16px;
	}

	.ku-cta__actions .ku-btn--invert {
		display: inline-flex;
		width: auto;
		font-size: var(--ku-fs-body);
		padding: 20px 34px;
	}

	.ku-cta__phone {
		font-size: var(--ku-fs-ui-lg);
		letter-spacing: 0.1em;
		text-transform: none;
	}

	.ku-footer__logo img {
		height: 60px;
	}

	/* Первая колонка — точки, она шире: там две колонки внутри строки. */
	.ku-footer__cols {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: 48px;
	}
}

/* Узкий десктоп: с шестью пунктами меню шапка не вмещает ещё и соцсети —
   они остаются в футере, а меню ужимается по трекингу и зазорам. */
@media (min-width: 1000px) and (max-width: 1279px) {
	.ku-header__brand {
		gap: 20px;
	}

	.ku-header__socials {
		display: none;
	}

	.ku-nav {
		gap: 16px;
	}

	.ku-nav__link {
		letter-spacing: 0.1em;
	}
}

/* Промежуток 640–999px: раскладка ещё мобильная, но колонка уже широкая —
   футер разбиваем на две колонки, иначе четыре списка идут простынёй. */
@media (min-width: 640px) and (max-width: 999px) {

	.ku-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
}

/* Кнопка брони под часами в футере. */
.ku-footer__cta {
	margin-top: 18px;
}

.ku-footer__cta .ku-btn {
	width: 100%;
}

/* На мобильном футер идёт как в макете: точки во всю ширину, следом два
   меню в две колонки, часы снова во всю ширину. */
@media (max-width: 639px) {

	.ku-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 28px 20px;
	}

	.ku-footer__col:first-child,
	.ku-footer__col:last-child {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1000px) {

	.ku-footer__cta .ku-btn {
		width: auto;
	}

	.ku-footer__cta {
		margin-top: 24px;
	}
}

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

.ku-post__meta {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	font-family: var(--ku-font-mono);
	font-size: var(--ku-fs-label);
	letter-spacing: var(--ku-ls-wide);
	text-transform: uppercase;
}

.ku-post__cat {
	color: var(--ku-accent);
}

.ku-post__date {
	font-size: var(--ku-fs-ui-lg);
	font-weight: 700;
}

.ku-post__time {
	color: var(--ku-text-muted);
}

.ku-post__title {
	margin: 16px 0 0;
	font-size: var(--ku-fs-h2);
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: var(--ku-ls-tight);
}

.ku-post__media {
	position: relative;
	margin-top: 28px;
	overflow: hidden;
}

.ku-post__media img {
	width: 100%;
	height: auto;
}

.ku-post__body {
	margin-top: 28px;
}

.ku-post__nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--ku-line);
	font-family: var(--ku-font-mono);
	font-size: var(--ku-fs-ui);
	letter-spacing: var(--ku-ls-soft);
}

.ku-post__nav-link--next {
	margin-left: auto;
	text-align: right;
}

/* ==========================================================================
   Сверка с макетом: оболочка на мобильном
   Значения получены той же машинной сверкой, что и для блоков.
   ========================================================================== */

@media (max-width: 999px) {

	/* CTA: кнопка 13 → 14, вторая строка ls 0.12em → 0.1em. */
	.ku-cta__actions .ku-btn--invert {
		font-size: 14px;
		letter-spacing: 0.08em;
	}

	.ku-cta__phone {
		letter-spacing: 0.1em;
	}

	/* Футер: у дизайнера здесь своя, более мелкая шкала. */
	.ku-footer__tagline {
		font-size: 9px;
		letter-spacing: 0.16em;
	}

	.ku-footer__col-title {
		font-size: 9px;
		letter-spacing: 0.18em;
	}

	.ku-footer__list {
		font-size: var(--ku-fs-label);
		letter-spacing: 0.04em;
	}

	/* Пункты меню в футере — не моношрифт, а Onest 13/600: это ссылки
	   разделов, а не строки данных. */
	.ku-footer__link {
		font-family: var(--ku-font-sans);
		font-size: var(--ku-fs-body-s);
		font-weight: 600;
		letter-spacing: normal;
	}

	.ku-footer__bottom {
		font-size: 8px;
		letter-spacing: 0.12em;
	}

	.ku-footer__cta .ku-btn {
		font-size: var(--ku-fs-label);
		letter-spacing: var(--ku-ls-ui);
	}
}