/* ============================================================
   spirit-dv.ru — мобильная версия
   Подключается последней, чтобы перекрывать десктопные правила.
   ============================================================ */

/* ---------- Кнопка-бургер ---------- */
.nav__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface-soft);
  color: var(--c-ink-strong);
  transition: background-color var(--dur-fast) var(--ease-io);
}
.nav__burger:hover { background: var(--c-surface); }

.nav__burger span {
  position: relative;
  display: block;
  width: 1.125rem;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) linear;
}
.nav__burger span::before,
.nav__burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease);
}
.nav__burger span::before { top: -0.375rem; }
.nav__burger span::after  { top:  0.375rem; }

/* Крестик в открытом состоянии */
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { transform: translateY(0.375rem) rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after  { transform: translateY(-0.375rem) rotate(-45deg); }

@media (min-width: 80rem) { .nav__burger { display: none; } }

/* ---------- Выпадающее меню ---------- */
.nav__drawer {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: rgba(245, 245, 242, 0.97);
  box-shadow: var(--sh-nav);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: grid;
  gap: var(--s-1);

  /* закрыто по умолчанию, но доступно скринридеру при открытии */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur);
}

.nav__drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav__drawer a {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--c-ink-strong);
  transition: background-color var(--dur-fast) var(--ease-io);
}
.nav__drawer a:hover,
.nav__drawer a:focus-visible { background: var(--c-accent-soft); color: var(--c-accent-ink); }

.nav__drawer .nav__drawer-phone {
  margin-top: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--c-ink);
}

@media (min-width: 80rem) { .nav__drawer { display: none; } }

/* Тело не скроллится, пока меню открыто */
body.nav-open { overflow: hidden; }

/* Телефон иконкой — везде, где нет текстового номера в шапке */
@media (max-width: 79.99rem) {
  .nav__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: var(--r-md);
    background: var(--c-accent);
    color: #fff;
  }
  .nav__call svg { width: 1.125rem; height: 1.125rem; }
}

/* ============================================================
   ПРАВКИ ПОД УЗКИЙ ЭКРАН
   ============================================================ */

@media (max-width: 48rem) {

  /* Контейнер: 24px по бокам на 360px съедают слишком много */
  :root { --gutter: 1.125rem; }

  /* Шапка: логотип компактнее, чтобы влезли бургер и кнопка */
  .nav { top: var(--s-3); width: calc(100% - var(--s-4)); }
  .nav__bar { height: 3.5rem; padding-inline: var(--s-3); gap: var(--s-2); }
  .nav__logo { height: 1.625rem; }
  .nav__brand-sub { display: none; }
  .nav__actions { gap: var(--s-2); }

  /* Кнопка «Рассчитать» на узком экране мешает — прячем,
     призыв к действию есть в первом экране и в бургер-меню */
  .nav__actions .btn { display: none; }


  /* Герой */
  .hero { padding-top: 7.5rem; }
  .page-hero { padding-top: 7rem; padding-bottom: var(--s-7); }

  :root { --fs-display: clamp(2.125rem, 10vw, 3.25rem); }
  .page-hero h1 { font-size: clamp(1.875rem, 8.5vw, 2.75rem); }
  .hero__title { margin-top: var(--s-5); }

  .hero__cta, .page-hero__cta { width: 100%; }
  .hero__cta .btn, .page-hero__cta .btn { flex: 1 1 100%; }

  /* Мини-факты: два в ряд вместо четырёх */
  .facts { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .fact { padding: var(--s-3); }
  .fact__value { font-size: var(--fs-lg); }
  .fact__label { font-size: 0.6875rem; }

  /* Панель героя: карта выше, подписи крупнее */
  .hero__panel { margin-top: var(--s-7); }
  .panel__grid { padding: var(--s-3); gap: var(--s-3); }
  .panel__chrome { height: 2.75rem; padding-inline: var(--s-3); }
  .routes { aspect-ratio: 10 / 9; }
  .routes__node-label { font-size: 18px; }
  .routes-card__head { padding: var(--s-3) var(--s-4); }
  /* на узком экране бейджу не хватало места — уменьшаем кегль и трекинг */
  .routes-card__head .badge {
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.5rem;
  }

  /* Секции: меньше воздуха, иначе бесконечная прокрутка */
  .section { padding-block: var(--s-7); }
  .section__head { margin-bottom: var(--s-6); }

  /* Способ доставки в форме: два в ряд вместо четырёх */
  .ways { grid-template-columns: 1fr 1fr; }
  .way label { padding: var(--s-3); }

  /* Карточки и таблицы */
  .card { padding: var(--s-4); }
  .tariffs table { min-width: 30rem; }
  .compare table { min-width: 32rem; }

  /* Подсказка, что таблицу можно листать вбок */
  .tariffs, .compare { position: relative; }
  .tariffs::after, .compare::after {
    content: "→ листайте вбок";
    display: block;
    padding-top: var(--s-3);
    font-size: var(--fs-xs);
    color: var(--c-ink-faint);
  }

  /* Крупная цифра в шагах уменьшается, иначе лезет за карточку */
  .step::before { font-size: 4rem; }

  /* Подвал */
  .footer { padding-block: var(--s-7) var(--s-5); }
  .footer__cta { padding-bottom: var(--s-6); margin-bottom: var(--s-6); }
  .footer__cta-text h3 { font-size: var(--fs-xl); }
  .footer__cta-actions { width: 100%; }
  .footer__cta-actions .btn { flex: 1 1 100%; }
  .footer__grid { gap: var(--s-6); }
  .footer__phone { font-size: var(--fs-lg); }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: var(--s-3); }

  /* Иллюстрации в шапках секций не должны занимать пол-экрана */
  .section__illu { max-width: 18rem; }
}

/* Совсем узкие экраны */
@media (max-width: 22.5rem) {
  :root { --fs-display: clamp(1.875rem, 9.5vw, 2.5rem); }
  .facts { grid-template-columns: 1fr; }
  .ways { grid-template-columns: 1fr 1fr; }
  .nav__logo { height: 1.5rem; }
}

/* Планшет: меню ещё скрыто, но места больше */
@media (min-width: 48rem) and (max-width: 64rem) {
  .facts { grid-template-columns: repeat(4, 1fr); }
}

/* Текущая страница в выпадающем меню */
.nav__drawer a[aria-current="page"] {
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
  font-weight: 600;
}