/* =============================================================================
   responsive.css — мобильная адаптация

   Восстановлено из архивного HTML. Ранее жило в inline <style> в <head>.
   Правила НЕ изменены относительно оригинала.

   Использует className-хуки, уже расставленные в JSX-компонентах:
     .nav-links, .hero-grid, .pains-grid, .feat-grid, .how-grid,
     .support-grid, .trust-grid, .pers-grid, .day-grid,
     .cmp-head, .cmp-row, .demo-grid
   ============================================================================= */

/* ──────────── Планшет и средний мобайл: ширина ≤ 960px ──────────── */
@media (max-width: 960px) {
  /* Hero: на мобилке секция по контенту, не зажатая 100vh */
  .hero-section   { min-height: auto !important; display: block !important; }
  /* Hero: текст над телефоном, меньше padding, меньше H1.
     justify-items: center — центрирует обе ячейки grid (текст и телефон) */
  .hero-grid      { grid-template-columns: 1fr !important; padding: 32px 20px 40px !important; gap: 30px !important; justify-items: center !important; }
  .hero-grid h1   { font-size: clamp(36px, 9vw, 52px) !important; }
  .hero-grid p    { font-size: 17px !important; }
  /* Текстовая колонка слева — выравниваем по левому краю внутри центрированной ячейки */
  .hero-grid > div:first-child { width: 100%; max-width: 560px; }

  /* Pricing: тарифы в одну колонку друг под другом */
  .pricing-grid   { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* Основные сетки в одну колонку */
  .pains-grid,
  .feat-grid,
  .support-grid,
  .trust-grid,
  .how-grid       { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Features на планшете — две колонки (переопределяет правило выше) */
  .feat-grid      { grid-template-columns: 1fr 1fr !important; }

  /* Персонализация и «пример дня» — одна колонка */
  .pers-grid      { grid-template-columns: 1fr !important; gap: 32px !important; }
  .day-grid       { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Таблица Compare — одна колонка, первая ячейка (название категории) — заголовок */
  .cmp-head,
  .cmp-row        { grid-template-columns: 1fr !important; gap: 10px; padding: 18px 18px !important; }
  .cmp-row > div:first-child {
    color: var(--mint-300) !important;
    font-size: 13px !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-mono);
  }
  /* На мобилке скрываем дублирующие заголовки сверху (они показываются перед ячейками) */
  .cmp-head { display: none !important; }

  /* Плашка-заголовок перед "обычные приложения" — красная */
  .cmp-cell-bad {
    background: rgba(255, 107, 107, 0.06);
    border: 1px solid rgba(255, 107, 107, 0.18);
    border-radius: 10px;
    padding: 10px 12px 12px !important;
    margin-top: 4px;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .cmp-cell-bad::before {
    content: "❌  ОБЫЧНЫЕ ПРИЛОЖЕНИЯ";
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--coral-300);
    margin-bottom: 4px;
  }
  .cmp-cell-bad > svg { display: none !important; }

  /* Плашка-заголовок перед "Mira" — зелёная с лёгким glow */
  .cmp-cell-mira {
    background: linear-gradient(180deg, rgba(63, 206, 133, 0.08), rgba(63, 206, 133, 0.04));
    border: 1px solid rgba(63, 206, 133, 0.25);
    border-radius: 10px;
    padding: 10px 12px 12px !important;
    box-shadow: 0 0 14px rgba(63, 206, 133, 0.1);
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .cmp-cell-mira::before {
    content: "✅  С MIRA";
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--mint-300);
    margin-bottom: 4px;
  }
  .cmp-cell-mira > svg { display: none !important; }

  html[lang^="en"] .cmp-cell-bad::before {
    content: "X  REGULAR APPS";
  }
  html[lang^="en"] .cmp-cell-mira::before {
    content: "OK  WITH MIRA";
  }
  html[lang^="kk"] .cmp-cell-bad::before {
    content: "X  КӘДІМГІ ҚОСЫМШАЛАР";
  }
  html[lang^="kk"] .cmp-cell-mira::before {
    content: "OK  MIRA-МЕН";
  }
}

/* ──────────── Телефон: ширина ≤ 600px ──────────── */
@media (max-width: 600px) {
  /* Features — одна колонка (было 2 на планшете) */
  .feat-grid      { grid-template-columns: 1fr !important; }

  /* Интерактивное демо: кнопки сценариев над телефоном */
  .demo-grid      { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* На узких экранах тагалайн в шапке скрываем — экономим место */
  .nav-brand-tagline,
  .legal-brand-tagline { display: none !important; }

  /* CTA-кнопка в шапке — не сжимается чтобы не теряла форму */
  .nav-cta {
    flex-shrink: 0;
  }
}

/* На узких телефонах в header остаются логотип, RU/EN/KZ и бургер.
   CTA доступна в hero и mobile-menu. */
@media (max-width: 480px) {
  .nav-cta { display: none !important; }
}

/* =============================================================================
   POLISH PASS — точечные фиксы для узких экранов
   Цель: устранить overflow и тесноту, ничего не редизайня.
   ============================================================================= */

/* Плавающие карточки вокруг hero-телефона. На мобильном их wrapper становится
   очень широким, а сам phone — узким 300px, поэтому карточки (left: -40 и т.п.)
   висят в пустом пространстве. Прячем их — они декоративные. */
@media (max-width: 960px) {
  .hero-float-card { display: none !important; }
}

/* Боковой padding секций. На десктопе 28px inline — на мобильном это слишком
   много (56px «стен» из 375px viewport). Сжимаем до 20px на <600px.
   Используем !important потому что padding задан inline в JSX. */
@media (max-width: 600px) {
  section { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Бейдж «В TELEGRAM» рядом с логотипом в шапке. На узких экранах вызывает
   тесноту (логотип + бейдж + CTA не помещаются в 375px). Убираем на <600px
   — информация дублируется в hero-секции ниже. */
@media (max-width: 600px) {
  .nav-brand-badge { display: none !important; }
}

/* Profile-карточка внутри Personalization. На десктопе 3 колонки полей,
   на мобильном длинные значения («Europe / Moscow», «Быть в форме в 40»)
   не помещаются в узкие колонки и растягивают card за границы экрана.
   Переводим в 2 колонки на <600px. */
@media (max-width: 600px) {
  .profile-fields { grid-template-columns: 1fr 1fr !important; }
}

/* Hero-телефон на очень узких экранах (iPhone SE 320px, старые Android).
   Sam phone 318px (300 + 9×2 border) упирается в края. Масштабируем на 10%.
   !important нужен потому что parallax-useEffect пишет transform inline
   через JS — без !important CSS-правило не применится. На touch-устройствах
   mousemove всё равно не срабатывает, так что конфликта с параллаксом нет. */
@media (max-width: 380px) {
  .hero-phone { transform: scale(0.9) !important; transform-origin: center top; }
}

/* Sticky header на мобильных браузерах капризничает (особенно Safari mobile):
   может не прилипать к верху viewport'а и уезжать со скроллом. Переключаем
   на position: fixed — работает одинаково везде, без зависимостей от layout
   родителей. Body получает padding-top равный высоте header'а, чтобы hero
   не спрятался под ним при первой отрисовке. */
@media (max-width: 960px) {
  header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 100;
  }
  body { padding-top: 64px; }
}

/* =============================================================================
   ULTRA-NARROW — Galaxy Z Fold сложенный (~344px) и подобные
   Самые узкие современные экраны. Всё что выше 400px уже имеет
   нормальный responsive через существующие правила. Этот блок чинит
   остатки на 340–400px: масштабы телефонов, H1, padding секций,
   trust-badges, profile-fields, кнопки сценариев.
   ============================================================================= */

@media (max-width: 400px) {
  /* Phone в Hero — масштаб сильнее (с 0.9 на 0.85), переопределяет правило ≤380px */
  .hero-phone {
    transform: scale(0.85) !important;
    transform-origin: center top;
  }

  /* Phone в TelegramDemo — 310px + 8×2 border = 326px не помещается в 344px viewport */
  .demo-phone {
    transform: scale(0.88);
    transform-origin: center top;
  }

  /* H1 в Hero — уменьшаем минимум clamp: длинные русские слова
     в 44px не балансируются корректно на узкой колонке */
  .hero-h1 {
    font-size: clamp(32px, 9vw, 44px) !important;
    line-height: 1.06 !important;
  }

  /* Секции — узкие края (16px вместо 20px), даёт +8px контенту */
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Trust-badges («100 000+», «4.9★», «5 дней») — в столбик вместо ряда.
     В ряду они занимают >320px, на Z Fold переносятся некрасиво. */
  .hero-trust {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Profile-fields — на Z Fold даже 2 колонки тесновато для длинных значений
     («Europe / Moscow», «Быть в форме в 40»). Переводим в 1 колонку. */
  .profile-fields {
    grid-template-columns: 1fr !important;
  }

  /* Кнопки сценариев в TelegramDemo — padding 16×20 с иконкой-стрелкой
     занимают много места. Ужимаем до 12×14 чтобы текст сценария влезал. */
  .demo-scenario-btn {
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
}

/* =============================================================================
   FOOTER columns — адаптация нового двухзонного подвала
   ============================================================================= */

/* На планшете и мобильном — колонки ссылок складываются в столбик */
@media (max-width: 768px) {
  .footer-columns {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer-col {
    min-width: 0 !important;
  }
}

/* =============================================================================
   NAV BURGER — fallback для ≤1200px.
   Основной laptop-breakpoint для header задан позже в hero-effects.css.
   ============================================================================= */

@media (max-width: 1200px) {
  /* Прячем десктопный список ссылок */
  .nav-links-desktop { display: none !important; }

  /* Показываем кнопку-бургер */
  .nav-burger { display: inline-flex !important; }
}

/* Анимации открытия и закрытия меню */
@keyframes menuFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes menuFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.menu-opening {
  animation: menuFadeIn 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu-closing {
  animation: menuFadeOut 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  opacity: 0; /* финальное состояние — прозрачно */
}
