/*
 * OneGTA — Mobile Override
 * Подключается ПОСЛЕ style.css, перебивает всё через специфичность
 * Цель: правильный вид на экранах до 768px
 */

/* ============================================================
   БАЗОВЫЕ — не должно вылезать за экран
============================================================ */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ============================================================
   ДО 900px
============================================================ */
@media screen and (max-width: 900px) {
  .container,
  .container--narrow,
  .container--wide {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
  }

  /* Layout главной — два столбца */
  .hp-layout {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }

  /* Новости — 2 колонки */
  .hp-news-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
  }

  /* Сайдбар под контентом */
  .hp-sidebar {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .5rem !important;
  }
  .hp-sidebar .hp-widget:last-child {
    grid-column: 1 / -1 !important;
  }

  /* Hero немного ниже */
  .hp-hero { height: 380px !important; }
}

/* ============================================================
   ДО 600px
============================================================ */
@media screen and (max-width: 600px) {
  /* Контейнер */
  .container,
  .container--narrow,
  .container--wide {
    padding-left: .9rem !important;
    padding-right: .9rem !important;
  }

  /* Шапка */
  .site-logo { font-size: 1.4rem !important; letter-spacing: 2px !important; }
  .site-header__inner { padding: 0 .9rem !important; gap: .4rem !important; }
  #headerSearchWrap { display: none !important; }
  .btn--sm { padding: 7px 12px !important; font-size: .78rem !important; letter-spacing: 1px !important; }

  /* Hero */
  .hp-hero { height: 240px !important; overflow: hidden !important; }
  .hp-hero__inner { padding-bottom: 1rem !important; }
  .hp-hero__content { max-width: 100% !important; }
  .hp-hero__cat { font-size: .52rem !important; padding: 2px 6px !important; margin-bottom: .4rem !important; }
  .hp-hero__title { font-size: 1.2rem !important; line-height: 1.15 !important; margin-bottom: .3rem !important; letter-spacing: -.01em !important; }
  .hp-hero__excerpt { display: none !important; }
  .hp-hero__meta { font-size: .62rem !important; gap: .2rem .4rem !important; flex-wrap: wrap !important; }

  /* Новости — 1 колонка */
  .hp-news-grid {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }
  .hp-news-card__excerpt { display: none !important; }
  .hp-news-card__body { padding: .75rem !important; }
  .hp-news-card__title { font-size: .95rem !important; -webkit-line-clamp: 2 !important; }
  .hp-news-card__foot { font-size: .62rem !important; padding-top: .4rem !important; }
  .hp-news-card__img { aspect-ratio: 16/9 !important; }

  /* Section headers */
  .hp-section-head { margin-bottom: .8rem !important; }
  .hp-section-title { font-size: 1.1rem !important; letter-spacing: 2px !important; }
  .hp-section-more { font-size: .7rem !important; }

  /* GTA6 banner */
  .hp-gta6 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .8rem !important;
    padding: 1rem !important;
  }
  .hp-gta6__tag { font-size: .5rem !important; letter-spacing: 3px !important; }
  .hp-gta6__title { font-size: 1.4rem !important; letter-spacing: 2px !important; }
  .hp-gta6__sub { font-size: .72rem !important; }
  .hp-gta6__btn { align-self: stretch !important; text-align: center !important; font-size: .82rem !important; padding: .6rem 1rem !important; }

  /* Статьи */
  .hp-articles { gap: 2px !important; }
  .hp-article-card { padding: .65rem !important; gap: .6rem !important; }
  .hp-article-card__img { width: 72px !important; height: 56px !important; flex-shrink: 0 !important; }
  .hp-article-card__excerpt { display: none !important; }
  .hp-article-card__title { font-size: .88rem !important; }
  .hp-article-card__date { font-size: .62rem !important; }

  /* Файлы — 1 колонка */
  .hp-files { grid-template-columns: 1fr !important; gap: 3px !important; }
  .hp-file-card__img { width: 62px !important; height: 50px !important; }
  .hp-file-card__name { font-size: .88rem !important; }

  /* Видео — 1 колонка */
  .hp-videos-grid { grid-template-columns: 1fr !important; gap: 3px !important; }

  /* Сайдбар — 1 колонка */
  .hp-sidebar {
    grid-template-columns: 1fr !important;
  }
  .hp-sidebar .hp-widget:last-child {
    grid-column: auto !important;
  }

  /* Виджеты */
  .hp-widget__title { font-size: .82rem !important; letter-spacing: 3px !important; padding: .55rem .9rem !important; }
  .hp-game-row { padding: .5rem .9rem !important; }
  .hp-game-row__name { font-size: .82rem !important; }
  .hp-forum-row { padding: .6rem .9rem !important; }
  .hp-forum-row__title { font-size: .8rem !important; }
  .hp-quicklinks { padding: .4rem !important; gap: 2px !important; }
  .hp-quicklink { padding: .55rem .4rem !important; font-size: .7rem !important; }

  /* HP wrap */
  .hp-wrap { padding: 1rem 0 2rem !important; }

  /* GTA series */
  .gta-series-section { padding: 2rem 0 !important; }
  .gta-series-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 140px 140px 140px !important;
    gap: 2px !important;
  }
  .gsc--featured {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  .gsc--featured .gsc__desc { display: none !important; }
  .gsc--featured .gsc__name { font-size: 1.4rem !important; }
  .gsc--featured .gsc__roman { font-size: 4rem !important; }
  .gsc__name { font-size: .95rem !important; letter-spacing: 1px !important; }
  .gsc__body { padding: .7rem !important; }
  .gsc__roman { font-size: 2.8rem !important; }
  .gsc__year { font-size: .5rem !important; letter-spacing: 2px !important; }

  /* Features */
  .features-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
  }
  .feature-item { padding: 1rem .75rem !important; }
  .feature-item__icon { font-size: 1.2rem !important; margin-bottom: .3rem !important; }
  .feature-item__title { font-size: .9rem !important; letter-spacing: 2px !important; }
  .feature-item__desc { font-size: .7rem !important; line-height: 1.5 !important; }

  /* Newsletter */
  .newsletter-strip { padding: 1.3rem 0 !important; }
  .newsletter-strip__inner { flex-direction: column !important; gap: .8rem !important; text-align: center !important; }
  .newsletter-strip__inner h3 { font-size: 1rem !important; }
  .newsletter-strip__inner p { font-size: .82rem !important; }
  .newsletter-form { flex-direction: row !important; width: 100% !important; }
  .newsletter-form input { flex: 1 !important; min-width: 0 !important; }
  .newsletter-form button { flex-shrink: 0 !important; padding: 0 1rem !important; font-size: .8rem !important; }

  /* Stats bar */
  .site-stats-bar { padding: .4rem 0 !important; }
  .site-stats-bar__inner { gap: 0 !important; }
  .site-stats-bar__label { display: none !important; }
  .site-stat { padding: .15rem .45rem !important; border-right-width: 1px !important; }
  .site-stat__lbl { display: none !important; }
  .site-stat__icon { font-size: .7rem !important; }
  .site-stat__val { font-size: .85rem !important; }

  /* Footer */
  .site-footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.2rem .8rem !important;
  }
  .footer-brand { grid-column: 1 / -1 !important; }
  .footer-desc { font-size: .8rem !important; }
  .footer-social { margin-top: .6rem !important; }
  .footer-col h4 { font-size: .82rem !important; margin-bottom: .4rem !important; }
  .footer-col ul li { margin-bottom: .2rem !important; }
  .footer-col ul li a { font-size: .78rem !important; }
  .footer-bottom__inner { flex-direction: column !important; gap: .3rem !important; text-align: center !important; font-size: .68rem !important; }
}

/* ============================================================
   ДО 400px
============================================================ */
@media screen and (max-width: 400px) {
  .container,
  .container--narrow {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
  .hp-hero { height: 200px !important; }
  .hp-hero__title { font-size: 1rem !important; }
  .site-logo { font-size: 1.2rem !important; }
  .gta-series-grid {
    grid-template-rows: 110px 110px 110px !important;
  }
  .gsc__name { font-size: .85rem !important; }
  .gsc__roman { font-size: 2.2rem !important; }
  .hp-news-card__title { font-size: .88rem !important; }
  .site-footer__grid { grid-template-columns: 1fr !important; }
}