/* Фасад YouTube — 21.09.2026, SEO-аудит §4.2.
   Новый файл, а не правка существующих: он трогает только элементы с
   data-yt и .yt-badge, которых до сегодня не было вовсе, и поэтому не
   может задеть ничего из уже работающего. home.css в этом проекте
   горел дважды — чужие файлы не трогаем.

   Почему значок отдельным <span>, а не ::after на родителе.
   Первая версия ставила его псевдоэлементом — и не показалась: у
   медиа-фигур ::after уже занят шторкой crop-reveal
   ([data-m="crop"]::after в design/system/base.css), а
   _alchemy-bridge.css её местами гасит через content: none. То есть
   псевдоэлемент там не свободен, и забирать его у моушен-грамматики
   нельзя: она одна на весь сайт и живёт в base.css.

   Родители постера — grid или flex с абсолютно позиционированной
   картинкой, поэтому ещё один абсолютный ребёнок из потока выпадает
   и раскладку не двигает. */

img[data-yt] {
  cursor: pointer;
}

/* Контекст позиционирования для значка. У медиа-фигур он и так есть
   (от [data-m="crop"]), но постер встречается и в других слотах. */
:where(figure, div, a, span):has(> img[data-yt]) {
  position: relative;
}

.yt-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  /* Выше шторки crop-reveal (z-index: 3) её быть не должно: пока
     кадр раскрывается, значок не показывается вместе с ним. */
  z-index: 2;
  width: clamp(48px, 6vw, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: rgb(0 0 0 / 0.55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7.5v9l7.5-4.5z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 54% 50%;
  background-size: 52%;
  backdrop-filter: blur(2px);
  /* Клик ловит сама картинка — значок только рисует. */
  pointer-events: none;
  transition: background-color var(--dur-fast, .18s) var(--ease-out, ease),
              scale var(--dur-fast, .18s) var(--ease-out, ease);
}

:where(figure, div, a, span):has(> img[data-yt]):hover .yt-badge {
  background-color: rgb(0 0 0 / 0.74);
  scale: 1.06;
}

img[data-yt]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .yt-badge { transition: none; }
  :where(figure, div, a, span):has(> img[data-yt]):hover .yt-badge { scale: 1; }
}