/**
 * Reusable page hero. See template-parts/page-hero.php.
 * Bare-element rules (h1, a) scoped as `.cwf-hero .cwf-hero__thing` from
 * the start -- see footer.css for why (Elementor's kit CSS ships blanket
 * `.elementor-kit-13 <tag>` rules that beat single-class selectors).
 */

.cwf-hero {
	position: relative;
	min-height: 100vh;
	padding: 0 56px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	/* No flex/align-items here: the original design positions its content
	   purely via the content block's own top padding, not vertical
	   centering. Had both here before -- doubled up and pushed the
	   heading ~186px lower than production. */
}

.cwf-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Home only, so far: a bouncing "scroll down" chevron, bottom-center of
   the hero -- measured from the original icon widget (54px, primary
   gold color, bounceInUp animation). */
.cwf-hero__scroll-indicator {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	width: 54px;
	height: 54px;
	color: var(--color-primary);
	animation: cwf-hero-scroll-bounce 2s infinite;
}
@keyframes cwf-hero-scroll-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
	40% { transform: translateX(-50%) translateY(-15px); }
	60% { transform: translateX(-50%) translateY(-7px); }
}

.cwf-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--color-black);
	/* opacity set inline per page -- defaults to 0.3, but Event Spaces'
	   video hero has none at all (0.3 was previously hardcoded here for
	   every page before video heroes needed a per-page override -- see
	   page-hero.php's `overlay` arg). */
}

.cwf-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 250px 0 100px; /* measured/confirmed against production -- was guessed at 150px/60px before */
}

/* Contact Us variant: content block is centered, not left-aligned --
   measured from production (align-items/justify-content/text-align all
   center on the equivalent container there). */
.cwf-hero__content--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.cwf-hero .cwf-hero__heading {
	margin: 0;
	font-family: var(--font-nav-title); /* Inter -- measured from production; NOT the site's Oswald h1/h2 kit default, this widget overrides it */
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-white);
	text-transform: capitalize;
	text-shadow: var(--text-shadow-halo); /* per the client's request --
	                                          legibility over busy photo
	                                          backgrounds, see tokens.css */
	overflow-wrap: break-word; /* a long single word (e.g. Drone's
	                               "CINEMATOGRAPHY") is wider than the
	                               mobile viewport at the default 60px --
	                               without this it silently overflows the
	                               page instead of wrapping. Same bug as
	                               split-section.css's heading, see
	                               MIGRATION.md. */
}

/* Production Services variant: measured Montserrat/uppercase, not
   Inter/capitalize like every other page's hero heading so far. */
.cwf-hero .cwf-hero__heading--montserrat {
	font-family: var(--font-nav-submenu); /* Montserrat */
	text-transform: uppercase;
}

.cwf-hero .cwf-hero__subtext {
	margin: 20px 0 0;
	max-width: 600px;
	font-family: var(--font-nav-title); /* Inter, measured */
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-white);
	text-shadow: var(--text-shadow-halo);
}

.cwf-hero__tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	width: 100%;
	margin-top: 24px;
}

.cwf-hero .cwf-hero__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--color-white);
	padding: 10px;
	transition: background-color 0.2s ease;
	/* Grid stretches all 3 tiles in a row to match the tallest (the
	   2-line "STAGES, PRODUCTION..." box) -- without this, the shorter
	   single-line tiles' text sits at the top of that extra height
	   instead of centered in it. */
}
.cwf-hero .cwf-hero__tile:hover {
	background-color: #B1A61B; /* measured hover fill from production -- not a token elsewhere, page-specific */
}
.cwf-hero .cwf-hero__tile a {
	display: block;
	font-family: var(--font-nav-submenu); /* Montserrat, measured -- same family as .cwf-hero__link */
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-white);
	text-decoration: none;
	text-shadow: var(--text-shadow-halo);
}

@media (max-width: 900px) {
	.cwf-hero__tiles {
		grid-template-columns: 1fr;
	}
}

.cwf-hero__links {
	display: flex;
	flex-direction: column; /* stacked, not inline -- measured from production
	                            (Production Services, still Elementor-rendered
	                            at the time): flex_direction "column" on the
	                            original widget, confirmed the same on Stages
	                            & Studios/Podcast's own _elementor_data too.
	                            Built as a horizontal row by mistake -- caught
	                            by the user, live on 2 pages already. */
	gap: 20px; /* measured */
	margin-top: 20px;
}

.cwf-hero .cwf-hero__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-nav-submenu); /* Montserrat, measured from the original icon-box widget's title typography */
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-white); /* was #EEDC5C (gold, matches production) -- changed to white on request */
	text-decoration: none;
	text-shadow: var(--text-shadow-halo);
}
.cwf-hero .cwf-hero__link-icon {
	flex: none;
	width: 17px;
	height: 17px;
	color: var(--color-primary); /* icon stays this yellow always -- explicit color, not inherited, so link-text hover doesn't drag it along */
	filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.85)); /* icons don't take
		text-shadow -- drop-shadow is the SVG-safe equivalent, same halo intent */
}
.cwf-hero .cwf-hero__link:hover,
.cwf-hero .cwf-hero__link:focus-visible {
	color: var(--color-primary); /* same token as the icon -- was --color-primary-bright (a different, lighter yellow) before, which made hover text and icon visibly mismatch */
}

/* Button-style hero links (link_style: 'button') -- solid + outline block
   buttons, e.g. "See Our Work" / "Contact Us" on Podcast/Drone/Social
   Media Content/Event Coverage's heroes, matching the client's Event
   Coverage mockup. Row + wrap, not the stacked column above -- two short
   buttons read as a pair, not a breadcrumb list. Reuses the same tokens
   as cta-block's button/button2 pair (shared-blocks.css) for sitewide
   button consistency rather than one-off values. */
.cwf-hero .cwf-hero__links--buttons {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px;
}
.cwf-hero .cwf-hero__link--btn {
	display: inline-block;
	padding: var(--button-padding);
	background: var(--color-primary);
	color: var(--color-black);
	font-family: var(--font-nav-submenu);
	font-size: 16px;
	font-weight: var(--fw-button);
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	border-radius: var(--button-radius);
	border: 1px solid var(--color-primary);
	text-shadow: none; /* opaque fill behind the text -- no halo needed, unlike the outline variant below */
}
/* Outline variant -- transparent fill over the hero photo/video, so it
   still needs the halo shadow the plain text-link style uses for
   legibility (the solid button above doesn't, its fill is opaque). */
.cwf-hero .cwf-hero__link--btn-outline {
	background: transparent;
	color: var(--color-white);
	text-shadow: var(--text-shadow-halo);
}
.cwf-hero .cwf-hero__link--btn:hover,
.cwf-hero .cwf-hero__link--btn:focus-visible,
.cwf-hero .cwf-hero__link--btn-outline:hover,
.cwf-hero .cwf-hero__link--btn-outline:focus-visible {
	background: var(--color-primary);
	color: var(--color-black);
	text-shadow: none;
}

@media (max-width: 767px) {
	.cwf-hero {
		padding: 0 20px;
	}
	.cwf-hero__content {
		padding: 100px 0 40px;
	}
	.cwf-hero .cwf-hero__heading {
		/* Inline `style="font-size:...px"` (heading_size, default 60px)
		   beats any plain class rule, so this needs !important to
		   actually cap it on mobile -- same reasoning/pattern as
		   split-section.css's mobile heading cap.
		   A flat 32px cap (the first version of this fix) still broke
		   "CINEMATOGRAPHY" mid-word ("CINEMATOGRAP-HY") on narrower
		   phones (confirmed via getClientRects on a 320px viewport,
		   two line-boxes at different Y) -- 306px measured word width
		   only clears a 390px viewport's ~350px available space, not a
		   320px viewport's ~280px. `clamp()` with a `vw`-based middle
		   value scales continuously with the actual viewport instead
		   of jumping straight to one fixed size, so it keeps shrinking
		   below 390px instead of overflowing into a bad break -- the
		   9vw-4px coefficient is tuned so "CINEMATOGRAPHY" (the longest
		   word among every hero heading sitewide) fits on one line at
		   every width down to 320px, confirmed via getClientRects
		   showing a single line-box, not just zero body overflow (a
		   fixed-cap version could still "not overflow" while breaking
		   mid-word, since overflow-wrap:break-word prevents the
		   scrollbar but not the ugly break -- see MIGRATION.md). */
		font-size: clamp(22px, calc(9vw - 4px), 60px) !important;
	}
}