/* Height comes from content + .fifty-hero-content's own padding; min-height is only a floor for short/empty content, since .fifty-hero-image is absolutely positioned (top:0/bottom:0) and would otherwise collapse to the padding's height alone. justify-content only kicks in once the floor wins over content height, centering the text instead of leaving it pinned to the top with empty space below. */ .fifty-hero { position: relative; overflow: hidden; min-height: 30rem; justify-content: center; } .fifty-hero-inner { position: relative; z-index: 2; } .fifty-hero-image { position: absolute; top: 0; right: 0; bottom: 0; width: 40vw; overflow: hidden; z-index: 1; } .fifty-hero-image img { width: 100%; height: 100%; object-fit: cover; } /* Popover trigger fills the same absolutely-positioned box the background image does above. */ .fifty-hero-image.has-wistia-video .wistia_embed { display: block; height: 100%; width: 100%; } /* Force the closed-state poster thumbnail to cover-fill the box instead of letterboxing; deliberately NOT touching .w-chrome/video, which belong to the opened popover overlay and should stay centered/letterboxed. */ .fifty-hero-image.has-wistia-video .wistia_embed img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* Wistia inline-sizes this img to an oversized cover box and centers it with a negative offset; forcing width/height alone doesn't clear that offset. */ top: 0 !important; left: 0 !important; } /* Hide the duration readout under the play button — Wistia's id includes a per-embed instance counter that changes between page loads, so match on the stable suffix instead. */ .fifty-hero-image.has-wistia-video [id*="big_play_button_bottom_text"] { display: none !important; } /* Darken the popover's own backdrop (Wistia appends this to , outside .fifty-hero-image), matching the site's .contact-modal.active::before overlay so all modals read the same. */ .wistia_popover_overlay { background-color: rgba(0, 0, 0, 0.7) !important; } /* Vertical padding lives here instead of on .fifty-hero-inner: the site's ACF Options "Custom CSS" field carries a global, unscoped ".fifty-hero-inner { padding: 0; }" rule (injected inline in wp_head at a later priority than this stylesheet), which wins any tie on that selector regardless of what's declared here. */ .fifty-hero-content { width: 60%; padding-top: 3rem; padding-bottom: 3rem; padding-right: 60px; pointer-events: auto; } /* .fifty-hero-inner sits above .fifty-hero-image in z-index; without this, its empty right-hand portion silently blocks clicks from reaching the Wistia popover trigger underneath. */ .fifty-hero-inner { pointer-events: none; } /* White bg + dark green text, not the usual teal-bg/black-text variant, since this section's own background is already teal and would blend that button in. */ .fifty-hero-cta { background-color: var(--bs-white); color: var(--bs-secondary-500) !important; width: fit-content; padding: 12px 32px; height: 48px; font-weight: 600; border-radius: 2px; gap: 12px; margin-top: 1.5rem; } .fifty-hero-cta:hover { color: var(--bs-secondary-500) !important; } .fifty-hero-cta-text { position: relative; display: inline-block; overflow: hidden; height: 1.2em; line-height: 1.2; } .fifty-hero-cta-text span { display: block; transition: transform 0.3s ease; white-space: nowrap; } .fifty-hero-cta-text span:last-child { position: absolute; top: 100%; left: 0; width: 100%; } .fifty-hero-cta:hover .fifty-hero-cta-text span { transform: translateY(-100%); } @media (max-width: 992px) { .fifty-hero { min-height: auto; } .fifty-hero-image { position: relative; width: 100vw; margin-top: 24px; } .fifty-hero-image img { max-height: 320px; } /* Same visual cap as the image's max-height above — the div has no intrinsic size to fall back on, so it needs an explicit height or it would collapse to 0. */ .fifty-hero-image.has-wistia-video { height: 320px; } .fifty-hero-content { width: 100%; padding-top: 24px; padding-bottom: 32px; padding-right: 0; } /* Full-width, centered — matches how .cta-split-btn behaves at its own narrow breakpoint, the established mobile convention for these CTAs. */ .fifty-hero-cta { width: 100%; justify-content: center; } }