/* ── Brentwood Video Text — front-end styles ────────────────────────────────────── */

.bw-video-text {
	width: 100%;
	overflow: hidden;
}

/* ── row ─────────────────────────────────────────────────────────────────── */
.bw-vt-row {
	display: flex;
	align-items: stretch; /* default: columns fill each other's height */
}

/* Layouts 1 & 4: video maintains its own aspect-ratio height; columns are
   centered vertically relative to whichever is taller. */
.bw-video-text--layout-1 .bw-vt-row,
.bw-video-text--layout-4 .bw-vt-row {
	align-items: center;
}

.bw-vt-col {
	flex: 1;
	min-width: 0;
}

/* ── layout proportions ──────────────────────────────────────────────────── */
/* Layout 1: Video left 60%, Text right 40%.
   Video col is 2rem wider than its flex slot; the negative right margin pulls it
   back so the flow width stays at 60% but the right edge of the video thumbnail
   physically extends 2rem into the text column area (video "crosses into" text). */
.bw-video-text--layout-1 .bw-vt-video-col {
	flex: 0 0 calc(60% + 2rem);
	margin-right: -2rem;
	position: relative;
	z-index: 1;
}
.bw-video-text--layout-1 .bw-vt-text-col {
	flex: 0 0 40%;
	position: relative;
	z-index: 0;
}
/* Extra left padding pushes text content past the 2rem video overlap zone.
   Slightly taller vertical padding (52px vs the default 40px) for layout 1. */
.bw-video-text--layout-1 .bw-vt-text-inner {
	padding-left: 4rem;
	padding-top: 52px;
	padding-bottom: 52px;
}

/* Layout 2: Text left 32.4% (with bg), Video right 67.6% */
.bw-video-text--layout-2 .bw-vt-text-col  { flex: 0 0 32.4%; }
.bw-video-text--layout-2 .bw-vt-video-col { flex: 0 0 67.6%; }

/* Layout 3: Text left 32.4%, Video right 67.6% */
.bw-video-text--layout-3 .bw-vt-text-col  { flex: 0 0 32.4%; }
.bw-video-text--layout-3 .bw-vt-video-col { flex: 0 0 67.6%; }

/* Layout 2: text col is content-height, vertically centred against the taller video. */
.bw-video-text--layout-2 .bw-vt-row {
	align-items: center;
}

/* Layout 3: text col stretches to the full row height so a background colour
   fills the entire column. Text content is centred via justify-content on
   .bw-vt-text-col (see below). */
.bw-video-text--layout-3 .bw-vt-row {
	align-items: stretch;
}

/* Layout 3: the video and text columns are always the same height (align-items
   stretch above). The video sits in a fixed 16:9 box, so when the text column is
   taller, the leftover space in the video column is filled with a light grey and
   the video is centred vertically within it — no white gap below the video. */
.bw-video-text--layout-3 .bw-vt-video-col {
	background-color: #e9e9e9;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Layout 4: Video left 65%, Text right 35% */
.bw-video-text--layout-4 .bw-vt-video-col { flex: 0 0 65%; }
.bw-video-text--layout-4 .bw-vt-text-col  { flex: 0 0 35%; }

/* Layout 5: Video left 50%, Text right 50% — uploaded (file) video. */
.bw-video-text--layout-5 .bw-vt-video-col { flex: 0 0 50%; }
.bw-video-text--layout-5 .bw-vt-text-col  { flex: 0 0 50%; }

/* Layout 5: columns stretch to the same height; when the text col is taller than
   the video's 16:9 box, the leftover space in the video col is filled with the
   same light grey as layout 3 and the video is centred vertically within it. */
.bw-video-text--layout-5 .bw-vt-row {
	align-items: stretch;
}
.bw-video-text--layout-5 .bw-vt-video-col {
	background-color: #e9e9e9;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ── Layout 7: Media left 50%, Text right 50% — equal heights + number badge ──
   Same equal-height behaviour as layout 5: 50/50 columns; the (autoplaying) video
   keeps its 16:9 box and, when the text column is taller, the leftover media space
   is filled with light grey and the video is centred vertically within it. The
   number badge sits top-left and stays visible while the video plays. */
.bw-video-text--layout-7 .bw-vt-video-col { flex: 0 0 50%; }
.bw-video-text--layout-7 .bw-vt-text-col  { flex: 0 0 50%; }
.bw-video-text--layout-7 .bw-vt-row {
	align-items: stretch;
}
.bw-video-text--layout-7 .bw-vt-video-col {
	background-color: #e9e9e9;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.bw-video-text--layout-7 .bw-vt-video-wrapper {
	padding-bottom: 56.25%;
	height: 0;
}
.bw-video-text--layout-7 .bw-vt-video-player video {
	object-fit: cover;
}

/* ── Layout 6: full-width single YouTube video (banner → expands on play) ──── */
/* No text column. A wide banner thumbnail is shown; clicking the play button
   loads the YouTube iframe (autoplay) and the wrapper animates from the banner
   height to the full 16:9 video height. Mirrors the live site's youtube-player. */
.bw-video-text--layout-6 .bw-vt-row {
	display: block;
}
.bw-video-text--layout-6 .bw-vt-video-col {
	flex: none;
	width: 100%;
	background-color: #000;
	overflow: hidden;
}
/* Mobile: full 16:9 ratio (no banner crop on small screens). */
.bw-video-text--layout-6 .bw-vt-video-wrapper {
	height: 0;
	padding-bottom: 56.25%;
	transition: padding-bottom 0.4s ease;
}
.bw-video-text--layout-6 .bw-vt-video-player video,
.bw-video-text--layout-6 .bw-vt-video-player iframe {
	object-fit: cover;
}

/* Desktop: short banner crop until played, then expand to the video ratio. */
@media ( min-width: 769px ) {
	.bw-video-text--layout-6 .bw-vt-video-wrapper {
		padding-bottom: 33%;
	}
	.bw-video-text--layout-6.bw-vt-expanded .bw-vt-video-wrapper {
		padding-bottom: 56.25%;
	}
}

/* Layout 6 with a MEDIA (uploaded file) video: mirrors the live site's full-layout
   media video (brentwood.demoing.info/.../strategic-plan/). A fixed-height frame —
   a wide short banner on tablet & desktop (42.5% ≈ 2.35:1), 16:9 on phones — with
   the video "fit" inside (object-fit: contain) so the WHOLE video shows: a 16:9
   video is pillar-boxed with light-grey space on the sides, exactly like the
   reference. The banner starts at 768px (Tailwind md:, so iPad-portrait tablets
   get the side space too, not just desktop). It autoplays muted + looping (see
   frontend.js). No banner-crop / click-to-expand; the compound two-class selector
   outranks the 33%-banner rule above. */
.bw-video-text--layout-6.bw-vt-l6-media .bw-vt-video-wrapper {
	padding-bottom: 56.25%; /* phones (<768px): 16:9 frame — a 16:9 video fills it edge-to-edge */
	transition: none;
}
/* Pillar/letter-box space colour — matches the live site (gray-100). The player
   layer sits on top of the column and fills the wrapper, so it (not the column)
   paints the space around a contain-fitted video; override its default #000 here.
   The column is set too as a fallback for any moment the player isn't painted. */
.bw-video-text--layout-6.bw-vt-l6-media .bw-vt-video-col,
.bw-video-text--layout-6.bw-vt-l6-media .bw-vt-video-player {
	background: #f3f4f6;
}
.bw-video-text--layout-6.bw-vt-l6-media .bw-vt-video-player video {
	object-fit: contain; /* fit the whole video into the frame instead of cropping */
}
@media ( min-width: 768px ) {
	.bw-video-text--layout-6.bw-vt-l6-media .bw-vt-video-wrapper {
		padding-bottom: 42.5%; /* tablet & desktop: wide short banner, matches reference md:pb-[42.5%] */
	}
}

/* ── video column ────────────────────────────────────────────────────────── */
.bw-vt-video-col {
	position: relative;
}

.bw-vt-video-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* Thumbnail: base styles — size is provided by wrapper below */
.bw-vt-thumbnail {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-color: #111;
}

/* Layouts 1 & 4: wrapper owns the 16:9 ratio so hiding the thumbnail
   doesn't collapse the container and kill the video iframe. */
.bw-video-text--layout-1 .bw-vt-video-wrapper,
.bw-video-text--layout-4 .bw-vt-video-wrapper {
	padding-bottom: 56.25%;
	height: 0;
}

/* Layouts 2, 3 & 5: video col clips overflow (controls must stay inside). */
.bw-video-text--layout-2 .bw-vt-video-col,
.bw-video-text--layout-3 .bw-vt-video-col,
.bw-video-text--layout-5 .bw-vt-video-col {
	overflow: hidden;
}

/* Layouts 2, 3 & 5: video wrapper uses 16:9 padding-bottom ratio — same
   technique as layouts 1 & 4. Text col is content-height (shorter).
   Video col is taller; controls sit at the bottom of the 16:9 area. */
.bw-video-text--layout-2 .bw-vt-video-wrapper,
.bw-video-text--layout-3 .bw-vt-video-wrapper,
.bw-video-text--layout-5 .bw-vt-video-wrapper {
	padding-bottom: 56.25%;
	height: 0;
}

/* Fill-height layouts: video covers the container (no letterbox bars) */
.bw-video-text--layout-2 .bw-vt-video-player video,
.bw-video-text--layout-3 .bw-vt-video-player video,
.bw-video-text--layout-5 .bw-vt-video-player video {
	object-fit: cover;
}

/* ── image caption overlay (layout 6 banner) ───────────────────────────────
   Bottom-left label over the thumbnail. Mirrors the live site's
   `bg-black/50 rounded-tr text-white px-2 py-1 text-shadow`. Lives inside
   .bw-vt-thumbnail so it hides with the thumbnail when the video plays. */
.bw-vt-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
	max-width: 90%;
	margin: 0;
	padding: 4px 10px;
	background: rgba( 0, 0, 0, 0.5 );
	border-top-right-radius: 4px;
	color: #fff;
	font-size: 0.85rem;
	line-height: 1.3;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.6 );
}

/* ── number badge (media videos) ───────────────────────────────────────────
   Top-left of the media, mirroring the Brentwood Images ".content-number":
   Oswald 700 white on zinc-700/80, a hard text-shadow. Lives at the video-COLUMN
   level (a sibling of the wrapper) so it pins to the top of the media section —
   even when the video is centred in a taller grey column (layout 7) — and stays
   visible while the video plays. */
.bw-vt-number {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	margin: 0.5rem;
	min-width: 2rem;
	padding: 0.25rem 0.5rem;
	display: grid;
	place-items: center;
	background: rgba( 63, 63, 70, 0.8 );
	color: #fff;
	font-family: "Oswald", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-shadow: 1px 1px 0 #222;
}

/* ── play button (on thumbnail) — YouTube SVG icon, no circle background ──── */
.bw-vt-play-btn,
.bw-vt-play-btn:hover,
.bw-vt-play-btn:focus,
.bw-vt-play-btn:focus-visible,
.bw-vt-play-btn:active {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate( -50%, -50% ) !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	height: auto !important;
	cursor: pointer !important;
	z-index: 2 !important;
	filter: drop-shadow( 0 2px 10px rgba( 0, 0, 0, 0.45 ) );
	transition: transform 0.15s ease, filter 0.15s ease !important;
	outline: none !important;
}

.bw-vt-play-btn:hover {
	transform: translate( -50%, -50% ) scale( 1.08 ) !important;
	filter: drop-shadow( 0 4px 16px rgba( 0, 0, 0, 0.6 ) ) !important;
}

/* ── video player (replaces thumbnail after click) ───────────────────────── */
.bw-vt-video-player {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	overflow: hidden;
}

.bw-vt-video-player iframe,
.bw-vt-video-player video {
	width: 100% !important;
	height: 100% !important;
	border: none;
	display: block;
}

/* ── custom video controls (file/MP4 source) ─────────────────────────────── */
.bw-vt-controls {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px;
	padding: 6px 8px;
	background: rgba( 0, 0, 0, 0.85 );
	z-index: 10;
	box-sizing: border-box;
}

.bw-vt-ctrl-btn,
.bw-vt-ctrl-btn:hover,
.bw-vt-ctrl-btn:focus,
.bw-vt-ctrl-btn:active {
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	background: #cc0000 !important;
	background-color: #cc0000 !important;
	border: none !important;
	border-radius: 2px !important;
	cursor: pointer !important;
	padding: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	min-height: 0 !important;
	line-height: 1 !important;
}

.bw-vt-ctrl-btn:hover {
	background: #aa0000 !important;
	background-color: #aa0000 !important;
}

.bw-vt-ctrl-btn svg {
	width: 16px !important;
	height: 16px !important;
	display: block !important;
	pointer-events: none;
	flex-shrink: 0 !important;
}

.bw-vt-ctrl-time {
	color: #ffffff;
	font-size: 12px;
	font-family: monospace, monospace;
	white-space: nowrap;
	flex-shrink: 0;
	padding: 0 2px;
	line-height: 1;
}

.bw-vt-ctrl-seek-wrap {
	flex: 1 !important;
	display: flex !important;
	align-items: center !important;
	height: 30px;
	padding: 0 4px;
	min-width: 0;
}

.bw-vt-ctrl-seek {
	width: 100% !important;
	height: 4px !important;
	-webkit-appearance: none;
	appearance: none;
	background: rgba( 255, 255, 255, 0.25 );
	border-radius: 2px;
	cursor: pointer;
	outline: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	flex-shrink: 1;
}

.bw-vt-ctrl-seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #ffffff;
	cursor: pointer;
	border: none;
	box-shadow: 0 0 3px rgba( 0, 0, 0, 0.5 );
}

.bw-vt-ctrl-seek::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #ffffff;
	cursor: pointer;
	border: none;
	box-shadow: 0 0 3px rgba( 0, 0, 0, 0.5 );
}

/* ── text column ─────────────────────────────────────────────────────────── */
.bw-vt-text-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Layout 3: allow shadow to bleed outside block boundaries */
.bw-video-text--layout-3 {
	overflow: visible;
}

/* Layout 3: card-style shadow on the inner text block only */
.bw-video-text--layout-3 .bw-vt-text-inner {
	box-shadow: 0 4px 30px rgba( 0, 0, 0, 0.15 );
}

.bw-vt-text-inner {
	padding: 40px 48px;
}

/* ── heading row ─────────────────────────────────────────────────────────── */
/* Two wrapper divs are flex children so h2 width:100% (from theme) is
   scoped inside .bw-vt-heading-col and doesn't break the row layout. */
.bw-vt-heading-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 8px;
	margin-bottom: 16px;
}

/* Left column: heading takes all remaining space */
.bw-vt-heading-col {
	flex: 1 !important;
	min-width: 0;
}

/* Right column: icon keeps its natural size */
.bw-vt-icon-col {
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: flex-start !important;
}

.bw-vt-heading {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.25;
}

/* The heading is a paragraph rendered as a large "tag-line" (matches the live
   site's p.tag-line), NOT a real heading tag. It still follows the customizer's
   Heading font (Kadence's --global-heading-font-family, e.g. Oswald) so it
   tracks Appearance → Customize → Typography → Headings; falls back to the
   inherited body font if that variable isn't set. Mirrors blocks/tagline.
   Inline controls (size/weight/colour) still override via the style attribute. */
.bw-vt-heading.bw-tagline {
	font-family: var( --global-heading-font-family, inherit );
	font-weight: 300;
	font-size: 1.5rem;
	line-height: 1.25;
	color: #4b5563;
	margin: 0; /* the heading row owns the spacing below */
}

@media ( max-width: 768px ) {
	.bw-vt-heading.bw-tagline {
		font-size: 1.25rem;
	}
}

/* Layout-1 "Title as H1": no typography of our own — the bare <h1> inherits the
   Customizer's Heading H1 styles (font, size, weight, line-height, colour). We
   only strip the default heading margin so it aligns in the heading row. Inline
   block controls (size/weight/colour) still override via the style attribute. */
.bw-video-text .bw-vt-title-h1 {
	margin: 0;
}

/* YouTube icon span[role=button] inside .bw-vt-icon-col — no hover effect */
.bw-vt-heading-yt-btn,
.bw-vt-heading-yt-btn:hover,
.bw-vt-heading-yt-btn:focus,
.bw-vt-heading-yt-btn:focus-visible,
.bw-vt-heading-yt-btn:active {
	display: flex !important;
	align-items: center !important;
	padding: 4px;
	cursor: pointer;
	color: #D1D5DB !important;
	opacity: 1 !important;
	transition: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: none !important;
	border: none !important;
	user-select: none;
}


/* ── body text ───────────────────────────────────────────────────────────── */
.bw-vt-body {
	line-height: 1.7;
}

/* Wrapper class added for specificity so this beats the theme's default
   paragraph spacing (Kadence applies ~1.5em margin to p elements). */
.bw-video-text .bw-vt-body p {
	margin-top: 0;
	margin-bottom: 14px;
}

.bw-video-text .bw-vt-body p:last-child {
	margin-bottom: 0;
}

/* ── play link span[role=button] — no hover effect */
.bw-vt-play-link,
.bw-vt-play-link:hover,
.bw-vt-play-link:focus,
.bw-vt-play-link:focus-visible,
.bw-vt-play-link:active {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px !important;
	margin-top: 20px;
	cursor: pointer;
	color: #cc0000; /* overridden by inline style */
	font-size: 0.9em;
	font-weight: 600;
	text-decoration: none !important;
	user-select: none;
	transition: none !important;
	opacity: 1 !important;
	outline: none !important;
	background: none !important;
	box-shadow: none !important;
}


.bw-vt-play-link .bw-vt-yt-icon {
	display: block;
	width: 20px;
	height: 18px; /* 576:512 ratio */
	flex-shrink: 0;
}

/* ── CTA text link with chevron ──────────────────────────────────────────── */
.bw-vt-cta-link,
.bw-vt-cta-link:hover,
.bw-vt-cta-link:focus,
.bw-vt-cta-link:focus-visible,
.bw-vt-cta-link:active {
	display: flex !important;
	align-items: center !important;
	gap: 2px !important;
	margin-top: 14px;
	font-size: 0.875em;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
	color: #cc0000;
	transition: opacity 0.15s ease !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.bw-vt-cta-link:hover {
	opacity: 0.75 !important;
}

.bw-vt-chevron-icon {
	flex-shrink: 0 !important;
	display: block !important;
}

/* ── decorative dash ─────────────────────────────────────────────────────── */
/* Frontend: inline SVG from assets/images/dash.svg (64×4, #9CA3AF) */
.bw-vt-dash-svg {
	display: block;
	margin-top: 18px;
}
/* Editor preview: CSS div fallback */
.bw-vt-text-dash {
	display: block;
	width: 64px;
	height: 4px;
	background: #9CA3AF;
	margin-top: 18px;
}

/* ── Kadence theme override ──────────────────────────────────────────────── */
/* MOVED OUT of this file on 2026-07-21 — see style.css ("front-end-only page
 * layout overrides") in the child theme root.
 *
 * This used to be a global `.entry-content-wrap { padding: 0 !important }` rule.
 * A block's `style` stylesheet is ALSO loaded inside the block editor canvas,
 * so a page-level override in here escaped the block and stripped the padding
 * off the editor's own content wrapper — which is what made the post title in
 * the backend render edge-to-edge and look broken. Page-layout overrides must
 * live in a front-end-only stylesheet, never in a block's style. */

/* ── responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 768px ) {
	.bw-vt-row,
	.bw-video-text--layout-1 .bw-vt-row,
	.bw-video-text--layout-2 .bw-vt-row,
	.bw-video-text--layout-3 .bw-vt-row,
	.bw-video-text--layout-4 .bw-vt-row,
	.bw-video-text--layout-5 .bw-vt-row,
	.bw-video-text--layout-7 .bw-vt-row {
		flex-direction: column;
		align-items: stretch;
	}

	.bw-vt-col,
	.bw-video-text--layout-1 .bw-vt-video-col,
	.bw-video-text--layout-1 .bw-vt-text-col,
	.bw-video-text--layout-2 .bw-vt-text-col,
	.bw-video-text--layout-2 .bw-vt-video-col,
	.bw-video-text--layout-3 .bw-vt-text-col,
	.bw-video-text--layout-3 .bw-vt-video-col,
	.bw-video-text--layout-4 .bw-vt-video-col,
	.bw-video-text--layout-4 .bw-vt-text-col,
	.bw-video-text--layout-5 .bw-vt-video-col,
	.bw-video-text--layout-5 .bw-vt-text-col,
	.bw-video-text--layout-7 .bw-vt-video-col,
	.bw-video-text--layout-7 .bw-vt-text-col {
		flex: 0 0 100%;
	}

	/* Reset layout-1 video overlap for stacked mobile layout */
	.bw-video-text--layout-1 .bw-vt-video-col {
		margin-right: 0;
	}
	.bw-video-text--layout-1 .bw-vt-text-inner {
		padding-left: 24px;
	}

	/* Layouts 2 & 3: text is first in DOM — show video first on mobile */
	.bw-video-text--layout-2 .bw-vt-text-col,
	.bw-video-text--layout-3 .bw-vt-text-col { order: 1; }
	.bw-video-text--layout-2 .bw-vt-video-col,
	.bw-video-text--layout-3 .bw-vt-video-col { order: 0; }

	.bw-vt-text-inner {
		padding: 28px 24px;
	}
}

/* ── tablet (769–1024px): full-bleed ─────────────────────────────────────── */
/* Break the block out of the theme content container so it touches both screen
   edges (no left/right gutter). Tablet only — mobile (≤768px) and desktop
   (>1024px) keep their normal container margins.
   EXCEPTION: layout-6 (full-width single video) is excluded — it should keep the
   normal container gutters on tablet like every other section, not bleed to the
   screen edges. (Its own internal frame/pillar-box is handled above.) */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bw-video-text:not( .bw-video-text--layout-6 ) {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc( 50% - 50vw );
		margin-right: calc( 50% - 50vw );
	}

	/* Tablet, layout 1: text 43% / video 57% (+2rem overlap). The overlap
	   margin and text padding carry over from the desktop layout-1 rules. */
	.bw-video-text--layout-1 .bw-vt-video-col { flex: 0 0 calc( 57% + 2rem ); }
	.bw-video-text--layout-1 .bw-vt-text-col  { flex: 0 0 43%; }

	/* Tablet: uniform 40% text / 60% video across layouts 2–4.
	   (Desktop layout 1 stays 40/60; tablet layout 1 overridden above.) */
	.bw-video-text--layout-2 .bw-vt-text-col,
	.bw-video-text--layout-3 .bw-vt-text-col,
	.bw-video-text--layout-4 .bw-vt-text-col  { flex: 0 0 40%; }
	.bw-video-text--layout-2 .bw-vt-video-col,
	.bw-video-text--layout-3 .bw-vt-video-col,
	.bw-video-text--layout-4 .bw-vt-video-col { flex: 0 0 60%; }

	/* Tablet, layout 3: position the video like layout 2 — centre the video
	   column vertically instead of stretching it to the full card height.
	   The text card keeps stretching (row stays align-items:stretch). */
	.bw-video-text--layout-3 .bw-vt-video-col {
		align-self: center;
	}
}