/* ================= Мобильная версия (до 768px) =================
   Десктоп свёрстан абсолютными координатами из Figma 1440px. На телефоне те же блоки
   встают в одну колонку обычным потоком: сбрасываем координаты и задаём отступы.
   Стиль (стекло, шрифты, цвета, анимации) — общий с десктопом. */

.burger { display: none; }

@media (max-width: 767px) {
  :root { --gut: 16px; --head-h: 64px; }

  /* ---------- Шапка + бургер-меню (вместо сайдбара) ---------- */
  .sidebar {
    width: 100%;
    height: var(--head-h);
    background: rgba(11, 6, 17, 0.78);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 0.5px solid var(--glass-border);
    transition: height 0.45s var(--ease-out), background-color 0.45s var(--ease-out);
  }
  .sidebar__logo { left: var(--gut); top: 16px; }
  .nav-group, .sidebar__info { opacity: 0; visibility: hidden; translate: 0 -12px; transition: opacity 0.35s ease, translate 0.45s var(--ease-out), visibility 0s 0.35s; }
  .nav-group { left: var(--gut); right: var(--gut); }
  .nav-group--studio { top: 92px; }
  .nav-group--info { top: 388px; }
  .sidebar__info { left: var(--gut); right: var(--gut); top: 510px; }
  .nav-item { height: 46px; }

  .sidebar.is-open { height: 100vh; height: 100dvh; background: rgba(11, 6, 17, 0.96); }
  .sidebar.is-open .nav-group, .sidebar.is-open .sidebar__info { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.35s ease 0.1s, translate 0.45s var(--ease-out) 0.1s, visibility 0s; }
  html.menu-open, html.menu-open body { overflow: hidden; }

  .burger {
    display: grid;
    place-content: center;
    gap: 6px;
    position: absolute;
    top: 12px;
    right: var(--gut);
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
  }
  .burger span { display: block; width: 18px; height: 1.5px; border-radius: 2px; background: #fff; transition: translate 0.35s var(--ease-out), rotate 0.35s var(--ease-out); }
  .sidebar.is-open .burger span:first-child { translate: 0 3.75px; rotate: 45deg; }
  .sidebar.is-open .burger span:last-child { translate: 0 -3.75px; rotate: -45deg; }

  /* ---------- Экран: поток вместо координат ---------- */
  .view { height: auto; }
  .view .content {
    position: relative;
    left: auto;
    width: auto;
    min-height: 100vh;
    min-height: 100dvh; /* vh — запас для старых iOS без dvh */
    padding: calc(var(--head-h) + 24px) var(--gut) 32px;
    display: flex;
    flex-direction: column;
  }
  .view .content > * { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: auto; height: auto; transform: none; }

  /* Фоновые свечения стоят в координатах 1440 — на телефоне одно мягкое свечение сверху */
  .glow:not(.ab-hero) { display: none; }
  .view::before { left: 40%; top: 40%; width: 480px; height: 480px; }
  .view::after { content: ""; position: absolute; z-index: 0; left: 50%; top: -220px; width: 640px; height: 520px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(199, 112, 249, 0.22), transparent); pointer-events: none; }

  /* Шапка экрана: крошки и заголовок слева, RU/EN справа */
  .view .content > .hdr-crumb { padding-right: 96px; font-size: 11px; letter-spacing: 0.55px; white-space: normal; }
  .view .content > .hdr-title { margin-top: 8px; padding-right: 96px; white-space: normal; }
  .view .content > .lang { position: absolute; top: calc(var(--head-h) + 22px); right: var(--gut); width: 80px; height: 41px; }

  /* ---------- Overview ---------- */
  .view .content > .hero { margin-top: 24px; padding: 24px 20px 26px; border-radius: 22px 22px 0 0; display: flex; flex-direction: column; align-items: flex-start; }
  /* Картинка шире блока по высоте и обрезается, как на десктопе: светлые края кадра не видны */
  .view .content > .hero { background: #000 padding-box; }
  .hero__bg { left: 0; top: -40%; width: 100%; height: 180%; }
  .hero__mark { right: 20px; top: 22px; width: 54px; height: 29px; }
  .hero .badge, .hero__title, .hero__text, .hero .btn--ghost { position: relative; left: auto; top: auto; width: auto; }
  .hero__title { margin-top: 26px; font-size: 22px; letter-spacing: 1.1px; }
  html[lang="ru"] .hero__title { font-size: 20px; }
  .hero__text { margin-top: 14px; }
  .hero .btn--ghost { margin-top: 26px; }

  .view .content > .stats-bar { display: none; }
  .view .content > .stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.25);
    backdrop-filter: blur(24px) saturate(180%) brightness(1.25);
    border: 0.5px solid rgba(215, 158, 255, 0.25);
    border-top: 0;
  }
  .view .content > .stat--3 { border-radius: 0 0 22px 22px; }
  .stat > * { position: static; }
  .stat > .stat__lead { display: flex; align-items: flex-end; flex: none; width: 104px; }
  .stat__lead > * { position: static; }
  .stat__num { height: 44px; width: auto; }
  .stat__yrs, .stat__pct { margin: 0 0 2px 4px; }
  .stat__pct { height: 13px; width: auto; }
  .stat__txt { flex: 1; min-width: 0; white-space: normal; }

  .view .content > .ov-form { margin-top: 40px; }

  /* ---------- Форма заявки (общая для всех экранов) ---------- */
  .view .content > .feedback { padding: 28px 20px 24px; }
  .feedback > * { position: static; }
  .feedback__crumb { font-size: 11px; letter-spacing: 0.55px; }
  .feedback__t1 { margin-top: 14px; font-size: 52px; letter-spacing: 2px; line-height: 1; }
  .feedback__t2 { margin-top: 2px; font-size: 34px; letter-spacing: 1.4px; white-space: normal; }
  .feedback__text { margin-top: 18px; width: auto; font-size: 16px; letter-spacing: 0.6px; }
  .feedback__form { position: static; transform: none; margin-top: 28px; gap: 16px; }
  .field__control, .field__select { width: 100%; }
  .field__label { white-space: normal; }
  .field__control { font-size: 16px; } /* 16px: iOS не приближает страницу при фокусе */
  textarea.field__control { height: 104px; min-height: 104px; } /* подсказка помещается целиком */

  /* ---------- Футер ---------- */
  .view .content > .footer-line { margin-top: auto; padding-top: 56px; height: auto; }
  .footer-line img { display: block; }
  .view .content > .footer-copy, .view .content > .footer-legal, .view .content > .footer-rights { align-self: center; text-align: center; white-space: normal; }
  .view .content > .footer-copy { order: 3; margin-top: 14px; }
  .view .content > .footer-legal { margin-top: 24px; }
  .view .content > .footer-rights { margin-top: 10px; }
  .footer-line, .footer-copy, .footer-legal, .footer-rights { flex: none; }

  /* ---------- Mixing & Mastering ---------- */
  .view .content > .mx-head { margin-top: 28px; font-size: 32px; letter-spacing: 1.3px; line-height: 1.15; }
  .mx-head .t-fet { line-height: 1; }
  .view .content > .mx-text { margin-top: 18px; }
  .view .content > .mx-discuss { margin-top: 24px; }
  .view .content > .mx-badge { margin-top: 44px; align-self: flex-start; }
  .view .content > .price { margin-top: 16px; padding: 22px 20px 22px; }
  .price__name { font-size: 24px; letter-spacing: 1.2px; }
  .price__line { width: 100%; margin-top: 22px; }
  .price__list { margin-top: 22px; display: flex; flex-direction: column; gap: 6px; }
  .price--2 .price__list { width: auto; }
  .price__cost { margin-top: 26px; }
  .btn--pill { width: auto; font-size: 16px; }
  .view .content > .mx-custom-text { margin-top: 32px; text-align: center; }
  .view .content > .mx-custom-btn { margin-top: 14px; }

  /* Work samples: позиции обложек считает carousel.js под ширину колонки (--mh — размер главной) */
  .view .content > .samples { margin-top: 64px; height: calc(var(--mh, 220px) + 150px); }
  .samples__title { left: 0; right: 0; text-align: center; font-size: 24px; }
  .carousel__arrow { top: calc(56px + var(--mh, 220px) / 2 - 22px); width: 44px; height: 44px; }
  .carousel__arrow img { width: 44px; height: 44px; }
  .carousel__arrow--prev { left: -6px; }
  .carousel__arrow--next { left: auto; right: -6px; }
  .carousel__caption { top: calc(56px + var(--mh, 220px) + 26px); font-size: 20px; letter-spacing: 1px; gap: 24px; }
  .carousel__caption .carousel__sep { width: 24px; height: 1px; margin: 0 -11.5px; } /* линия 24px, повёрнута вертикально */
  .slide__play { opacity: 1; width: 52px; height: 52px; margin: -26px 0 0 -26px; } /* на телефоне нет hover — кнопка видна сразу */
  .slide:not(.is-main) .slide__play { opacity: 0; }

  .view .content > .how-title { margin-top: 56px; }
  .view .content > .how-sub { margin-top: 8px; white-space: normal; }
  .view .content > .how { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
  .how > * { position: relative; left: auto; top: auto; }
  .how-arrow-1, .how-arrow-2 { display: none; }
  .step { width: auto; height: auto; min-height: 120px; padding: 22px 16px 22px 132px; } /* 132: самая длинная подпись «/ CONFIRM» не наезжает на текст */
  .step > .step__title, .step > .step__text { position: relative; left: auto; top: auto; width: auto; } /* relative — поверх тёмной подложки step__bg */
  .step > .step__text { margin-top: 6px; }
  .step__num, .step--3 .step__num { left: 23px; top: 26px; }
  .step__tag, .step--2 .step__tag, .step--3 .step__tag { top: 64px; }
  .step__title { white-space: normal; }
  .how-note { order: 5; width: auto; height: auto; } /* после третьего шага, перед формой */
  .step--2 { order: 3; }
  .step--3 { order: 4; }
  .how-note__t { white-space: normal; }
  .how-note__d { width: auto; }

  .view .content > .mx-form { margin-top: 56px; }

  /* Мини-плеер: две строки — обложка/название/кнопки, ниже таймлайн и Before/After */
  .player {
    left: 8px; right: 8px; bottom: 8px;
    width: auto; height: auto;
    transform: none;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 10px 12px 12px;
  }
  .player__cover { width: 44px; height: 44px; }
  .player__meta { flex: 1; width: auto; min-width: 0; }
  .player__time { order: 5; flex: 1 1 100%; }
  .ab { order: 6; width: 100%; height: 36px; }
  .ab__thumb { width: calc(50% - 1px); height: 34px; translate: calc(100% + 0px) 0; }
  .player__vol { display: none; } /* громкость на телефоне — кнопками устройства */

  /* ---------- Beats ---------- */
  .view .content > .bs-text { margin-top: 16px; }
  .view .content > .bs-badge { margin-top: 16px; align-self: flex-start; }
  .view .content > .bs-player { margin-top: 20px; height: max(560px, 78vh); height: max(560px, 78dvh); }
  .view .content > .bs-form { margin-top: 48px; }

  /* ---------- Plugins ---------- */
  .view .content > .center-x { align-self: center; text-align: center; }
  .view .content > .pl-icon { margin: 96px 0 0; }
  .view .content > .pl-title { margin-top: 14px; }
  .view .content > .pl-sub { margin-top: 12px; white-space: normal; }
  .view .content > .pl-notify { align-self: stretch; margin-top: 28px; }
  .pl-notify .field__control { flex: 1; width: auto; min-width: 0; height: 44px; }
  .view .content > .socials { margin-top: 32px; width: 109.468px; height: 21px; }

  /* ---------- About / Contacts ---------- */
  .ab-hero { left: -45%; top: 40px; width: 190%; height: 560px; }
  .view .content > .ab-c { align-self: center; text-align: center; }
  .view .content > .ab-brand { margin-top: 48px; }
  .ab-h { font-size: 30px; letter-spacing: 1.2px; white-space: normal; line-height: 1.2; }
  .ab-h1, .ab-h2 { font-size: 30px; letter-spacing: 1.2px; }
  .view .content > .ab-h1 { margin-top: 22px; }
  .view .content > .ab-h2 { margin-top: 4px; }
  .view .content > .ab-lead { margin-top: 22px; }
  .view .content > .ab-notes { margin-top: 56px; display: block; }
  .ab-notes .crop { display: block; width: 100%; height: auto; aspect-ratio: 681 / 564; }
  .view .content > .ab-song { white-space: normal; }
  .ab-sq-1, .ab-sq-2 { display: none; }
  .view .content > .ab-work { margin-top: 28px; }
  .ab-note { font-size: 22px; line-height: 1.25; }
  .view .content > .ab-work-note { margin-top: 10px; }
  .view .content > .ab-h3 { margin-top: 72px; }
  .view .content > .ab-h4 { margin-top: 4px; }
  .view .content > .ab-song { margin-top: 32px; }
  .view .content > .ab-covers { margin-top: 32px; width: 100%; aspect-ratio: 635 / 310; }
  .view .content > .ab-goal { margin-top: 28px; }
  .view .content > .ab-goal-note { margin-top: 10px; }
  .view .content > .ab-contacts-t { margin-top: 64px; }
  .view .content > .contacts { margin-top: 18px; }
  .contact-row { gap: 12px; }
  .contact-row a { min-width: 0; overflow-wrap: anywhere; text-align: right; }
  .contact-row img { width: 100%; }
  .view .content > .ab-form { margin-top: 56px; }

  /* ---------- Попапы ---------- */
  .modal { padding: 16px; grid-template-columns: minmax(0, 1fr); } /* колонка не растягивается по длинному слову */
  .modal__card, .modal__card--form, .modal__card--doc { width: 100%; }
  .modal__card { padding: 34px 22px 24px; }
  .modal__title { font-size: 32px; letter-spacing: 1.4px; }
  .modal__title .t-fet { font-size: 40px; }
  .modal--form { padding: 16px; place-items: start center; }
  .modal__card--form { padding: 48px 20px 24px; }
  .modal__card--doc { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 40px 0 0; }
  .modal__card--doc .modal__title { padding: 0 44px 0 22px; font-size: 22px; letter-spacing: 0.5px; }
  .modal__card--doc .modal__title .t-fet { font-size: 32px; }
  .doc { padding: 8px 22px 28px; font-size: 14px; }
}