/*
  video-embed.css
  TikTok / Instagram / YouTube のショート動画埋め込みを
  スマホの動画アプリらしい縦長カードとして見せるためのスタイル。
  WordPressの標準oEmbed（Gutenbergの埋め込みブロック）を前提とする。
*/

/* 埋め込み全般の共通ラッパー（Gutenberg埋め込みブロック） */
.wp-block-embed {
	margin: 2em auto;
	text-align: center;
}

.wp-block-embed__wrapper {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

/* 動画埋め込みをスマホ動画風のカードにするための共通フレーム */
.wp-block-embed iframe,
.wp-block-embed blockquote {
	border-radius: var(--dkb-radius-l);
	box-shadow: 0 8px 24px rgba(26, 26, 26, 0.18);
	overflow: hidden;
}

/* --- YouTube（横長16:9が基本） --- */
.wp-block-embed-youtube .wp-block-embed__wrapper {
	position: relative;
	width: 100%;
	max-width: 640px;
	padding-top: 56.25%; /* 16:9 */
}

.wp-block-embed-youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* --- TikTok（縦長動画。TikTok側のembed.jsがblockquoteをiframe化する） --- */
.wp-block-embed-tiktok .wp-block-embed__wrapper,
blockquote.tiktok-embed {
	max-width: 340px;
	margin-left: auto;
	margin-right: auto;
	border-radius: var(--dkb-radius-l);
	box-shadow: 0 8px 24px rgba(26, 26, 26, 0.18);
}

/* --- Instagram（Reels等の縦長動画。Instagram側のembed.jsがblockquoteを整形する） --- */
.wp-block-embed-instagram .wp-block-embed__wrapper,
blockquote.instagram-media {
	max-width: 380px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	border-radius: var(--dkb-radius-l);
	box-shadow: 0 8px 24px rgba(26, 26, 26, 0.18);
}

/* 埋め込み直後の「紹介アイテム」セクションとの間隔 */
.wp-block-embed + h2,
.wp-block-embed + h3,
.wp-block-embed + p {
	margin-top: 1.5em;
}

/* モバイル: 画面幅いっぱいを使いつつ、縦動画は中央寄せのまま余白を確保 */
@media (max-width: 480px) {
	.wp-block-embed-tiktok .wp-block-embed__wrapper,
	blockquote.tiktok-embed,
	.wp-block-embed-instagram .wp-block-embed__wrapper,
	blockquote.instagram-media {
		max-width: 92vw !important;
	}
}