/* ============================================================
   06-mobile.css
   Плавный скролл, состояния шапки, мобильное меню, адаптив-полиш
   ============================================================ */

/* --- Плавный скролл с учётом фиксированной шапки --- */
section[id] {
  scroll-margin-top: calc(var(--header-h) + 8px);
}

/* --- Шапка: плотнее при скролле --- */
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--c-black) 96%, transparent);
  border-bottom-color: var(--c-line);
}

/* --- Активный пункт навигации --- */
.site-nav a.is-active {
  color: var(--c-white);
}

/* ============================================================
   МОБИЛЬНОЕ МЕНЮ (< 820px)
   ============================================================ */
@media (max-width: 820px) {

  .menu-toggle {
    display: flex;
    position: relative;
    z-index: 120;
  }

  /* Полноэкранная навигация */
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 110;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: var(--c-black);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
  }

  body.menu-open .site-nav {
    opacity: 1;
    visibility: visible;
  }

  .site-nav a {
    font-size: 1.375rem;
    color: var(--c-white);
  }

  .site-nav a.nav-cta {
    color: var(--c-sand);
  }

  /* Бургер → крестик */
  .menu-toggle span {
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  }
  body.menu-open .menu-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  body.menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
  }
  body.menu-open .menu-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Блокировка скролла под меню */
  body.menu-open {
    overflow: hidden;
  }
}

/* ============================================================
   АДАПТИВ-ПОЛИШ (< 480px)
   ============================================================ */
@media (max-width: 480px) {

  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: var(--space-2);
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-dates {
    font-size: 0.625rem;
  }

  .hero-sub {
    font-size: 0.9375rem;
  }

  /* Кнопки в коллекциях и waitlist на всю ширину */
  .collection-cta,
  .waitlist-form .btn {
    width: 100%;
  }
}