/**
 * EU Hero — unified hero styling for every page hero.
 *
 * One consistent look across all EU hero variants:
 *  - true edge-to-edge full-bleed width (pure CSS, so it survives window resize,
 *    unlike the old run-once JavaScript container-strip),
 *  - one uniform height matching the Merch hero,
 *  - the gold "eyebrow" label style from Merch / Video Hub (no pills/badges),
 *  - the yellow/blue accent bar at the bottom of every hero.
 * Loaded site-wide by eu-hero-manager; only affects elements carrying a hero
 * class, which exist only on hero pages. The Dashboard has no hero.
 */

/* ── Full-bleed width + uniform height ─────────────────────────────────────── */
.emp-hero,      /* eu-merch, eu-memberships-page */
.eu-hub-hero,   /* eu-video-hub */
.ebp-hero,      /* eu-business-hub */
.ecp-hero,      /* eu-ce-hub */
.eu-ph-hero,    /* eu-page-heroes (articles/about/contact/faq) */
.hero {         /* eu-home */
	position: relative !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	min-height: 560px !important;
	padding-top: 64px !important;
	padding-bottom: 72px !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}

/* ── Eyebrow: gold, bold, uppercase, no pill (matches Merch / Video Hub) ────── */
.emp-eyebrow,
.eu-hub-hero-eyebrow,
.ebp-eyebrow-pill,
.ecp-badge,
.eu-ph-eyebrow,
.hero .eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	color: #FFC107 !important;
	font-family: "Lexend Deca", system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 1.68px !important;
	text-transform: uppercase !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin-bottom: 14px !important;
}

/* Business is the only eyebrow with no icon of its own — give it the bolt. */
.ebp-eyebrow-pill::before {
	content: "\26A1" !important; /* lightning bolt */
}

/* ── Bottom accent bar: yellow/blue gradient from Merch / Video Hub ─────────── */
.emp-hero::after,
.eu-hub-hero::after,
.ebp-hero::after,
.ecp-hero::after,
.eu-ph-hero::after,
.hero::after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	height: 4px !important;
	width: 100% !important;
	background: linear-gradient(90deg, #FFC107 0%, #1363DF 50%, #FFC107 100%) !important;
	z-index: 5 !important;
	pointer-events: none !important;
}


/* ── Articles page: hide the duplicate legacy hero from eu-articles 1.4.4.
   The /articles/ page renders TWO heroes — eu-page-heroes' unified .eu-ph-hero
   (kept) and eu-articles' own .eua-hero (hidden here). Proper fix later: stop
   one plugin rendering it; this removes the visible/second H1 cleanly for now. */
.eua-hero { display: none !important; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.emp-hero, .eu-hub-hero, .ebp-hero, .ecp-hero, .eu-ph-hero, .hero {
		min-height: 480px !important;
		padding-top: 52px !important;
		padding-bottom: 60px !important;
	}
}
@media (max-width: 640px) {
	.emp-hero, .eu-hub-hero, .ebp-hero, .ecp-hero, .eu-ph-hero, .hero {
		min-height: 420px !important;
		padding-top: 44px !important;
		padding-bottom: 52px !important;
	}
}