/*
 * Баннер страницы (шаблон «С баннером», docs/85): фото страницы во всю ширину, затемнение
 * и белый заголовок внизу. Токены — только из tokens.css; высота и затемнение
 * настраиваются переменными, чтобы дочерняя тема повторила пропорции старого сайта.
 */

.op-page-hero {
  --page-hero-height: clamp(calc(var(--space-24) * 2), 34vw, calc(var(--space-24) * 3.5));
  --page-hero-overlay: var(--color-overlay);

  position: relative;
  display: flex;
  align-items: flex-end;
  height: var(--page-hero-height);
  overflow: hidden;
  background: var(--color-text);
}

.op-page-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Затемнение: держит белый заголовок читаемым на любом фото */
.op-page-hero::after {
  position: absolute;
  inset: 0;
  background: var(--page-hero-overlay);
  content: "";
}

.op-page-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--space-8);
}

.op-page-hero__title {
  max-width: var(--container-narrow);
  margin: 0;
  color: var(--color-on-primary);
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  text-wrap: pretty;
}

/* Крошки и текст страницы начинаются сразу под баннером: у секции нет верхнего отступа */
.op-page--banner {
  padding-top: 0;
}

@media (min-width: 48rem) {
  .op-page-hero__inner {
    padding-block: var(--space-10);
  }
}