* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: linear-gradient(to right, #0f2027, #1f0606, #220e0e);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #fff;
    }

    .contacts-wrapper {
      display: flex;
      height: 100vh;
      width: 100%;
      margin: 0 auto;
    }

    .map-container {
      flex: 1;
      min-height: 100%;
      animation: fadeIn 1.5s ease;
    }

    .map-container iframe {
      width: 100%;
      height: 100%;
      border: none;
      filter: grayscale(0.2) brightness(0.9);
    }

    .info-container {
      flex: 1;
      padding: 60px;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      flex-direction: column;
      justify-content: center;
      animation: slideIn 1.5s ease;
    }

    .info-container h2 {
      font-size: 42px;
      color: rgb(255, 0, 0);
      margin-bottom: 30px;
      text-shadow: 0 0 10px rgb(255, 0, 0);
    }

    .info-container a {
      color: rgb(255, 0, 0);
      text-decoration: none;
      font-size: 22px;
      margin: 15px 0;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: 0.3s;
    }

    .info-container a:hover {
      color: #fff;
      text-shadow: 0 0 10px rgb(128, 0, 0);
    }

    .info-container i {
      font-size: 24px;
    }

    @media (max-width: 768px) {
      .contacts-wrapper {
        flex-direction: column;
        height: auto;
      }

      .map-container {
        height: 300px;
      }

      .info-container {
        padding: 30px;
      }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes slideIn {
      from { transform: translateX(50px); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }





    /* ===== Base / Tokens ===== */
:root{
  --bg-grad: linear-gradient(to right, #0f2027, #1f0606, #220e0e);
  --panel: rgba(0,0,0,.6);
  --text: #fff;
  --red: #ff0000;
  --red-dim: #800000;
  --radius: 16px;
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
}

body{
  margin: 0;
  background: var(--bg-grad);
  color: var(--text);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ===== Layout ===== */
.contacts-wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* карта | инфо */
  gap: 0;
  min-height: 100vh;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

/* карта */
.map-container{
  min-height: 100%;
  overflow: hidden;
  animation: fadeIn 1.2s ease;
}
.map-container iframe{
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.15) brightness(.95);
  display: block;
}

/* инфоблок */
.info-container{
  padding: 64px clamp(24px, 4vw, 72px);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  animation: slideIn 1.2s ease;
}

.info-container h2{
  font-size: clamp(28px, 3.2vw, 44px);
  color: var(--red);
  margin: 0 0 18px 0;
  text-shadow: 0 0 10px var(--red);
  letter-spacing: .3px;
}

.info-container a{
  color: var(--red);
  text-decoration: none;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.4;
  margin: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  transition: color .25s ease, text-shadow .25s ease, transform .06s ease;
  will-change: color, text-shadow;
}
.info-container a:hover{
  color: #fff;
  text-shadow: 0 0 10px var(--red-dim);
}
.info-container i{
  font-size: clamp(18px, 1.8vw, 24px);
}

/* ===== Breakpoints ===== */

/* <= 1280: немного компактнее */
@media (max-width:1280px){
  .info-container{ padding: 56px clamp(20px, 4vw, 56px); }
}

/* <= 1024: больше воздуха и мягче шрифты */
@media (max-width:1024px){
  .contacts-wrapper{
    grid-template-columns: 1fr;     /* стекаем */
    grid-auto-rows: auto;
    min-height: 0;
  }
  .map-container{
    height: 420px;                  /* фиксированная высота карты наверху */
  }
  .map-container iframe{
    height: 100%;
  }
  .info-container{
    padding: 40px clamp(18px, 5vw, 40px);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    backdrop-filter: blur(2px);
  }
}

/* <= 768: ещё компактнее + кнопочные зоны клика побольше */
@media (max-width:768px){
  .map-container{ height: 360px; }
  .info-container{ padding: 32px 18px; }
  .info-container a{ padding: 10px 0; }
  .info-container i{ font-size: 20px; }
}

/* <= 480: мобильный плотный режим */
@media (max-width:480px){
  .map-container{ height: 300px; }
  .info-container{ padding: 28px 16px; }
  .info-container h2{ font-size: 24px; }
  .info-container a{ font-size: 16px; }
}

/* <= 320: минимальный */
@media (max-width:320px){
  .map-container{ height: 260px; }
  .info-container{ padding: 24px 12px; }
  .info-container h2{ font-size: 22px; }
  .info-container a{ font-size: 15px; }
}

/* ===== Motion safety ===== */
@media (prefers-reduced-motion: reduce){
  .map-container,
  .info-container{
    animation: none !important;
  }
}

/* ===== Animations ===== */
@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@keyframes slideIn{
  from{ transform: translateX(40px); opacity: 0; }
  to{ transform: translateX(0); opacity: 1; }
}
.info-container {
  z-index: -1;
    flex: 1;
    padding: 60px;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center; /* по вертикали */
    align-items: center; /* по горизонтали */
    text-align: center; /* чтобы текст был по центру */
    animation: slideIn 1.5s ease;
}

.info-container h2 {
    font-size: 42px;
    color: rgb(255, 0, 0);
    margin-bottom: 30px;
    text-shadow: 0 0 10px rgb(255, 0, 0);
}

.info-container a {
    color: rgb(255, 0, 0);
    text-decoration: none;
    font-size: 22px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.3s;
}

.info-container a:hover {
    color: #fff;
    text-shadow: 0 0 10px rgb(128, 0, 0);
}

@media (max-width: 768px) {
    .contacts-wrapper {
        flex-direction: column;
        height: auto;
    }

    .map-container {
        height: 300px;
    }

    .info-container {
        padding: 30px;
    }
}
/* ==== Contacts: финальные правки слоёв ==== */
.contacts-wrapper{ position: relative; z-index: 1 !important; }

/* карта всегда кликабельна и поверх обычного контента страницы */
.map-container{ position: relative; z-index: 2 !important; }
.map-container iframe{
  position: relative; z-index: 2 !important;
  width: 100%; height: 100%; display: block; pointer-events: auto;
}

/* инфоблок без отрицательных индексов */
.info-container{
  position: relative; 
  z-index: 2 !important;     /* было -1 — убрать! */
}

/* на мобиле задаём явную высоту карты */
@media (max-width:1024px){
  .contacts-wrapper{ display: block; }
  .map-container{ height: 360px; }
}
.contacts-wrapper,
.contacts-wrapper .map-container,
.contacts-wrapper .map-container iframe,
.contacts-wrapper .info-container{
  position: relative !important;
  z-index: 1 !important;
}