/*
 * compat.css
 * Gutenbergの埋め込み・カラムブロック関連の調整。
 * .load-content で他ページの中身を差し込んだ時にも
 * 崩れないようにするための共通CSSなので、全ページ共通で読み込みます。
 */

/* Ajax等で読み込んだ際、中身が空のカラムに幅を取らせない */
#site-content .wp-block-column:empty {
	flex: 0 0 0 !important;
	width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* カラムブロックのflex計算補正 */
#site-content .wp-block-columns.is-layout-flex {
	display: flex !important;
	flex-wrap: wrap;
	width: 100%;
	align-items: flex-start !important;
}

#site-content .wp-block-column {
	flex: 1 1 0;
	min-width: 0; /* iframe潰れ防止 */
}

#site-content iframe[src*="youtube"] {
	width: 100% !important;
	aspect-ratio: 16 / 9;
	height: auto !important;
}

/* 通常の動画埋め込み（16:9） */
.wp-block-embed__wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* YouTube Shorts（縦長9:16）埋め込み用クラス */
.youtube-short {
	position: relative;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 12px;
}
.youtube-short iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 177.78vw;
	transform: translate(-50%, -50%);
	border: 0;
}
@media (min-width: 768px) {
	.youtube-short { max-width: 360px; }
	.youtube-short iframe { width: 360px; height: 640px; }
}