/**
 * Video grid. See template-parts/video-grid.php. Colors/sizes measured
 * directly against production via headless browser. Bare-element rules
 * scoped, same reason as everywhere else in this theme (see footer.css).
 */

.cwf-video-grid {
	padding: 40px 56px;
	background: var(--color-black);
}

.cwf-video-grid .cwf-video-grid__heading {
	max-width: 1328px;
	margin: 0 auto 24px; /* matches .cwf-video-grid__row's own
	                         max-width+centering below -- see
	                         shared-blocks.css's identical fix for
	                         .cwf-bullet-list__heading, same reasoning. */
	font-family: var(--font-nav-submenu); /* Montserrat, measured */
	font-size: 40px;
	font-weight: 600;
	color: var(--color-white);
	text-transform: uppercase;
	overflow-wrap: break-word; /* safety net -- see the mobile clamp()
	                               below, same reasoning as hero.css/
	                               split-section.css */
}

.cwf-video-grid__row {
	display: flex;
	gap: 20px;
	max-width: 1328px;
	margin: 0 auto; /* was missing -- same left-hugging bug as
	                    shared-blocks.css's .cwf-bullet-list__row, only
	                    visible past ~1440px viewport width. See
	                    MIGRATION.md. */
}

.cwf-video-grid .cwf-video-grid__video {
	flex: 1 1 0;
	min-width: 0;
	width: 100%;
	background: var(--color-bg-dark-1);
	object-fit: cover;
}

@media (max-width: 900px) {
	.cwf-video-grid {
		padding: 30px 20px;
	}
	.cwf-video-grid .cwf-video-grid__heading {
		/* Found via the same narrow-viewport sweep as Drone's heading
		   fix -- "DOCUMENTARY" alone (~332px measured at 40px) wrapped
		   onto its own line correctly (word boundary, not mid-word) but
		   still overflowed the 280px container on a 320px viewport,
		   since it's one unbreakable word. clamp() with a vw-based
		   middle value scales continuously with viewport -- same
		   reasoning as hero.css/split-section.css/page-contact-us.css's
		   equivalent fixes, see MIGRATION.md. */
		font-size: clamp(20px, calc(10vw - 4px), 40px);
	}
	.cwf-video-grid__row {
		flex-direction: column;
	}
}