/* =========================
   ESTET — Mobile & Tablet overrides
   ========================= */

/* ≤1200px — чуть компактнее карточки преимуществ */
@media (max-width:1200px){
  .benefit-grid{grid-template-columns:repeat(3,300px)}
}

/* ≤980px — планшеты/малые ноуты */
@media (max-width:980px){
  .section.hero{--hero-h:460px;--hero-br:28px;padding:28px 0 20px;background-position:62% center}
  .benefit-grid{grid-template-columns:1fr 1fr;justify-content:initial}
  .benefit-card{aspect-ratio:auto}
  .grid.services{grid-template-columns:1fr 1fr}
  .promo .promo-grid{grid-template-columns:1fr 1fr}
  .qwrap .form{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .contacts{grid-template-columns:1fr 1fr}
  /* Прайс — горизонтальный скролл на узких экранах */
  .price-board{padding:14px}
  .price-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
}

/* ===== Мобильное меню (≤980px) — атрибут hidden ===== */
@media (max-width:980px){
  html, body{max-width:100%; overflow-x:hidden;}

  .site-header{padding:10px 0; z-index:1030;}
  .site-header .container{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:relative;
  }
  .site-header .topnav,
  .site-header .messengers,
  .site-header .phone{ display:none; }

  /* БУРГЕР */
  .site-header .burger{
    display:inline-block; position:relative;
    width:40px; height:40px; min-width:40px;
    border:1px solid var(--border); border-radius:10px;
    background:#0a0f16; color:#fff; padding:0;
  }
  .site-header .burger span{
    position:absolute; left:10px; right:10px; height:2px;
    background:#fff; border-radius:2px;
    transition:transform .2s ease, opacity .2s ease, top .2s ease;
  }
  .site-header .burger span:nth-child(1){ top:12px; }
  .site-header .burger span:nth-child(2){ top:19px; }
  .site-header .burger span:nth-child(3){ top:26px; }
  body.nav-open .site-header .burger span:nth-child(1){ top:19px; transform:rotate(45deg); }
  body.nav-open .site-header .burger span:nth-child(2){ opacity:0; }
  body.nav-open .site-header .burger span:nth-child(3){ top:19px; transform:rotate(-45deg); }

  /* Оверлей вне панели */
  body.nav-open{ overflow:hidden; }
  body.nav-open::before{
    content:""; position:fixed; inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:saturate(140%) blur(2px);
    z-index:1000;
  }

  /* Панель-меню */
  body.nav-open .site-header .container{
    position:fixed;
    top:12px; left:12px; right:12px;
    background:#000;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    box-shadow:0 22px 48px rgba(0,0,0,.55);
    padding:16px 16px 18px;
    z-index:1050;
    display:grid; grid-template-columns:1fr; row-gap:18px;
  }
  body.nav-open .site-header .logo{ order:1; }
  body.nav-open .site-header .burger{ position:absolute; right:12px; top:12px; order:2; }

  body.nav-open .site-header .topnav{
    display:grid; order:3; grid-auto-rows:min-content; gap:22px; margin-top:6px;
  }
  body.nav-open .site-header .topnav a{ color:#e6e9f0; font-size:16px; padding:2px 0; }
  body.nav-open .site-header .topnav a:active{ opacity:.85; }

  body.nav-open .site-header .phone{ display:block; order:4; margin-top:2px; }
  body.nav-open .site-header .phone .phone-link{ font-size:16px; font-weight:700; color:#fff; }

  body.nav-open .site-header .messengers{ display:block; order:5; }
  body.nav-open .messengers--text .messenger-text{
    display:flex; align-items:center; justify-content:center;
    height:56px; width:100%;
    border-radius:16px; font-weight:800; font-size:16px;
    border:1px solid transparent;
    background-image:
      linear-gradient(90deg,var(--grad-start),var(--grad-end)),
      linear-gradient(#000,#000),
      linear-gradient(90deg,var(--grad-start),var(--grad-end));
    background-origin:padding-box,padding-box,border-box;
    background-clip:text,padding-box,border-box;
    color:#e9ecff;
    transition:border-width .15s ease, box-shadow .15s ease;
  }
  @supports (-webkit-background-clip:text){
    body.nav-open .messengers--text .messenger-text{
      -webkit-background-clip:text,padding-box,border-box;
      -webkit-text-fill-color:transparent; color:transparent;
    }
  }
  body.nav-open .messengers--text .messenger-text:hover{
    border-width:2px; box-shadow:0 0 0 3px rgba(134,128,255,.14);
  }

}

/* ===== MOBILE HERO (≤560px): заголовок → лид → картинка → кнопка ===== */
@media (max-width:560px){
  .section.hero{
    padding:18px 0 4px;
    background:#000 !important;
    border-radius:0;
    overflow:hidden;
  }
  .section.hero::before{ display:none; }
  .section.hero + .section{ padding-top:14px; }

  .hero-wrap{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "title" "lead" "cta" "art";
    gap:10px;
    min-height:0;
  }
  .hero-text{ display:contents; }
  .hero-text h1{ grid-area:title; order:1; margin:0 0 6px; }
  .hero-text .lead{ grid-area:lead; order:2; margin:0; color:#c6ccda; }

  .hero-wrap .btn{
    grid-area:cta; order:3;
    width:100%; height:56px; border-radius:16px;
    font-weight:800; margin:12px 0 8px;
  }

  .hero-art{
    grid-area:art; order:4;
    display:block !important;
    margin-top:0;
    overflow:hidden;
    margin-left:-40px;
    margin-right:-40px;
    border-radius:0;
  }
  .hero-art::before{
    content:""; display:block; width:100%;
    aspect-ratio: 16 / 12;
    background:
      url("/assets/img/hero-mobile.png") center top / cover no-repeat,
      #000;
  }

  .section.hero *:last-child{ margin-bottom:0 !important; }
}

/* ===== MOBILE PRICE (≤560px): только шапка + ссылка + картинка ===== */
@media (max-width:560px){
  .price-head{ flex-wrap:wrap; gap:6px; }
  .price-note{
    display:block; flex-basis:100%; order:2; margin:6px 0 0;
    color:#aeb6c9; font-size:14px; line-height:1.35;
  }
  .price-dl{ order:3; margin-left:0; margin-top:6px; }

  /* скрываем только табличные части, НО НЕ .price-section (там форма) */
  .price-table,
  .ps-head,
  .ps-sep{
    display:none !important;
  }

  /* декоративная картинка под шапкой прайса */
  .price-board{ position:relative; }
  .price-board::after{
    content:"";
    display:block;
    width:100%;
    margin-top:14px;
    aspect-ratio: 3 / 4;
    min-height:260px;
    background: var(--block-bg) url("/assets/img/price_mobile.png") center / contain no-repeat;
    border-radius: inherit;
    pointer-events:none;
  }
}

/* ≤560px — прочие сетки/формы */
@media (max-width:560px){
  .benefit-grid{grid-template-columns:1fr}
  .promo .promo-grid{grid-template-columns:1fr}
  .qwrap .form{grid-template-columns:1fr}
  .contacts{grid-template-columns:1fr}
}

/* 481–980px — единые отступы секций на планшетах */
@media (min-width:481px) and (max-width:980px){
  .section{padding:36px 0}
}

/* скрываем бургер на десктопе */
@media (min-width:981px){
  .site-header .burger{ display:none; }
}

/* ===== Чекбокс согласия — мобильный вид (≤980px) ===== */
@media (max-width:980px){
  .chk.form-consent{
    display:grid;
    grid-template-columns: var(--cb-size) 1fr; /* [□] [текст] */
    align-items:flex-start;
    gap:10px;
    line-height:1.45;
  }
  .chk.form-consent input[type="checkbox"]{
    grid-column:1;
    width:var(--cb-size);
    height:var(--cb-size);
    margin-top:.25em;
    box-sizing:border-box;
  }
  .chk.form-consent .text{
    grid-column:2;
    display:block;
    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;
    hyphens:auto;
    text-align:left;
    min-width:0;
  }
  .chk.form-consent br{ display:none !important; }
}

/* ===== MOBILE SERVICES (≤560px) — лента + полоса ===== */
@media (max-width:560px){
  .section-services{
    position:relative;
    overflow:hidden;
    --band-gap:16px;
    --band-top:-10px;
    padding-top:calc(16px + var(--band-gap));
    padding-bottom:calc(28px + var(--band-gap));
  }
  .section-services::before{
    content:"";
    position:absolute; left:0; right:0; top:var(--band-top); bottom:0;
    background:
      linear-gradient(135deg, var(--page-bg, #0b0f14) 0 48%, transparent 0) left top/56% 46% no-repeat,
      linear-gradient(315deg, var(--page-bg, #0b0f14) 0 48%, transparent 0) right bottom/56% 46% no-repeat,
      linear-gradient(var(--accent-2, #2d3de0), var(--accent-2, #2d3de0));
    z-index:-1; pointer-events:none;
  }
  .section-services h2{
    margin:0 0 6px; transform:none;
    position:relative; z-index:1;
  }
  .grid.services{
    display:flex; gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    margin-left:-16px; margin-right:-16px;
    padding:var(--band-gap) 16px var(--band-gap);
  }
  .grid.services .svc-card{
    flex:0 0 calc(100vw - 48px);
    max-width:520px; min-height:340px;
    scroll-snap-align:start; scroll-snap-stop:always;
  }
  .section-services .svc-img{ aspect-ratio:16 / 10; }
  .section-services .svc-title{ padding-top:12px; font-size:18px; line-height:1.25; }
  .grid.services::-webkit-scrollbar{ display:none; }
}

/* ===== MOBILE QUESTIONS (≤560px): только форма, без картинки ===== */
@media (max-width:560px){
  .qwrap picture,
  .qwrap figure,
  .qwrap .qimg,
  .qwrap .q-visual,
  .qwrap .visual,
  .qwrap .pic,
  .qwrap img.illustration,
  .cta-wrap .cta-art{
    display:none !important;
  }
  .qwrap .form{
    grid-template-columns:1fr !important;
    gap:14px;
  }
  .qwrap .form .btn{
    width:100%; height:56px; border-radius:16px; font-weight:800;
  }
  .qwrap .form .form-consent{ grid-column:1 / -1; }
  .cta-wrap{ grid-template-columns:1fr; min-height:auto; gap:14px; align-items:start; }
}

/* ===== MOBILE PROMO (≤560px): горизонтальный скролл по одной карточке ===== */
@media (max-width:560px){
  .promo .promo-grid{
    display:flex; gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    margin-left:-16px; margin-right:-16px;
    padding:14px 16px 0; margin-top:6px;
  }
  .promo .promo-grid > *{
    flex:0 0 calc(100vw - 48px);
    max-width:520px; min-height:320px;
    scroll-snap-align:start; scroll-snap-stop:always;
  }
  .promo .promo-grid::-webkit-scrollbar{ display:none; }
}

/* ===== MOBILE FOOTER (≤560px): аккуратная колонка ===== */
@media (max-width:560px){
  :is(footer,.site-footer,.page-footer){ padding:24px 0 32px; background:var(--page-bg,#0a0f16); }
  :is(footer,.site-footer,.page-footer) .container{ display:grid; grid-template-columns:1fr; gap:14px; }
  :is(footer,.site-footer,.page-footer) :is(h2,h3,.brand,.logo-text){
    margin:0 0 6px; font-size:28px; line-height:1.05; letter-spacing:.2px;
  }
  :is(footer,.site-footer,.page-footer) :is(nav,.footnav,.footer-nav,.links){
    display:grid; gap:12px; margin:0; padding:0; list-style:none;
  }
  :is(footer,.site-footer,.page-footer) :is(nav,.footnav,.footer-nav,.links) a{
    color:#e6e9f0; font-size:16px; text-decoration:none; padding:6px 0;
  }
  :is(footer,.site-footer,.page-footer) .messengers{ display:flex; gap:10px; margin-top:4px; }
  :is(footer,.site-footer,.page-footer) .messengers a{
    width:40px; height:40px; border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    background:#0b0f14; display:inline-flex; align-items:center; justify-content:center;
  }
  :is(footer,.site-footer,.page-footer) .policy{ margin-top:8px; color:#aeb6c9; font-size:15px; }
  :is(footer,.site-footer,.page-footer) .copyright{ margin-top:10px; color:#aeb6c9; font-size:14px; }
}

/* ===== ПРЕДЗАПУСК: мелкие улучшения мобильной версии ===== */

/* 1) Плавные горизонтальные ленты: edge-fade + защита от перехвата вертикального скролла */
@media (max-width:560px){
  :root{ --edge-fade: 28px; }
  .grid.services,
  .promo .promo-grid{
    -webkit-mask-image: linear-gradient(90deg, transparent 0,
                                        #fff var(--edge-fade),
                                        #fff calc(100% - var(--edge-fade)),
                                        transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0,
                                        #fff var(--edge-fade),
                                        #fff calc(100% - var(--edge-fade)),
                                        transparent 100%);
    overscroll-behavior-x: contain;
    scroll-padding-left: 16px;
  }
}

/* 2) Увеличим кликабельность ссылок в футере на мобилке */
@media (max-width:560px){
  :is(footer,.site-footer,.page-footer) :is(nav,.footnav,.footer-nav,.links) a{ padding:6px 0; }
}

/* 3) Мелкий UX: убираем серую вспышку iOS при тапе и отключаем задержку клика */
@media (max-width:980px){
  *{ -webkit-tap-highlight-color: transparent; }
  a,button{ touch-action: manipulation; }
}

/* 4) iOS-зум при фокусе на полях (если где-то меньше 16px) */
@media (max-width:560px){
  input, select, textarea{ font-size:16px; }
}

/* 5) Уважение к пользователям с reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ===== PROMO highlight (≤560px): одна версия без дубликатов ===== */
@media (max-width:560px){
  /* базовое состояние карточки оставляем как есть */
  .promo .promo-card{
    transition: box-shadow .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
  }
  /* текущая на экране (необязательная лёгкая тень) */
  .promo .promo-card.is-active{
    border-color: var(--border);
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
  }
  /* правая соседняя — яркая подсветка */
  .promo .promo-card.is-next{
    border:1px solid transparent;
    background:
      linear-gradient(var(--block-bg),var(--block-bg)) padding-box,
      linear-gradient(90deg,var(--grad-start),var(--grad-end)) border-box;
    box-shadow:0 10px 28px rgba(0,0,0,.35);
    transform:translateY(-2px);
  }
  .promo .promo-card.is-next .promo-media img{ transform:scale(1.02); }
}