/* Мобильный слой сайта wow-doma.ru: дома в кадре целиком.
   Сборка приложения (июнь 2026) рассчитана на широкий экран: рендеры 16:9 стоят
   в вертикальных контейнерах с object-fit: cover, поэтому на телефоне от дома
   оставался кусок стены. Слой ничего не меняет на десктопе — все правила внутри
   @media (max-width: 767px) и применяются к классам pdm-*, которые расставляет
   mobile.js. Кадры на телефоне — квадратные 1200×1200 (images/houses-m), те же,
   что на рекламном лендинге: дом входит в кадр полностью.
   [CLAUDE-VPS-20260923-WOWDOMA-MOBFRAMES-A] */

@media (max-width: 767px) {

  /* 1. Фон страницы: дом целиком в верхней части экрана, без обрезки по бокам */
  img.pdm-bg {
    object-fit: contain !important;
    object-position: 50% 6% !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0 40%, rgba(0,0,0,0) 52%);
    mask-image: linear-gradient(180deg, #000 0 40%, rgba(0,0,0,0) 52%);
  }
  .pdm-bg-dim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,17,20,.30) 0%, rgba(15,17,20,.45) 52%, rgba(15,17,20,.82) 100%);
    pointer-events: none;
  }

  /* 2. Карточка «ХИТ ПРОДАЖ»: кадр — квадратной полосой сверху, текст под ним */
  .pdm-feat-wrap { height: 706px !important; }
  .pdm-feat-arrow { top: 163px !important; bottom: auto !important; transform: translateY(-50%) !important; }
  .pdm-feat-imgbox {
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 326px !important;
  }
  .pdm-feat-text { margin-top: 326px !important; padding-top: 1.25rem !important; }
  .pdm-feat-fade { display: none !important; }

  /* 3. Карточки каталога и ленты «Наши проекты»: квадрат вместо вытянутого прямоугольника */
  .pdm-card-square { height: auto !important; aspect-ratio: 1 / 1; }
  .pdm-card-slide {
    min-width: 0 !important;
    width: 86vw !important;
    max-width: 360px;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
}