/* Современный hero-блок страницы направления (services/direction_detail.html) */

.direction-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--accentColor-1D);
  background-image: linear-gradient(
    135deg,
    var(--accentColor-1D) 0%,
    var(--accentColor-2D) 100%
  );
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  border-bottom: 1px solid var(--accentColor-2D);
}

/* Декоративный фон как в старом hero (≥640px) */
@media screen and (min-width: 640px) {
  .direction-hero {
    border: none;
    background-position: top;
    background-image: url("../images/background-usluga-isledovanie-organizma.4682a7293820.svg"),
      linear-gradient(
        135deg,
        var(--accentColor-1D) 0%,
        var(--accentColor-2D) 100%
      );
  }
}

.direction-hero .breadcrumbs {
  position: relative;
  z-index: 1;
  padding-top: 20px;
}

.direction-hero__wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 24px;
  padding-bottom: 32px;
  align-items: stretch;
}

.direction-hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.direction-hero__content h1 {
  margin: 0;
}

.direction-hero__content .text-edit-format p,
.direction-hero__content .text-edit-format,
.direction-hero__content div p {
  line-height: 135%;
  color: var(--greyColor-1L);
}

.direction-hero__cta {
  margin-top: 4px;
}

/* Медиа-карточка: любое загруженное изображение аккуратно вписывается
   независимо от его исходных размеров (object-fit: cover). */
.direction-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(53, 64, 77, 0.35);
  background: linear-gradient(
    135deg,
    var(--accentColor-2D) 0%,
    var(--accentColor-1D) 100%
  );
}

/* Фото абсолютно заполняет карточку и не влияет на её высоту —
   высоту задаёт колонка .direction-hero__content */
.direction-hero__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

/* Фолбэк, когда detail_photo не загружено — раскладка не ломается */
.direction-hero__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.direction-hero__placeholder img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  opacity: 0.55;
}

@media screen and (min-width: 1024px) {
  .direction-hero__wrapper {
    flex-direction: row;
    align-items: stretch;
    gap: 48px;
    padding-top: 40px;
    padding-bottom: 48px;
  }

  .direction-hero__content {
    flex: 1 1 0;
    min-width: 0;
  }

  .direction-hero__content .text-edit-format p,
  .direction-hero__content div p {
    max-width: 90%;
  }

  .direction-hero__media {
    flex: 0 0 42%;
    max-width: 42%;
    /* высота карточки = высоте блока с текстом */
    aspect-ratio: auto;
    align-self: stretch;
  }
}

/* Версия для слабовидящих: скрываем декоративное фото */
body.bvi-active .direction-hero {
  background: none;
}

body.bvi-active .direction-hero__media {
  display: none;
}