/* ==========================================================================
   CROPAS — адаптивность
   Брейкпоинты: 1180 · 1024 · 900 · 768 · 560 · 400
   Макеты десктопные; ниже — перестройка сеток, бургер-меню, hero 2→1 и т.п.
   ========================================================================== */

/* --- ≤ 1180px: контейнер и крупные сетки --------------------------------- */
@media (max-width: 1180px) {
	:root { --pad-x: 24px; --section-y: 54px; }

	/* Подпись «Агентство интернет-маркетинга» (203,6px) скрывается здесь, а не
	   с 560px, потому что именно тут шапка перестаёт помещаться. Замер на
	   1025px до правки: бренд 259,6 + меню 689,5 + кнопка 158 + зазоры 36 =
	   1143 при доступных 977 — не хватало 166px, и «Оставить заявку» уезжала
	   за правый край экрана (на 1025px от неё было видно 16px из 158).
	   Сетка шапки `1fr auto 1fr` ниже min-content не сжимается, а
	   `overflow-x: clip` это молча прятало — та же ловушка, что в 1.9.38. */
	/* (порог подписи бренда переехал в блок ≤1279 — см. ниже) */
	.hero__inner { gap: 40px; }
	.guarantee { grid-template-columns: 1fr; gap: 20px; }
	.guarantee__divider { display: none; }
	.price-factors,
	.first-month,
	.reasons { grid-template-columns: repeat(2, 1fr); }
	.awards { grid-template-columns: repeat(4, 1fr); gap: 16px; }
	}

/* --- ≤ 1279px: подпись бренда ------------------------------------------- */
/* Порог замерен, а не выбран: с 1280px контейнер стоит на своей max-width
   1200px, и при видимой подписи зазор лого↔меню держится 28,5px. Ниже 1280
   контейнер сужается вместе с окном, и зазор падает до нуля — на 1120px
   подпись уже наезжала на первый пункт меню. Само меню уходит под бургер
   только на 1024px, поэтому полосу 1025–1279 закрываем скрытием подписи. */
@media (max-width: 1279px) {
	.brand__sub { display: none; }
}

/* --- ≤ 1024px: бургер-меню, hero 2→1 ------------------------------------- */
@media (max-width: 1024px) {
	/* Меню → бургер */
	.main-nav,
	.header-cta { display: none; }
	.burger { display: flex; }
	.mobile-nav { display: block; }
	.site-header__inner { grid-template-columns: auto 1fr; }
	.brand { justify-self: start; }

	/* Hero в одну колонку */
	.hero__inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 44px; }
	.cr-form { max-width: 560px; }

	/* Кейс-панель и графики стекируются */
	.case-panel__cols,
	.case-card__body,
	.case-chart-block__cols { grid-template-columns: 1fr; }
	.case-panel__chart,
	.case-card__col { border-right: none; border-bottom: 1px solid var(--bd-4); }

	/* Тарифы, команда, преимущества → 2 */
	.tiers, .team, .advantages, .feature-grid, .feature-grid--4, .blog-preview, .posts-grid, .tiles, .tiles--4, .services-grid, .testimonials, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.process__tabs { grid-template-columns: repeat(2, 1fr); }
	.process__steps { grid-template-columns: repeat(3, 1fr); }

	/* CTA / калькулятор / контакты / рассылка → 1 */
	.cta-form__grid, .calc, .contacts-grid, .newsletter, .lead-magnet, .roi, .compare, .opt-groups { grid-template-columns: 1fr; }

	
	/* FAQ: убираем боковую навигацию */
		
	/* Футер 4 → 2 */
	.site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* --- ≤ 900px ------------------------------------------------------------- */
@media (max-width: 900px) {
	.facts__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
	.niche-table { grid-template-columns: 1fr; }
		.process__steps { grid-template-columns: repeat(2, 1fr); }
}

/* --- ≤ 560px: длинные подписи кнопок ------------------------------------- */
@media (max-width: 560px) {
	/* На телефоне подпись переносится, а не режется: у .btn стоит nowrap,
	   и «Заказать продвижение в городе Усть-Каменогорск» не помещается
	   ни при какой ширине экрана. */
	.btn { white-space: normal; text-align: center; padding-left: 20px; padding-right: 20px; }
	/* Утилита общего назначения: на телефоне две колонки — уже теснота. */
	.grid--2 { grid-template-columns: minmax(0, 1fr); }

	/* Попап: у эйсброва прописные с трекингом .1em плюс отбивка 56px под
	   крестик — «БЕСПЛАТНО · 1 РАБОЧИЙ ДЕНЬ» ломался на две строки уже
	   на 390px. Мельче кегль и трекинг + компактнее поля карточки. */
	/* Поля вокруг карточки 20 → 12px: на 390px это +16px ширины колонки,
	   ровно та величина, из-за которой подводка ломалась на две строки. */
	.cr-modal { padding: 12px; }
	.cr-modal__dialog { --mpx: 22px; --mpy: 24px; }
	.cr-modal__eyebrow { font-size: 11.5px; letter-spacing: .05em; }
}

/* --- ≤ 768px: планшет → мобайл ------------------------------------------- */
@media (max-width: 768px) {
	:root { --section-y: 46px; --r-card: 18px; }

	.tiers, .team, .advantages, .feature-grid, .feature-grid--4, .blog-preview, .posts-grid, .tiles, .tiles--4, .services-grid, .price-factors, .first-month, .reasons, .testimonials, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }

	.awards { grid-template-columns: repeat(2, 1fr); }
	
	.topbar__badge { display: none; }
	.topbar__inner { justify-content: center; }

	.section__head { margin-bottom: 28px; }
	.hero__cta { flex-direction: column; align-items: stretch; }
	.hero__cta .btn { width: 100%; }

	
	/* Sticky-CTA появляется на мобиле; поднимаем плавающие кнопки над ней
	   (с учётом safe-area на устройствах с «чёлкой»/жестовой панелью). */
	.sticky-cta { display: flex; }
	.floaties { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
	.cr-quiz-btn { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

	/* Плавающие кнопки на мобиле — круглые иконки без подписи.
	   Замер до правки (390×844, /uslugi/, середина страницы): широкая плашка
	   WhatsApp 102px и «Быстрый расчёт» 176px накрывали текст первого экрана
	   и спорили цветом со sticky-кнопкой «Оставить заявку» — три синих
	   призыва подряд. Кружки 48×48 (выше порога 24px по WCAG 2.5.8)
	   закрывают вчетверо меньше и читаются как вспомогательные. */
	.wa-fab,
	.cr-quiz-btn {
		width: 48px; height: 48px; padding: 0;
		border-radius: 50%;
		justify-content: center;
		gap: 0;
	}
	.wa-fab__t,
	.cr-quiz-btn__t { display: none; }

	/* Прокрутка к якорю оставляла цель под липкой панелью: у 6 из 34 вопросов
	   F.A.Q. кнопка раскрытия оказывалась под ней или под WhatsApp.
	   Панель 71px + safe-area + запас. */
	html { scroll-padding-bottom: 96px; }

	/* Круглая кнопка квиза с мобильного убрана: вместе с WhatsApp и липкой
	   панелью это три плавающих элемента на экране 390px, и она накрывала
	   кнопки первого экрана («Получить SEO-аудит», «Смотреть цены»).
	   Квиз остаётся доступен из форм и с десктопа. */
	.cr-quiz-btn { display: none; }

	/* Ползунки калькуляторов: нативная высота 16px — меньше порога нажатия.
	   Прозрачный отступ поднимает область попадания до 32px, вид не меняя. */
	.calc__range,
	.budget-calc__range { height: 32px; }

	/* Уменьшаем крупные карточки-паддинги */
	.card, .cr-form, .tier, .lead-magnet, .newsletter { padding: 24px; }
	.guarantee { padding: 24px; }
	.cta-form__grid,
	.calc { gap: 28px; }
}

/* --- ≤ 560px ------------------------------------------------------------- */
@media (max-width: 560px) {
	:root { --pad-x: 16px; }

	.topbar__contacts { gap: 12px; font-size: 12.5px; }
	.topbar__mail { display: none; }

	.facts__grid { grid-template-columns: 1fr; }
	.process__tabs,
	.process__steps { grid-template-columns: 1fr; }
	.awards { grid-template-columns: 1fr; }


	.floaties { right: 12px; }
	.wa-fab { padding: 12px 15px; font-size: 14px; }

	.h1, h1.entry-title { font-size: clamp(26px, 8vw, 34px); }
	.tab-switch { width: 100%; }
	.tab-switch__btn { flex: 1; padding: 11px 12px; font-size: 14px; }

	/* Замер: между ярлыком услуги и «Кейс 01 / 06» оставалось 5px — читалось
	   как слипание. Номер уходит на свою строку. */
	.case-panel__no { margin-left: 0; flex-basis: 100%; margin-top: 6px; }

	/* Юр-ссылки подвала на узком экране переносились так, что разделитель «·»
	   оставался один в начале строки. В столбик разделитель не нужен вовсе. */
	.site-footer__legal { flex-direction: column; align-items: flex-start; gap: 6px; }
	.site-footer__legal a + a::before { content: none; }

	/* Кнопки карт были 159 и 148px — разной ширины в одном ряду.
	   В 1.9.79 правило написали для .ct-actions — это другой блок кнопок на
	   странице; сами ссылки на карты лежат в .ct-map__links. */
	.ct-map__links { display: flex; flex-wrap: wrap; gap: 10px; }
	.ct-map__links > * { flex: 1 1 100%; justify-content: center; text-align: center; }
	.case-panel__tags { gap: 8px; }
}

/* --- ≤ 400px ------------------------------------------------------------- */
@media (max-width: 400px) {
		.btn { padding: 15px 20px; font-size: 15px; }
		}

/* Гарантируем отсутствие горизонтального скролла */
html, body { overflow-x: clip; }

/* --- iOS: поля ввода не мельче 16px ------------------------------------
   Safari на iPhone автоматически зумит страницу при фокусе на поле с
   font-size < 16px — вёрстка прыгает при каждом касании формы.
   Десктопная типографика не меняется. */
@media (max-width: 640px) {
	.field,
	.ct-formcard .field,
	.faq-cta__r .field,
	.mid-cta__field,
	.bl-search__in,
	.cr-quiz__phone,
	.faq-search__in,
	input[type="text"],
	input[type="tel"],
	input[type="email"],
	input[type="search"],
	textarea,
	select { font-size: 16px; }
}