/* ============================================================
   BWL — Hero
   Navy panel (clips the athlete images) + decorations outside
   the clip: the orange speckle (bottom-left, crossing the edge)
   and the light-blue event card (bottom-right mini carousel).
   ============================================================ */

.bwl-hero {
	--bwl-navy: #00085e;
	--bwl-orange: #ff4a00;
	--bwl-tint: #e0fbff;
	--bwl-cyan: #00ccff;
	position: relative;
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif);
	/* reserve room for the event card hanging below the panel (110px
	   overhang + breathing space) so it never lands on the next section.
	   padding (not margin) — sibling block-spacing rules can't collapse it. */
	--bwl-hero-gap: 170px;        /* TWEAK gap below the hero */
	--bwl-card-overhang: 110px;   /* TWEAK how far the card hangs below the panel */
	--bwl-img-x: 26%;             /* in-place horizontal offset of the side athletes (bigger = further to the edge) */
	--bwl-img-out: 85%;           /* off-screen offset used by the intro slide */
	padding-bottom: var(--bwl-hero-gap);
}

/* --- Navy panel --- */
.bwl-hero__panel {
	position: relative;
	overflow: hidden;
	background: var(--bwl-navy);
	min-height: clamp(420px, 38vw, 600px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0 0 20px 20px;
}

/* --- Side images (cut-outs, anchored to the edges) --- */
.bwl-hero__img {
	position: absolute;
	bottom: 0;
	height: 100%;            /* TWEAK image size */
	width: auto;
	max-width: none;
	object-fit: contain;
	z-index: 1;
	pointer-events: none;
}
.bwl-hero__img--left  { left: 0;  transform: translateX(calc(-1 * var(--bwl-img-x))); }
.bwl-hero__img--right { right: 0; transform: translateX(var(--bwl-img-x)); }

/* Intro images enable a slow, looping cross-slide between the two athletes on
   each side: the "front" image sits in place; the other waits off its edge,
   hidden. view.js flips which one is front, alternating left / right / left /
   right, forever. Desktop only — on mobile a single centred athlete shows. */
@media (min-width: 701px) {
	/* Fallback before/without JS: show the MAIN pair, hide the intro pair. */
	.bwl-hero.has-hero-intro .bwl-hero__img--intro { opacity: 0; }

	/* Once JS takes over (.is-hero-anim), every athlete waits off its edge and
	   hidden; the one flagged .is-front slides into place and fades in. */
	.bwl-hero.has-hero-intro.is-hero-anim .bwl-hero__img {
		opacity: 0;
		transition: transform 1.2s ease, opacity 1.2s ease;   /* TWEAK slide speed (bigger = calmer) */
	}
	.bwl-hero.has-hero-intro.is-hero-anim .bwl-hero__img--left  { transform: translateX(calc(-1 * var(--bwl-img-out))); }
	.bwl-hero.has-hero-intro.is-hero-anim .bwl-hero__img--right { transform: translateX(var(--bwl-img-out)); }
	.bwl-hero.has-hero-intro.is-hero-anim .bwl-hero__img.is-front { opacity: 1; }
	.bwl-hero.has-hero-intro.is-hero-anim .bwl-hero__img--left.is-front  { transform: translateX(calc(-1 * var(--bwl-img-x))); }
	.bwl-hero.has-hero-intro.is-hero-anim .bwl-hero__img--right.is-front { transform: translateX(var(--bwl-img-x)); }
}
/* reduced-motion: no sliding loop — just the (static) main pair. */
@media (min-width: 701px) and (prefers-reduced-motion: reduce) {
	.bwl-hero.has-hero-intro.is-hero-anim .bwl-hero__img { transition: none; }
}
/* mobile: the right-side pair cycles too — rules live at the END of this file
   (they must override the ≤700 layout block below). */

/* --- Centered content --- */
.bwl-hero__content {
	position: relative;
	z-index: 2;
	max-width: 850px;
	padding: 48px 24px;
	text-align: center;
}

.bwl-hero__title {
	margin: 0;
	color: #ffffff;
	font-size: clamp(38px, 4.5vw, 64px);
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}
.bwl-hero__hl {
	display: inline-block;
	padding: 0 14px;
	background: var(--bwl-orange);
}

.bwl-hero__body {
	max-width: 633px;
	margin: 28px auto 0;
	color: #ffffff;
	font-size: 20px;
	font-weight: 400;
	line-height: 26px;
}
.bwl-hero__body p { margin: 0 0 1em; color: #ffffff; }
.bwl-hero__body p:last-child { margin-bottom: 0; }
.bwl-hero__body a { color: #ffffff; text-decoration: underline; }

.bwl-hero__btn {
	display: inline-flex;
	margin-top: 32px;
	padding: 12px 26px;
	border-radius: 20px;
	background: var(--bwl-orange);
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.bwl-hero__btn:hover { color: #ffffff; opacity: 0.92; }

/* --- Orange speckle (bottom-left, crossing the hero's bottom edge).
   Figma renders the chalk asset rotated 14deg and ~75% of the page wide
   (1088px on a 1440 canvas), anchored at the lower-left. --- */
.bwl-hero__speckle {
	position: absolute;
	left: 0;
	bottom: var(--bwl-hero-gap, 170px);            /* anchored to the PANEL bottom, not the section */
	width: clamp(480px, 75vw, 1500px);             /* TWEAK speckle size (Figma: ~75vw) */
	height: auto;
	/* the translateY(var(--bwl-parallax)) is the scroll parallax (screen-space,
	   before the rotate), driven by view.js; 0 when JS is off. */
	transform: translate(-24%, calc(60% + 20px)) translateY(var(--bwl-parallax, 0px)) rotate(14deg); /* TWEAK position (x, y), rotation from Figma */
	transform-origin: center;
	will-change: transform;
	z-index: 1;         /* behind the copy (content is 2, event card 4) */
	pointer-events: none;
}

/* --- Event card (bottom-right) --- */
.bwl-hero__events {
	position: absolute;
	right: clamp(16px, 5vw, 90px);
	/* hangs --bwl-card-overhang below the PANEL bottom, inside the section's padding */
	bottom: calc(var(--bwl-hero-gap, 170px) - var(--bwl-card-overhang, 110px));
	z-index: 4;
	width: min(480px, calc(100vw - 32px));
	min-height: 244px;          /* TWEAK fixed card height so slides don't resize */
	padding: 24px 28px 26px;
	background: var(--bwl-tint);
	border-radius: 20px;
	/* cyan offset layer behind, like the design */
	box-shadow: 10px 12px 0 var(--bwl-cyan);
	color: var(--bwl-navy);
}
.bwl-hero__events-label {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}
.bwl-hero__events-heading {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 900;
	line-height: 22px;
	text-transform: uppercase;
	color: var(--bwl-navy);
}
.bwl-hero__events-text {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
}
.bwl-hero__events-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--bwl-navy);
	text-decoration: none;
}
.bwl-hero__events-link:hover { color: var(--bwl-navy); text-decoration: underline; }
/* chevron animation on hover — same as the page-hero nav bubble links:
   a small slide right + thicker stroke */
.bwl-hero__events-link svg { transition: transform 0.12s ease; }
.bwl-hero__events-link svg path { transition: stroke-width 0.12s ease; }
.bwl-hero__events-link:hover svg { transform: translateX(3px); }
.bwl-hero__events-link:hover svg path { stroke-width: 3; }

/* slides: only the active one shows */
.bwl-hero__slide { display: none; }
.bwl-hero__slide.is-active { display: block; }

/* carousel dots (bottom-right inside the card) */
.bwl-hero__dots {
	position: absolute;
	right: 24px;
	bottom: 24px;
	display: flex;
	gap: 10px;
}
.bwl-hero__dot {
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid var(--bwl-navy);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	position: relative;
}
.bwl-hero__dot.is-active::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--bwl-navy);
}

/* --- Responsive --- */
@media (max-width: 999px) {
	.bwl-hero__img { opacity: 0.85; }
}
/* Tablet range (below desktop, above the mobile stack at 700). Keep the two
   athletes, but push them further to the edges and narrow the copy so the
   heading/body never sit on top of them; shrink + tuck the event card so it
   stops crowding the copy. */
@media (min-width: 701px) and (max-width: 1100px) {
	.bwl-hero { --bwl-img-x: 50%; }             /* TWEAK: bigger = athletes further off the edges */
	.bwl-hero__img { height: 82%; }             /* a touch smaller so they clear the text */
	.bwl-hero__content { max-width: 460px; padding-inline: 24px; }
	.bwl-hero__title { font-size: clamp(34px, 5vw, 52px); }
	.bwl-hero__events {
		right: 16px;
		width: min(320px, calc(100vw - 32px));
		min-height: 0;
		padding: 20px 22px 22px;
	}
}
@media (max-width: 700px) {
	/* Stack the hero: heading + text + button, then ONE athlete (the right
	   one) centred below, the event card overlapping his lower half, and the
	   speckle at the bottom — like the design. */
	.bwl-hero {
		padding-bottom: 0;
		position: relative;
		z-index: 2;                /* lift the hero (with the overflowing speckle) above the next section */
	}
	.bwl-hero__panel {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 0;
		overflow: hidden;          /* clip the wide athlete asset's blur trails */
	}
	/* content FIRST (in the DOM the images come before it, so force order) */
	.bwl-hero__content { order: 1; padding: 48px 22px 12px; }

	/* hide the left athlete; show the right one below the text, man centred */
	.bwl-hero__img--left { display: none; }
	.bwl-hero__img--right {
		order: 2;
		display: block;
		position: relative;
		inset: auto;
		height: auto;
		width: 230%;               /* TWEAK zoom (bigger = larger man) */
		max-width: 230%;
		margin: -150px auto 0;      /* TWEAK gap after the button — make more negative if you enlarge the image */
		transform: translateX(-28%);   /* TWEAK: centre the man (he sits right-of-centre in the asset) */
	}

	/* speckle: wider than the viewport so it bleeds off the edges (~90% shown),
	   sitting BEHIND the card (keeps the base z-index:3) but the hero's
	   z-index:2 lets it show over the white section below. */
	.bwl-hero__speckle {
		display: block;
		bottom: 0;
		width: 254vw;                                /* 30% bigger (was 195vw); >100vw bleeds off the page */
		max-width: none;
		transform: translate(-32%, 54%) translateY(var(--bwl-parallax, 0px)) rotate(14deg);   /* x: more negative = further left; y: larger = lower */
	}

	/* event card: full width (side margins), pulled up to overlap the athlete */
	.bwl-hero__events {
		position: relative;
		right: auto;
		bottom: auto;
		left: auto;
		width: auto;
		margin: -90px 16px 48px;    /* top = overlap (more negative = more over athlete); bottom = gap to next section */
		z-index: 5;
	}
}

/* --- Mobile (≤700): the two RIGHT athletes cycle in place (crossfade only —
   no slide, so the centred layout's own transform is untouched). The intro
   image is absolutely overlaid on the main one with identical sizing, and the
   loop's .is-front class fades between them. Left athletes stay hidden. --- */
@media (max-width: 700px) {
	.bwl-hero.has-hero-intro .bwl-hero__img--intro.bwl-hero__img--right {
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		right: auto;
		width: 230%;               /* keep in step with the main image's mobile sizing */
		max-width: 230%;
		height: auto;
		margin: 0;
		transform: translateX(-28%);
	}
	/* no JS: main shows, intro hidden */
	.bwl-hero.has-hero-intro .bwl-hero__img--intro { opacity: 0; }
	/* loop running: crossfade whichever right image is front */
	.bwl-hero.has-hero-intro.is-hero-anim .bwl-hero__img--right {
		transition: opacity 1.2s ease;   /* TWEAK crossfade speed */
		opacity: 0;
	}
	.bwl-hero.has-hero-intro.is-hero-anim .bwl-hero__img--right.is-front { opacity: 1; }

	/* event-card dots: more space between them for tapping */
	.bwl-hero__dots { gap: 18px; }       /* TWEAK dot spacing (desktop stays 10px) */
}