/* ============================================
   Статья: видео-блоки (3 формата) + фотосетки
   Figma: узлы 7673:1644, 7650:1231, 7673:1676, 7673:1695-1739
   ============================================ */

/* ---------- Видео с фасадом (iframe грузится по клику) ---------- */

.article-video {
  cursor: pointer;
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Только постер (прямой ребёнок фасада): без «>» правило ловило и иконку
   play внутри span — height:100% от безвысотного span давал ей 0. */
.article-video > img {
  display: block;
  height: 100%;
  object-fit: cover;
  position: absolute;
  width: 100%;
  inset: 0;
}

.article-video iframe {
  border: 0;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.article-video__play {
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  z-index: 1;
}

/* Иконка тянется за span и остаётся круглой: без height:auto широкий формат
   брал высоту из атрибута SVG (53) при ширине 100 — кружок сплющивался */
.article-video__play img {
  display: block;
  height: auto;
  width: 100%;
}

.article-video__tags {
  display: flex;
  gap: 16px;
  left: 24px;
  position: absolute;
  top: 24px;
  z-index: 1;
}

.article-video__tags .badge {
  color: var(--c-white);
}

/* Широкий: 908×499 */
.article-video--wide {
  aspect-ratio: 908 / 499;
  margin-top: 40px;
}

/* Горизонтальный в колонке: 442×243 */
.article-video--horizontal {
  aspect-ratio: 442 / 243;
}

.article-video--horizontal .article-video__play {
  width: 49px;
}

/* Вертикальный: 442×674 */
.article-video--vertical {
  aspect-ratio: 442 / 674;
}

.article-video--vertical .article-video__play {
  width: 53px;
}

/* ---------- Фотосетки ---------- */

/* Большое фото + колонка из трёх */
.article-photogrid {
  display: grid;
  gap: 24px;
  grid-template-columns: 597fr 287fr;
  margin-top: 40px;
}

.article-photogrid__main img {
  display: block;
  height: 676px;
  object-fit: cover;
  width: 100%;
}

.article-photogrid__col {
  display: grid;
  gap: 32px;
}

.article-photogrid__col img {
  display: block;
  height: 204px;
  object-fit: cover;
  width: 100%;
}

/* Сетка 2×2 */
.article-photogrid--two {
  grid-template-columns: 1fr 1fr;
}

.article-photogrid--two img {
  display: block;
  height: 312px;
  object-fit: cover;
  width: 100%;
}

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

@media (max-width: 768px) {
  .article-video--wide .article-video__play {
    width: 64px;
  }

  .article-photogrid {
    gap: 16px;
  }

  .article-photogrid__main img {
    height: 420px;
  }

  .article-photogrid__col {
    gap: 16px;
  }

  .article-photogrid__col img {
    height: 128px;
  }

  .article-photogrid--two img {
    height: 200px;
  }
}

@media (max-width: 560px) {
  /* Мобилка. Сетка 2×2 — плитка 2 ряда по 2 фото (баг-лист 12.08:
     «плитка из 4 фото утеряна»). */
  .article-photogrid,
  .article-photogrid--two {
    gap: 8px;
  }

  .article-photogrid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* «Большое + 3» на мобилке (просьба клиента 16.08) — «большое + 2»:
     как на десктопе, большое слева, справа колонка из двух, третье
     маленькое не показывается. Пропорции колонок наследуются от базовых
     (597fr 287fr); высота большого = два маленьких + зазор. */
  .article-photogrid__col {
    gap: 8px;
  }

  .article-photogrid__main img {
    height: 248px;
  }

  .article-photogrid__col img,
  .article-photogrid--two img {
    height: 120px;
  }

  .article-photogrid__col img:nth-child(3) {
    display: none;
  }
}