/*
 * Блоки страницы: обложки (.op-hero, .op-cover) и чередование фона. Карта (.op-map) — в media.css. Остальные блоки
 * собираются из .op-section, .op-grid, .op-card и .op-split без отдельных стилей.
 */

.op-hero {
  padding-block: var(--space-10) var(--section-space);
  /* Без подложки (решение владельца 2026-10-22) */
}

.op-hero__title {
  margin-bottom: var(--space-4);
}

.op-hero__lead {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-6);
}

/* Секции главной из ACF: чётные по порядку на белой поверхности, нечётные на фоне страницы.
   Считается по соседним секциям, поэтому скрытая секция не ломает чередование. */
.op-sections > section:nth-of-type(even).op-section {
  background: var(--color-surface);
}

/* Карточки на белой секции: фон страницы вместо белого, чтобы не держаться только на тени */
.op-sections > section:nth-of-type(even).op-section .op-card:not(.op-card--feature) {
  background: var(--color-page);
}

/* Ссылка «Все …» под сеткой карточек секции */
.op-section__more {
  margin-top: var(--space-6);
}

/* Обложка 1: фото и затемнение на всю ширину экрана, текст лежит в обычном .op-container (общий левый край с шапкой и блоками).
   Базовое (ровное) затемнение - графит --color-cover-shade 64%: белый текст не ниже 4.5:1 даже на белом фото.
   Без фото обложка прозрачная, текст тёмный (docs/68). С фото обложка показывается целиком — фото и текст вместе,
   как только фото готово: заглушки, проявления и подложки нет (владелец 2026-10-25, docs/69). */
.op-cover {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(32rem, 78vh, 46rem);
  padding-block: var(--space-16);
  overflow: hidden;
  isolation: isolate;
  /* Фона нет (решение владельца 2026-10-22 и 2026-10-25): ни цвет палитры (мелькал «зелёным фото»), ни графитовая
     подложка — пока фото не готово, обложку не показываем совсем (правило .is-loading ниже, docs/69). */
  color: var(--color-on-primary);
}

.op-cover__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Обложка — это фото и текст вместе (владелец 2026-10-25: «текст без фото это не правильно», docs/69). Класс is-loading
   ставит скрипт из cover-1.php сразу после фото, пока файла нет; место под обложку сохраняется (min-height у .op-cover),
   поэтому страница не сдвигается, а обложка появляется один раз и целиком — без проявления и без подложки.
   Без JS (или если скрипт заблокирован) класса нет: обложка видна сразу, поэтому фото с текстом не пропадут никогда. */
.op-cover.is-loading {
  visibility: hidden;
}

/* Видео обложки (docs/35) лежит поверх фото тем же слоем: фото остаётся для без-JS, телефонов и экономии трафика. */
.op-cover__video {
  background: transparent;
}

/* Кнопка «Пауза / Воспроизвести» (WCAG 2.2.2): над затемнением, в правом нижнем углу; показывает её скрипт, когда видео играет. */
.op-cover__toggle {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-on-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--transition-ui);
}

/* Узкий экран: кнопка в правом верхнем углу, чтобы не перекрывать текст и кнопки обложки, которые прижаты вниз */
@media (max-width: 47.99rem) {
  .op-cover__toggle {
    top: var(--space-4);
    bottom: auto;
  }
}

.op-cover__toggle[hidden] {
  display: none;
}

.op-cover__toggle[aria-pressed="true"] {
  background: var(--color-on-primary);
  color: var(--color-primary);
}

.op-cover__toggle:hover {
  background: var(--color-primary-hover);
}

.op-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-cover-shade);
}

/* Без фото и видео — прозрачная при любом виде обложки (владелец 2026-10-25, docs/68): фон страницы, текст и линия
   цитаты тёмные, как в обычном тексте, высота по содержимому. Раньше — сплошной графит (0.36.0), а до него —
   полупрозрачное затемнение на светлом фоне, которое выглядело цветной подложкой. */
.op-cover:not(:has(.op-cover__img)) {
  min-height: 0;
  color: var(--color-text);
}

.op-cover:not(:has(.op-cover__img))::before {
  background: none;
}

.op-cover:not(:has(.op-cover__img)) :is(h1, h2, .op-quote figcaption) {
  color: var(--color-text);
}

.op-cover:not(:has(.op-cover__img)) .op-eyebrow {
  color: var(--color-text-muted);
}

.op-cover:not(:has(.op-cover__img)) .op-quote {
  border-left-color: var(--color-decor);
}

.op-cover:not(:has(.op-cover__img)) :focus-visible {
  outline-color: var(--color-focus);
}

.op-cover--panel:not(:has(.op-cover__img)) .op-cover__inner {
  padding: 0;
  background: none;
}

/* Вид обложки задаёт модификатор (docs/34): --shade ровное затемнение, --light-right свет справа (по умолчанию),
   --bottom подпись снизу, --panel фото и плашка. Градиенты - токены --cover-gradient-* (tokens.css). */
.op-cover--light-right {
  align-items: flex-end;
}

.op-cover--light-right::before {
  background: var(--cover-gradient-narrow);
}

@media (min-width: 48rem) {
  .op-cover--light-right {
    align-items: center;
  }

  .op-cover--light-right::before {
    background: var(--cover-gradient-light-right);
  }

  /* Текст не шире зоны полного затемнения (до 60% ширины): на 768–1024 px колонка 46rem уходила в светлую часть
     градиента — правый край строк почти без затемнения (замер второй сессии на стенде, docs/66). */
  .op-cover--light-right .op-cover__inner {
    max-width: min(var(--container-narrow), 56vw);
  }
}

.op-cover--bottom {
  min-height: clamp(34rem, 88vh, 52rem);
  align-items: flex-end;
}

/* На узком экране текст занимает больше половины высоты: затемнение поднимается выше */
.op-cover--bottom::before {
  background: var(--cover-gradient-narrow);
}

@media (min-width: 48rem) {
  .op-cover--bottom::before {
    background: var(--cover-gradient-bottom);
  }
}

.op-cover--panel {
  min-height: clamp(34rem, 85vh, 50rem);
  align-items: flex-end;
  padding-bottom: 0;
}

/* Фото без затемнения; затемнение — только плашкой под текстом (над фото, под текстом) */
.op-cover--panel::before {
  background: none;
}

.op-cover--panel .op-cover__inner {
  max-width: 36rem;
  padding: var(--space-6);
  /* Тёмная полупрозрачная плашка тона затемнения обложки (решение владельца 2026-10-22: не цвет палитры) */
  background: var(--color-cover-shade);
}

@media (min-width: 48rem) {
  .op-cover--panel .op-cover__inner {
    padding: var(--space-8) var(--space-8) var(--space-6);
  }
}

.op-cover__inner {
  max-width: var(--container-narrow);
}

.op-cover :is(h1, h2, .op-eyebrow, .op-quote figcaption) {
  color: var(--color-on-primary);
}

.op-cover .op-quote {
  border-left-color: var(--color-on-primary);
}

.op-cover :focus-visible {
  outline-color: var(--color-focus-on-dark);
}