/* Правки под бфа-озерки.рф. Лежит отдельно от общего слоя, чтобы не влиять
   на другие ленды и не теряться при заливке исходников братом. */

/* Между 861 и 1340 шапка не влезала в строку и разъезжалась на две.
   Вместо третьей вёрстки — ужимаем её, чтобы осталась одна строка. */
@media (min-width: 861px) and (max-width: 1340px){
  [data-mobile-header]{flex-wrap:nowrap!important;gap:12px 16px!important;
    padding-left:20px!important;padding-right:20px!important}
  [data-mobile-header] nav{gap:18px!important}
  [data-mobile-header] nav a{font-size:13px!important}
  [data-mobile-header] [data-logo]{font-size:16px!important;letter-spacing:.1em!important}
  [data-mobile-header] span[data-mobile="hide"]{display:none!important}
}

/* --- Картинки. Привязка по секциям, а не по именам файлов: hero-facade.webp
   используется и в первом экране, и в ряду «Готовый квартал», из-за чего одна
   из трёх карточек ряда вела себя иначе, чем соседние. --- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){

  /* Первый экран, два фото отделки и аэрофото у формы: картинка приближается
     ВНУТРИ рамки — рамка стоит на месте и режет вылезающее. */
  section:first-of-type :has(> img),
  #finish :has(> img[src*="whitebox-"]),
  #view :has(> img){overflow:hidden}
  section:first-of-type :has(> img) > img,
  #finish :has(> img[src*="whitebox-"]) > img,
  #view :has(> img) > img{transition:transform .45s ease;will-change:transform}
  section:first-of-type :has(> img):hover > img,
  #finish :has(> img[src*="whitebox-"]):hover > img,
  #view :has(> img):hover > img{transform:scale(1.025)}

  /* Три фото в «Готовом квартале»: картинка растёт целиком, вместе с рамкой,
     без обрезки — все три одинаково. */
  #about figure{overflow:visible!important}
  #about figure > img{transition:transform .45s ease;will-change:transform}
  #about figure:hover > img{transform:scale(1.025)}
}

/* Пять фото «Общие зоны» в том же разделе — как в «Готовом квартале»:
   картинка растёт целиком вместе с рамкой, без обрезки. Два whitebox рядом
   остаются с приближением внутри рамки, они исключены. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){
  #finish :has(> img):not(:has(> img[src*="whitebox-"])){overflow:visible!important}
  #finish :has(> img):not(:has(> img[src*="whitebox-"])) > img{
    transition:transform .45s ease;will-change:transform}
  #finish :has(> img):not(:has(> img[src*="whitebox-"])):hover > img{transform:scale(1.025)}
}

/* Прилипающая панель ленда с ценой (80 px, слой 80) закрывала нашу кнопку
   «наверх». Пока панель показана — поднимаем кнопку над ней. */
body:has([data-mobile-bar="on"]) .to-top{bottom:98px}

/* ─────────────── мобильные правки по замечаниям Алексея ─────────────── */
@media (max-width: 720px){

  /* «Ипотека»: карточки на мобиле не анимируем — при появлении они наезжают
     друг на друга. Это ревил самого ленда, гасим его принудительно. */
  #pay [data-reveal]{opacity:1!important;transform:none!important}

  /* Полоса фотографий под картой: на узком экране непонятно, к чему она
     относится — кирпичная стена, платформа и утки без контекста. Прячем. */
  #location [data-mobile="slider"]{display:none!important}

  /* «Пешком / На автомобиле»: в двух колонках строки разной высоты, потому что
     подписи переносятся по-разному, и линии-разделители не совпадают.
     Задаём строкам общую минимальную высоту — линии встают в одну линейку. */
  #location [style*="display: grid"] > div > div > div{min-height:6.4em}

  /* Табы квартир листаются вбок, но обрыв у края не читается как «есть ещё».
     Подтираем правый край градиентом — видно, что список продолжается.
     И выравниваем первый таб по левому краю карточки с планировкой (28 px),
     а не по краю экрана. */
  [data-flat-tabs]{
    padding-left:clamp(14px,3vw,48px)!important;
    padding-right:clamp(14px,3vw,48px)!important;
    scroll-padding-left:clamp(14px,3vw,48px)}
}

@media (max-width: 720px){
  /* Панель с ценой появлялась и исчезала рывком (display:none). Держим её
     в потоке всегда и двигаем трансформацией — выезжает и уезжает плавно. */
  #mobile-bar{display:flex!important;animation:none!important;
    transform:translateY(115%);opacity:0;pointer-events:none;
    transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .28s ease}
  #mobile-bar[data-mobile-bar="on"]{transform:none;opacity:1;pointer-events:auto}

  /* Живой чат кладём слоем НИЖЕ панели с ценой. Jivo вешает на свои
     элементы z-index 2147483647 — перебить его числом нельзя, поэтому
     даём контейнеру чата собственный контекст наложения: всё, что внутри,
     прижимается к слою 70, а панель с ценой на слое 80 и оказывается сверху.
     Сдвигать чат трансформацией нельзя: transform ломает position:fixed
     внутри него, кнопка уезжает из угла. */
  body > jdiv{position:relative;z-index:70}
  /* Раскрытый на весь экран чат панель не должна перечёркивать. */
  body.land-overlay-on #mobile-bar{opacity:0!important;pointer-events:none!important}

}

/* Стрелки листания в лайтбоксе: они и так поверх картинки, но прозрачные
   и на белом плане просто не читаются. Даём фон, рамку и тень. */
#lightbox .lb-nav{z-index:2;background:rgba(255,255,255,.96)!important;
  border:1px solid #E6E4DF!important;color:#1D1D1B!important;
  box-shadow:0 6px 18px rgba(0,0,0,.2)}
#lightbox .lb-nav:hover{background:#fff!important}

/* На телефоне ховер карточек «Ипотеки» залипает после тапа — карточка
   остаётся приподнятой и наезжает на соседнюю. Ховер там не нужен. */
@media (hover: none), (max-width: 720px){
  .pay-card{transition:none!important}
  .pay-card:hover{transform:none!important;
    box-shadow:inset 0 0 0 1px #DEDCD6!important}
}

/* Кнопки прокрутки ленты квартир: прижаты к краям, показываются только
   с той стороны, куда ещё можно листать. Разметку делает общий слой. */
.tabs-scroll{position:relative}
.tabs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border:1px solid #E2DFD9;border-radius:50%;
  background:rgba(255,255,255,.96);color:#1D1D1B;
  font:400 20px/1 Jost,system-ui,sans-serif;cursor:pointer;
  display:none;align-items:center;justify-content:center;padding:0 0 2px;
  box-shadow:0 4px 14px rgba(29,29,27,.14)}
.tabs-arrow-left{left:2px}
.tabs-arrow-right{right:2px}
.tabs-scroll.can-left .tabs-arrow-left{display:flex}
.tabs-scroll.can-right .tabs-arrow-right{display:flex}
/* подсказка-затемнение у того края, куда можно листать */
.tabs-scroll.can-left [data-flat-tabs],
.tabs-scroll.can-right [data-flat-tabs]{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 38px,
    #000 calc(100% - 38px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 38px,
    #000 calc(100% - 38px),transparent 100%)}
.tabs-scroll.can-right:not(.can-left) [data-flat-tabs]{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 38px),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 38px),transparent 100%)}
.tabs-scroll.can-left:not(.can-right) [data-flat-tabs]{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 38px);
  mask-image:linear-gradient(to right,transparent 0,#000 38px)}
@media (hover: hover) and (pointer: fine){
  .tabs-arrow{transition:transform .2s ease,box-shadow .2s ease}
  .tabs-arrow:hover{transform:translateY(-50%) scale(1.08);
    box-shadow:0 6px 18px rgba(29,29,27,.2)}
}