/* ============================================================
   MOBILE RESPONSIVE OVERRIDES for Razdevator BOT
   Загружается после основного CSS (Tailwind) для переопределения
   стилей на мобильных устройствах.
   ============================================================ */

/* --- Базовые правила --- */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Улучшенный скролл на iOS */
@supports (-webkit-overflow-scrolling: touch) {
  .overflow-y-auto, .overflow-auto {
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Таблеты и меньше (≤1024px) --- */
@media (max-width: 1024px) {
  /* Секционные отступы */
  .py-24 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  /* Hero */
  .pt-32 {
    padding-top: 6rem !important;
  }
  .pb-20 {
    padding-bottom: 3rem !important;
  }
  .lg\:pt-48 {
    padding-top: 6rem !important;
  }
  .lg\:pb-32 {
    padding-bottom: 3rem !important;
  }

  /* Hero минимальная высота */
  .min-h-\[700px\] {
    min-height: auto !important;
  }

  /* Заголовки */
  .text-5xl {
    font-size: 2.25rem !important;
    line-height: 1.15 !important;
  }
  .text-6xl {
    font-size: 2.75rem !important;
    line-height: 1.1 !important;
  }
  .text-7xl {
    font-size: 3rem !important;
  }

  /* Телефонные мок-апы */
  .w-\[280px\] {
    width: min(280px, 85vw) !important;
  }
  .w-\[140px\] {
    width: min(140px, 42vw) !important;
  }

  /* Широкие контейнеры */
  .w-\[600px\] {
    width: min(600px, 90vw) !important;
  }
  .w-\[300px\] {
    width: min(300px, 85vw) !important;
  }

  /* Высокие контейнеры */
  .h-\[600px\] {
    height: auto !important;
    max-height: 80vh !important;
  }
  .h-\[420px\] {
    height: auto !important;
    max-height: 60vh !important;
  }
  .h-\[300px\] {
    height: auto !important;
    max-height: 50vh !important;
  }

  /* Стеклянная панель со статистикой */
  .p-10 {
    padding: 2rem !important;
  }
  .rounded-\[3rem\] {
    border-radius: 1.5rem !important;
  }
}

/* --- Планшеты и мобильные (≤768px) --- */
@media (max-width: 768px) {
  /* Header */
  .h-20 {
    height: 4rem !important;
  }

  /* Hero */
  .pt-32 {
    padding-top: 5rem !important;
  }
  .pb-20 {
    padding-bottom: 2rem !important;
  }
  .lg\:pt-48 {
    padding-top: 5rem !important;
  }
  .lg\:pb-32 {
    padding-bottom: 2rem !important;
  }

  /* Заголовки */
  .text-4xl {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
  }
  .text-5xl {
    font-size: 1.875rem !important;
    line-height: 1.15 !important;
  }
  .text-6xl {
    font-size: 2.25rem !important;
  }
  .text-7xl {
    font-size: 2.5rem !important;
  }

  /* Подзаголовки */
  .text-xl {
    font-size: 1.0625rem !important;
  }
  .text-lg {
    font-size: 0.9375rem !important;
  }

  /* Телефонные мок-апы */
  .w-\[280px\] {
    width: min(260px, 78vw) !important;
  }
  .w-\[140px\] {
    width: min(130px, 38vw) !important;
  }

  /* Широкие контейнеры */
  .w-\[600px\] {
    width: min(500px, 88vw) !important;
  }
  .w-\[300px\] {
    width: min(280px, 82vw) !important;
  }

  /* Высокие контейнеры */
  .h-\[600px\] {
    height: auto !important;
    max-height: 70vh !important;
  }
  .h-\[420px\] {
    height: auto !important;
    max-height: 55vh !important;
  }
  .h-\[300px\] {
    height: auto !important;
    max-height: 45vh !important;
  }

  /* Ограничение ширины контента */
  .max-w-\[520px\] {
    max-width: 92vw !important;
  }

  /* Секционные отступы */
  .py-24 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  .py-20 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Марджины */
  .mb-20 {
    margin-bottom: 2.5rem !important;
  }
  .mb-16 {
    margin-bottom: 2rem !important;
  }
  .mb-14 {
    margin-bottom: 1.75rem !important;
  }
  .mb-12 {
    margin-bottom: 1.5rem !important;
  }
  .mb-10 {
    margin-bottom: 1.25rem !important;
  }

  /* Статистика */
  .p-10 {
    padding: 1.75rem !important;
  }

  /* Тач-области */
  button, [role="button"], a[class*="px-"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Видео */
  video {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Гриды — принудительно в одну колонку */
  .sm\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* --- Телефоны (≤480px) --- */
@media (max-width: 480px) {
  /* Hero */
  .pt-32 {
    padding-top: 4rem !important;
  }
  .pb-20 {
    padding-bottom: 1.5rem !important;
  }
  .lg\:pt-48 {
    padding-top: 4rem !important;
  }
  .lg\:pb-32 {
    padding-bottom: 1.5rem !important;
  }

  /* Убираем min-h-screen для hero */
  .min-h-screen.flex.items-center {
    min-height: auto !important;
    padding-top: 5rem !important;
    padding-bottom: 3rem !important;
  }

  /* Заголовки */
  .text-3xl {
    font-size: 1.5rem !important;
  }
  .text-4xl {
    font-size: 1.5rem !important;
  }
  .text-5xl {
    font-size: 1.625rem !important;
    line-height: 1.1 !important;
  }
  .text-6xl {
    font-size: 2rem !important;
  }
  .text-7xl {
    font-size: 2rem !important;
  }
  .text-9xl {
    font-size: 4rem !important;
  }

  /* Подзаголовки */
  .text-xl {
    font-size: 0.9375rem !important;
  }
  .text-lg {
    font-size: 0.875rem !important;
  }

  /* Телефонные мок-апы */
  .w-\[280px\] {
    width: min(240px, 70vw) !important;
  }
  .w-\[140px\] {
    width: min(110px, 33vw) !important;
  }

  /* Широкие контейнеры */
  .w-\[600px\] {
    width: 94vw !important;
  }
  .w-\[300px\] {
    width: min(260px, 80vw) !important;
  }

  /* Высокие контейнеры */
  .h-\[600px\] {
    height: auto !important;
    max-height: 60vh !important;
  }
  .h-\[420px\] {
    height: auto !important;
    max-height: 50vh !important;
  }
  .h-\[300px\] {
    height: auto !important;
    max-height: 40vh !important;
  }

  /* Контейнеры */
  .max-w-\[520px\] {
    max-width: 88vw !important;
  }
  .max-w-4xl.mx-auto {
    max-width: 94vw !important;
  }

  /* Секционные отступы */
  .py-24 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Статистика */
  .p-10 {
    padding: 1.5rem !important;
  }
  .rounded-\[3rem\] {
    border-radius: 1.25rem !important;
  }

  /* Марджины */
  .mb-20 {
    margin-bottom: 2rem !important;
  }
  .mb-16 {
    margin-bottom: 1.75rem !important;
  }
  .mb-14 {
    margin-bottom: 1.5rem !important;
  }
  .mb-12 {
    margin-bottom: 1.25rem !important;
  }
  .mb-8 {
    margin-bottom: 1rem !important;
  }

  /* Карточки */
  .p-8 {
    padding: 1.25rem !important;
  }
  .p-6 {
    padding: 1rem !important;
  }

  /* Кнопки */
  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Модальное окно */
  .px-8 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .py-10 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Радиусы */
  .rounded-\[2rem\] {
    border-radius: 1.25rem !important;
  }
  .rounded-\[1\.75rem\] {
    border-radius: 1rem !important;
  }

  /* Промежутки */
  .gap-8 {
    gap: 1rem !important;
  }

  /* Hero контейнер */
  .max-w-4xl {
    max-width: 100% !important;
  }

  /* Межстрочный интервал */
  .leading-\[1\.1\] {
    line-height: 1.15 !important;
  }
}

/* --- Очень маленькие экраны (≤360px) --- */
@media (max-width: 360px) {
  .text-5xl, .text-6xl, .text-7xl {
    font-size: 1.5rem !important;
  }
  .text-4xl {
    font-size: 1.375rem !important;
  }

  .w-\[280px\] {
    width: min(220px, 65vw) !important;
  }
  .w-\[140px\] {
    width: min(100px, 30vw) !important;
  }

  .px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .w-\[300px\] {
    width: 78vw !important;
  }
}

/* --- iPhone safe-area (чёлка / Dynamic Island) --- */
@supports (padding-top: env(safe-area-inset-top)) {
  .fixed.top-0 {
    padding-top: env(safe-area-inset-top);
  }
  .min-h-screen {
    min-height: 100dvh;
  }
}

/* --- Улучшения для мобильных --- */
@media (max-width: 640px) {
  body {
    -webkit-text-size-adjust: 100%;
  }

  button, [role="button"], a {
    touch-action: manipulation;
  }
}