/* ============================================================
   レス本文のメディア表示（画像 / 動画 / YouTube）
   blocks/resbox/render.php が出すマークアップに対応する。

   高さに上限を置いているのは、5chに貼られる画像は縦長が多く
   （スマホのスクショ、漫画のコマ）、実寸のまま出すと1枚で
   画面を何画面ぶんも占めてレスが読めなくなるため。
   ============================================================ */

.res-img-link,
.res-video,
.res-yt {
	display: block;
	margin: 0.6em 0;
}

.res-img {
	display: block;
	max-width: 100%;
	/* 縦長画像の暴走を止める。横長はこの値に当たらない */
	max-height: 70vh;
	width: auto;
	height: auto;
	border-radius: 6px;
	background: rgba(127, 127, 127, 0.08);
}

/* 消えた画像。onerror で img を隠し、この印を親に付けている。
   壊れたアイコンの代わりに、どこの画像だったかだけ残す。 */
.res-img-dead {
	display: inline-block;
	font-size: 0.85em;
	opacity: 0.65;
	text-decoration: none;
}

.res-img-dead::after {
	content: "[画像なし] " attr(data-host);
}

.res-video {
	max-width: 100%;
	max-height: 70vh;
	border-radius: 6px;
	background: #000;
}

/* 動画の下に出す出典。動画が再生できない環境のための逃げ道も兼ねる */
.res-media-src {
	display: inline-block;
	font-size: 0.8em;
	opacity: 0.6;
	margin-bottom: 0.6em;
}

/* ---- YouTube: クリックするまで iframe を作らない ---- */

.res-yt {
	position: relative;
	max-width: 480px;
	line-height: 0;
	border-radius: 6px;
	overflow: hidden;
}

.res-yt-thumb {
	display: block;
	width: 100%;
	height: auto;
	background: #000;
}

.res-yt-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 40px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.65);
	pointer-events: none;
	transition: background 0.15s;
}

.res-yt-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #fff;
}

.res-yt:hover .res-yt-play,
.res-yt:focus-visible .res-yt-play {
	background: #e62117;
}

/* クリック後に差し替わる iframe */
.res-yt-frame {
	display: block;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 16 / 9;
	margin: 0.6em 0;
	border: 0;
	border-radius: 6px;
}

@media (max-width: 480px) {
	.res-img,
	.res-video {
		max-height: 60vh;
	}
}