/*
 * Изображения и видео публикаций.
 *
 * Bootstrap отвечает за позиционирование и служебные utilities в разметке.
 * Этот компонент хранит только фирменный вид медиа и повторяемые пропорции.
 */

.publication-media {
  --media-hue: 264;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--media-radius);
  background-color: hsl(var(--media-hue) 16% 82%);
  background-image:
    radial-gradient(
      120% 90% at 78% 18%,
      hsl(var(--media-hue) 30% 88% / 0.9),
      transparent 55%
    ),
    linear-gradient(
      135deg,
      hsl(var(--media-hue) 14% 90%),
      hsl(var(--media-hue) 16% 82%)
    );
}

.publication-media--16x9 {
  aspect-ratio: 16 / 9;
}

.publication-media--4x3 {
  aspect-ratio: 4 / 3;
}

.publication-media--4x5 {
  aspect-ratio: 4 / 5;
}

.publication-media--1x1 {
  aspect-ratio: 1 / 1;
}

.publication-media--3x4 {
  aspect-ratio: 3 / 4;
}

.publication-media--9x16 {
  aspect-ratio: 9 / 16;
}

.publication-media__asset {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.publication-media--video {
  background-color: #18151f;
}

.publication-media--video::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 8, 14, 0.08), rgba(10, 8, 14, 0.38));
  content: "";
  pointer-events: none;
}

.publication-media--player::after {
  display: none;
}

.publication-media__badge,
.publication-media__duration {
  z-index: 2;
  border-radius: var(--r-pill);
  background: rgba(23, 22, 26, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.publication-media__badge {
  top: 10px;
  left: 10px;
  padding: 5px 9px;
}

.publication-media__duration {
  right: 10px;
  bottom: 10px;
  padding: 5px 8px;
  font-family: var(--font-mono);
}

.publication-media__play {
  z-index: 2;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-md);
  color: var(--accent-ink);
}

.publication-media__play svg {
  margin-left: 3px;
}

/*
 * Варианты компонента внутри карточки списка.
 * Колонка карточки остаётся равной 224 px, но само медиа может быть уже.
 */

.article-card--no-media {
  grid-template-columns: 1fr;
}

.article-card__thumb.publication-media {
  height: auto;
  justify-self: end;
}

.article-card__thumb.publication-media--16x9,
.article-card__thumb.publication-media--4x3 {
  width: 224px;
}

.article-card__thumb.publication-media--1x1 {
  width: 200px;
}

.article-card__thumb.publication-media--3x4 {
  width: 150px;
}

.article-card__thumb.publication-media--9x16 {
  width: 113px;
}

/*
 * Варианты обложки детальной публикации.
 * Горизонтальная обложка занимает контейнер, компактные форматы центрируются.
 */

.article-cover .publication-media {
  width: 100%;
  border-radius: var(--media-radius);
}

.article-cover--1x1 {
  max-width: 620px;
  margin-right: auto;
  margin-left: auto;
}

.article-cover--3x4 {
  max-width: 480px;
  margin-right: auto;
  margin-left: auto;
}

.article-cover--9x16 {
  max-width: 360px;
  margin-right: auto;
  margin-left: auto;
}

.article-cover .publication-media__play {
  width: 72px;
  height: 72px;
}

.publication-media video {
  background: #18151f;
}

/*
 * Универсальная карточка видео внутри контента.
 *
 * Одинаково используется в статьях, новостях и мероприятиях. Bootstrap
 * отвечает за grid, позиционирование и выравнивание внутренних элементов.
 */

.video-card {
  --media-hue: 230;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--media-radius);
  background-color: hsl(var(--media-hue) 16% 80%);
  background-image:
    radial-gradient(
      120% 90% at 78% 18%,
      hsl(var(--media-hue) 30% 86% / 0.9),
      transparent 55%
    ),
    linear-gradient(
      135deg,
      hsl(var(--media-hue) 14% 88%),
      hsl(var(--media-hue) 16% 78%)
    );
  color: var(--accent-ink);
  font: inherit;
}

.video-card__type,
.video-card__duration {
  position: absolute;
  border-radius: var(--r-pill);
  background: rgba(23, 22, 26, 0.72);
  color: #fff;
}

.video-card__type {
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
}

.video-card__play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-md);
  color: var(--accent-ink);
}

.video-card__duration {
  right: 12px;
  bottom: 12px;
  padding: 3px 9px;
  font-size: 12px;
}

.video-card__caption {
  gap: 4px 10px;
  margin-top: 12px;
  color: var(--ink-2);
  font-size: var(--type-caption);
  line-height: var(--line-caption);
}

html[data-theme="dark"] .video-card {
  background-color: hsl(var(--media-hue) 22% 24%);
  background-image:
    radial-gradient(
      120% 90% at 78% 18%,
      hsl(var(--media-hue) 28% 32% / 0.72),
      transparent 55%
    ),
    linear-gradient(
      135deg,
      hsl(var(--media-hue) 18% 28%),
      hsl(var(--media-hue) 20% 22%)
    );
}

@media (max-width: 680px) {
  .article-card__thumb.publication-media {
    order: -1;
    justify-self: center;
  }

  .article-card__thumb.publication-media--16x9,
  .article-card__thumb.publication-media--4x3 {
    width: 100%;
  }

  .article-card__thumb.publication-media--1x1 {
    width: min(100%, 320px);
  }

  .article-card__thumb.publication-media--3x4 {
    width: min(100%, 260px);
  }

  .article-card__thumb.publication-media--9x16 {
    width: min(100%, 220px);
  }

  .article-cover--1x1 {
    max-width: 100%;
  }

  .article-cover--3x4 {
    max-width: min(100%, 420px);
  }

  .article-cover--9x16 {
    max-width: min(100%, 320px);
  }
}