:root{
  --hh-red: #af0b0b;
  --right-gap: 40px;           /* расстояние между фото и картой */
  --frame-bleed-right: 20px;   /* вылет рамки вправо (десктоп) */
  --frame-bleed-vert: 12px;    /* вылет рамки вверх/вниз (десктоп) */
  --left-col: 407px;           /* ширина левой колонки */
}

.hhv2 {display:none;}
.hh-contact{ margin:0 auto; padding: 90px 50px 160px 50px; }
.hh-contact *{ box-sizing:border-box; }

.hh-contact__grid{
  display:grid;
  grid-template-columns:minmax(0, var(--left-col)) 1fr;
  gap:38px;
}

/* левая колонка */
.hh-title{
  margin:60px 0 24px;
  font-family:var(--font-family,inherit);
  font-weight:500;
  font-size:40px;
  color:#fff;
  letter-spacing:.02em;
}

.hh-info + .hh-info{ margin-top:26px; }
.hh-info__name{ font-size:20px; color:#999; margin-bottom:6px; }
.hh-info__val,
.hh-info__val a{ font-size:20px; line-height:1.5; color:#fff; text-decoration:none; }

/* правая колонка: фото + карта */
.hh-col-right{ min-width:0; }

.hh-visual{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--right-gap);
  align-items:stretch;
  min-width:0;
  overflow:visible; /* рамка может «вылезать» */
}

.hh-photo{ margin:0; }
.hh-photo img{ display:block; width:100%; height:auto; border-radius: 20px;}
.hh-mapbox{background:#fff;padding:20px;box-sizing:border-box;z-index:20;min-height:0;border-radius: 20px;}
.hh-map{width:100%; height:100%; overflow:hidden; border-radius: 20px;}

/* ч/б тайлы карты */
.hh-map .ymaps-2-1-79-ground-pane,
.hh-map [class*="ground-pane"]{
  filter: grayscale(1) contrast(1.05);
}


/* десктопная рамка (contact.svg) */
.hh-decor--desktop{
  left:0px;
  top: calc(-1 * var(--frame-bleed-vert));
  width: calc(100% + var(--frame-bleed-right));         /* + вправо */
  height: calc(100% + var(--frame-bleed-vert) * 2);     /* + вверх/вниз */
  object-fit: fill;                                     /* растянуть в коробку без обрезки */
  display:block;
}

/* мобильная рамка (contact-mobile.svg) — по умолчанию скрыта */
.hh-visual img.hh-decor--mobile{ display:none !important; }

/* =========================
   АДАПТИВ: планшет и телефон
   ========================= */

/* планшет ≤ 1200px: убираем фото, один столбик, включаем мобильную рамку */
@media (max-width: 1200px){
  .hh-contact__grid{ grid-template-columns:1fr; }
  .hh-visual{ grid-template-columns:1fr; row-gap:24px; }

  .hh-photo{ display:none; }                            /* фото скрываем */
  .hh-decor--desktop{ display:none !important; }        /* десктопную рамку тоже */
  .hh-visual img.hh-decor--mobile{
    display:block !important;
    left:-12px; top:-12px;
    width:calc(100% + 24px);
    height:calc(100% + 24px);
    object-fit: fill;
  }

  /* карта в один столбик: высоту задаём через CSS и перебиваем инлайн из JS */
  .hh-mapbox{
    height:auto !important;     /* сбросить inline-height из JS */
    padding:16px;
  }
  .hh-map{ height:520px; }      /* высота карты на планшете */
}

/* мобильный ≤ 768px: чуть меньше типографика, карта ниже */
@media (max-width: 768px){
  .hh-title{ font-size:28px; margin-top:30px; }
  .hh-info__name, .hh-info__val, .hh-info__val a{ font-size:16px; }
  .hh-map{ height:420px; }      /* высота карты на телефоне */
}

/* Мобилка/планшет: убираем горизонтальный скролл и клипуем рамку */
@media (max-width: 1200px){
  .hh-contact{padding: 20px 20px 60px; }
  .hh-visual {overflow: hidden; } /* чтобы contact-mobile.svg не раздвигал ширину */

  /* фото скрыто, остаётся текст + карта в один столбик */
  .hh-photo{ display: none !important; }

  /* белый блок карты — ширина 100%, высоту не берём из JS */
  .hh-mapbox{
    width: 100%;
    height: auto !important;   /* сбить возможную inline-высоту */
    padding: 16px;
    border-radius: 18px;
    margin-bottom: 20px;
  }
  .hh-map{
    width: 100% !important;
    height: 520px !important;  /* планшет */
  }

  /* мобильная рамка: растягиваем, но родитель её клипует */
  .hh-visual img.hh-decor--mobile{
    display: block !important;
    inset: -12px;              /* равнозначно left/top/right/bottom:-12px */
    object-fit: fill;
  }
}

@media (max-width: 768px){
  .hh-map{ height: 420px !important; }  /* телефон */
}

/* 1) Серим ТОЛЬКО тайлы карты, а не весь слой */
.hh-map .ymaps-2-1-79-ground-pane { filter: none !important; }
.hh-map .ymaps-2-1-79-ground-pane canvas { filter: grayscale(1) contrast(1.05) !important; }

/* 2) Жестко фиксируем размеры графики метки и путь к логотипу */
.hb-pin{ position: relative; width:46px; height:60px; line-height:0; }
.hb-pin__img{ display:block; width:46px; height:60px; max-width:none !important; }
.hb-pin__logo{
  position:absolute; left:50%; top:44%;
  width:22px; height:22px; transform:translate(-50%,-50%);
  background:center/contain no-repeat url('/wp-content/themes/hilbert-house/icon/H-map.svg') !important;
  filter:none !important;
  pointer-events:none;
}

/* На всякий случай — никакие глобальные стили не уменьшают картинку-метки */
.hb-pin img { max-width:none !important; height:auto; }


/* ===== Hilbert — Contact Map: Black & White ===== */
.hh-mapbox { position: relative; }
#hh-map{ filter: grayscale(1) saturate(0) contrast(1.05) brightness(0.94);
  -webkit-filter: grayscale(1) saturate(0) contrast(1.05) brightness(0.94); transform: translateZ(0); will-change: filter;}
.hh-photo img {  filter: grayscale(1) saturate(0) contrast(1.05) brightness(0.94);
  -webkit-filter: grayscale(1) saturate(0) contrast(1.05) brightness(0.94); transform: translateZ(0); will-change: filter;}