/* Block: Section (acf/section) */

.section--block {
	position: relative;
}

/* Editor canvas only (.acf-block-preview never exists on the front end): ACF
   puts the block's native padding on its own wrapper div, one level above our
   <section>, so a background image/video would stop at the padding edge.
   section.php re-applies that padding to the <section> in preview, so the
   wrapper's copy has to go — it is an inline style, hence !important. */
.acf-block-preview.wp-block-acf-section {
	padding: 0 !important;
}

/* The photo and video layers share one box, .section--media. It covers the
   whole section, under the overlay, except in the stacked phone layout below. */
.section--block > .section--media {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* Background image (set inline via the ACF field in section.php). Its own
   layer, not the section's background, so it stacks over a Color-panel
   gradient instead of being replaced by it; it sits under the video, which
   comes later in the markup.
   section.php passes the photo as --section-bg-image, plus
   --section-bg-image-mobile when the Mobile Background Image replaces it below
   992. Only the declaration that applies is computed, so a browser downloads
   one of the two. A section whose only photo is the mobile one (it replaces a
   desktop video) has no --section-bg-image, so from 992 the layer is empty. */
.section--media > .section--bg-image {
	position: absolute;
	inset: 0;
	background-image: var(--section-bg-image-mobile, var(--section-bg-image));
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
@media (min-width: 992px) {
	.section--media > .section--bg-image {
		background-image: var(--section-bg-image);
	}
}

/* Background video: silent loop covering the section, under the overlay.
   The section clips it so a short section doesn't leak video. `clip`, not
   `hidden`: `hidden` makes the section a scroll container, which switches off
   the ratio lock's grow-to-fit-the-content (below), so a bottom-aligned hero
   pushed its headline out through the top and lost it. `hidden` stays as the
   fallback for browsers without `clip`. */
.section--block.has-background-video {
	overflow: hidden;
	overflow: clip;
}

.section--media > .section--bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A video on one side of 992 only: a Mobile Background Image standing in for
   the desktop video on phones, or a Mobile Background Video on a section whose
   desktop background is a photo. The <source> media queries already keep the
   other side from downloading it; this hides the empty element there, so its
   poster can't cover the photo and the play/pause observer leaves it alone. */
.section--no-mobile-video > .section--media > .section--bg-video {
	display: none;
}
@media (min-width: 992px) {
	.section--no-mobile-video > .section--media > .section--bg-video {
		display: block;
	}
	.section--no-desktop-video > .section--media > .section--bg-video {
		display: none;
	}
}

/* Phone Layout "Image/video above the content" (Figma iPhone frame 2:1090,
   "Proudly Built In Colorado"). Below 992 the media box leaves the background
   and sits above the content at its own proportions: --section-media-ratio,
   which section.php sets on the box from the file phones get (16:9 when the
   file carries no size). It lines up with the content container and is cut
   like every phone picture. The content now sits on the section's own
   background, so the overlay goes, and a light palette color gets the dark
   button ink back (buttons.css counts any video/photo section as dark).
   --section-stack-gap is the Figma's 46px from the video to the eyebrow. */
.section--block.section--stack-mobile {
	--section-stack-gap: 46px;
}
.section--block.section--stack-mobile > .section--media {
	position: relative;
	inset: auto;
	aspect-ratio: var(--section-media-ratio, 16 / 9);
	margin: 0 var(--theme-content-padding) var(--section-stack-gap);
	clip-path: var(--rdv-chamfer-photo-shape);
}
.section--block.section--stack-mobile.has-overlay::before {
	display: none;
}
.section--block.section--stack-mobile:is(.has-white-background-color, .has-off-white-background-color,
	.has-cream-background-color, .has-gray-background-color, .has-gold-background-color) {
	--rdv-button-ink: var(--wp--preset--color--black);
}
@media (min-width: 992px) {
	.section--block.section--stack-mobile > .section--media {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
		margin: 0;
		clip-path: none;
	}
	.section--block.section--stack-mobile.has-overlay::before {
		display: block;
	}
	.section--block.section--stack-mobile:is(.has-white-background-color, .has-off-white-background-color,
		.has-cream-background-color, .has-gray-background-color, .has-gold-background-color) {
		--rdv-button-ink: var(--wp--preset--color--cream);
	}
}

/* Optional transparent overlay over the background image/video.
   Opacity is driven by --section-overlay-opacity (0–1) from the ACF range field. */
.section--block.has-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: var(--section-overlay-opacity, 0.5);
	pointer-events: none;
	z-index: 1;
}

/* "Chamfered" block style (registered in functions.php, shape in style.css).
   One clip cuts every layer at once — color/gradient, photo, video, overlay.
   The casualty is the accent line (below): its tail is meant to run past the
   bottom edge into the next band, and nothing survives outside a clip-path,
   so on a chamfered section the rule simply stops at the section's edge. */
.wp-block-acf-section.is-style-chamfered {
	clip-path: var(--rdv-chamfer-photo-shape);
}

/* Overlay Style "fade" (Chris Yates 2026-10-26: "Solid behind the text and
   fade after it. Switch to solid in mobile"). From 992 up the overlay is
   solid across --section-overlay-solid of the width (the Solid Part field),
   then fades out to the far edge; below 992 it stays solid. The overlay's
   opacity still applies to the whole layer. */
@media (min-width: 992px) {
	.section--block.has-overlay.section--overlay-fade-right::before {
		background: linear-gradient(to right, #000 var(--section-overlay-solid, 40%), transparent);
	}
	.section--block.has-overlay.section--overlay-fade-left::before {
		background: linear-gradient(to left, #000 var(--section-overlay-solid, 40%), transparent);
	}
}

/* Border "Chamfered brackets" (Chris Yates 2026-10-25/26). Home's "Assembled
   in Orbit" was drawn with two PNGs from Dapper, measured at 1x: 105px wide,
   45-degree cuts 40px deep, a 2px #bf4042 line. Those are the desktop sizes
   here; the phone and tablet steps are ours. Each bracket is a span filled
   with the color and cut by clip-path to a 2px polyline (side, both cuts, the
   two returns), so the cuts keep their size at any height; the right one is
   the left one mirrored. --section-bracket-e moves the inner corners along
   the cut so the diagonal stays as thick as the straight runs (2px x
   (sqrt 2 - 1)). The padding is the gap to the content, and the content
   container's own side padding goes, so that gap is the only inset. Padding
   set in the editor is inline and still wins. */
.section--block.has-brackets {
	--section-bracket-reach: 40px;
	--section-bracket-cut: 16px;
	--section-bracket-line: 2px;
	padding: 32px calc(var(--section-bracket-reach) + 16px);
}

.section--block.has-brackets > .section--inner {
	padding-inline: 0;
}

/* The padding is the whole gap, so the last line of copy brings no margin of
   its own (a paragraph set in a heading size carries ~1em below it). */
.section--block.has-brackets > .section--inner > .acf-innerblocks-container > :last-child,
.section--block.has-brackets > .section--inner > .acf-innerblocks-container > .wp-block-columns > .wp-block-column > :last-child {
	margin-bottom: 0;
}

.section--bracket {
	--section-bracket-e: calc(var(--section-bracket-line) * 0.4142);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: var(--section-bracket-reach);
	background-color: var(--section-bracket-color, var(--rdv-red, #bf4042));
	pointer-events: none;
	clip-path: polygon(
		100% 0,
		var(--section-bracket-cut) 0,
		0 var(--section-bracket-cut),
		0 calc(100% - var(--section-bracket-cut)),
		var(--section-bracket-cut) 100%,
		100% 100%,
		100% calc(100% - var(--section-bracket-line)),
		calc(var(--section-bracket-cut) + var(--section-bracket-e)) calc(100% - var(--section-bracket-line)),
		var(--section-bracket-line) calc(100% - var(--section-bracket-cut) - var(--section-bracket-e)),
		var(--section-bracket-line) calc(var(--section-bracket-cut) + var(--section-bracket-e)),
		calc(var(--section-bracket-cut) + var(--section-bracket-e)) var(--section-bracket-line),
		100% var(--section-bracket-line)
	);
}

.section--bracket-right {
	right: 0;
	left: auto;
	transform: scaleX(-1);
}

@media (min-width: 768px) {
	.section--block.has-brackets {
		--section-bracket-reach: 72px;
		--section-bracket-cut: 28px;
		padding: 40px calc(var(--section-bracket-reach) + 24px);
	}
}

@media (min-width: 992px) {
	.section--block.has-brackets {
		--section-bracket-reach: 105px;
		--section-bracket-cut: 40px;
		padding: 48px calc(var(--section-bracket-reach) + 36px);
	}
}

/* Forced colors drop backgrounds, which would erase the brackets. */
@media (forced-colors: active) {
	.section--bracket {
		background-color: CanvasText;
		forced-color-adjust: none;
	}
}

/* Keep content above the video and overlay. */
.section--inner {
	position: relative;
	z-index: 2;
}

/* Minimum height locked to the background's aspect ratio (--section-ratio,
   set inline from the ACF field). aspect-ratio is a preferred size — content
   taller than the ratio expands the section past it. Flex column carries the
   vertical alignment; the video/overlay stay absolute and unaffected. Not an
   is-layout-flex container, so core's flex-child margin-zeroing doesn't apply.

   Below 992 the ratio is dropped: the section is as tall as its content and the
   photo/video covers whatever box that makes. On a phone the content is taller
   than any of the ratios anyway, and the lock did harm there. With
   border-box sizing, Chrome treats the vertical padding as a floor on the
   ratio's height and works a width back from it. The 280px of padding on
   Home's 2560:1154 quote band forced it to 621px wide on a 390-440px phone,
   which was the page's horizontal scroll.

   Without the ratio, a section the editor gave no padding was exactly as tall
   as its content, so its headline sat flush against the top edge (Home's
   "Build Spacecraft", "Proven in Space" and "Join Our Team" boxes; Team's
   "Join Our Team"). Phones therefore get the Large preset top and bottom (60px
   there), the padding the sample page's copy of "Build Spacecraft" was built
   with. Padding set in the editor is an inline style, so it still wins. From
   992 up the ratio supplies the room again, so the default is reset to 0.
   --section-line-pad-bottom tracks the default for the accent line's tail;
   section.php sets it inline only when the editor set a bottom padding. */
.section--block.has-ratio-lock {
	--section-line-pad-bottom: var(--wp--preset--spacing--large);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-top: var(--wp--preset--spacing--large);
	padding-bottom: var(--wp--preset--spacing--large);
}
@media (min-width: 992px) {
	.section--block.has-ratio-lock {
		--section-line-pad-bottom: 0px;
		aspect-ratio: var(--section-ratio);
		padding-top: 0;
		padding-bottom: 0;
	}
}
.section--block.has-ratio-lock > .section--inner {
	width: 100%;
}
.section--block.section--valign-center {
	justify-content: center;
}
.section--block.section--valign-bottom {
	justify-content: flex-end;
}

/* --- Accent line ----------------------------------------------------------
   A vertical rule beside the content that runs past the section's bottom
   edge, changing color where it crosses (cream over the photo, black on the
   band below). The content is indented by --section-line-gutter so the two
   never collide.

   The section becomes a three-row grid so the rule can span from the top of
   the content to the bottom of the section whatever the vertical alignment:
   row 2 holds .section--inner, rows 1 and 3 absorb the free space the ratio
   lock leaves above and below it. Declared AFTER the ratio-lock rules on
   purpose — same specificity, so the later `display` wins. */
.section--block.has-accent-line {
	--section-line-width: 4px;
	--section-line-gutter: 30px;   /* rule + gap; the content indents by this */
	--section-line-overhang: 40px; /* how far the tail runs past the section */
	--section-line-color: var(--wp--preset--color--cream, #efede6);
	--section-line-color-tail: var(--wp--preset--color--black, #000000);

	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 0fr auto 1fr;
}
.section--block.has-accent-line.section--valign-center {
	grid-template-rows: 1fr auto 1fr;
}
.section--block.has-accent-line.section--valign-bottom {
	grid-template-rows: 1fr auto 0fr;
}

/* Without a photo behind it there is nothing dark for cream to read against. */
.section--block.has-accent-line:not(.has-background-image):not(.has-background-video) {
	--section-line-color: var(--wp--preset--color--black, #000000);
}

/* The tail has to escape the section, so the video clip is released here. The
   video is inset:0 + object-fit:cover, so it is already bounded without it. */
.section--block.has-accent-line.has-background-video {
	overflow: visible;
}

.section--block.has-accent-line > .section--inner {
	grid-row: 2;
	grid-column: 1;
	padding-left: calc(var(--theme-content-padding) + var(--section-line-gutter));
}

/* The rule itself. A container-width box painted with one gradient stripe:
   a single element covers both of the comp's segments, and the color break
   lands exactly on the section's bottom edge. The box tracks .section--inner's
   own centering, so the stripe stays aligned with the content column at any
   width; --theme-content-padding walks it in to the content edge. */
.section--block.has-accent-line::after {
	content: "";
	grid-row: 2 / -1;
	grid-column: 1;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	margin-bottom: calc(-1 * (var(--section-line-pad-bottom, 0px) + var(--section-line-overhang)));
	background-image: linear-gradient(
		to bottom,
		var(--section-line-color) 0 calc(100% - var(--section-line-overhang)),
		var(--section-line-color-tail) calc(100% - var(--section-line-overhang)) 100%
	);
	background-repeat: no-repeat;
	background-size: var(--section-line-width) 100%;
	background-position: var(--theme-content-padding) top;
	pointer-events: none;
	z-index: 2;
}

@media (max-width: 755px) {
	.section--block.has-accent-line {
		--section-line-width: 3px;
		--section-line-gutter: 16px;
		--section-line-overhang: 24px;
	}
}