/* ==========================================================================
   MOSEPDM — мобильная версия 1:1 по фрейму Figma «Mobile» (2-888, 375px).
   Мастер-скрин: .figma-cap/master-mobile.png. Подключается после main.css.
   Всё внутри @media (max-width: 599px), кроме правил видимости контролов.
   ========================================================================== */

/* Контролы мобильных слайдеров создаёт mobile.js — на десктопе скрыты */
.mslider { display: none; }

/* Кнопка-телефон в шапке — только на мобильных */
.header-phone { display: none; }

/* --------------------------------------------------------------------------
   Форматирование текста: декоративные переносы <br> подобраны под сетку
   1440 — на планшете и мобильных отключаем, строки переносятся естественно
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  /* без явной колонки авто-трек грида раздувается до max-content кнопки */
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1023px) {
  .hero__title br, .hero__lead br,
  .head__title br, .head__lead br, .head__note br,
  .quality__title br, .quality__lead br, .quality-row__text br,
  .stock__title br, .stock__sub br, .stock-item__text br,
  .lead-form__title br, .consent br,
  .contact__value br,
  .doc-card__name br { display: none; }

  /* заголовок укладки держит свои 3 строки на всех ширинах */
  .install__title { max-width: none; }
}

@media (max-width: 699px) {
  .header-phone {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--c-line);
    background: var(--c-white);
  }
  .header-phone img { width: 20px; height: 20px; }
}

@media (max-width: 599px) {

  /* ---------- Шапка (макет: высота 62, кнопки-квадраты справа) ----------- */

  :root { --header-h: 62px; }

  .site-header__inner { gap: 8px; }
  .brand__icon { width: 24px; height: 22.6px; border-radius: 6px; }
  .brand__text { font-size: 16px; }

  .burger {
    width: 38px; height: 38px;
    margin-right: 0;
    background: var(--c-light);
  }

  /* ---------- Мобильное меню (фрейм «Меню») ------------------------------- */

  .mobile-nav { padding: calc(var(--header-h) + 24px) var(--gutter) 24px; gap: 0; }
  .mobile-nav ul li { border-bottom: 1px solid var(--c-line); }
  .mobile-nav__link { padding-block: 20px; font-size: 30px; }
  .mobile-nav__foot { margin-top: auto; padding-top: 32px; gap: 20px; }
  .mobile-nav__phone { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; }

  /* ---------- Общее ------------------------------------------------------- */

  .btn { width: 100%; font-size: 15px; }
  .head__row { margin-top: 24px; padding-top: 24px; gap: 16px; }
  .head__row > div { gap: 20px; justify-items: stretch; }
  .head__lead { font-size: 16px; }
  .head__note { font-size: 13px; }
  .tag { font-size: 13px; }
  .tag::before { width: 12px; height: 12px; }

  /* Лента-слайдер: полноширинный скролл со снапом */
  .mslider-track {
    display: flex !important;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .mslider-track::-webkit-scrollbar { display: none; }
  .mslider-track > * { flex: none; scroll-snap-align: start; }

  /* Контролы: стрелки + прогресс (макет: 28×28, линия справа) */
  .mslider {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
  }
  /* один размер со всеми кнопками листания на мобильном */
  .mslider__btn {
    flex: none;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    background: var(--c-light);
    color: var(--c-ink);
  }
  .mslider__btn--next { background: #12173B; color: var(--c-white); }
  .mslider__btn { background: #12173B; color: var(--c-white); }
  .mslider__btn.is-off { background: var(--c-light); color: var(--c-muted); cursor: default; }
  .mslider__bar {
    position: relative;
    flex: 1 1 auto;
    height: 3px;
    margin-left: 28px;
    background: #DEE0F2;
    overflow: hidden;
  }
  .mslider__bar i {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    width: 30%;
    background: var(--c-blue);
  }
  /* кнопка, перенесённая под слайдер, не прижимается к контролам */
  .mslider + .btn { margin-top: 24px; }

  /* ---------- Hero -------------------------------------------------------- */

  .hero__top { padding-top: calc(var(--header-h) + 40px); padding-bottom: 32px; }
  .hero__grid { gap: 24px; }
  .hero__aside { gap: 24px; justify-items: stretch; }
  .hero__aside .btn { white-space: normal; padding-inline: 16px; }
  .hero__lead { font-size: 13px; }

  .hero__media { height: 430px; }
  /* лёгкий зум, чтобы у ролика 2:1 не проглядывали края */
  .hero__video { transform: scale(1.08); }

  /* бейджи: три синие карточки в ряд с отступом от низа фото */
  .hero__badges {
    left: var(--gutter);
    right: var(--gutter);
    top: auto;
    bottom: 16px;
    max-width: none;
    flex-wrap: nowrap;
    gap: 2px;
  }
  .badge {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    min-height: 86px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    font-size: 11px;
    line-height: 1.25;
  }
  .badge__icon { width: 28px; height: 28px; }

  /* ---------- Палитра RAL (слайдер карточек) ------------------------------ */

  .colors__body { display: block; margin-top: 32px; }
  .colors__grid > .swatch { width: 300px; }
  /* стрелки внутри карточки: на телефоне в 28 px пальцем не попасть */
  .swatch__nav { right: 12px; bottom: 12px; gap: 4px; }
  .swatch__arr { width: 42px; height: 42px; }
  .swatch__arr svg { width: 16px; height: 15px; }
  .swatch { gap: 10px; }
  .swatch__foot { display: grid; gap: 2px; }

  /* ---------- Конструктор: базовый лист + шторки (Figma 2-2468) ------------ */

  .constructor { padding: 64px 0 72px; }
  .mix-head { font-size: var(--fs-mega); }
  .mix-sub { margin-top: 14px; font-size: 13px; }

  /* белые блоки, разделённые серыми зазорами, во всю ширину экрана */
  .mix-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 32px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0;
    background: transparent;
  }
  .mix-card { display: contents; }
  .mix-card__title { font-size: 18px; margin-bottom: 0; }

  .mix-card:nth-child(1) .mix-card__title { order: 1; background: var(--c-white); padding: 16px var(--gutter) 12px; }
  /* фото микса — главное на экране, поэтому выше остальных блоков */
  .mix-canvas-wrap { order: 2; flex: none; min-height: 0; height: 308px; margin-top: -8px; }
  .mix-card:nth-child(2) .mix-card__title { order: 3; }
  .mix-picked { order: 4; }
  .mix-card:nth-child(3) .mix-card__title { order: 5; }
  .mix-actions { order: 6; }

  /* Строки-кнопки «Выберите цвета» / «Настройте пропорции».
     Кегль и отступы на треть меньше заголовка «Ваш микс»: это управление,
     а не заголовки, и обе строки должны читаться одинаково. */
  .mix-row {
    position: relative;
    background: var(--c-white);
    padding: 17px calc(var(--gutter) + 24px) 17px var(--gutter);
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
  }
  .mix-row::after {
    content: "";
    position: absolute;
    right: calc(var(--gutter) + 4px); top: 50%;
    width: 7px; height: 7px;
    border-right: 2px solid var(--c-ink);
    border-bottom: 2px solid var(--c-ink);
    transform: translateY(-55%) rotate(-45deg);
  }
  .mix-row__label { cursor: pointer; }
  .mix-row.is-disabled { color: var(--c-muted); pointer-events: none; }
  .mix-row.is-disabled::after { border-color: var(--c-muted); }

  /* лента выбранных цветов под строкой «Выбрано N цветов» */
  .mix-picked {
    display: flex;
    gap: 8px;
    margin-top: -8px;
    background: var(--c-white);
    padding: 0 var(--gutter) 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mix-picked::-webkit-scrollbar { display: none; }
  .mix-picked:empty { display: none; margin: 0; padding: 0; }
  .mix-picked__item { flex: none; width: 72px; background: var(--c-blue); padding: 4px; }
  .mix-picked__swatch { display: block; width: 100%; height: 48px; object-fit: cover; }
  .mix-picked__name {
    display: block;
    padding: 4px 1px 0;
    color: var(--c-white);
    font-size: 11px;
    font-weight: var(--fw-semi);
    letter-spacing: -.02em;
  }

  /* палитра, подсказка и пропорции живут в шторке — в карточках скрыты */
  .mix-card .mix-tabs, .mix-card .mix-palette, .mix-card .mix-hint,
  .mix-card .mix-props, .mix-card .mix-tools { display: none; }

  .mix-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    margin-top: 0;
  }
  .mix-actions__dl { background: var(--c-white); height: 56px; }
  .mix-actions__fix { width: 100%; }

  /* ---------- Шторка ------------------------------------------------------- */

  .mix-sheet { position: fixed; inset: 0; z-index: 130; }
  .mix-sheet[hidden] { display: none; }
  .mix-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 45, .5);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease);
  }
  .mix-sheet__panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    padding: 10px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease);
  }
  .mix-sheet.is-open .mix-sheet__backdrop { opacity: 1; }
  .mix-sheet.is-open .mix-sheet__panel { transform: none; }

  .mix-sheet__grip {
    flex: none;
    width: 64px; height: 4px;
    border-radius: 2px;
    background: var(--c-line);
    margin: 0 auto 16px;
  }
  .mix-sheet__head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .mix-sheet__title { font-size: 24px; font-weight: var(--fw-semi); letter-spacing: var(--ls); }
  .mix-sheet__close { width: 32px; height: 32px; display: grid; place-items: center; color: var(--c-ink); }

  .mix-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .mix-sheet__accept { flex: none; margin-top: 16px; }
  .mix-sheet__accept.is-empty { background: #AEBBF1; pointer-events: none; }

  /* содержимое внутри шторки */
  .mix-sheet .mix-tabs { margin: 0 0 22px; }
  .mix-sheet .mix-main-grid { grid-template-columns: repeat(4, 1fr); gap: 20px 12px; }
  .mix-sheet .mix-swatch__name { font-size: 13px; white-space: nowrap; padding-inline: 4px; }
  .mix-sheet .mix-extra-grid {
    grid-template-columns: repeat(7, 1fr);
    max-height: none;
    overflow: visible;
    padding-right: 0;
    gap: 12px 6px;
  }
  .mix-sheet .mix-chip__name { font-size: 10px; }
  .mix-sheet .mix-hint { margin: 16px 0 0; }
  .mix-sheet .mix-props { margin: 0; gap: 20px; max-height: none; }
  .mix-sheet .mix-tools { margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; }
  .mix-sheet .mix-tool { justify-content: center; }
  .mix-sheet .mix-tool:last-child { grid-column: 1 / -1; }

  /* ---------- Производство: круги-слайдер --------------------------------- */

  .steps { margin-top: 32px; }
  .steps .step { width: 300px; display: grid; gap: 16px; }
  .step__disc img { width: 300px; height: 300px; }
  .step__label { justify-content: center; }

  /* ---------- Преимущества 1-2-3 (Figma 2-1073) ---------------------------- */

  .perk-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 314px;
    padding: 20px 16px 24px;
    overflow: hidden;   /* бункеры увеличены сверх ширины карточки — обрезаем по её краю */
  }
  .perk-card__num { position: absolute; left: 20px; top: 20px; z-index: 1; }
  /* Файлы клиента показываются во всю ширину карточки, 1:1.
     aspect-ratio по самому высокому экспорту держит карточки одной высоты. */
  .perk-card__art {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1458 / 1360;
    max-width: none;
    max-height: none;
    margin: 0 0 4px;
  }
  .perk-card__art img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .perk-card__text { margin-top: auto; padding-inline: 4px; }
  .perk-card__title { font-size: 20px; }
  .perk-card__sub { font-size: 13px; }

  /* ---------- Контроль качества ------------------------------------------- */

  /* Секция во всю ширину экрана: скруглённые углы оставляли по краям
     белые уголки страницы. На десктопе радиус нужен, тут — нет. */
  .quality { border-radius: 0; }
  .quality__title { font-size: 30px; }
  .quality__lead { margin-top: 24px; padding-top: 24px; font-size: 16px; }
  .quality__list { margin-top: 8px; }
  .quality__list .quality-row:first-child { margin-top: 24px; }

  /* строка макета: иконка слева, текст по центру, крупный номер справа */
  .quality-row { grid-template-columns: 44px minmax(0, 1fr) auto; padding-block: 20px; }
  .quality-row__num { grid-column: 3; font-size: 28px; }
  .quality-row__icon { grid-column: 1; grid-row: 1; width: 44px; height: 44px; }
  .quality-row__icon img { width: 44px; height: 44px; }
  .quality-row__text { grid-column: 2; grid-row: 1; font-size: 13px; }
  .quality__note { font-size: 13px; }

  /* ---------- Тонны крошки (синяя) + фото --------------------------------- */

  /* синяя часть + 3D-визуал, заходящий на синий (Figma 45:1513);
     иконки не трогаем — они собраны из точно позиционированных частей */
  .stock__inner { display: flex; flex-direction: column; overflow: visible; }
  /* низ с запасом: туда заходит 3D-визуал, не наезжая на текст */
  .stock__left { padding: 56px var(--gutter) 136px; }
  .stock__title { font-size: 35px; line-height: 1.15; }
  .stock__sub { margin-top: 22px; font-size: 13px; line-height: 1.35; }

  .stock__list { margin-top: 52px; max-width: none; }
  .stock-item { padding-block: 26px; }
  .stock-item__text { font-size: 13px; line-height: 1.4; }

  .stock__media {
    position: relative;
    min-height: 0;
    height: 268px;
    overflow: visible;   /* визуал выходит вверх, на синюю часть */
  }
  /* left+right вместе с width конфликтовали, и визуал прижимался влево;
     центрируем через сдвиг от середины */
  .stock__media img {
    position: absolute;
    left: 50%;
    right: auto;
    top: auto; bottom: 0;
    width: 112%;
    height: 384px;
    transform: translateX(-50%);
    object-fit: contain;
    padding: 0;
  }

  /* ---------- Кто у нас покупает (слайдер фото) --------------------------- */

  .clients__grid { margin-top: 32px; }
  .clients__grid > .client-card { width: 300px; }
  .client-card img, .client-card--b img { height: 230px; }
  .client-card figcaption { font-size: 13px; }

  /* ---------- Объекты (кейсы) --------------------------------------------- */

  .cases { padding-bottom: 64px; }
  .cases__head { display: block; padding-bottom: 24px; }
  .cases__topnav { display: none; }   /* на мобильном листаем свайпом */
  /* stretch — чтобы все карточки объектов были одной высоты, как в макете */
  .cases__viewport { margin-top: 24px; gap: 12px; align-items: stretch; }

  /* слайд: фото сверху, белая карточка отзыва на фирменном цвете */
  .case-slide {
    width: min(345px, calc(100vw - 2 * var(--gutter)));
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .case-slide__media { position: relative; inset: auto; flex: none; aspect-ratio: 900 / 685; }
  .case-slide__name { left: 16px; top: 14px; font-size: 20px; }
  .case-slide__nav { left: 12px; bottom: 12px; }
  /* 48 px — минимум, в который уверенно попадает палец */
  .case-btn { width: 48px; height: 48px; }
  .case-slide__progress { display: none; }
  /* flex: 1 — белая плашка добирает остаток высоты карточки, иначе снизу
     оставалась полоса фирменного цвета (карточки выровнены по самой высокой) */
  .case-slide__quote {
    position: static;
    width: auto;
    flex: 1 1 auto;
    margin: 12px;
    padding: 16px;
    gap: 16px;
  }
  .case-slide__text { gap: 12px; overflow: visible; }
  .case-slide__quote p { font-size: 13px; line-height: 1.45; }
  .case-slide__quote cite { font-size: 12px; }
  .cases__cta { display: none; }   /* в мобильном макете этой кнопки нет */

  /* ---------- Как заказать (слайдер карточек) ----------------------------- */

  .order-band { padding: 64px 0 72px; }
  .order__grid { margin-top: 32px; }
  .order__grid > .order-card { width: 300px; min-height: 314px; }
  .order-card__art { max-width: none; max-height: none; margin-top: 0; }
  .order-card__title { font-size: 18px; }
  .order-card__sub { font-size: 13px; }

  /* ---------- Документы (слайдер) ----------------------------------------- */

  .docs { padding-top: 64px; }
  .docs__layout { display: block; margin-top: 32px; }
  .docs__grid > .doc-card { width: 300px; }
  .doc-card { gap: 14px; }
  .doc-card__name { font-size: 16px; }
  .doc-card__sub { margin-top: -8px; }
  .docs__cta { margin-top: 32px; }

  /* ---------- Укладка: сначала фото, потом текст --------------------------- */

  .install__inner { display: flex; flex-direction: column-reverse; }
  .install__left { padding: 48px var(--gutter) 56px; }
  .install__title { font-size: 33px; max-width: none; }
  .install__sub { margin-top: 16px; font-size: 13px; }
  .install__text { margin-top: 28px; padding-top: 0; font-size: 16px; }
  .install__left .btn { margin-top: 28px; }
  .install__media { min-height: 400px; }
  .install__controls { left: 16px; bottom: 16px; }
  .install__controls .circle-btn { width: 48px; height: 48px; }
  .install__progress { margin-left: 12px; }
  .install__progress i { width: 56px; }

  /* ---------- Заявка ------------------------------------------------------- */

  .lead-block__grid { gap: 40px; }
  .lead-photo { max-width: none; margin-inline: calc(-1 * var(--gutter)); }
  .lead-form__note { font-size: 13px; }
  .chip { height: 38px; font-size: 13px; padding-inline: 12px; }
  .lead-form__fields { margin-top: 32px; gap: 12px; }
  .consent { margin-top: 28px; grid-template-columns: 28px 1fr; gap: 14px; font-size: 12px; }
  .consent input { width: 28px; height: 28px; }
  .lead-form__submit { margin-top: 20px; }

  /* ---------- Контакты ----------------------------------------------------- */

  .contacts__col { padding: 0; gap: 32px; max-width: none; }
  .contacts__title { font-size: 33px; }
  .contacts__list { gap: 28px; }
  .contact__value { font-size: 20px; }
  .contacts__map-btn { margin-top: 20px; }
  .contacts__map { min-height: 410px; margin-inline: calc(-1 * var(--gutter)); }

  /* ---------- Футер (макет: две колонки ссылок, форма ниже) ---------------- */

  .site-footer { padding-block: 40px 24px; }
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 32px 16px;
    padding-bottom: 40px;
  }
  /* порядок как в макете: логотип → колонки ссылок → форма обратного звонка */
  .site-footer__brand-col { display: contents; }
  .site-footer__brand { grid-column: 1 / -1; order: 1; }
  .site-footer__brand img { width: 40px; height: 40px; }
  .site-footer__brand span { font-size: 26px; }
  .footer-col { order: 2; }
  .footer-callback { grid-column: 1 / -1; order: 3; margin-top: 8px; max-width: none; }
  .footer-callback__form { flex-wrap: nowrap; }
  .footer-callback__input { flex: 1 1 auto; min-width: 0; }
  .footer-col ul { gap: 10px; }
  .site-footer__bottom { font-size: 12px; }
}