/* Bowman "now open" announcement hero.

   Rides on .billboard-hero so the section inherits the default hero's
   full-bleed sizing, video, overlay, three-line white/gold/white headline and
   footnote type scale from billboard-hero.css. Nothing in that file is
   restated here. This file adds the one element the default hero does not
   have, the CTA button, plus the bottom room that element costs.

   Scoped at two classes (.bowman-open-hero .billboard-hero__cta), the same
   shape billboard-hero-b2s.css uses. The hero renders inside .content and not
   inside .entry-content (verified on the live homepage), so the
   .entry-content a:hover underline rule in style.css never reaches this
   button. text-decoration is still set explicitly so a future rule cannot
   sneak an underline onto it. */

/* ---------- section shell ---------- */

/* Solid fallback behind the video while it loads, and a stacking context on
   mobile too (billboard-hero.css only sets z-index at >=801px) so nothing in
   this hero can paint over the search bar below it. Same two lines .b2s-hero
   needs for the same reason. */
.bowman-open-hero {
	background: #000;
	position: relative;
	z-index: 1;
}

/* The button lengthens the content column by about 79px on mobile and 90px on
   desktop (measured on the live homepage at 375 and 1440), eating into the
   room below the hero content. billboard-hero.css leaves 120px of bottom
   padding on mobile and 140px at >=801px; this adds 30px to each so the
   announcement keeps comparable room under the CTA. Written at two classes
   so it beats the @media (min-width: 801px) .billboard-hero rule in
   billboard-hero.css on specificity rather than on load order. */
.billboard-hero.bowman-open-hero {
	padding-bottom: 150px;
}

/* ---------- CTA button ---------- */

@keyframes bh-cta-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Gold fill picked from the same ramp as .billboard-hero__line--red so the
   button reads as part of the lockup. 14px/0.12em keeps the label on one line
   at 320px: at 15px/0.14em it measured 281px against 280px of available
   width and wrapped to two lines. No white-space: nowrap, so a longer label
   wraps instead of pushing the page sideways. */
.bowman-open-hero .billboard-hero__cta {
	display: inline-block;
	max-width: 100%;
	margin-top: 26px;
	padding: 16px 28px;
	border: 2px solid #F5C842;
	border-radius: 4px;
	background: linear-gradient(160deg, #FFE566 0%, #F5C842 28%, #D4A017 60%, #B8860B 100%);
	color: #111111;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
	animation: bh-cta-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both;
}

.bowman-open-hero .billboard-hero__cta:hover,
.bowman-open-hero .billboard-hero__cta:focus {
	background: linear-gradient(160deg, #FFF0A0 0%, #FFE566 30%, #F5C842 65%, #D4A017 100%);
	color: #111111;
	text-decoration: none;
}

/* Keyboard focus ring. White, not gold: a gold ring would vanish into the
   button's own fill. Set on :focus as well as :focus-visible because the
   button sits on a dark video and a focus state that only some engines paint
   is worse than one that also shows on click. */
.bowman-open-hero .billboard-hero__cta:focus,
.bowman-open-hero .billboard-hero__cta:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* ---------- Desktop ---------- */

@media (min-width: 801px) {
	.billboard-hero.bowman-open-hero {
		padding-bottom: 170px;
	}

	.bowman-open-hero .billboard-hero__cta {
		margin-top: 32px;
		padding: 18px 36px;
		font-size: 15px;
	}
}