/**
 * Мобильная адаптация главной под макет 1441.
 *
 * Мобильного макета в Figma нет — раскладка выведена из десктопного:
 * сохраняются пропорции, цвета и порядок блоков, меняется только сетка.
 * Файл называется zz-*, чтобы грузиться последним и перекрывать секции.
 */

/* ============ Планшет: до 1024 ============ */

@media (max-width: 1024px) {
	.sm-agency__title,
	.sm-benefits__title,
	.sm-services__title,
	.sm-outdoor__title,
	.sm-clients__title,
	.sm-turnkey__title,
	.sm-faq__title,
	.sm-blog__title,
	.sm-cta__title,
	.sm-calc__title {
		font-size: 32px;
	}

	/*
	 * Шапка в промежутке 768–1024. Бургер включается только с 767,
	 * поэтому здесь ещё стоит полная раскладка: логотип, слоган, номер
	 * в 20px с `nowrap`, соцсети и кнопка. В строку это не влезает —
	 * номер наезжал на логотип. Сжимаем: слоган убираем, номер меньше,
	 * логотипу разрешаем ужиматься, блоку контактов — нет.
	 */
	.sm-header__tagline {
		display: none;
	}

	.sm-header__top {
		gap: 16px;
	}

	.sm-header__brand {
		min-width: 0;
	}

	.sm-header__logo svg {
		width: 160px;
		height: auto;
	}

	.sm-header__actions {
		flex-shrink: 0;
		gap: 16px;
	}

	.sm-header__phone {
		font-size: 16px;
	}

	.sm-header__hours {
		font-size: 11px;
	}

	/*
	 * На 768 верхняя строка требовала 735px при доступных 688. Флекс со
	 * `space-between` при нехватке места не переносит, а стягивает блоки
	 * друг на друга — телефон садился на логотип (замерено: −47px).
	 * Соцсети отсюда убираем: они дублируются в подвале и в панели меню,
	 * а кнопку заявки оставляем — она приносит обращения.
	 */
	.sm-header__actions .sm-header__socials {
		display: none;
	}

	/*
	 * Логотип обязан уметь ужиматься. В header.css у него `flex-shrink: 0`,
	 * поэтому `min-width: 0` на родителе не спасал.
	 */
	.sm-header__logo {
		flex-shrink: 1;
		min-width: 0;
	}

	/*
	 * Экспорт из Figma несёт `overflow="visible"`: графика рисуется за
	 * границами своей коробки и налезает на соседа, даже когда раскладка
	 * формально сошлась. Гасим — viewBox совпадает с рисунком, обрезать нечего.
	 */
	.sm-header__logo svg {
		max-width: 100%;
		overflow: hidden;
	}
}

/* ============ Мобильные: до 767 ============ */

@media (max-width: 767px) {

	.sm-container {
		padding: 0 20px;
	}

	/* --- шапка --- */

	.sm-header {
		padding: 12px 0;
	}

	.sm-header .sm-container {
		gap: 16px;
	}

	/* Одна строка: логотип, телефон, бургер. Остальное — в панели меню
	   (стили панели и бургера — в sections/header.css). */
	/*
	 * Единый шаг шапки. Промежутки между логотипом, номером и бургером
	 * равны полю страницы (20px, ниже 400 — 16px), поэтому все расстояния
	 * читаются одинаковыми. У бургера в header.css `margin-right: -10px` —
	 * это оптическая поправка: коробка 44px шире рисунка полосок, и без
	 * неё полоски вставали бы дальше от края, чем логотип.
	 */
	.sm-header__top {
		gap: 20px;
		min-height: 0;
	}

	.sm-header .sm-container {
		gap: 0;
	}

	/*
	 * `min-width: 0` обязателен: без него флекс-элемент не может стать уже
	 * своего содержимого, и логотип выдавливал бы блок с номером на себя.
	 */
	.sm-header__brand {
		flex: 0 1 auto;
		min-width: 0;
		gap: 12px;
	}

	.sm-header__logo svg {
		width: 140px;
		max-width: 100%;
		height: auto;
	}

	/* Номер и часы не сжимаются, поэтому место под них резервируем жёстко. */
	.sm-header__contact {
		flex-shrink: 0;
	}

	/* Слоган на узком экране только шумит. */
	.sm-header__tagline {
		display: none;
	}

	/*
	 * Промежуток задан по рисунку, а не по коробке: у бургера коробка 44px
	 * заметно шире трёх полосок, поэтому голый gap: 20px давал зазор в 27px
	 * — визуально вдвое больше поля страницы. 10px + собственный отступ
	 * коробки дают те же 16–17px, что и слева у логотипа.
	 */
	.sm-header__actions {
		flex: 0 0 auto;
		gap: 10px;
	}

	/*
	 * Номер набран мельче десктопного: он неразрывный (`nowrap`) и потому
	 * задаёт минимальную ширину всей правой части шапки. Каждый пункт
	 * кегля здесь — примерно 8px запаса против наложения на логотип.
	 */
	.sm-header__phone {
		font-size: 12px;
	}

	.sm-header__hours {
		font-size: 10px;
	}

	/* Соцсети из верхнего ряда переезжают в панель меню. */
	.sm-header__actions .sm-header__socials {
		display: none;
	}

	.sm-header__cta {
		display: none;
	}

	/* --- геро --- */

	.sm-hero {
		padding-top: 12px;
	}

	/* Плашки направлений — лента с прокруткой. */
	.sm-shortcuts {
		gap: 12px;
		margin: 0 -20px;
		padding: 0 20px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.sm-shortcuts::-webkit-scrollbar {
		display: none;
	}

	.sm-shortcuts__item {
		flex: none;
		width: 96px;
	}

	.sm-shortcuts__circle {
		width: 88px;
		height: 88px;
	}

	.sm-shortcuts__label {
		font-size: 12px;
	}

	.sm-hero__card {
		min-height: 0;
		margin-top: 24px;
	}

	.sm-hero__slide {
		position: relative;
	}

	.sm-hero__body {
		width: auto;
		max-width: none;
		gap: 18px;
		margin: 32px 20px 0;
	}

	.sm-hero__title {
		font-size: 26px;
	}

	.sm-hero__text {
		font-size: 14px;
	}

	.sm-hero__actions {
		flex-direction: column;
		width: 100%;
	}

	.sm-hero__btn {
		width: 100%;
	}

	/*
	 * Кубик уезжает под текст фоном: в колонку он не помещается,
	 * а как декор внизу карточки читается хорошо.
	 */
	.sm-hero__visual {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: 260px;
		margin-top: 12px;
		object-fit: contain;
	}

	.sm-hero__deco,
	.sm-hero__dots {
		display: none;
	}

	/* --- агентство --- */

	.sm-agency {
		padding-top: 56px;
	}

	.sm-agency__cards {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 28px;
	}

	.sm-agency__card {
		min-height: 320px;
		padding: 24px 20px;
	}

	.sm-agency__value {
		font-size: 30px;
	}

	.sm-agency__avatars,
	.sm-agency__cities {
		left: 20px;
		bottom: 24px;
	}

	.sm-agency__avatar {
		width: 68px;
		height: 68px;
	}

	.sm-agency__avatars .sm-agency__avatar + .sm-agency__avatar {
		margin-left: -20px;
	}

	.sm-agency__avatar--solo {
		left: auto;
		right: 20px;
	}

	.sm-agency__actions {
		margin-top: 28px;
	}

	.sm-agency__btn {
		width: 100%;
	}

	/* --- преимущества --- */

	.sm-benefits {
		margin-top: 56px;
		padding: 48px 0 56px;
	}

	.sm-benefits__list {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 28px;
	}

	.sm-benefits__card {
		min-height: 0;
		padding: 24px 20px;
	}

	.sm-benefits__cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		min-height: 0;
		padding: 24px 20px;
	}

	.sm-benefits__cta-text {
		max-width: none;
		font-size: 20px;
	}

	.sm-benefits__cta-actions {
		flex-wrap: wrap;
		width: 100%;
	}

	.sm-benefits__cta-btn {
		width: 100%;
	}

	/* --- услуги --- */

	.sm-services {
		padding-top: 48px;
	}

	.sm-services__list {
		margin-top: 28px;
	}

	.sm-services__link {
		min-height: 92px;
		padding-left: 56px;
	}

	/*
	 * На десктопе названия и номера светло-серые и темнеют по наведению.
	 * На тач-экране ховера нет — сразу даём основной цвет, иначе список
	 * читается как неактивный.
	 */
	.sm-services__name {
		font-size: 22px;
		text-align: left;
		color: var(--sm-ink);
	}

	.sm-services__num {
		font-size: 14px;
		color: var(--sm-ink);
	}

	/* Снимки при наведении на тач-экране не показываются. */
	.sm-services__media {
		display: none;
	}

	.sm-services__actions {
		flex-direction: column;
		margin-top: 28px;
	}

	.sm-services__btn {
		width: 100%;
	}

	/* --- карта --- */

	.sm-coverage {
		padding-top: 48px;
	}

	/*
	 * Уголки уводим ближе к краю, а текст — ниже и правее:
	 * на узком экране скобка накладывалась на заголовок.
	 */
	.sm-coverage__block {
		flex-direction: column;
		gap: 24px;
		min-height: 0;
		margin-top: 20px;
		padding: 52px 28px 40px;
	}

	.sm-coverage__corner {
		--sm-corner-size: 14px;
	}

	.sm-coverage__corner--tl,
	.sm-coverage__corner--bl {
		left: 14px;
	}

	.sm-coverage__corner--tr,
	.sm-coverage__corner--br {
		right: 14px;
	}

	.sm-coverage__corner--tl,
	.sm-coverage__corner--tr {
		top: 14px;
	}

	.sm-coverage__corner--bl,
	.sm-coverage__corner--br {
		bottom: 14px;
	}

	/*
	 * Карта свёрстана в системе координат 472x549 — уменьшаем целиком
	 * трансформацией, чтобы подписи городов не разъехались.
	 */
	.sm-coverage__map {
		align-self: center;
		margin-bottom: -209px;
		transform: scale(0.62);
		transform-origin: top center;
	}

	.sm-coverage__body {
		padding-top: 0;
	}

	.sm-coverage__lead {
		max-width: none;
		font-size: 28px;
	}

	.sm-coverage__text {
		max-width: none;
		font-size: 14px;
	}

	.sm-coverage__btn {
		align-self: stretch;
	}

	/* --- виды наружной рекламы --- */

	.sm-outdoor {
		padding-top: 48px;
	}

	/*
	 * Высота строки — минимум, а не фиксированная величина: у карточки
	 * с длинным заголовком контент выше 260px, и при жёстком треке она
	 * наезжала на следующую карточку.
	 */
	.sm-outdoor__grid {
		grid-template-columns: 1fr;
		grid-auto-rows: minmax(260px, auto);
		gap: 12px;
		margin-top: 28px;
	}

	.sm-outdoor__card--lead {
		grid-row: span 1;
	}

	.sm-outdoor__card-body {
		max-width: 62%;
		padding: 24px 0 0 20px;
	}

	.sm-outdoor__card-title {
		font-size: 18px;
	}

	.sm-outdoor__card-text {
		font-size: 13px;
	}

	.sm-outdoor__card--lead .sm-outdoor__card-img {
		right: -40px;
		width: 320px;
	}

	.sm-outdoor__actions {
		margin-top: 28px;
	}

	.sm-outdoor__btn {
		width: 100%;
		max-width: none;
	}

	/* --- чёрный блок с формой --- */

	.sm-cta {
		padding-top: 48px;
	}

	.sm-cta__block {
		min-height: 0;
		padding: 40px 20px;
	}

	.sm-cta__corner {
		--sm-corner-size: 14px;
	}

	.sm-cta__corner--tl {
		top: 16px;
		left: 16px;
	}

	.sm-cta__corner--br {
		right: 16px;
		bottom: 16px;
	}

	.sm-cta__title {
		font-size: 24px;
	}

	.sm-cta__text {
		font-size: 14px;
	}

	.sm-form__grid,
	.sm-form__consents {
		grid-template-columns: 1fr;
	}

	.sm-cta__form input[type="submit"] {
		width: 100%;
		min-width: 0;
	}

	.sm-form__submit {
		display: block;
	}

	/* --- под ключ --- */

	.sm-turnkey {
		padding-top: 48px;
	}

	.sm-turnkey__filters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin: 20px -20px 0;
		padding: 0 20px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.sm-turnkey__filters::-webkit-scrollbar {
		display: none;
	}

	.sm-turnkey__filter {
		flex-shrink: 0;
	}

	.sm-turnkey__viewport {
		margin-top: 28px;
	}

	.sm-turnkey__slide {
		flex-direction: column;
		width: 280px;
	}

	.sm-turnkey__media {
		width: 280px;
		height: 260px;
	}

	.sm-turnkey__body {
		width: 280px;
		min-height: 0;
		padding: 20px;
	}

	.sm-turnkey__case-title {
		font-size: 17px;
	}

	.sm-turnkey__btn {
		width: 100%;
		min-width: 0;
	}

	/* --- клиенты --- */

	.sm-clients {
		padding-top: 48px;
	}

	.sm-clients__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		margin-top: 28px;
	}

	.sm-clients__item {
		min-height: 120px;
		padding: 16px;
	}

	/* --- блог --- */

	.sm-blog {
		padding-top: 48px;
	}

	/*
	 * Новости — лента со свайпом: карточки в колонку занимали по экрану
	 * каждая. Прокрутка с примагничиванием, как у плашек направлений.
	 */
	.sm-blog__list {
		display: flex;
		gap: 12px;
		margin: 28px -20px 0;
		padding: 0 20px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.sm-blog__list::-webkit-scrollbar {
		display: none;
	}

	.sm-blog__card {
		flex: 0 0 270px;
		scroll-snap-align: start;
	}

	.sm-blog__btn {
		width: 100%;
		min-width: 0;
	}

	/* --- FAQ --- */

	.sm-faq {
		padding-top: 48px;
	}

	.sm-faq__list {
		margin-top: 28px;
	}

	.sm-faq__question {
		gap: 14px;
		padding: 14px 20px;
	}

	.sm-faq__text {
		font-size: 14px;
	}

	.sm-faq__answer {
		padding: 0 20px 16px;
	}

	/* --- расчёт за 2 часа --- */

	.sm-calc {
		padding-top: 48px;
	}

	.sm-calc__block {
		flex-direction: column;
		gap: 28px;
		min-height: 0;
		padding: 40px 20px;
	}

	.sm-calc__corner {
		--sm-corner-size: 14px;
	}

	.sm-calc__corner--tl {
		top: 16px;
		left: 16px;
	}

	.sm-calc__corner--br {
		right: 16px;
		bottom: 16px;
	}

	.sm-calc__title {
		font-size: 26px;
	}

	.sm-calc__text {
		font-size: 14px;
	}

	.sm-calc__social-icon {
		width: 52px;
		height: 52px;
	}

	.sm-calc__form {
		width: 100%;
		max-width: none;
	}

	.sm-calc__form input[type="submit"] {
		width: 100%;
		min-width: 0;
	}

	/* --- подвал --- */

	.sm-footer {
		margin-top: 48px;
		padding: 24px 0 32px;
	}

	.sm-footer__logo svg {
		width: 180px;
	}

	.sm-footer__desc {
		font-size: 14px;
	}

	.sm-footer__cols {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 16px;
		margin-top: 32px;
	}

	.sm-footer__col-title {
		font-size: 20px;
	}

	.sm-footer__cookie {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-top: 32px;
		padding: 18px;
	}

	.sm-footer__cookie-text {
		font-size: 13px;
	}

	.sm-footer__cookie-btn {
		width: 100%;
		min-width: 0;
	}

	/* --- модальное окно --- */

	.sm-modal {
		align-items: flex-start;
		padding: 12px;
	}

	.sm-modal__window {
		flex-direction: column;
		gap: 20px;
		min-height: 0;
		padding: 20px;
		border-radius: 20px;
	}

	.sm-modal__visual {
		width: 100%;
		height: 170px;
	}

	/*
	 * На узких экранах вертикальный кадр ложится широкой полосой. При жёсткой
	 * высоте 170px на планшете полоса выходила короткой и широкой, и щит
	 * с собачкой обрезался по цене и телефону. Высота растёт вместе с шириной
	 * окна — примерно в пропорции самого щита, поэтому он помещается целиком
	 * на любом узком экране (KOY-1664).
	 *
	 * Именно height, а не aspect-ratio: внутри лежит <img> с height: 100%,
	 * при height: auto он тянет блок до своей высоты и пропорция игнорируется.
	 */
	.sm-modal__visual {
		height: 52vw;
		max-height: 380px;
	}

	/*
	 * Тот же сдвиг видимой полосы к щиту, что и в modal.css: там правило
	 * стоит в блоке до 700px, а колоночная раскладка живёт до 767px —
	 * на планшетах в промежутке кадр обрезался по центру, то есть по дороге.
	 */
	.sm-modal__visual img {
		object-position: 50% 22.5%;
	}

	.sm-modal__corner {
		--sm-corner-size: 14px;
	}

	.sm-modal__corner--tl,
	.sm-modal__corner--bl {
		left: 14px;
	}

	.sm-modal__corner--tr,
	.sm-modal__corner--br {
		right: 14px;
	}

	.sm-modal__corner--tl,
	.sm-modal__corner--tr {
		top: 14px;
	}

	.sm-modal__corner--bl,
	.sm-modal__corner--br {
		bottom: 14px;
	}

	.sm-modal__body {
		padding-top: 0;
	}

	.sm-modal__title {
		font-size: 24px;
	}

	.sm-modal__text {
		font-size: 14px;
	}
}

/* ============ Узкие экраны: до 400 ============ */

@media (max-width: 400px) {
	.sm-clients__list,
	.sm-footer__cols {
		grid-template-columns: 1fr;
	}

	/* На 320–400 логотип, номер и бургер в сумме шире экрана: ужимаем поля
	   и логотип. Часы работы остаются — кегль номера уже уменьшен выше. */
	.sm-header__logo svg {
		width: 116px;
	}

	.sm-header .sm-container {
		padding: 0 16px;
	}

	/* Шаг уменьшается вместе с полем страницы — расстояния остаются равными. */
	.sm-header__top {
		gap: 16px;
	}

	.sm-header__actions {
		gap: 8px;
	}
}