/* ==========================================================================
   GrowthStudioz — division video band

   One video in a 750px column. The SECTION is capped, not the video, per
   Adarsh 24th September 2026, so the caption and anything added later line up
   with the video's edges rather than running the full page width.
   ========================================================================== */

.gs-pagevideo {
	padding-block: var(--gs-section-pad);
	/* Declared, not inherited. The band above this one carries its own fill,
	   so this has to be white in its own right rather than relying on what
	   happens to sit behind it. */
	background: var(--gs-surface);
}

.gs-pagevideo__inner {
	/* 750, then the viewport once the screen is narrower than that. min()
	   rather than a media query: there is one number here and it holds at
	   every width. */
	width: min(750px, 100%);
	margin-inline: auto;
}

.gs-pagevideo__player {
	display: block;
	width: 100%;
	height: auto;
	/* A declared ratio so the column holds its height before the file loads
	   and the page does not jump when it arrives. 16:9 is overridden by the
	   video's own dimensions once known. */
	aspect-ratio: 16 / 9;
	border-radius: var(--gs-radius);
	/* The black thumbnail, per Adarsh 24th September 2026. With no poster set
	   a <video> paints its own background, which is transparent in Safari and
	   grey in some Android builds, so the band showed a pale box rather than
	   the black one the design wants. Declaring it here makes it black in
	   every browser, poster or not, and it also sits behind a poster while
	   that poster is still loading. */
	background: var(--gs-black);
	/* contain, not cover: this is the work, so none of it is cropped away to
	   fill the box. */
	object-fit: contain;
}

.gs-pagevideo__caption {
	margin: var(--gs-space-3) 0 0;
	max-width: none;
	color: var(--gs-body-soft);
	font-size: var(--gs-b4);
	line-height: var(--gs-lh-body);
}

/* --- editor-only empty state ---------------------------------------------- */

.gs-pagevideo--empty {
	display: grid;
	place-items: center;
	min-height: 160px;
	padding: var(--gs-space-6);
	border: 1px dashed var(--gs-border);
	background: var(--gs-surface-alt);
	color: var(--gs-body);
}

.gs-pagevideo--empty p {
	margin: 0;
	max-width: none;
}