/**
 * Page Sections: Video.
 *
 * Heading + caption above; centred, rounded, shadowed video below.
 */

.ps-video__head {
	max-width: 640px;
	margin: 0 auto 28px;
	text-align: center;
}

.ps-video__head h2 {
	margin: 0 0 .35em;
}

.ps-video__caption {
	color: var(--grey-700);
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.55;
}

.ps-video__frame {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--plum);
	box-shadow: var(--shadow-card);
	aspect-ratio: 16 / 9;
}

/* Desktop — give the head/caption more breathing room and let the frame grow. */
@media (min-width: 1024px) {
	.ps-video__head {
		max-width: 720px;
		margin-bottom: 30px;
	}
	.ps-video__caption { font-size: 1.04rem; }
	.ps-video__frame { max-width: 980px; }
}

/* Wide desktop — cap so the video doesn't dominate the viewport. */
@media (min-width: 1440px) {
	.ps-video__frame { max-width: 1120px; }
}

.ps-video__frame--4x3 { aspect-ratio: 4 / 3; }
.ps-video__frame--1x1 { aspect-ratio: 1 / 1; }

/* Children — oEmbed iframes, MP4 <video>, fallback <img> — fill the frame. */
.ps-video__frame > iframe,
.ps-video__frame > video,
.ps-video__frame > embed,
.ps-video__frame > object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.ps-video__frame > video {
	object-fit: cover;
	background: var(--plum);
}

@media (max-width: 767px) {
	.ps-video__head { margin-bottom: 20px; }
	.ps-video__caption { font-size: .98rem; }
}