/* ═══════════════════════════════════════════════════════════
   EXVELA · MOBILE / RESPONSIVE
   Подключается ПОСЛЕ styles.css и <style> страницы,
   поэтому перекрывает их без !important (кроме inline-стилей).
   ═══════════════════════════════════════════════════════════ */

/* ─── Базовая защита от горизонтального скролла ─── */
html, body { max-width: 100%; overflow-x: hidden; }

/* Длинные слова не должны распирать колонки */
h1, h2, h3, h4, p, li, a, span { overflow-wrap: break-word; }

/* Дети grid по умолчанию имеют min-width:auto и вылезают за контейнер */
[style*="display: grid"] > *,
.native-flags > *,
.industries-grid > *,
.packages-grid > *,
.stats-grid > *,
.cta-final-grid > *,
.native-grid > *,
.footer-top > * { min-width: 0; }

/* ═══════════ ПЛАНШЕТ: асимметричные inline-гриды в одну колонку ═══════════ */
@media (max-width: 900px) {
  [style*="grid-template-columns: 1fr 1.3fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 200px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* ═══════════ МОБИЛЬНЫЙ: ≤ 768px ═══════════ */
@media (max-width: 768px) {

  /* ─── Все inline-гриды в одну колонку ─── */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Карточки с inline padding: 48px — слишком много на телефоне */
  [style*="padding: 48px"] { padding: 28px !important; }

  /* ─── Шапка ─── */
  .utility-bar { font-size: 11px; padding: 6px 0; }
  .utility-bar .container { justify-content: center; }
  .utility-bar > .container > span { display: none; }
  .utility-bar a { margin-left: 18px; }
  .utility-bar > .container > div > a:first-child { margin-left: 0; }

  .nav { padding: 4px 0; }
  .nav-inner { gap: 10px; }
  .logo-img { height: 52px; }
  .nav-cta { padding: 9px 14px; font-size: 12px; white-space: nowrap; }
  .menu-toggle { flex-shrink: 0; padding: 8px 11px; }
  .nav-menu.active { padding: 20px; }

  /* ─── Hero ─── */
  .hero { padding: 64px 0 72px; }
  .hero .title-hero,
  .title-hero { font-size: clamp(34px, 9vw, 46px); margin-bottom: 20px; }
  .hero-subtitle { font-size: 16px; margin-bottom: 32px; }
  .hero-eyebrow { font-size: 10px; letter-spacing: 0.1em; margin-bottom: 20px; }
  .hero-buttons { gap: 16px; }
  .hero-buttons .btn-primary { width: 100%; justify-content: center; }

  /* ─── Заголовки секций ─── */
  .title-section { font-size: clamp(28px, 7vw, 36px); }
  .title-block { font-size: clamp(24px, 6vw, 32px); }
  .subtitle { font-size: 16px; }

  /* ─── Секции: сброс десктопных отступов ─── */
  .section,
  .packages,
  .process-block,
  .industries,
  .native-block,
  .cta-final,
  .stats-block { padding: 56px 0 !important; }

  /* ─── Статистика ─── */
  .stats-grid { gap: 32px; }
  .stat-num { font-size: 56px; }
  .stat-num .small { font-size: 28px; }
  .stat-label { font-size: 14px; }

  /* ─── AI-блок ─── */
  .ai-content { padding: 56px 20px; }
  .ai-title { font-size: clamp(28px, 7vw, 36px); }
  .ai-desc { font-size: 16px; }
  .ai-features li { font-size: 14px; }
  .ai-cta { width: 100%; justify-content: center; }
  .ai-visual { min-height: 300px; }
  .ai-wave { height: 120px; gap: 4px; padding: 0 20px; }
  .ai-wave-bar { width: 3px; }
  .ai-caption-top { top: 32px; font-size: 9px; }
  .ai-caption-bottom { bottom: 32px; gap: 20px; }
  .ai-live { top: 16px; right: 16px; font-size: 9px; padding: 6px 10px; }

  /* ─── Пакеты ─── */
  .packages-header { margin-bottom: 40px; }
  .package-card { min-height: auto; padding: 28px 24px; }
  .package-name { font-size: 30px; }

  /* ─── Процесс ─── */
  .process-header { margin-bottom: 40px; }
  .process-step { padding: 0; }
  .process-step-num { width: 64px; height: 64px; font-size: 22px; }

  /* ─── Индустрии ─── */
  .industry-card { padding: 24px; }
  .industries-note { padding: 24px !important; flex-direction: column; align-items: flex-start; }
  .industries-note p { font-size: 15px; }
  .industries-note .btn-secondary { width: 100%; justify-content: center; text-align: center; }

  /* ─── Native speakers: оставляем 3 колонки, но ужимаем ─── */
  .native-grid { gap: 40px; }
  .native-content h2 { font-size: clamp(28px, 7vw, 36px); }
  .native-content p { font-size: 16px; }
  .native-flags { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .native-flag { padding: 18px 6px; }
  .native-flag-emoji { font-size: 34px; margin-bottom: 8px; }
  .native-flag h3 { font-size: 16px; margin-bottom: 4px; }
  .native-flag p { font-size: 10px; line-height: 1.3; }

  /* ─── Финальный CTA ─── */
  .cta-final-title { font-size: clamp(30px, 7.5vw, 40px); }
  .cta-final-text { font-size: 16px; }
  .cta-final-card { padding: 28px 24px; }
  .cta-final-grid { gap: 36px; }

  /* ─── Кнопки ─── */
  .btn-primary,
  .btn-secondary { padding: 15px 26px; font-size: 14px; }

  /* ─── Футер ─── */
  .footer { padding: 48px 0 24px; }
  .footer-top { margin-bottom: 32px; padding-bottom: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom a { margin-right: 16px; }
}

/* ═══════════ МАЛЕНЬКИЕ ЭКРАНЫ: ≤ 380px ═══════════ */
@media (max-width: 380px) {
  .container, .container-wide { padding: 0 16px; }
  .logo-img { height: 44px; }
  .nav-cta { padding: 8px 11px; font-size: 11px; }
  .native-flag h3 { font-size: 14px; }
  .native-flag-emoji { font-size: 28px; }
  .stat-num { font-size: 48px; }
}