/* =====================================================
   mobile.css — финальный: адаптив + мобильное меню (бургер)
   Подключать ПОСЛЕДНИМ после style.css/theme.css
   ===================================================== */

/* ===== Общие улучшения ===== */
button, .btn, a.btn{ min-height:44px; }

/* ===== Шапка + бургер-меню (работает совместно с mobile_nav.js) ===== */
.site-header{ background:#fff; position:sticky; top:0; z-index:1000; border-bottom:1px solid #eee; }
.site-header .header-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; gap:12px; }
.brand{ font-size:24px; font-weight:700; text-decoration:none; color:#111; }
.brand span{ color:#ff6ea7; }

/* Десктоп-меню */
.nav-desktop{ display:flex; gap:16px; align-items:center; }
.nav-desktop a{ color:#333; text-decoration:none; font-weight:600; }
.btn.whatsapp{ background:#ff6ea7; color:#fff; padding:10px 14px; border-radius:999px; display:inline-flex; align-items:center; gap:8px; }

/* Кнопка-бургер */
.nav-toggle{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.nav-toggle .bar{ display:block; width:24px; height:2px; background:#111; margin:5px 0; transition:transform .2s ease, opacity .2s ease; }

/* Выезжающее меню + фон */
.nav-drawer{
  position:fixed; inset:0 auto 0 0; width:78%; max-width:340px; background:#fff; padding:16px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  transform: translateX(-100%); transition: transform .25s ease;
}
.nav-drawer .nav-link{ padding:12px 8px; text-decoration:none; color:#222; font-weight:600; border-radius:10px; }
.nav-drawer .nav-link:hover{ background:#f6f6f6; }
.nav-drawer .btn.whatsapp.wide{ justify-content:center; margin-top:8px; }

.nav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:saturate(80%) blur(1px); }

/* Состояние «открыто» */
.nav-open .nav-drawer{ transform:none; }
.nav-open .nav-backdrop{ display:block; }
body.nav-open{ overflow:hidden; }

/* Точка перелома: скрыть десктоп-меню и показать бургер */
@media (max-width: 900px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:block; }
  .brand{ font-size:20px; }
}

/* Анимация бургера в крестик */
.nav-open .nav-toggle .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle .bar:nth-child(2){ opacity:0; }
.nav-open .nav-toggle .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }


/* =====================================================
   ≤480px — телефоны (основные правила верстки)
   ===================================================== */
@media (max-width: 480px){

  .container{ max-width:none; padding:0 16px; }

  /* Шапка: держим в одну строку по возможности */
  header .container{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:nowrap; }
  header .brand{ font-size:20px; }
  nav{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; overflow:hidden; }
  nav a{ font-size:14px; white-space:nowrap; padding:6px 10px; }
  nav a.whatsapp, nav .whatsapp{ padding:6px 12px; }

  /* HERO */
  .hero{
    position: relative;
    grid-template-columns: 1fr;
    padding: 20px 0 28px;
    min-height: 380px;
    background-size: cover;
    background-position: 65% top;
  }
  .hero::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,0) 60%);
    pointer-events:none;
  }
  .hero h1{ font-size:28px; line-height:1.2; color:#fff; }
  .hero p { font-size:14px; color:#555; max-width:28ch; }
  .hero .btn-primary{
    display:inline-flex; justify-content:center;
    margin:12px auto 0;
    width:auto; min-width:220px;
    padding:14px 18px; font-size:16px;
  }

  /* Секции / карточки */
  .section-title{ font-size:22px; margin-top:16px; }
  .cards{ grid-template-columns:1fr; gap:12px; }
  .card{ padding:14px; border-radius:16px; }
  .card .btn{ width:100%; }

  /* Контакты + карта */
  .contacts-grid{ grid-template-columns:1fr; gap:16px; }
  .map-card{ height:auto; }
  #map2gis{ height:300px; min-height:300px; }

  /* Низ + safe-area iOS */
  body{ scroll-padding-top:64px; }
  footer .container{ padding-bottom:max(16px, env(safe-area-inset-bottom)); }
}

/* =====================================================
   Подгруппы телефонов — для устойчивого кадра баннера
   ===================================================== */
@media (max-width: 360px){
  header .brand{ font-size:18px; }
  nav{ gap:8px; }
}
@media (max-width: 375px){
  .hero{ background-position: 62% top; min-height: 360px; padding: 16px 0 24px; }
  .hero h1{ font-size:26px; }
}
@media (min-width: 376px) and (max-width: 414px){
  .hero{ background-position: 68% top; min-height: 380px; padding: 20px 0 28px; }
  .hero h1{ font-size:28px; }
}
@media (min-width: 415px) and (max-width: 480px){
  .hero{ background-position: 74% top; min-height: 400px; padding: 24px 0 32px; }
  .hero h1{ font-size:30px; }
}

/* Узкие экраны: если места критически мало, переносим меню и показываем WhatsApp отдельной строкой */
@media (max-width: 389px){
  nav{ flex-wrap: wrap; overflow: visible; }
  nav a{ font-size:13px; padding:5px 8px; }
  nav a.whatsapp, nav .whatsapp{
    order: 99; width:100%; display:inline-flex; justify-content:center;
    margin-top:6px; padding:10px 12px; font-size:14px;
  }
}

/* =====================================================
   481–900px — большие телефоны и малые планшеты
   ===================================================== */
@media (min-width: 481px) and (max-width: 900px){
  .container{ max-width:none; padding:0 20px; }
  header .brand{ font-size:24px; }

  .hero{
    grid-template-columns:1fr;
    min-height:420px;
    background-size:cover;
    background-position:70% top;
    padding: 32px 0 36px;
  }
  .hero h1{ font-size:34px; color:#fff; }
  .cards{ grid-template-columns: repeat(2,1fr); gap:16px; }
  #map2gis{ height:360px; }
}



/* ==== FIX (drawer fully visible, scrollable, above header) ==== */
.site-header{ z-index: 1000; }           /* header below drawer */
.nav-backdrop{ z-index: 1100; }          /* dim layer under drawer */
.nav-drawer{
  z-index: 1200;                         /* drawer above all */
  height: 100vh;                         /* full viewport height */
  overflow-y: auto;                      /* scroll if many links */
  padding-top: calc(16px + env(safe-area-inset-top));
}
.nav-drawer a{ display:block; }

@media (max-width: 375px){
  .nav-drawer .nav-link{ padding:10px 6px; font-size:14px; }
}

/* drawer bg override */
.nav-drawer{ background:#fff !important; }


/* Drawer header (logo + close) */
.nav-drawer .drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:6px 4px 12px; margin-bottom:8px;
  border-bottom:1px solid #eee;
}
.nav-drawer .drawer-head .brand{ font-size:22px; font-weight:800; text-decoration:none; color:#111; }
.nav-drawer .drawer-head .brand span{ color:#ff6ea7; }
.nav-drawer .drawer-close{
  background:transparent; border:0; cursor:pointer;
  font-size:28px; line-height:1; color:#666; padding:6px 8px; border-radius:8px;
}
.nav-drawer .drawer-close:hover{ background:#f6f6f6; }