/* 🎨 МОБИЛЬНАЯ АДАПТАЦИЯ ДЛЯ HERO PAGE */

/* Адаптация для iPhone 14 Pro Max (430px width) и подобных устройств */
@media (max-width: 480px) {
  /* 🎯 1. УМЕНЬШАЕМ ГЛАВНЫЙ H1 ЗАГОЛОВОК */
  h1.text-5xl {
    font-size: 2rem !important; /* было 3rem, стало 2rem */
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important;
  }
  
  h1.text-5xl span.text-6xl {
    font-size: 2.5rem !important; /* было 3.75rem, стало 2.5rem */
  }
  
  /* 🎯 2. УМЕНЬШАЕМ ОТСТУПЫ HERO СЕКЦИИ */
  /* Заменяем py-24 (6rem) на более компактный */
  div.max-w-7xl.mx-auto.px-6.py-24 {
    padding-top: 3rem !important; /* было 6rem, стало 3rem */
    padding-bottom: 3rem !important;
  }
  
  /* 🎯 3. ИКОНКА СВЕРХУ, ТЕКСТ СНИЗУ (вместо скрытия) */
  /* Изменяем направление flex контейнера */
  #section-1-result .flex.items-start.gap-6,
  #section-1-result div[class*="flex"][class*="items-start"] {
    flex-direction: column !important;
    align-items: center !important; /* Центрируем иконку */
    gap: 1rem !important; /* Отступ между иконкой и текстом */
  }
  
  /* Уменьшаем иконку и центрируем */
  #section-1-result .flex-shrink-0.bg-gradient-to-br,
  #section-1-result div[class*="flex-shrink-0"][class*="bg-gradient-to-br"] {
    padding: 0.75rem !important; /* было 1rem (p-4), стало 0.75rem */
    width: auto !important;
    margin: 0 auto !important; /* Центрируем */
  }
  
  /* Уменьшаем SVG иконку внутри */
  #section-1-result .flex-shrink-0 svg,
  #section-1-result div[class*="flex-shrink-0"] svg {
    width: 32px !important; /* было 40px */
    height: 32px !important;
  }
  
  /* Текст на всю ширину и по центру */
  #section-1-result .flex.items-start > div:not(.flex-shrink-0) {
    text-align: center !important;
    width: 100% !important;
  }
  
  /* 🎯 5. ДОПОЛНИТЕЛЬНЫЕ ОПТИМИЗАЦИИ */
  /* Уменьшаем padding контейнеров */
  #section-1-result .bg-white.rounded-2xl.shadow-lg {
    padding: 1.5rem !important; /* было 2.5rem (p-10) */
  }
  
  /* Уменьшаем заголовок в section-1-result */
  #section-1-result h3.text-3xl {
    font-size: 1.5rem !important; /* было 1.875rem */
    margin-bottom: 1rem !important;
  }
  
  /* Уменьшаем текст */
  #section-1-result p.text-lg {
    font-size: 1rem !important;
  }
  
  /* Компактнее блок с лупой */
  #section-1-result .bg-blue-50.border-l-4 {
    padding: 1rem !important;
  }
  
  /* 🎯 6. УНИВЕРСАЛЬНОЕ ПРАВИЛО: ИКОНКА СВЕРХУ ДЛЯ ВСЕХ БЛОКОВ */
  /* РЕШЕНИЕ ПОЛЬЗОВАТЕЛЯ: flex-direction: column + nowrap для родительских контейнеров */
  
  /* 🔥 ПРОСТОЕ ПРАВИЛО БЕЗ :not() - РАБОТАЕТ ВЕЗДЕ! */
  /* МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ для flex.items-start с любым gap */
  div.flex.items-start.gap-6,
  div.flex.items-start.gap-4,
  div.flex.items-start.gap-3,
  .flex.items-start.gap-6,
  .flex.items-start.gap-4,
  .flex.items-start.gap-3 {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 1rem !important;
  }
  
  /* Дополнительно: для прямых потомков body, main, section */
  body > .flex.items-start.gap-6,
  main .flex.items-start.gap-6,
  section .flex.items-start.gap-6 {
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* 🔥 АНАЛОГИЧНО: flex.gap-3 и flex.gap-8 (БЕЗ items-start) */
  div.flex.gap-3,
  div.flex.gap-8 {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 1rem !important;
  }
  
  /* 🚫 ИСКЛЮЧЕНИЕ: grid-cols-2 в блоке "Способы оплаты" - 1 КОЛОНКА на мобильных! */
  .grid.grid-cols-2.gap-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  
  /* 🚫 ИСКЛЮЧЕНИЕ: flex.items-center.gap-1.5 (маленькие элементы с иконками) - ГОРИЗОНТАЛЬНО! */
  div.flex.items-center.gap-1\.5.text-xs,
  .flex.items-center.gap-1\.5.text-xs {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }
  
  /* 🔥 LI элементы внутри блоков - тоже COLUMN для мобильных */
  li.flex.items-start.gap-2 {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }
  
  /* 🔥 DIV элементы с flex.items-start.gap-2 - COLUMN */
  div.flex.items-start.gap-2 {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }
  
  /* SVG иконки в li - центрируем */
  li.flex.items-start.gap-2 svg {
    margin: 0 auto !important;
  }
  
  /* ИСКЛЮЧЕНИЕ: Pricing блоки (с ul/li) - горизонтально */
  .border-2.rounded-3xl div.flex.items-start {
    flex-direction: row !important;
  }
  
  /* ИСКЛЮЧЕНИЕ: Блоки сравнения - горизонтально */
  .border-2.border-red-200 div.flex.items-start,
  .border-2.border-blue-200 div.flex.items-start {
    flex-direction: row !important;
  }
  
  /* ИСКЛЮЧЕНИЕ: LI в блоках сравнения - горизонтально */
  .border-2.border-red-200 li.flex.items-start,
  .border-2.border-blue-200 li.flex.items-start {
    flex-direction: row !important;
    text-align: left !important;
  }
  
  /* 🔥 ПЕРЕБИВАЕМ ИСКЛЮЧЕНИЯ: Обычные блоки (с bg-white) - COLUMN! */
  /* Более специфично чем .border-2.border-blue-200 */
  .bg-white.border-2 .flex.items-start.gap-6,
  .bg-white.border-2 .flex.items-start.gap-4,
  .bg-white.border-2 .flex.items-start.gap-3,
  .bg-white .flex.items-start.gap-6,
  .bg-white .flex.items-start.gap-4 {
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* Глобальное правило для ОСТАЛЬНЫХ flex.items-start */
  div.flex.items-start:not(:has(ul)):not(:has(li)):not(.border-2) {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
  }
  
  /* 🎯 КРИТИЧНО: Правила для LI.flex.items-start (pricing блоки)! */
  /* НО НЕ для блоков сравнения (border-2, from-red-50, from-blue-50) */
  .border-2.rounded-3xl li.flex.items-start {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }
  
  /* SVG иконки в li pricing блоков остаются компактными */
  .border-2.rounded-3xl li.flex.items-start svg {
    flex-shrink: 0 !important;
    margin: 0 auto !important;
  }
  
  /* Span элементы в li pricing блоков центрируются */
  .border-2.rounded-3xl li.flex.items-start span {
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
  }
  
  /* 🎯 ИСКЛЮЧЕНИЕ: Блоки сравнения (border-2.border-red-200, border-blue-200) */
  /* Оставляем горизонтальный layout (иконка слева, текст справа) */
  .border-2.border-red-200 li.flex.items-start,
  .border-2.border-blue-200 li.flex.items-start,
  .border-2.border-green-200 li.flex.items-start {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    text-align: left !important;
  }
  
  /* Иконки слева */
  .border-2.border-red-200 li.flex.items-start svg,
  .border-2.border-blue-200 li.flex.items-start svg,
  .border-2.border-green-200 li.flex.items-start svg {
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  
  /* Текст справа */
  .border-2.border-red-200 li.flex.items-start span,
  .border-2.border-blue-200 li.flex.items-start span,
  .border-2.border-green-200 li.flex.items-start span {
    text-align: left !important;
    width: auto !important;
  }
  
  /* 🎯 ИСПРАВЛЕНИЕ: H4 заголовки внутри блоков сравнения */
  .border-2.border-red-200 h4,
  .border-2.border-blue-200 h4,
  .border-2.border-green-200 h4 {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
  }
  
  /* Flex контейнеры с h4 тоже должны быть ограничены */
  .border-2.border-red-200 div.flex.items-center,
  .border-2.border-blue-200 div.flex.items-center,
  .border-2.border-green-200 div.flex.items-center {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* 🎯 УНИВЕРСАЛЬНОЕ ПРАВИЛО: ВСЕ H4 на мобильных не должны выпирать */
  h4.text-xl,
  h4.font-bold,
  h4 {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* 🎯 ТОЧНОЕ ПРАВИЛО: Только для заголовков, НЕ для самих цифр! */
  
  /* Блоки сравнения (border-2) - центрируем заголовки */
  .border-2 div.flex.items-center {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Контейнеры заголовков в блоках с цифрами - NOWRAP как у родителя */
  /* Только для flex.items-center ВНУТРИ .flex-1, НЕ для .w-16.h-16! */
  /* КРИТИЧНО: Перебиваем ЯВНЫЙ flex-wrap класс из HTML! */
  .flex.items-start.gap-6 > .flex-1 > div.flex.items-center,
  .flex.items-start.gap-4 > .flex-1 > div.flex.items-center,
  .flex.items-start.gap-6 > .flex-1 > .flex.items-center,
  .flex.items-start.gap-4 > .flex-1 > .flex.items-center {
    display: flex !important;
    flex-direction: column !important;      /* ← COLUMN для мобильных! */
    flex-wrap: nowrap !important;           /* ← Перебиваем Tailwind класс! */
    justify-content: center !important;     /* ← Центрируем */
    align-items: center !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 0.5rem !important;
  }
  
  /* H4 и span внутри - должны помещаться */
  .flex.items-start.gap-6 .flex-1 div.flex.items-center h4,
  .flex.items-start.gap-4 .flex-1 div.flex.items-center h4 {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }
  
  .flex.items-start.gap-6 .flex-1 div.flex.items-center span,
  .flex.items-start.gap-4 .flex-1 div.flex.items-center span {
    flex: 0 0 auto !important;
    max-width: fit-content !important;
  }
  
  /* Сами цифры (1, 2, 3, 4) остаются центрированными */
  .w-16.h-16.flex.items-center.justify-center {
    justify-content: center !important;  /* ← Цифра по центру! */
  }
  
  /* ВСЕ flex контейнеры на странице */
  div.flex {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Специфичные правила для секций */
  #section-1-result div.flex.items-start:not(:has(ul)):not(:has(li)),
  #section-2 div.flex.items-start:not(:has(ul)):not(:has(li)),
  #section-2-arxiv div.flex.items-start:not(:has(ul)):not(:has(li)) {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
  }
  
  /* Текстовые блоки тоже должны быть flex для центрирования */
  /* Применяем ко ВСЕМ текстовым блокам внутри flex.items-start */
  #section-1-result div.flex.items-start > div:not(.flex-shrink-0):not(:has(ul)):not(:has(li)),
  #section-2 div.flex.items-start > div:not(.flex-shrink-0):not(:has(ul)):not(:has(li)),
  #section-2-arxiv div.flex.items-start > div:not(.flex-shrink-0):not(:has(ul)):not(:has(li)),
  section div.flex.items-start > div:not(.flex-shrink-0):not(:has(ul)):not(:has(li)) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Заголовки и параграфы внутри центрируем */
  /* Применяем ко ВСЕМ текстовым элементам в flex.items-start */
  #section-1-result div.flex.items-start h4,
  #section-1-result div.flex.items-start h3,
  #section-1-result div.flex.items-start p,
  #section-1-result div.flex.items-start span,
  #section-2 div.flex.items-start h4,
  #section-2 div.flex.items-start h3,
  #section-2 div.flex.items-start p,
  #section-2 div.flex.items-start span,
  #section-2-arxiv div.flex.items-start h4,
  #section-2-arxiv div.flex.items-start h3,
  #section-2-arxiv div.flex.items-start p,
  #section-2-arxiv div.flex.items-start span,
  section div.flex.items-start h4,
  section div.flex.items-start h3,
  section div.flex.items-start p,
  section div.flex.items-start span {
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Компактные иконки везде на мобильных */
  .flex-shrink-0.bg-gradient-to-br,
  .bg-gradient-to-br.p-3,
  .bg-gradient-to-br.p-4 {
    padding: 0.75rem !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important; /* Не сжимаем иконку */
  }
  
  /* Уменьшаем SVG иконки глобально */
  .flex-shrink-0 svg,
  .bg-gradient-to-br svg {
    width: 32px !important;
    height: 32px !important;
  }
  
  /* 🎯 ИСПРАВЛЕНИЕ: Текстовые блоки не должны выходить за границы */
  #section-1-result div.flex.items-start > div:not(.flex-shrink-0) > *,
  #section-2 div.flex.items-start > div:not(.flex-shrink-0) > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Иконки в контейнерах остаются видимы, но меньше */
  .bg-blue-100 svg,
  .bg-purple-100 svg,
  .bg-cyan-100 svg,
  .bg-green-100 svg,
  .bg-orange-100 svg {
    width: 24px !important;
    height: 24px !important;
  }
  
  /* 🎯 7. ЦЕНТРИРОВАНИЕ БЛОКОВ С ЦИФРАМИ (1, 2, 3, 4) */
  /* Блоки с цифрами в этапах отбора */
  .flex-shrink-0 {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }
  
  .flex-shrink-0 > div.bg-gradient-to-br,
  .flex-shrink-0 div[class*="bg-gradient-to-br"] {
    margin: 0 auto !important; /* Дополнительное центрирование через margin */
  }
  
  /* Уменьшаем размер блоков с цифрами */
  .flex-shrink-0 .w-16.h-16 {
    width: 48px !important; /* было 64px (4rem), стало 48px */
    height: 48px !important;
  }
  
  /* Контейнер с inline-block должен центрировать содержимое */
  .inline-block.bg-white.rounded-2xl,
  .inline-block.shadow-xl,
  div[class*="inline-block"][class*="bg-white"] {
    display: block !important; /* Убираем inline-block на мобильных */
    margin: 0 auto !important; /* Центрируем через margin */
    padding: 1.5rem !important; /* Уменьшаем p-12 (3rem) до 1.5rem */
  }
  
  /* Уменьшаем крупные паддинги глобально (НЕ для pricing блоков) */
  #section-1-result .p-12,
  #section-2 .p-12,
  #section-2-arxiv .p-12,
  .inline-block.bg-white .p-12 {
    padding: 1.5rem !important; /* Уменьшаем только для секций с иконками */
  }
  
  /* Pricing блоки (border-2) оставляем с нормальным padding */
  .border-2.rounded-3xl,
  div[class*="border-2"][class*="rounded-3xl"] {
    padding: 2rem !important; /* Умеренный padding для pricing */
  }
  
  /* Текст внутри таких блоков по центру */
  .inline-block.bg-white h2,
  .inline-block.bg-white p,
  .inline-block.bg-white div {
    text-align: center !important;
  }
}

/* Адаптация для очень узких экранов (до 390px, iPhone 12 Pro) */
@media (max-width: 390px) {
  /* Ещё более компактный h1 */
  h1.text-5xl {
    font-size: 1.75rem !important;
    margin-bottom: 1rem !important;
  }
  
  h1.text-5xl span.text-6xl {
    font-size: 2.25rem !important;
  }
  
  /* Минимальные отступы hero */
  div.max-w-7xl.mx-auto.px-6.py-24 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Уменьшаем badge "Ежемесячные обновления" */
  span.inline-flex.items-center.gap-2.bg-gradient-to-r {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
  }
  
  /* Компактнее кнопки */
  button.bg-blue-600,
  button.bg-white {
    font-size: 0.875rem !important;
    padding: 0.875rem 1.5rem !important;
  }
}

/* Адаптация для планшетов (768px) */
@media (min-width: 481px) and (max-width: 768px) {
  /* Умеренное уменьшение h1 */
  h1.text-5xl {
    font-size: 2.5rem !important;
  }
  
  h1.text-5xl span.text-6xl {
    font-size: 3rem !important;
  }
  
  /* Умеренные отступы hero */
  div.max-w-7xl.mx-auto.px-6.py-24 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  
  /* Оставляем иконку, но уменьшаем */
  #section-1-result .flex-shrink-0.bg-gradient-to-br svg {
    width: 28px !important;
    height: 28px !important;
  }
  
  #section-1-result .flex-shrink-0.bg-gradient-to-br {
    padding: 0.75rem !important;
  }
}