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

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

/* --- ≤ 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. Мельче кегль и трекинг + компактнее поля карточки. */
	.cr-modal__dialog { padding: 24px 22px; }
	.cr-modal__eyebrow { font-size: 11.5px; letter-spacing: .05em; }
	.cr-modal__list li { font-size: 14px; }
}

/* --- ≤ 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)); }

	/* Уменьшаем крупные карточки-паддинги */
	.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; }

	.brand__sub { display: none; }

	.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; }

	.case-panel__no { margin-left: 0; }
	.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; }
}