/* Блок «Последняя тренировка» на главной. Оверлей — оформление: обрезку
   держит Mux (claim asset_end_time), а не этот CSS и не JS. */

.yoga-latest-training {
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}

.yoga-latest-training__meta {
  margin: 0 0 14px;
  color: #6b7c7b;
  font-size: 15px;
}

.yoga-latest-training__stage {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

.yoga-latest-training__badge {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(16, 26, 33, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.yoga-latest-training__cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

/* Видимость оверлея держит HTML-атрибут hidden (см. class-latest-training.php
   и latest-training.js), а не класс: стиль подключается в шорткоде и потому
   печатается в head позже wp_head, и .is-ended{display:flex} на миг опоздал
   бы — гость увидел бы кнопки поверх плеера ДО того, как отыграл превью.
   Атрибут [hidden] прячет элемент штатным UA-стилем без всякого CSS.
   Здесь только оформление содержимого; :not([hidden]) — чтобы это правило
   само не перебивало атрибут. */
.yoga-latest-training__overlay:not([hidden]) {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  background: rgba(16, 26, 33, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.yoga-latest-training__cta {
  margin-top: 16px;
}

/* Внутри оверлея кнопки уже по центру — верхний отступ там лишний. */
.yoga-latest-training__overlay .yoga-latest-training__cta {
  margin-top: 0;
}

/* .btn-secondary — единственный источник этой разметки (cta_buttons(), см.
   class-access-gate.php) и рассчитан на светлый фон; внутри тёмного оверлея
   (rgba(16,26,33,.78)) даёт низкий контраст. Форкать cta_buttons() нельзя —
   переопределяем только цвет здесь, локально для оверлея. */
.yoga-latest-training__overlay .btn-secondary { color: var(--sand); border-color: rgba(255,255,255,.5); }