/**
 * Reusable split section (heading left / text right). See
 * template-parts/split-section.php. Colors/sizes measured directly
 * against production (Stages & Studios) via headless browser --
 * this page's typography is Montserrat, NOT the Inter used by Our
 * Partners/Contact Us's hero -- confirmed fresh per page, not assumed.
 * Bare-element rules scoped `.cwf-split .cwf-split__thing`, same reason
 * as every other component here (see footer.css).
 */

.cwf-split {
	position: relative;
	padding: 40px 56px;
	background: var(--color-black); /* the non-image variant (e.g. Home's
		"Make It Cinematic") had no explicit background at all before this
		-- it was just showing whatever sat behind it on the page instead
		of reliably reading as part of this site's dark theme. The image
		variant already set this same color as its own letterbox fill
		(--image below), so this is harmless there too. */
}

.cwf-split--image {
	padding: 0;
	background: var(--color-black); /* letterbox color either side of the inset image */
}

.cwf-split__inset {
	position: relative;
	max-width: 1328px;
	margin: 0 auto;
	padding: 250px 40px; /* measured via getComputedStyle on production */
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.cwf-split__overlay {
	position: absolute;
	inset: 0;
	background: var(--color-black);
	opacity: 0.54; /* measured from _elementor_data: background_overlay_opacity */
}

.cwf-split__row {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 20px;
}
.cwf-split--image .cwf-split__row {
	max-width: 100%;
	margin: 0;
}
.cwf-split:not(.cwf-split--image) .cwf-split__row {
	max-width: 1328px;
	margin: 0 auto;
}

.cwf-split__col {
	flex: 1 1 0;
	min-width: 0; /* flex items default to min-width:auto, which refuses
	                 to shrink below an unbreakable word's intrinsic
	                 width (e.g. "CINEMATOGRAPHY" at 45px) -- that pushed
	                 the whole row wider than the viewport on mobile
	                 instead of letting the heading wrap. See MIGRATION.md. */
	container-type: inline-size; /* lets the heading's font-size below
	                                 scale against THIS column's own
	                                 resolved width (cqw units) instead
	                                 of the viewport (vw) -- the column's
	                                 width doesn't track the viewport
	                                 linearly (it's one of 2 flex columns,
	                                 inside a max-width:1328px inset, with
	                                 its own padding), so a vw-based
	                                 formula tuned for mobile was wildly
	                                 wrong at laptop widths -- see
	                                 MIGRATION.md. */
}

/* Centered variant -- Home's "Make It Cinematic" only, so far: heading
   and text stacked in one centered column (text below heading) instead
   of the normal two-column layout, at every width (not just the
   <900px breakpoint below, which already stacks/centers every variant
   but only there). */
.cwf-split--centered .cwf-split__row {
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}
.cwf-split--centered .cwf-split__col {
	flex: none;
	width: 100%;
}
.cwf-split--centered .cwf-split__col:last-child {
	max-width: 800px; /* keeps the text paragraph from stretching
	                      edge-to-edge at wide desktop widths once it's
	                      no longer constrained to half the row */
}
/* NOTE: the text-align:center override for this variant is declared
   further down, AFTER the base .cwf-split__heading/__text rules
   (which set text-align left/right respectively) -- same specificity
   (0,2,0 vs 0,2,0), so putting it here (before them, in source order)
   silently lost the cascade tie to those later rules the first time
   this shipped: the text rendered right-aligned inside its centered,
   width-capped column instead of actually centered. Same reasoning
   already documented below for the --reverse variant's equivalent
   overrides. See MIGRATION.md. */

/* Swaps which side the heading/text columns render on -- DOM order
   unchanged, just the visual order (row-reverse). Desktop only: this
   selector's specificity (0,2,0) would otherwise beat the mobile
   media query's plain `.cwf-split__row` (0,1,0) and keep the row
   side-by-side instead of stacking -- explicitly reset to `column`
   inside the media query below so mobile always stacks heading-first,
   per the client's request. */
.cwf-split--reverse .cwf-split__row {
	flex-direction: row-reverse;
}

/* Vertically centers the two columns' content with each other -- Home's
   "Make It Cinematic" only, so far. Scoped to its own modifier class
   rather than changed on the base .cwf-split__row, which defaults to
   `stretch` (both columns match the row's full height) so other
   instances -- e.g. the image cards' text+button column, which
   deliberately bottom-aligns via .cwf-split__col--btn's own
   justify-content -- keep their existing alignment. Per the client's
   explicit request. */
.cwf-split--valign-center .cwf-split__row {
	align-items: center; /* desktop only -- reset back to `stretch` inside
	                         the mobile media query below. On mobile the
	                         row's flex-direction switches to `column`, at
	                         which point `align-items` controls the CROSS
	                         axis (now horizontal, not vertical) --
	                         `center` there shrinks each column to
	                         fit-content width instead of stretching full
	                         width, which collided with the heading's
	                         cqw-based clamp() (font-size depends on its
	                         own column's resolved width) to create a
	                         circular sizing dependency: Chrome's fallback
	                         computed the column as ~0px wide, forcing
	                         "MAKE IT CINEMATIC" to wrap one letter per
	                         line. Caught from a real device screenshot,
	                         not assumed. See MIGRATION.md. */
}

.cwf-split .cwf-split__heading {
	margin: 0;
	font-family: var(--font-nav-submenu); /* Montserrat, measured */
	font-weight: 600;
	line-height: 1.1;
	color: var(--color-bg-light-1); /* measured: #F8F8F8 */
	text-transform: uppercase;
	text-shadow: var(--text-shadow-halo); /* per the client's request --
	                                          legibility over the photo
	                                          cards; harmless on the
	                                          non-image variant ("Make It
	                                          Cinematic"/"Get Ready To
	                                          Roll"), a black halo is
	                                          invisible against a black
	                                          background. See tokens.css. */
	overflow-wrap: break-word; /* safety net -- lets a long single word
	                               break instead of overflowing in the
	                               (should be unreachable, given the
	                               clamp() below) case it's ever still
	                               wider than its column. */
	/* Dynamically shrinks as needed instead of a fixed mobile-only cap.
	   cqw (container query width, relative to .cwf-split__col's own
	   resolved width above) instead of vw -- the column's width isn't a
	   fixed fraction of the viewport (it's one of 2 flex columns inside
	   a max-width:1328px inset with its own padding), so a single
	   vw-based coefficient tuned for narrow mobile phones was wildly
	   too aggressive at laptop widths: Event Coverage's 65px
	   "unforgettable." heading (its own inline heading_size, unrelated
	   to Drone's default 45px) has NO viewport where a flat mobile-only
	   media-query cap could both (a) leave it unmodified at its full
	   65px past a single breakpoint and (b) not let it overflow between
	   ~900px and ~1350px, where its 2-column layout genuinely doesn't
	   have room for 65px yet -- confirmed via getClientRects, word
	   "unforgettable." split onto 2 lines at 1024-1280px viewports
	   (client-reported: "the desktop version shouldn't split words
	   either"). var(--cwf-heading-size) (written by split-section.php
	   alongside the literal inline font-size) caps this at THIS
	   instance's own intended size instead of one shared value -- every
	   page's heading_size (45/60/65px) is respected exactly once its
	   column is wide enough, and shrinks continuously below that,
	   instead of jumping straight from a capped mobile size to the
	   full desktop size at one arbitrary breakpoint. Applies at every
	   width now, not just <900px -- the old media-query-gated version
	   is gone. Coefficient (8.5cqw) tuned against the ACTUAL rendered
	   width of both "CINEMATOGRAPHY" and "unforgettable." (the two
	   longest words sitewide in this component) via the real loaded
	   webfont, not Canvas 2D's measureText() with a font-fallback
	   mismatch -- see MIGRATION.md. */
	font-size: clamp(20px, 8.5cqw, var(--cwf-heading-size, 45px)) !important;
}

.cwf-split .cwf-split__text {
	margin: 0;
	font-family: var(--font-nav-submenu); /* Montserrat, measured */
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-bg-light-2); /* measured: #F3EFEF */
	text-align: right;
	text-shadow: var(--text-shadow-halo);
}

/* row-reverse alone isn't enough: the heading and text above keep
   their original text-align (left/right respectively), so after the
   visual swap both blocks still hug the CENTER gap instead of the
   section's outer edges -- reading as "everything clustered in the
   middle" with dead space on both true edges (caught by the client
   from a screenshot after the initial reverse deploy). Flipped to
   match the new visual position: text (now visually left) left-aligns
   to hug the true left edge, heading (now visually right) right-
   aligns to hug the true right edge. Placed AFTER the base rules
   above deliberately -- same specificity (0,2,0 vs 0,2,0), so source
   order decides the tie; declaring these earlier (nearer the
   row-reverse rule) silently lost to the base rules the first time
   this shipped. Same reasoning as the flex-direction override above
   for why this also needs an explicit reset inside the mobile media
   query below. */
.cwf-split--reverse .cwf-split__heading {
	text-align: right;
}
.cwf-split--reverse .cwf-split__text {
	text-align: left;
}
.cwf-split--reverse .cwf-split__col--btn {
	align-items: flex-start;
	justify-content: flex-start;
}

/* Centered variant's text-align override -- see the NOTE further up
   near .cwf-split--centered's other rules for why this has to live
   here, after the base heading/text rules, not next to the rest of
   the variant's own rules. */
.cwf-split--centered .cwf-split__heading,
.cwf-split--centered .cwf-split__text {
	text-align: center;
}

/* Our Work's 6 project cards: a button in the second column instead of
   text -- measured 14px/500, smaller than inquire-block.php's 20px
   button (a genuinely different size, not the same component reused).
   Home's 4 service cards have BOTH text and a button (13px, a
   genuinely different size again -- see split-section.php's
   `button_size` arg) stacked with a 20px gap, right-aligned like the
   text above it -- same column, column-direction instead of the
   button-only row-direction case. */
.cwf-split__col--btn {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 20px;
}
.cwf-split .cwf-split__btn {
	display: inline-block;
	padding: 12px 25px;
	font-family: var(--font-nav-submenu); /* Montserrat, measured */
	font-weight: 500;
	text-transform: uppercase;
	color: var(--color-primary); /* was --color-white -- client asked for the "Tell Me More" buttons' text/border in the site's accent yellow */
	text-shadow: var(--text-shadow-halo); /* the button has no fill, just
	                                          a border, so its label sits
	                                          directly on the photo too */
	border: 1px solid var(--color-primary); /* was --color-white -- see color, above */
	border-radius: 2px;
	text-decoration: none;
}

@media (max-width: 900px) {
	.cwf-split {
		padding: 30px 20px;
	}
	/* Explicit re-override, not just relying on the base
	   `.cwf-split--image { padding: 0 }` rule earlier in the file --
	   same specificity as the `.cwf-split` rule just above (0,1,0
	   each), and this media query comes later in source, so without
	   this the image cards would silently inherit 30px/20px padding
	   here TOO, on top of `.cwf-split__inset`'s own 80px/20px below --
	   double-padding the image inset by an extra 40px it was never
	   meant to have. Caught while tuning the heading's mobile
	   clamp() below: the column measured 240px wide at a 320px
	   viewport, not the intended 280px, which was throwing off the
	   font-size math. See MIGRATION.md. */
	.cwf-split--image {
		padding: 0;
	}
	.cwf-split__inset {
		padding: 80px 20px;
	}
	.cwf-split__row,
	.cwf-split--reverse .cwf-split__row {
		flex-direction: column; /* the reverse selector is repeated here,
		                            matching its desktop-only rule's
		                            specificity, so heading-above-text
		                            stacking always wins on mobile
		                            regardless of the reverse flag */
		gap: 12px;
	}
	.cwf-split--valign-center .cwf-split__row {
		align-items: stretch; /* undoes the desktop-only `center` above --
		                          see its comment for why `center` survives
		                          onto mobile's column direction otherwise. */
	}
	/* Everything centered on mobile -- heading, text, and button --
	   regardless of the reverse flag, per the client's explicit request.
	   Both the plain and `--reverse` selectors are listed for each
	   property so this wins outright: the `--reverse` desktop rules
	   (text-align right/left, flex-start) have higher specificity than
	   a bare `.cwf-split__heading`/`.cwf-split__text` selector, so
	   without repeating `--reverse` here too, a reversed card would
	   silently keep its desktop alignment on mobile. See MIGRATION.md. */
	.cwf-split .cwf-split__heading,
	.cwf-split--reverse .cwf-split__heading {
		text-align: center;
		/* font-size is NOT set here anymore -- the base rule's
		   container-query clamp() now applies at every width,
		   including mobile, so there's nothing left to override here.
		   See MIGRATION.md. */
	}
	.cwf-split .cwf-split__text,
	.cwf-split--reverse .cwf-split__text {
		text-align: center;
	}
	.cwf-split__col--btn,
	.cwf-split--reverse .cwf-split__col--btn {
		align-items: center;
		justify-content: center;
	}
}