/**
 * Guxen — медиазапросы.
 *
 * Мобильный вид описан в style.css, здесь он только расширяется
 * на больших экранах. Порядок точек перелома — по возрастанию:
 *
 *   720  — списки раскладываются в два столбца, зазор сетки растёт;
 *   1024 — бургер сменяется горизонтальным меню, появляется правая
 *          часть шапки, каталог получает боковую колонку с фильтром;
 *   1180 — шапки секций уходят в свою колонку слева, содержание
 *          раскрывается справа.
 */

/* ==========================================================================
   ≥ 720px
   ========================================================================== */

@media (min-width: 720px) {
	:root {
		--gutter: 18px;
	}

	.grid-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

	.benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px var(--gutter);
	}

	.steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px var(--gutter);
	}

	.stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.contacts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px var(--gutter);
	}

	.photo-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hero__slides-space {
		aspect-ratio: 3 / 4;
	}

	.mosaic__item--1 {
		grid-column: span 2;
	}

	.form-block {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		gap: var(--gutter);
	}

	.cta__inner {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: var(--gutter);
	}
}

/* ==========================================================================
   ≥ 1024px
   ========================================================================== */

@media (min-width: 1024px) {
	:root {
		--gutter: 24px;
		--header-height: 84px;
	}

	.burger {
		display: none;
	}

	/*
	 * Меню возвращается в поток: на широком экране оно часть шапки,
	 * а не отдельный экран. Свойства раскрытия сбрасываются все сразу —
	 * иначе оставшийся visibility: hidden прячет меню целиком.
	 */
	.nav {
		position: static;
		inset: auto;
		flex-direction: row;
		align-items: center;
		width: auto;
		padding: 0;
		border-left: 0;
		background: none;
		overflow: visible;
		visibility: visible;
		transform: none;
	}

	/* Панели на широком экране нет — значит, нет ни затемнения,
	   ни запрета прокрутки, даже если класс остался от узкого. */
	.is-menu-open::before {
		content: none;
	}

	.is-menu-open {
		overflow: visible;
	}

	.nav__list {
		flex-direction: row;
		align-items: center;
		gap: 28px;
	}

	.nav__list a {
		padding: 0;
		font-family: var(--font-body);
		font-size: var(--t-base);
		font-weight: 400;
	}

	/* На широком экране подменю — выпадающий список по наведению,
	   а не гармошка: стрелка не нужна, и список раскрыт всегда. */
	.nav__list .menu-item-has-children {
		display: block;
		position: relative;
	}

	.nav__expand {
		display: none;
	}

	.js .nav__list .menu-item-has-children:not(.is-open) > .sub-menu {
		display: block;
	}

	.nav__list .sub-menu {
		position: absolute;
		z-index: 5;
		top: 100%;
		left: -18px;
		min-width: 220px;
		padding: 14px 18px;
		border: 1px solid var(--rule);
		border-radius: var(--radius-md);
		background: var(--paper-raised);
		visibility: hidden;
		opacity: 0;
		transition: opacity var(--speed) var(--ease), visibility var(--speed) var(--ease);
	}

	.nav__list .sub-menu a {
		padding: 6px 0;
	}

	/* Подменю раскрывается наведением только там, где есть курсор:
	   на сенсорном экране оно осталось бы висеть после касания. */
	@media (hover: hover) {
		.nav__list .menu-item-has-children:hover .sub-menu,
		.nav__list .menu-item-has-children:focus-within .sub-menu {
			visibility: visible;
			opacity: 1;
		}
	}

	.nav__contacts {
		display: none;
	}

	/*
	 * Шапка раскладывается тремя колонками, а не потоком: меню обязано
	 * стоять по центру полосы, а не по центру остатка между логотипом
	 * и кнопкой. Крайние колонки одинаковой ширины — тогда середина
	 * совпадает с серединой полосы при любой длине названия и подписи
	 * на кнопке.
	 *
	 * Бургер на этой ширине скрыт через display: none, поэтому в сетке
	 * остаётся ровно три элемента: логотип, меню, кнопка. Это важно —
	 * visibility: hidden оставил бы четвёртую колонку, и центр уехал бы.
	 */
	.header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
		align-items: center;
	}

	.branding {
		margin-right: 0;
	}

	.nav__list {
		flex-wrap: wrap;
		justify-content: center;
	}

	.header__actions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 20px;
	}

	.grid-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.benefits {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Колонки преимуществ разделяются волосяной линейкой слева —
	   так же, как секции разделяются линейкой сверху. */
	.benefits__item + .benefits__item {
		padding-left: var(--gutter);
		border-left: 1px solid var(--rule);
	}

	.steps {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	/* Контакты вытягиваются в одну строку: четыре коротких блока, каждый
	   со своей линейкой сверху, читаются как одна строка выходных данных.
	   Раньше на широком экране они стояли в два ряда по два, и половина
	   экрана справа от «Фабрики» пустовала. Раньше 1024px не разворачиваем:
	   на планшете в четверть строки перестаёт помещаться телефон. */
	.contacts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/*
	 * Текст первого экрана выравнивается по центру высоты колоды, а не по
	 * верху, — единственное место в теме, где колонки не по верху: колода
	 * заметно выше текста, и при выравнивании по верху под текстом
	 * оставалась пустая треть экрана.
	 */
	.hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		align-items: center;
		gap: clamp(32px, 5vw, 80px);
	}

	.hero {
		padding-top: 56px;
	}

	.hero__media {
		margin-top: 0;
	}

	.hero__slides-space {
		aspect-ratio: 3 / 4;
	}

	/* Уступ и уменьшение растут вместе с шириной экрана: колода
	   раскладывается внутри своей колонки, места под неё больше. */
	:root {
		--deck-shift: 34px;
		--deck-scale: 0.085;
		--deck-shadow: rgba(10, 14, 22, 0.16);
	}

	.catalog-layout {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: clamp(28px, 3vw, 48px);
	}

	/*
	 * Фильтр прилипает к верху при прокрутке: список товаров длиннее
	 * фильтра, и без этого галочки уезжают за экран на первом же экране
	 * прокрутки. Отступ — высота шапки: она тоже прилипшая.
	 */
	.catalog-layout__aside {
		position: sticky;
		top: calc(var(--header-height) + 20px);
	}

	.filter__toggle {
		display: none;
	}

	.js .filter__body {
		display: block;
	}

	.product__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: clamp(32px, 4vw, 64px);
	}

	.footer__inner {
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
		gap: var(--gutter);
	}

	/*
	 * Нижний блок: карточка контактов уже, чем половина полосы, и прижата
	 * к правому краю — иначе она закрывает середину кадра, где стоят люди.
	 * Ширина задана в пикселях, а не долей: контакты — это четыре короткие
	 * строки, и от ширины экрана их потребность в месте не меняется.
	 */
	.cta__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
		gap: clamp(24px, 4vw, 72px);
	}

	/*
	 * Карточка полупрозрачная: сквозь неё видно кадр. Плотность 0.82,
	 * а не меньше, — это предел, при котором светлая бронза подписей
	 * держит AA даже над белым пикселем снимка (4.9:1). Размытие нужно
	 * не для красоты: без него сквозь панель просвечивают детали фона
	 * и мелкий текст по ним рябит.
	 */
	.cta__card {
		background: rgba(10, 14, 22, 0.82);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}
}

/* ==========================================================================
   ≥ 1180px
   ========================================================================== */

@media (min-width: 1180px) {
	/*
	 * Каноническая раскладка секции: лейбл и заголовок в левых колонках,
	 * содержание — в правых. Колонки выравниваются по верху; центрирование
	 * опустило бы короткую и сломало общий отступ сверху.
	 */
	.split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
		gap: clamp(32px, 4vw, 72px);
	}

	.split .section-head {
		margin-bottom: 26px;
	}

	:root {
		--deck-shift: 62px;
		--deck-scale: 0.1;
	}

	/*
	 * Ограничения ширины у заголовка нет намеренно. Оно стояло в 14ch,
	 * и строка «под вашим брендом» не помещалась — заголовок разбивался
	 * на четыре строки вместо трёх, поверх авторских переносов. Заголовки
	 * в этом макете ломаются вручную, значит колонка обязана вмещать
	 * самую длинную строку целиком.
	 */

	.mosaic {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/*
	 * Ведущая плитка занимает две строки, и её снимок должен заполнить
	 * всю высоту. Растягивать его через height: 100% нельзя: высота строк
	 * считается по содержимому, а содержимое ждёт высоту строки — круговая
	 * зависимость. Пока снимок не загружен (а он ниже первого экрана
	 * и грузится лениво), разрешать её нечем, и браузер растягивал мозаику
	 * до полутора тысяч пикселей вместо трёхсот.
	 *
	 * Absolute убирает снимок из расчёта высоты вовсе: строки считаются
	 * по двум малым плиткам с их собственной пропорцией, а ведущий кадр
	 * заполняет то, что получилось.
	 */
	.mosaic__item--1 {
		position: relative;
		grid-column: span 2;
		grid-row: span 2;
	}

	.mosaic__item--1 img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}
}