/*
 * Медиа-блок с фиксированной пропорцией. Состояние «нет изображения»:
 * вместо <img> выводится .op-media--empty с иконкой и скрытым пояснением.
 */

.op-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-md);
  /* Фона под фото нет (решение владельца 2026-10-22): цвет палитры мелькал «цветным фото», пока фото грузилось */
  color: var(--color-primary);
}

.op-media--wide {
  aspect-ratio: 16 / 9;
}

.op-media--square {
  aspect-ratio: 1;
}

.op-media > img,
.op-media > .op-lightbox > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.op-media > .op-lightbox {
  height: 100%;
}

.op-media--empty {
  display: grid;
  place-items: center;
}

.op-media--empty .op-icon {
  width: var(--space-12);
  height: var(--space-12);
}

/*
 * Карта и видео (docs/16): .op-embed — обёртка (окно сервиса + обычная ссылка), .op-map.op-map--loaded — окно (iframe .op-map__frame).
 */
.op-embed {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.op-embed__link,
.op-embed__fallback {
  margin: 0;
  overflow-wrap: anywhere;
}

.op-map--video {
  aspect-ratio: 16 / 9;
}

.op-map--loaded {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.op-map--loaded:not(.op-map--video) {
  aspect-ratio: 4 / 3;
}

.op-map__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Дополнение к содержимому страницы в шаблонах «Раздел» и «Контакты» (карточки, сведения, карта) */
.op-page-extra {
  margin-top: var(--space-12);
}

/* Блок встраивания WordPress резервирует высоту сам (::before); заглушка и iframe задают пропорцию сами */
.op-content .wp-block-embed .wp-block-embed__wrapper::before {
  content: none;
}