/* ====================================================
   YouTube セクション専用 CSS
   base/sections/youtube-c.php 由来の横スライダー型に移行済み。
   .video-slide / .video-slide__thumb / .video-slide__body / .full-range-link::before
   の共通スタイルは podcast.css 側にまとめて定義しているため、ここでは
   YouTube 固有の余白とライトボックスのみ定義する。
   ==================================================== */

/* セクション余白（他モジュールと統一） */
.module-feed-youtube {
	padding-top: 100px;
	padding-bottom: 0;
}

/* 「もっと視る」ボタンの上余白 */
.module-feed-youtube .read-more { margin-top: 50px; }

/* ---- 動画ライトボックス ---------------------------- */
.video-lightbox .video-lightbox__frame {
	width: min(960px, 90vw, calc(70vh * 16 / 9));
	max-width: 100%;
	background: #fff;
	padding: 16px;
	box-sizing: border-box;
}
.video-lightbox__player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}
.video-lightbox__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.video-lightbox__caption {
	margin: 12px 0 0;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	color: #333;
}
.video-lightbox__caption:empty { display: none; }

@media (max-width: 768px) {
	.video-lightbox .lightbox-content { max-width: 90%; width: 90%; }
	.video-lightbox .video-lightbox__frame { width: min(100%, calc(70vh * 16 / 9)); padding: 12px; }
	.video-lightbox .close-button { left: calc(50% - 20px); }
}