/* Мобильная адаптация — переопределяет инлайн-стили компонентов на узких экранах.
   Подключается отдельным файлом, чтобы не трогать tokens/* дизайн-системы.
   Все правила живут строго внутри @media — на ПК ничего не меняется. */

@media (max-width: 860px) {
  /* iOS Safari автоматически зумит страницу при фокусе на поле, если у него
     font-size меньше 16px — у всех полей ввода на сайте 15px. Поднимаем
     размер шрифта именно внутри полей до 16px, чтобы зум не срабатывал. */
  .vk-input,
  .vk-ta,
  .vk-sel select,
  .vk-chat-input {
    font-size: 16px !important;
  }

  /* Колокольчик уведомлений: выпадающий список шириной 340px позиционировался
     absolute от правого края своей узкой кнопки (42px), а кнопка — не у
     самого края хедера (правее ещё логин и корзина), из-за чего список
     съезжал далеко влево за пределы экрана. Крепим к правому краю экрана. */
  .vk-notif-dropdown {
    position: fixed !important;
    top: 60px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
  }

  /* Featured-карточка блога (первый пост): на ПК картинка и текст стоят в ряд
     с картинкой фиксированной ширины 320px — на мобильном экране (~335px
     карточка) на текст оставалось ~15px, и заголовок/бейдж/описание
     фактически не помещались. Складываем в колонку, картинка на всю ширину. */
  .vk-post-card--big {
    flex-direction: column !important;
  }
  .vk-post-cover--big {
    width: 100% !important;
  }

  /* Футер: на ПК бренд-блок + 3 колонки ссылок в ряд. На мобильном раньше всё
     схлопывалось в одну колонку (длинный вертикальный список) — теперь
     бренд-блок на всю ширину сверху, а 3 колонки ссылок идут в ряд по 3. */
  .vk-footer-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px 22px !important;
  }
  .vk-footer-brand {
    grid-column: 1 / -1;
  }
  .vk-footer-links {
    gap: 6px !important;
  }

  /* Закрытые off-canvas панели (корзина и т.п.) сдвинуты за экран через translateX,
     но остаются в потоке и шире viewport — без этого правила страница получает
     лишний горизонтальный скролл. Ограничено мобильным брейкпоинтом, чтобы не
     ломать position:sticky (смету в конфигураторе) на ПК. */
  /* overflow-x: clip (а не hidden) — hidden на html/body ломает position:sticky
     шапки на мобильном Safari (шапка вообще не прилипает при скролле), а clip
     даёт тот же эффект обрезки горизонтального переполнения без этого бага. */
  html, body {
    overflow-x: clip;
  }

  /* Двухколоночные сетки (конфигуратор+смета, профиль+сайдбар, контакты, футер,
     детальные страницы работы/готового сайта) — в одну колонку. */
  .vk-grid-collapse {
    grid-template-columns: 1fr !important;
  }

  /* Экран входа/регистрации — раньше брендовая панель полностью пряталась и
     страница превращалась в голую форму без логотипа на пустом фоне. Вместо
     этого показываем ту же тёмную панель (как на ПК), но компактной шапкой
     сверху, а форму — под ней, сохраняя стиль десктопа. */
  .vk-auth-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .vk-auth-brand {
    padding: 24px 20px !important;
    gap: 18px;
  }
  .vk-auth-brand-hero h2 {
    font-size: 26px !important;
    margin-top: 10px !important;
  }
  .vk-auth-brand-subtitle {
    display: none !important;
  }
  .vk-auth-brand-footer {
    display: none !important;
  }
  /* Форма входа/регистрации была по вертикали в центре своей панели с
     padding:32 сверху — на мобильном это создавало лишний воздух под тёмной
     шапкой. Прижимаем таб-переключатель и форму выше, тему поднимаем вместе. */
  .vk-auth-form-panel {
    align-items: flex-start !important;
    padding: 16px 20px 32px !important;
  }
  .vk-auth-theme-toggle {
    top: 16px !important;
    right: 20px !important;
  }
  /* Grid-колонки по умолчанию не сжимаются меньше min-content своих детей —
     непереносимая строка "код + кнопка отправить" была шире экрана и
     раздувала всю колонку (а с ней и брендовую панель) за пределы viewport. */
  .vk-auth-grid > div {
    min-width: 0;
  }
  /* Кнопка "Отправить код" остаётся в одной строке с полем кода (как на ПК),
     просто уже — компактнее паддинг и шрифт, чтобы обе влезли по ширине. */
  .vk-email-code-row > button {
    padding: 0 10px !important;
    font-size: 12px !important;
    gap: 5px !important;
  }
  .vk-email-code-row > button svg {
    width: 13px !important;
    height: 13px !important;
  }

  /* Навигация в хедере не помещается на узких экранах — прячем текстовые ссылки
     и показываем гамбургер-меню (MobileMenu) со всеми страницами вместо неё. */
  .vk-header-nav {
    display: none !important;
  }
  .vk-mobile-menu {
    display: flex !important;
  }

  /* Даже без основной навигации иконки (язык, тема, колокольчик, логин, корзина)
     не помещаются в 375px и выталкивают корзину за край экрана — сжимаем отступы,
     прячем переключатель языка и подпись у кнопки логина, оставляя иконки. */
  .vk-header-inner {
    padding: 0 12px !important;
    gap: 12px !important;
  }
  .vk-header-actions {
    gap: 6px !important;
  }
  .vk-lang-toggle {
    display: none !important;
  }
  /* Переключатель темы переехал внутрь гамбургер-меню (MobileMenu) на мобильном. */
  .vk-theme-toggle {
    display: none !important;
  }
  .vk-header-login-text {
    display: none !important;
  }
  /* Кнопка профиля/логина — на десктопе это pill-кнопка с текстом; на мобильном
     текст спрятан (vk-header-login-text), а саму кнопку приводим к тому же
     квадратному стилю с рамкой, что у иконок темы/уведомлений/корзины рядом. */
  .vk-header-login {
    padding: 0 !important;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--border-default) !important;
    background: var(--surface-card) !important;
    color: var(--ink-700) !important;
    justify-content: center;
  }
  .vk-header-login .vk-btn__icon {
    margin: 0 !important;
  }

  .vk-grid-collapse,
  .vk-auth-grid {
    gap: 24px !important;
  }

  /* Карточка заказа: прогресс-бар + 3 кнопки (Discuss/Cancel/Open) в один ряд
     не помещаются на узком экране — прогресс-бар сжимается до 0 и кнопки
     сбиваются в кучу слева. Переносим прогресс-бар на отдельную строку сверху. */
  .vk-order-actions {
    flex-wrap: wrap;
    gap: 4px !important;
  }
  .vk-order-progress {
    flex: 1 1 100% !important;
  }
  .vk-order-actions .vk-btn--sm,
  .vk-order-actions .vk-order-action-btn {
    padding: 8px 10px !important;
  }
  /* Без кнопки "Отмена" остаются только "Обсудить" + "Открыть" — прижимаем
     "Открыть" к правому краю (а не сразу вплотную к "Обсудить"). */
  .vk-order-actions:not(:has(.vk-order-action-btn:nth-of-type(3))) .vk-order-action-btn:last-child {
    margin-left: auto;
  }
  /* Когда рядом с "Обсудить"/"Открыть" есть ещё и "Отмена" (3 кнопки в ряд),
     обычного зазора уже не хватает и последняя кнопка переносится на новую
     строку целиком — сжимаем зазор и паддинг именно в этом случае. */
  .vk-order-actions:has(.vk-order-action-btn:nth-of-type(3)) {
    gap: 2px !important;
  }
  .vk-order-actions:has(.vk-order-action-btn:nth-of-type(3)) .vk-order-action-btn {
    padding: 8px 6px !important;
  }

  /* iOS Safari не пересчитывает 100vh при скрытии/появлении адресной строки —
     нижняя часть корзины (кнопка "Оформить") может уезжать под реальный низ
     экрана. 100dvh следует за фактической видимой областью. */
  .vk-cart-drawer {
    height: 100dvh !important;
  }

  /* Сдвигаем блок профиля немного влево. */
  .vk-profile-wrap {
    transform: translateX(-14px);
  }

  /* Карточка профиля/навигации в сайдбаре была position:sticky (нужно для
     двухколоночной раскладки на ПК) — на мобильном колонки складываются в
     одну (.vk-grid-collapse), и sticky-блок наезжал поверх списка заказов
     при скролле. На мобильном он должен идти в обычном потоке. */
  .vk-profile-aside {
    position: static !important;
  }

  /* ID заказа и статус-бейдж рядом не помещаются на узком экране —
     переносим статус под номер заказа. */
  .vk-order-id-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* Кнопки "Обсудить"/"Отмена"/"Открыть" переносили слово на новую строку —
     фиксируем однострочный текст. Паддинг задан выше, вместе с сжатием
     зазора для случая 3 кнопок. */
  .vk-order-action-btn {
    white-space: nowrap !important;
  }

  /* Шапка чата с командой: кнопка "Обсудить проект" с текстом не помещалась
     и вылезала за экран — на мобильном оставляем только иконку, как у кнопки
     логина в шапке сайта (тот же приём, vk-header-login-text). */
  .vk-chat-discuss-btn {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    justify-content: center;
    flex: none;
  }
  .vk-chat-discuss-btn .vk-btn__icon {
    margin: 0 !important;
  }
  .vk-chat-discuss-label {
    display: none;
  }

}

@media (max-width: 520px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}

@media (max-width: 860px) {
  /* Пилюли-табы (портфолио, готовые сайты и т.д.) не переносятся — при большом
     числе категорий они шире экрана и растягивают всю страницу по горизонтали.
     Делаем полосу горизонтально прокручиваемой вместо overflow всей страницы. */
  .vk-tabs {
    display: flex !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .vk-tabs::-webkit-scrollbar {
    display: none;
  }
  .vk-tab {
    flex: none;
  }
}