@charset "UTF-8";
/* ============================================================
   archive-video.css
   ============================================================ */

/* ============================================================
   一覧レイアウト：Grid（SP 1列 / TB 2列 / PC 3列）
   ============================================================ */

.panel[data-kind="video"] .masonry {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 6px;
}

/* タブレット：2列 */
@media (min-width: 540px) {
  .panel[data-kind="video"] .masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* PC：3列 */
@media (min-width: 992px) {
  .panel[data-kind="video"] .masonry {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Masonry 内カード調整 */
.panel[data-kind="video"] .masonry .card {
  width: auto;
}

/* ============================================================
   サムネイル領域（16:9 固定）
   ============================================================ */

.panel[data-kind="video"] .card_figure {
  aspect-ratio: 16 / 9;
}

/* サムネ受け皿（JSが共通videoを差し込む） */
.thumb-area {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000; /* 余白（レターボックス）色 */
}

/* ★枠内は「全体が映る」(縦長も切らない) */
.panel[data-kind="video"] .card img,
.panel[data-kind="video"] .card .card_img,
.thumb-area .hover-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* 画像や動画が absolute で差し込まれても崩れないように */
.thumb-area .hover-preview {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.18s ease-in-out;
}

/* JS制御：再生中のみ表示 */
.thumb-area.is-previewing .hover-preview {
  opacity: 1;
}

/* ============================================================
   Timer badge（一覧のプレビュー用）
   ============================================================ */

/* JSが .preview クラスを付与 */
.preview {
  /* 位置決めは JS 側で position を補完 */
}

/* Timer badge（一覧のプレビュー用） */
.preview__timer{
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;

  padding: 4px 8px;
  font-size: 1.2rem;
  line-height: 1;
  color: #fff;

  background: rgba(0, 0, 0, 0.55);
  border-radius: 9999px;

  pointer-events: none;

  /* ★常に表示 */
  opacity: 1;
  transform: translateY(0);
  transition: none;
}

/* 互換：JSが is-active を付けても表示は変えない */
.preview__timer.is-active{
  opacity: 1;
  transform: translateY(0);
}