/*
 * YouTube風サムネイル枠
 * 元デザイン（1280×720）の座標をそのまま cqw（コンテナ幅の1%）に換算しています。
 * 1cqw = 12.8px（幅1280px時）。枠の幅が変わっても全体が比率を保って拡大縮小します。
 */
.ytf {
  --ytf-font: "Meiryo UI", Meiryo, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --ytf-font-alt: "BIZ UDGothic", "BIZ UDゴシック", "Noto Sans JP", sans-serif;

  container-type: inline-size;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: var(--ytf-font);
  text-decoration: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.ytf *,
.ytf *::before,
.ytf *::after { box-sizing: border-box; }

/* 背景画像（WordPress側で差し替え） */
.ytf__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  max-width: none;
  z-index: 0;
}

/* 最上部暗め設定：上端62%の黒 → 約40%の位置で透明 */
.ytf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.43) 17%,
    rgba(0,0,0,.29) 25%,
    rgba(0,0,0,.12) 33%,
    rgba(0,0,0,0) 40%);
  pointer-events: none;
  z-index: 1;
}
.ytf > :not(.ytf__bg) { z-index: 2; }

/* 上段：アイコン＋タイトル＋チャンネル名 */
.ytf__icon {
  position: absolute;
  left: 4.3cqw;
  top: 4.84cqw;
  width: 10.08cqw;
  height: 10.08cqw;
  object-fit: cover;
  border-radius: 50%;
  margin: 0;
}
.ytf__title,
.ytf__channel {
  position: absolute;
  margin: 0;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ytf__title {
  left: 17.03cqw;
  right: 4.8cqw;
  top: -2.7cqw;
  font-size: 4.9cqw;
}
.ytf__channel {
  left: 18.2cqw;
  right: 4.8cqw;
  top: 6.2cqw;
  font-size: 3.3cqw;
}

/* 中央の赤い再生ボタン */
.ytf__play {
  position: absolute;
  left: 40.08cqw;
  top: 21.17cqw;
  width: 19.84cqw;
  height: 13.98cqw;
  background: url("assets/play-red.png") center / contain no-repeat;
  opacity: .9;
  transition: opacity .2s, transform .2s;
}
.ytf:hover .ytf__play,
.ytf:focus-visible .ytf__play { opacity: 1; transform: scale(1.04); }

/* 下段の半透明ピル（黒20%・角丸70px） */
.ytf__pill {
  position: absolute;
  background: rgba(0,0,0,.2);
  border-radius: 5.47cqw;
}
.ytf__pill--left {
  left: 3.13cqw;
  top: 42.03cqw;
  width: 30cqw;
  height: 13.67cqw;
}
.ytf__pill--right {
  left: 48.59cqw;
  top: 42.58cqw;
  width: 48.44cqw;
  height: 11.95cqw;
}
.ytf__share,
.ytf__clock {
  position: absolute;
  background: center / contain no-repeat;
}
.ytf__share {
  left: 4.14cqw;   /* 93px - ピル左端40px */
  top: 3.75cqw;
  width: 6.72cqw;
  height: 5.94cqw;
  background-image: url("assets/share.png");
}
.ytf__clock {
  left: 18.75cqw;  /* 280px - 40px */
  top: 3.13cqw;
  width: 7.19cqw;
  height: 7.19cqw;
  background-image: url("assets/clock.png");
}
.ytf__watch {
  position: absolute;
  left: 5.3cqw;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 2.3cqw;
  font-size: 5.3cqw;
  line-height: 1;
  white-space: nowrap;
}
.ytf__watch-label { color: #ddd; }
.ytf__watch-logo {
  width: 7.81cqw;
  height: 5.55cqw;
  background: url("assets/yt-mini.png") center / contain no-repeat;
  margin-right: -1.3cqw;
}
.ytf__watch-name { font-family: var(--ytf-font-alt); color: #fff; letter-spacing: -0.06em; }

/* キーボード操作時のフォーカス表示 */
.ytf:focus-visible {
  outline: 3px solid #3ea6ff;
  outline-offset: 3px;
}

/* クリック後に差し込まれる動画プレーヤー */
.ytf__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ytf.is-playing { cursor: default; }
.ytf.is-playing > :not(.ytf__iframe),
.ytf.is-playing::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ytf__play { transition: none; }
  .ytf:hover .ytf__play { transform: none; }
}