/* =====================================================================
 * БЛОК «ПРЕВЬЮ МЕТКИ» (п.1122), вид. Поведение - pin-preview.js рядом.
 * Карточка объекта внизу карты телефона (#ym-map-preview-card, классы .ym-map-preview-card*). Правила перенесены из mobile-redesign.css
 * как были, тем же порядком (п.42-45, 958, 961, 963 и др. - пометки в разделах ниже); правка вида превью - здесь, своих правил превью в
 * других файлах не писать. Не здесь: зелёная кнопка снижения цены у цены (ui/catalog-card.css, п.1019 - правило кнопки для всех мест),
 * touch-action кнопок (ui/mobile-layout-kit.css, общий список), подгонка фото 80 % (mobile-layer.js, fitAllPhotos).
 * Подключает header.php сразу после mobile-redesign.css (место в каскаде - прежнее).
 * ===================================================================== */

/* ---- было - mobile-redesign.css, строка 1853 (part:@media (max-width: 767px)) ---- */
@media (max-width: 767px) {
  /* --- превью объекта над шторкой --- */
  .ym-map-preview-card {
    position: fixed;
    z-index: 300;
    left: 10px;
    right: 10px;
    bottom: calc(var(--ym-mobile-nav-h, 73px) + 44px);
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 26px rgba(7,24,63,.28);
    animation: ymMapPreviewUp .18s ease;
  }
  .ym-map-preview-card[hidden] { display: none !important; }
  @keyframes ymMapPreviewUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
  .ym-map-preview-card__media { position: relative; display: block; }
  /* YARMETRO_ITEM43_PHOTO_FIT_V1: единое правило для всех фото (превью,
     карточки в шторке): картинку показываем ЦЕЛИКОМ, а пустоту по краям
     заполняем её же размытой копией -- так не режется ни вертикальное, ни
     широкое фото, и размер окна не скачет. */
  .ym-map-preview-card__track {
    display: flex;
    width: 100%;
    will-change: transform;
    touch-action: pan-y;
  }
  .ym-map-preview-card__photo {
    position: relative;
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 92px;
    overflow: hidden;
    background-color: #eef1f5;
  }
  .ym-map-preview-card__photo::before,
  .ym-map-preview-card__photo::after {
    content: "";
    position: absolute;
    background-image: var(--ym-photo, none);
    background-position: center;
    background-repeat: no-repeat;
  }
  .ym-map-preview-card__photo::before {
    inset: -16px;
    background-size: cover;
    filter: blur(12px) saturate(1.1);
    opacity: .92;
  }
  .ym-map-preview-card__photo::after {
    inset: 0;
    background-size: contain;
  }
  .ym-map-preview-card__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    display: flex;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
  }
  .ym-map-preview-card__dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.65);
    box-shadow: 0 1px 3px rgba(7,24,63,.35);
  }
  .ym-map-preview-card__dots i.is-active { background: #fff; width: 6px; height: 6px; }
  .ym-map-preview-card__close,
  .ym-map-preview-card__fav {
    position: absolute;
    top: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.92);
    color: var(--metro-mobile-ink);
    box-shadow: 0 2px 8px rgba(7,24,63,.22);
    cursor: pointer;
  }
  .ym-map-preview-card__close { right: 8px; }
  .ym-map-preview-card__fav { right: 46px; }
  .ym-map-preview-card__fav.is-active { color: var(--metro-mobile-accent); }
  .ym-map-preview-card__fav.is-active svg { fill: var(--metro-mobile-accent); }
  .ym-map-preview-card__body {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px 9px;
  }
  .ym-map-preview-card__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: inherit;
    text-decoration: none;
  }
  .ym-map-preview-card__price { font-size: 15px; font-weight: 800; color: var(--metro-mobile-ink); }
  .ym-map-preview-card__title { font-size: 11px; color: var(--metro-mobile-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ym-map-preview-card__address { font-size: 10px; color: var(--metro-mobile-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* кнопки в РЯД (п.1 фидбека): позвонить + скопировать ссылку */
  .ym-map-preview-card__actions { flex: 0 0 auto; display: flex; flex-direction: row; gap: 8px; }
  .ym-map-preview-card__btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
  }
  .ym-map-preview-card__btn--share { background: var(--metro-mobile-accent); color: #fff; }   /* п.961: «Поделиться» на месте звонка - тот же вид */
  .ym-map-preview-card__btn--share.is-done { background: #c3101f; }
  .ym-map-preview-card__btn--copy { background: rgba(231,24,44,.10); color: var(--metro-mobile-accent); }
  .ym-map-preview-card__btn--copy.is-done { background: var(--metro-mobile-accent); color: #fff; }
}

/* ---- было - mobile-redesign.css, строка 2099 (part:@media (max-width: 767px)) ---- */
@media (max-width: 767px) {
  .ym-map-preview-card__photo { height: 100px; }
  .ym-map-preview-card__photo::before { inset: -14px; filter: blur(10px) saturate(1.1); opacity: .95; }
  .ym-map-preview-card__photo::after { background-size: var(--ym-photo-size, contain); }
  .ym-map-preview-card__body { gap: 8px; padding: 4px 10px 5px; }
  .ym-map-preview-card__info { gap: 1px; }
  .ym-map-preview-card__price { font-size: 13px; line-height: 1.1; }
  .ym-map-preview-card__title { font-size: 10px; line-height: 1.15; }
  .ym-map-preview-card__address { font-size: 9.5px; line-height: 1.15; }
  .ym-map-preview-card__actions { gap: 7px; }
  .ym-map-preview-card__btn { width: 30px; height: 30px; border-radius: 10px; }
  .ym-map-preview-card__btn svg { width: 16px; height: 16px; }
  .ym-map-preview-card__close,
  .ym-map-preview-card__fav { width: 28px; height: 28px; top: 7px; }
  .ym-map-preview-card__close { right: 7px; }
  .ym-map-preview-card__fav { right: 41px; }
  .ym-map-preview-card__dots { bottom: 5px; }
}

/* ---- было - mobile-redesign.css, строка 2147 (whole) ---- */
/* ===================================================================
   YARMETRO_ITEM45_PREVIEW_OVERLAY_V1 (фидбек 2026-09-06, вечер)
   Превью объекта на карте: −20% по ширине и +38% по высоте
   (355×148 -> 284×205), фотография занимает всю карточку, цена,
   описание и адрес лежат поверх неё каждый на своей белой капсуле,
   кнопки собраны в белый блок справа, индикатор фотографий -- полоска
   по нижнему краю карточки вместо точек.
   Разметку не трогаем: превью строит showPreview() в footer.php, здесь
   только раскладка.
   =================================================================== */
@media (max-width: 767px) {
  .ym-map-preview-card { width: 284px; margin: 0 auto; }
  .ym-map-preview-card__photo { height: 205px; }

  /* блок с текстом и кнопками ложится поверх фотографии */
  .ym-map-preview-card__body {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 15px;
    z-index: 5;
    background: transparent;
    box-shadow: none;
    padding: 0;
    gap: 8px;
    align-items: flex-end;
  }
  .ym-map-preview-card__info { gap: 4px; align-items: flex-start; }
  .ym-map-preview-card__price,
  .ym-map-preview-card__title,
  .ym-map-preview-card__address {
    max-width: 100%;
    align-self: flex-start;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(7,24,63,.20);
  }
  .ym-map-preview-card__price { font-size: 13.5px; line-height: 1.15; padding: 3px 10px; }
  .ym-map-preview-card__title { font-size: 10px; line-height: 1.2; padding: 3px 10px; }
  .ym-map-preview-card__address { font-size: 9.5px; line-height: 1.2; padding: 3px 10px; }

  .ym-map-preview-card__actions {
    background: #fff;
    border-radius: 999px;
    padding: 5px;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(7,24,63,.20);
  }
  .ym-map-preview-card__btn { width: 30px; height: 30px; border-radius: 50%; }

  /* индикатор фотографий: полоска по нижнему краю, отрезок на каждый снимок */
  .ym-map-preview-card__dots {
    left: 12px;
    right: 12px;
    bottom: 6px;
    top: auto;
    z-index: 6;
    height: 3px;
    gap: 2px;
    border-radius: 3px;
    background: rgba(7,24,63,.30);
    box-shadow: 0 1px 3px rgba(7,24,63,.30);
  }
  .ym-map-preview-card__dots:empty { display: none; }
  .ym-map-preview-card__dots i {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 3px;
    border-radius: 3px;
    background: rgba(255,255,255,.45);
    box-shadow: none;
  }
  .ym-map-preview-card__dots i.is-active { width: auto; height: 3px; background: #fff; }
}

/* ---- было - mobile-redesign.css, строка 2220 (part:@media (max-width: 767px)) ---- */
@media (max-width: 767px) {
  .ym-map-preview-card { width: 327px; }
  .ym-map-preview-card__photo { height: 236px; background-color: #e9edf3; }
  .ym-map-preview-card__price { font-size: 15px; padding: 4px 12px; }
  .ym-map-preview-card__title { font-size: 11px; padding: 3px 11px; }
  .ym-map-preview-card__address { font-size: 10.5px; padding: 3px 11px; }
  .ym-map-preview-card__actions { padding: 6px; gap: 7px; }
  .ym-map-preview-card__btn { width: 34px; height: 34px; }
  .ym-map-preview-card__btn svg { width: 17px; height: 17px; }
  .ym-map-preview-card__close,
  .ym-map-preview-card__fav { width: 30px; height: 30px; top: 8px; }
  .ym-map-preview-card__close { right: 8px; }
  .ym-map-preview-card__fav { right: 44px; }
  /* пока кадр не подгружен -- мягкое мерцание вместо пустоты */
  .ym-map-preview-card__photo:not([style*="--ym-photo:"]) {
    background-image: linear-gradient(90deg, #eceff4, #f6f8fb, #eceff4);
    background-size: 200% 100%;
    animation: ymPhotoWait 1.1s linear infinite;
  }
}

/* ---- было - mobile-redesign.css, строка 4510 (whole) ---- */
/* п.963: сердечко превью на карте - стандарт бренд-бука (.yb-fav) в размере маленького окна: квадрат 32 px, радиус 10, сердце 18 px;
   крестик рядом - той же формы, чтобы две кнопки на фото были одной пары (было - круги 28-30 px, тонкое сердце) */
@media (max-width: 767px) {
  .ym-map-preview-card .ym-map-preview-card__fav,
  .ym-map-preview-card .ym-map-preview-card__close { top: 8px; width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.93); box-shadow: 0 3px 10px rgba(7,24,63,.15); }
  .ym-map-preview-card .ym-map-preview-card__close { right: 8px; color: #07183f; }
  .ym-map-preview-card .ym-map-preview-card__fav { right: 46px; color: #07183f; font-size: 0; }
  .ym-map-preview-card .ym-map-preview-card__fav svg { display: none; }
  .ym-map-preview-card .ym-map-preview-card__fav::before { content: ""; display: block; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--yb-heart) center / contain no-repeat; mask: var(--yb-heart) center / contain no-repeat; }
  .ym-map-preview-card .ym-map-preview-card__fav.is-active { background: #e7182c; color: #fff; }
}