/* ============================================
   Hero: главная статья недели
   Figma: 7538:1941 (1840×908, padding 32)
   ============================================ */

.hero {
  padding-block: 32px; /* Низ 32 — по hero-контейнерам макетов (972 = 32+908+32) */
}

/* Боковое поле карточки = 32 (макет 7633:1550), а не общая сетка 40 → карточка
   1856. Шире 1920 поле растёт и держит карточку на макетной ширине — как
   общий кап контента через --pad в base.css. */
.hero > .container {
  max-width: none;
  padding-inline: max(32px, calc((100vw - 1856px) / 2));
}

.hero__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(560px, 47.3vw, 908px);
  overflow: hidden;
  padding: 32px;
  position: relative;
}

.hero__photo {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

/* Двусторонняя тёмная подложка: заголовок вверху и лид/мета внизу читаются
   на любом фото (просьба клиента 17.08, у article-hero аналогичный градиент
   к низу). z-index 0 + поздний paint-порядок — над фото, под контентом
   (у контента z-index: 1 правилом ниже). pointer-events нет — клики по
   плееру и ссылке-оверлею проходят насквозь. */
.hero__card::after {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 42%),
    linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 45%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/* ⚠️ Специфичность этого правила — ровно (0,2,0): tv-feed.css перекрывает его
   для .hero--tv .hero__player равной специфичностью и поздним порядком файла.
   Усиление селектора здесь схлопывает видео-фасады ТВ в нулевой бокс. */
.hero__card > *:not(.hero__photo) {
  position: relative;
  z-index: 1;
}

/* Кликабельное фото тизера: ссылка-оверлей на всю карточку. Селектор той же
   специфичности (0,2,0) идёт ПОЗЖЕ общего правила выше и потому побеждает.
   Контент идёт в DOM позже и с тем же z-index — рисуется выше, поэтому CTA
   и выделение текста работают как раньше. */
.hero__card > .hero__card-link {
  inset: 0;
  position: absolute;
  z-index: 1;
}

/* Запущенное видео занимает карточку целиком: бейджи, заголовок и мета —
   СОСЕДИ фасада (z-index 1 поверх его stacking context), базовое правило
   is-playing из base.css прячет только содержимое самого фасада. */
.hero__card:has(> .hero__player.is-playing) > :not(.hero__player) {
  display: none;
}

/* Заголовок-ссылка наследует типографику заголовка */
.hero__title-link {
  color: inherit;
  text-decoration: none;
}

/* Бейджи поверх фото */
.hero__tags {
  align-items: center;
  color: var(--c-cream);
  display: flex;
  gap: 16px;
}

/* Бейдж строкой над заголовком — макет анонса ТВ (7835:1652): «#вебинар»
   серым, зазор до заголовка 8 (в углу карточки остаётся только «скоро прямой
   эфир»). Обёртка нужна затем, что у .hero__content зазор 40 — он верен между
   заголовком и лидом, но здесь дал бы вместо восьмёрки сорок. */
.hero__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero__tags--inline {
  color: var(--c-gray);
}

/* Заголовок: Noto Serif Display 56 / lh 1.04 / ls -2%
   Первая строка — Italic, остальные — Condensed */
/* Контент карточки — блочные обёртки на всю ширину: пустая зона правее
   текста перехватывала клик у оверлея-ссылки (баг-лист 12.08). Обёртка
   сквозная для кликов (pointer-events наследуется), ссылки и кнопки внутри
   остаются кликабельными. */
.hero__content {
  pointer-events: none;
}

.hero__content a,
.hero__content button {
  pointer-events: auto;
}

.hero__title {
  color: var(--c-white);
  font-family: var(--font-serif);
  font-size: clamp(30px, 2.92vw, 56px);
  font-stretch: 75%;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

.hero__title em {
  font-stretch: 100%;
  font-style: italic;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* Прижат к низу при ЛЮБОМ составе карточки. space-between родителя хватает,
     только пока в карточке есть верхний сосед (углы-бейджи, «скоро эфир»);
     у ТВ/вебинара бейдж живёт строкой над заголовком — контент остаётся
     единственным блоком и без этого margin прыгает к верху. */
  margin-top: auto;
}

.hero__featured {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Лид: Montserrat Medium 20 / lh 1.4 / ls -2% */
.hero__lead {
  color: var(--c-white);
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
  max-width: 600px;
}

/* Нижняя строка: мета слева + CTA справа */
.hero__bottom {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  width: 100%;
}

/* Мета: аватар + автор + дата. Полупрозрачный белый по макету 7623:1119 —
   серо-коричневый --c-gray на тёмном фото не читался. */
.hero__meta {
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  gap: 8px;
  letter-spacing: 0.04em;
  line-height: normal;
  text-transform: uppercase;
}

.hero__meta-avatar {
  border-radius: 50%;
  height: 20px;
  width: 20px;
}

.hero__meta-dot {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  flex-shrink: 0;
  height: 2px;
  width: 2px;
}

/* CTA «читать материал» — JetBrains Mono Medium 23 */
.hero__cta {
  color: var(--c-cream);
  flex-shrink: 0;
  font-size: 23px;
}

.hero__cta img {
  height: 15px;
  width: 15px;
}

/* ---------- Адаптив ---------- */

@media (max-width: 1024px) {
  .hero__content {
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .hero {
    padding-top: 24px;
  }

  /* На мобильных макетов нет — возвращаем общую сетку */
  .hero > .container {
    padding-inline: var(--pad);
  }

  .hero__card {
    min-height: 480px;
    padding: 20px;
  }

  /* Убираем принудительные переносы макета — текст течёт сам */
  .hero__title br {
    display: none;
  }

  /* Лид на мобилке скрыт по решению редакции (баг-лист 12.08: текст
     перекрывал фото) — в карточке остаётся только заголовок. */
  .hero__lead {
    display: none;
  }

  .hero__cta {
    font-size: 18px;
  }

  .hero__meta {
    flex-wrap: wrap;
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  /* В мобильном макете карточка отбита от шапки и от ленты одинаково — по 24.
     Нижнее поле задаём явно, иначе от базового правила остаётся 32. */
  .hero {
    padding-bottom: 24px;
  }

  /* Карточка в мобильном макете 327×702 — заметно вытянутее десктопной.
     Пропорция вместо min-height: высота следует за шириной экрана. */
  .hero__card {
    aspect-ratio: 327 / 702;
    min-height: 0;
    padding: 24px;
  }

  /* Мета и кнопка не влезают в одну строку — в столбик; кнопка «читать»
     слева, как в мобильном макете (баг-лист 12.08). */
  .hero__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .hero__cta {
    align-self: flex-start;
  }
}