/* ============================================================
   Middle Asia Golf — адаптивный слой (mobile / tablet).
   ВАЖНО: только @media (max-width). Десктоп (≥1025px) НЕ затрагивается —
   утверждённый дизайн заморожен, эти правила включаются лишь на узких экранах.
   Брейкпоинты (ТЗ): Mobile 320–767 / Tablet 768–1023 / Laptop 1024–1279 / Desktop 1280+.
   ============================================================ */

/* Бургер по умолчанию скрыт (десктоп). Мобильная панель скрыта. */
.burger{display:none; width:44px; height:44px; border:none; background:transparent; cursor:pointer; padding:10px; margin-left:6px;}
.burger span{display:block; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s, opacity .2s;}
.burger span+span{margin-top:5px;}
.mnav{display:none;}

/* ---------------------------------------------------------------- *
 * ≤1024px — планшет/лаптоп: компактнее, шапка → бургер
 * ---------------------------------------------------------------- */
@media (max-width:1024px){
  html,body{overflow-x:clip;}   /* off-canvas меню не должно создавать горизонтальный скролл */
  .wrap{padding:0 32px;}
  .sec{padding:88px 0;}
  .sec-h{margin-bottom:44px;}
  .sec-h h2{font-size:40px;}
  .cta-l h2{font-size:38px;}

  /* Шапка → бургер-меню */
  header .wrap{gap:20px;}
  header nav{display:none;}
  header .hd-r{display:none;}
  .burger{display:block; margin-left:auto;}
  header.mopen .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  header.mopen .burger span:nth-child(2){opacity:0;}
  header.mopen .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* Панель держится на месте (right:0, в пределах вьюпорта) и прячется visibility/opacity —
     без translateX(100%), иначе fixed-элемент растягивает страницу вправо (горизонтальный скролл). */
  .mnav{display:block; position:fixed; top:0; right:0; bottom:0; width:min(360px,86vw); z-index:70;
    background:#fff; box-shadow:-20px 0 60px -30px rgba(19,36,58,.5);
    padding:96px 30px 30px; overflow-y:auto;
    visibility:hidden; opacity:0; transform:translateY(-8px);
    transition:opacity .3s, transform .35s cubic-bezier(.16,1,.3,1), visibility 0s .35s;}
  .mnav.open{visibility:visible; opacity:1; transform:translateY(0);
    transition:opacity .3s, transform .35s cubic-bezier(.16,1,.3,1), visibility 0s;}
  .mnav nav{display:flex; flex-direction:column; gap:0; margin:0;}
  .mnav nav a{font-size:18px; font-family:'Manrope',sans-serif; color:var(--ink); padding:15px 0; border-bottom:1px solid var(--line);}
  .mnav nav a::after{display:none;}
  .mnav .m-lang{margin-top:22px; font-family:'Manrope',sans-serif; font-size:15px; color:var(--muted);}
  .mnav .m-lang b{color:var(--ink);}
  .mnav .btn{margin-top:18px; width:100%; justify-content:center;}
  .m-overlay{display:none; position:fixed; inset:0; z-index:65; background:rgba(10,25,45,.45); opacity:0; transition:opacity .35s;}
  .m-overlay.open{display:block; opacity:1;}

  /* Сетки */
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  .hero .visual{height:360px;}
  .bento{grid-template-columns:1fr 1fr;}
  .prod{grid-template-columns:1fr 1fr;}
  .pr{grid-template-columns:1fr 1fr;}
  .stats .wrap{grid-template-columns:1fr 1fr; gap:40px 30px; padding:64px 32px;}
  .proc{grid-template-columns:1fr 1fr 1fr; gap:36px 24px;}
  .proc .pl{display:none;}                 /* горизонтальная линия не нужна при переносе */
  .proc .st::before{display:none;}
  .ft-top{grid-template-columns:1fr 1fr;}
}

/* ---------------------------------------------------------------- *
 * ≤767px — мобилка: всё в одну колонку
 * ---------------------------------------------------------------- */
@media (max-width:767px){
  .wrap{padding:0 20px;}
  .sec{padding:56px 0;}
  .sec-h{flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:32px;}
  .sec-h h2{font-size:32px; max-width:none;}
  .sec-h h2[style]{text-align:left !important; margin-left:0 !important;}   /* «без посредников» — снять правое выравнивание */
  .sec-h p{max-width:none;}

  header .wrap{height:64px;}
  .hero{padding-top:64px;}
  .hero .wrap{padding-top:36px; padding-bottom:40px;}
  .hero h1{font-size:clamp(30px,9vw,44px); margin-bottom:18px;}
  .hero .lead{font-size:16px; margin-bottom:26px;}
  .hero .cta{flex-wrap:wrap; gap:10px;}
  .hero .cta .btn{flex:1; justify-content:center; min-width:140px;}
  .hero .visual{height:280px;}
  .hero-foot{flex-direction:column; align-items:flex-start; gap:16px; margin-top:40px;}
  .hero-foot .bnote{margin-left:0;}
  .hero-foot .chips{gap:8px; justify-content:flex-start; flex:none;}
  .hero-foot .chip{font-size:12px;}

  .bento{grid-template-columns:1fr;}
  .seg.wide{grid-column:span 1;}
  .brandc{grid-template-columns:1fr; gap:16px;}
  .brand-head h3{font-size:24px;}

  .adv{grid-template-columns:1fr; gap:0;}
  .adv-sec .sec-h{grid-template-columns:1fr; gap:16px;}
  .adv .it{grid-template-columns:56px 1fr; gap:14px; padding:26px 0;}
  .adv .it .nm{font-size:28px;}
  .adv .it h3{font-size:19px;}

  .prod{grid-template-columns:1fr;}
  .cat-foot{flex-direction:column; align-items:flex-start; gap:16px;}
  .cat-foot .btn{width:100%; justify-content:center;}

  .proc{grid-template-columns:1fr; gap:8px;}
  .proc .st{padding:22px 0; border-top:1px solid rgba(255,255,255,.12);}
  .proc .st .n{margin-bottom:10px;}

  .pr{grid-template-columns:1fr;}

  .stats .wrap{grid-template-columns:1fr 1fr; gap:34px 20px; padding:52px 20px;}
  .stats .it .n{font-size:46px;}

  .cta-grid{grid-template-columns:1fr; gap:32px;}
  .cta-l h2{font-size:30px;}
  .cta-l .cc{flex-direction:column; gap:16px;}
  .formc{padding:24px;}

  .ft-top{grid-template-columns:1fr; gap:32px; padding-bottom:36px;}
  .ft-bot{flex-direction:column; align-items:flex-start; gap:16px;}
  .ft-bot .r{order:-1;}

  /* Плавающие кнопки — чуть меньше и ближе к краю */
  .wa,.tg-fab{width:52px; height:52px; right:18px;}
  .wa{bottom:18px;} .tg-fab{bottom:80px;}
}

/* ---------------------------------------------------------------- *
 * ≤400px — очень узкие телефоны: мелкие доводки
 * ---------------------------------------------------------------- */
@media (max-width:400px){
  .stats .wrap{grid-template-columns:1fr;}
  .hero .cta .btn{min-width:0;}
}