/* ---------------------------------------------------------------------------
   layout.css — контейнер, сетка, горизонтальный скролл, отступы страницы.
   Источник: docs/ТЗ-верстка-astro.md §4. Брейкпоинты: 640 / 768 / 1024 / 1280.
   --------------------------------------------------------------------------- */

/* Контент не шире 1280px, отступы в эту ширину НЕ входят: контейнер с ними —
   1320px (20 + 1280 + 20), поэтому content-box (глобальный border-box ужал бы
   контент до 1240). Универсальный отступ: 12px на мобильном, 20px с 640px —
   он же используется сверху и снизу страницы. */
.container {
  box-sizing: content-box;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 12px;
}

/* Верхний отступ страницы — по макету: контент не прижат к краю окна
   (Frame 57: y=20 на десктопе, Cards: y≈12 на мобильном). */
main.container {
  padding-top: 12px;
}

@media (min-width: 640px) {
  .container {
    padding-inline: 20px;
  }

  main.container {
    padding-top: 20px;
  }
}

/* Сетка карточек: на мобильном — вертикальный стек, с ≥640px — 2 колонки
   (4 товара ложатся квадратом 2×2 и на планшете, и на десктопе — решение
   клиента 18.07); лишние карточки переносятся на новые строки. */
.cards-strip {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 640px) {
  .cards-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 27px;
  }
}


/* Горизонтальные скроллы (§4): скроллбар скрыт, но колесо и клавиатура работают. */
.scroll-x {
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.scroll-x::-webkit-scrollbar {
  display: none;
}

/* --- Вертикальный ритм страницы (§6.1) --------------------------------------- */

/* Обёртка шапки: бейдж корзины позиционируется от неё, а не от самой шапки. */
.header-wrap {
  position: relative;
}

.page-nav {
  margin-top: 18px;
}

@media (min-width: 768px) {
  .page-nav {
    margin-top: 24px;
  }
}

.page-grid {
  margin-top: 24px;
}

/* Вместе с margin-top: 52px у .footer__card этот отступ даёт тот же воздух,
   что между шапкой и первой карточкой каталога: 85px до 768px и 91px дальше. */
.page-footer {
  margin-top: 33px;
}

@media (min-width: 768px) {
  .page-footer {
    margin-top: 39px;
  }
}

.page-title {
  margin-top: 24px;
  font-size: 32px;
  line-height: 1.06;
  font-weight: 700;
  color: var(--color-text);
}

/* Колонки страницы товара: на мобильном — стек, галерея по DOM-порядку
   остаётся ПОД таблицей; с ≥1024px — плашка слева, колонка галереи справа
   (351px); плашка занимает всю левую колонку — клиент попросил таблицу
   шире (18.07). Таблица вариантов длинная, поэтому правая колонка липнет
   к верху вьюпорта. */
.product-cols {
  display: flex;
  flex-direction: column;
}

/* Обёртка галереи. На мобильном — display: contents: дети становятся
   самостоятельными элементами стека, и margin работает как без обёртки. */
.product-media {
  display: contents;
}

@media (min-width: 1024px) {
  .product-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 351px;
    gap: 24px;
    align-items: start;
  }

  .product-cols .product-media {
    display: block;
    position: sticky;
    top: 20px;
    margin-top: 24px; /* = margin .variants: верхние края колонок совпадают */
  }

  .product-media > :first-child {
    margin-top: 0; /* отступ уже дала обёртка */
  }
}