/* Yandex Maps organization map (template_part/yandex-org-widget.php): contacts page and address popup. */

.bsl-ywidget {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #DDDDDD;
  border-radius: 10px;
}

/* service links of the official embed code: absolutely positioned, under the map */
.bsl-ywidget__credit {
  position: absolute;
  color: #eee;
  font-size: 12px;
}

.bsl-ywidget__credit:nth-of-type(1) { top: 0; }
.bsl-ywidget__credit:nth-of-type(2) { top: 14px; }
.bsl-ywidget__credit:nth-of-type(3) { top: 28px; }

.bsl-ywidget__frame {
  position: relative;
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
}

/* ---------- contacts page ---------- */

/* adaption.css / contact_index.css size ".contact__map iframe" in vw for the old map */
.contact__map .bsl-ywidget__frame {
  height: 400px;
  min-height: 0;
  border-radius: 0;
}

/* two columns (adaption.css stacks them at 768px and below): the map fills the right column
   and is exactly as tall as the contacts card on the left */
@media (min-width: 769px) {
  .contacts .contact__flex {
    align-items: stretch;
  }

  .contact__map {
    display: flex;
    flex-direction: column;
  }

  .contact__map .bsl-ywidget {
    flex: 1 1 0;
    min-height: 0;
  }

  .contact__map .bsl-ywidget__frame {
    height: 100%;
  }
}

/* ---------- address popup (jquery-modal, #modal_map in footer.php) ---------- */

#modal_map.bsl-ywidget-modal {
  width: calc(100% - 20px);
  max-width: 600px;
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);
  padding: 48px 20px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 10px;
  text-align: left;
  vertical-align: middle;
}

#modal_map.bsl-ywidget-modal .bsl-ywidget {
  max-width: 560px;
  margin: 0 auto;
}

/* the map keeps 400px but shrinks on a low window so the whole popup fits:
   20px outer gap, 68px paddings, 2px popup and 2px map borders */
#modal_map.bsl-ywidget-modal .bsl-ywidget__frame {
  height: min(400px, calc(100vh - 92px));
  height: min(400px, calc(100dvh - 92px));
  min-height: 180px;
}

#modal_map.bsl-ywidget-modal a.close-modal {
  top: 9px;
  right: 12px;
}

#modal_map.bsl-ywidget-modal a.close-modal:focus-visible {
  outline: 2px solid #F58633;
  outline-offset: 2px;
}

/* phones: 10px from the screen edges (5px backdrop padding + 5px), the map gets the full popup
   width and the popup border frames it; 20px gap, 44px top padding, 2px border */
@media (max-width: 639px) {
  #modal_map.bsl-ywidget-modal {
    width: calc(100% - 10px);
    padding: 44px 0 0;
  }

  #modal_map.bsl-ywidget-modal .bsl-ywidget {
    border: 0;
    border-radius: 0;
  }

  #modal_map.bsl-ywidget-modal .bsl-ywidget__frame {
    height: min(400px, calc(100vh - 66px));
    height: min(400px, calc(100dvh - 66px));
  }
}

/* ---------- contacts page: messenger and social icons ---------- */

/* Telegram, VK, Rutube and MAX rise in one after another. Scoped to section.contacts,
   so the same icons in the address popup (#modal_map) stay as they are. */
@keyframes bsl-soc-in {
  from { opacity: 0; transform: translateY(12px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

.contacts .map__data-soc .soc-icon {
  animation: bsl-soc-in 450ms ease-out both;
}

.contacts .map__data-soc .soc-icon:nth-child(1) { animation-delay: 150ms; }
.contacts .map__data-soc .soc-icon:nth-child(2) { animation-delay: 270ms; }
.contacts .map__data-soc .soc-icon:nth-child(3) { animation-delay: 390ms; }
.contacts .map__data-soc .soc-icon:nth-child(4) { animation-delay: 510ms; }
.contacts .map__data-soc .soc-icon:nth-child(5) { animation-delay: 630ms; }

@media (prefers-reduced-motion: reduce) {
  .contacts .map__data-soc .soc-icon { animation: none; }
}