/**
 * Salient Fusion® — "Environments we address" full-width breakout.
 *
 * The rail is rendered by sf_env_rail_js() in functions.php and is
 * injected before .sf-cta-wrap. After injection, the actual DOM is:
 *
 *   <section id="contact" class="sf-ps-section sf-ps-dark">
 *     padding: 120px 0;  background: rgb(29, 29, 31);
 *     <div class="sf-ps-inner">
 *       <div class="sf-rail-section sf-rail-section-light
 *                   sf-fullwidth-environments">         ← rail
 *       <div class="sf-cta-wrap">                       ← "Speak with the right people"
 *
 * This file:
 *   1. Breaks the rail out to full viewport width (works regardless
 *      of any parent container constraints).
 *   2. Removes the top padding from the rail's specific dark-section
 *      ancestor so no dark band shows above the rail.
 *   3. Restores breathing room above the CTA content via a margin
 *      on .sf-cta-wrap so it does not hug the rail's bottom edge.
 *
 * The :has() selector targets only the dark section that DIRECTLY
 * contains the rail. Other .sf-ps-section instances on the page
 * (philosophy, values, markets, etc.) do not match and are
 * unaffected. No !important is used.
 */

.sf-fullwidth-environments {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: 0;
	padding-right: 0;
	overflow: visible;
}

/* Collapse the dark CTA section's top padding so no dark band shows
 * above the rail. Selector reads: an .sf-ps-section that has a direct
 * child .sf-ps-inner that has a direct child .sf-fullwidth-environments. */
.sf-ps-section:has(> .sf-ps-inner > .sf-fullwidth-environments) {
	padding-top: 0;
}

/* Restore breathing room above the CTA content only — not above the
 * rail. This 120px equals the section's padding-bottom, so the dark
 * vertical space framing the CTA content is symmetric. */
.sf-fullwidth-environments + .sf-cta-wrap {
	margin-top: 120px;
}

/* Force card images to fill the full height of their aspect-ratio
 * wrap. With aspect-ratio: 16/10 on the wrap and the source images
 * being 16:9, height: 100% on the img can resolve to the image's
 * intrinsic aspect height (235px) rather than the wrap's height
 * (261px), leaving a visible gap below. min-height: 100% forces the
 * computed height to the wrap's height; object-fit: cover then
 * crops the natural-image overflow. No position change is applied
 * — the img stays statically positioned to avoid disrupting the
 * existing overlay paint behaviour. */
.sf-fullwidth-environments .sf-rail-card-img-wrap img {
	min-height: 100%;
}

/* Promote each card to its own GPU compositing layer. Without this,
 * Chrome's paint-on-scroll optimisation defers painting of images
 * for cards outside the initial viewport in the horizontally-scrolling
 * track, so cards appear as grey placeholders until the auto-advance
 * cycles past them. translateZ(0) forces eager compositing of every
 * card. */
.sf-fullwidth-environments .sf-rail-card {
	transform: translateZ(0);
}

/* Belt-and-braces against horizontal scroll caused by the 100vw
 * breakout on devices where the scrollbar is part of the viewport
 * width. clip preserves position: sticky inside descendants. */
html,
body {
	overflow-x: clip;
}