/* ======================================================================
   Cosmos Travel — адаптация под планшет и мобильный
   Брейкпоинты:
     ≥1025px — десктоп (текущий дизайн без изменений)
     768–1024px — планшет: уменьшаем горизонтальные отступы и шапку
     ≤767px — мобильный: одна колонка, компактная навигация
   Подключается ПОСЛЕ colors_and_type.css.
   ====================================================================== */

/* Защита от горизонтального скролла на любых экранах */
html, body { overflow-x: hidden; max-width: 100vw; }
img, svg, video { max-width: 100%; height: auto; }

/* Hover для кнопки «Узнать о компании» в Hero */
.hero-outline-btn:hover { background: rgba(255,255,255,0.22) !important; }

/* ---------- Планшет ---------- */
@media (max-width: 1024px) {
  /* Горизонтальные отступы: 80px → 40px */
  .cosmos-pad-x { padding-left: 40px !important; padding-right: 40px !important; }
  .cosmos-section { padding-left: 40px !important; padding-right: 40px !important; }

  /* Большие промежутки между колонками — уменьшаем */
  .cosmos-grid-hero    { grid-template-columns: 1fr !important; gap: 48px !important; }
  .cosmos-grid-promo   { grid-template-columns: 1fr !important; gap: 48px !important; }
  .cosmos-grid-about   { grid-template-columns: 1fr !important; gap: 48px !important; }
  .cosmos-grid-group   { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* 4 колонки футера → 2 */
  .cosmos-grid-footer  { grid-template-columns: 2fr 1fr 1fr !important; gap: 32px !important; }

  /* Корпоративный блок: проценты не влезают на планшетной ширине */
  .cosmos-promo-card    { padding: 40px 32px !important; }
  .cosmos-percent-num   { font-size: 140px !important; line-height: 128px !important; }
  .cosmos-percent-sign  { font-size: 48px !important; line-height: 48px !important; }
  .cosmos-promo-title   { font-size: 44px !important; line-height: 48px !important; }

  /* Cosmos Group: 5 карточек не влезают, ставим 3 в ряд */
  .cosmos-grid-5 { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }

  /* Блок шагов «Как работает»: на планшете 3 колонки слишком тесные — ставим в 1 колонку */
  .cosmos-steps { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Шапка на планшете: пунктов меню много, не влезают вместе с кнопкой — прячем под бургер */
  .cosmos-nav { padding: 0 24px !important; gap: 12px !important; }
  .cosmos-nav-links { display: none !important; }
  .cosmos-nav > .cosmos-nav-logo { margin-right: auto !important; }
  .cosmos-burger { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
  .cosmos-mobile-menu { display: block !important; }

  /* Hero: огромный заголовок не влезает */
  .cosmos-hero-title { font-size: 56px !important; line-height: 60px !important; }
  .cosmos-hero-sub   { font-size: 18px !important; line-height: 24px !important; }
}

/* ---------- Мобильный ---------- */
@media (max-width: 767px) {
  /* Горизонтальные отступы: 80px → 16px */
  .cosmos-pad-x { padding-left: 16px !important; padding-right: 16px !important; }
  .cosmos-section { padding-left: 16px !important; padding-right: 16px !important; padding-top: 64px !important; }

  /* Шапка: уменьшаем высоту, прячем основной список меню (оставим логотип и кнопку) */
  .cosmos-nav { height: 64px !important; padding: 0 16px !important; gap: 12px !important; }
  .cosmos-nav-logo img { height: 48px !important; }
  .cosmos-nav > .cosmos-nav-logo { margin-right: auto !important; }
  .cosmos-nav-links { display: none !important; }
  .cosmos-nav button:not(.cosmos-burger) { display: none !important; } /* скрываем «Получить промокод» */
  .cosmos-burger { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
  .cosmos-mobile-menu { display: block !important; }

  /* Любая 2-колоночная сетка → 1 колонка */
  .cosmos-grid-2  { grid-template-columns: 1fr !important; gap: 12px !important; }
  .cosmos-grid-3  { grid-template-columns: 1fr !important; gap: 12px !important; }
  .cosmos-grid-4  { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .cosmos-grid-5  { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  .cosmos-grid-hero    { grid-template-columns: 1fr !important; gap: 32px !important; }
  .cosmos-grid-promo   { grid-template-columns: 1fr !important; gap: 32px !important; }
  .cosmos-grid-about   { grid-template-columns: 1fr !important; gap: 32px !important; }
  .cosmos-grid-group   { grid-template-columns: 1fr !important; gap: 24px !important; }
  .cosmos-grid-footer  { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }

  /* Заголовки на мобиле — пожиже */
  .h-display { font-size: 40px !important; line-height: 44px !important; }
  .h-1       { font-size: 28px !important; line-height: 32px !important; }
  .h-2       { font-size: 24px !important; line-height: 28px !important; }
  .h-3       { font-size: 20px !important; line-height: 24px !important; }
  .body-lg   { font-size: 16px !important; line-height: 22px !important; }
  .body-md   { font-size: 16px !important; line-height: 22px !important; }

  /* Hero на мобиле: заголовок, подзаголовок и шапка горящих — компактнее */
  .cosmos-hero-title { font-size: 36px !important; line-height: 40px !important; }
  .cosmos-hero-sub   { font-size: 16px !important; line-height: 22px !important; margin-top: 12px !important; }
  /* Шапка «Горящие направления»: в строку — слишком тесно, лучше столбиком */
  .cosmos-hot-header { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }

  /* Cookie-баннер — стопкой, без растягивания */
  .cosmos-cookie       { flex-direction: column !important; align-items: stretch !important; padding: 16px !important; gap: 12px !important; left: 8px !important; right: 8px !important; bottom: 8px !important; }
  .cosmos-cookie > div:first-child { flex: 0 0 auto !important; }
  .cosmos-cookie-btns  { width: 100% !important; }
  .cosmos-cookie-btns button { flex: 1 !important; height: 44px !important; padding: 0 16px !important; font-size: 15px !important; }

  /* Поле телефона: селектор страны компактный, инпут на всю оставшуюся ширину */
  .cosmos-phone-row { gap: 6px !important; }
  .cosmos-phone-row > *:first-child { flex-shrink: 0 !important; }
  .cosmos-phone-row > *:first-child button { padding: 0 10px !important; font-size: 15px !important; gap: 6px !important; }
  .cosmos-phone-row > input { min-width: 0 !important; flex: 1 1 0 !important; font-size: 16px !important; padding: 0 12px !important; }

  /* Форма: убираем избыточный внутренний padding и border */
  #promo-form form { padding: 16px !important; border-radius: 16px !important; }

  /* PromoForm grid: на мобиле гарантируем, что элементы ужимаются */
  .cosmos-grid-promo > * { min-width: 0 !important; }
  .cosmos-grid-2 > * { min-width: 0 !important; }
  .cosmos-grid-2 select, .cosmos-grid-2 input, .cosmos-grid-2 textarea { width: 100% !important; max-width: 100% !important; }

  /* Корпоративный блок: гигантские проценты и заголовок */
  .cosmos-corporate-title { font-size: 32px !important; line-height: 36px !important; }
  .cosmos-includes-title  { font-size: 32px !important; line-height: 36px !important; margin-bottom: 24px !important; }
  .cosmos-promo-card    { padding: 32px 24px !important; border-radius: 20px !important; }
  .cosmos-percent-num   { font-size: 96px !important; line-height: 88px !important; }
  .cosmos-percent-sign  { font-size: 36px !important; line-height: 36px !important; }
  .cosmos-promo-title   { font-size: 36px !important; line-height: 40px !important; }
  .cosmos-promo-text    { font-size: 16px !important; line-height: 22px !important; }

  /* Hero — заголовок крупный, нужно ужать */
  section h1 { font-size: 28px !important; line-height: 34px !important; }

  /* Кнопки в Hero — уменьшаем размер чтобы влезали в одну строку */
  section button { max-width: 100% !important; font-size: 15px !important; padding: 0 14px !important; height: 48px !important; }
  section button > span { white-space: normal !important; text-align: center !important; line-height: 1.2 !important; }
  section button > svg { flex-shrink: 0 !important; }

  /* Hero stats: симметричный padding относительно центра, без правой границы */
  .cosmos-grid-4 > div { padding: 20px 0 !important; border-right: 0 !important; }
  .cosmos-grid-4 > div:nth-child(odd)  { padding-right: 12px !important; }
  .cosmos-grid-4 > div:nth-child(even) { padding-left: 12px !important; }
  .cosmos-grid-4 > div > div:first-child { font-size: 32px !important; line-height: 36px !important; }

  /* Крупные заголовки секций (PromoForm, CorporateBlock и т.д.) — там часто fontSize: 56 в inline-стиле */
  #promo-form h2, .cosmos-section h2 { font-size: 28px !important; line-height: 32px !important; }
  #promo-form h3 { font-size: 22px !important; line-height: 26px !important; }

  /* Длинные русские слова (корпоративный, путешествий) могут не поместиться — разрешаем перенос */
  h1, h2, h3 { overflow-wrap: break-word; word-break: normal; hyphens: auto; }

  /* Футер: уменьшаем верхний отступ */
  .cosmos-footer { margin-top: 80px !important; padding: 48px 16px !important; }
  .cosmos-footer-bottom { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; }
}