/* ============================================================
   BWL — Course hero
   Navy panel (bottom-rounded): breadcrumb + 64/900 title, chalk
   speckle clipped on the right. The light-blue quick-links
   bubble hangs off the panel's bottom-right. Below, on white:
   intro paragraph + a 4-up row of navy feature cards (white
   border, cyan 12px offset shadow, cyan medal icons).
   Content + cards are boxed to the 1600px container / 24px
   gutter, same as the other heroes.
   ============================================================ */

.bwl-chero {
	--bwl-navy: #00085e;
	--bwl-cyan: #00ccff;
	--bwl-tint: #e0fbff;
	--bwl-content: 1600px;
	--bwl-gutter: 24px;

	/* accent: card shadows + medal discs (cyan = courses, orange = membership) */
	--ch-accent: #00ccff;

	/* TWEAK geometry */
	--ch-pad-x: var(--bwl-gutter);   /* content inset (boxed like the sections) */
	--ch-nav-peek: 82px;             /* bubble top above the panel bottom */

	position: relative;
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif);
	padding-bottom: 72px;            /* room for the card shadows */
}
.bwl-chero--orange { --ch-accent: #ff4a00; }
.bwl-chero--green  { --ch-accent: #00e8a8; }
.bwl-chero--purple { --ch-accent: #8f63ff; }
/* bare hero (panel only): no trailing spacing — the next section may overlap */
.bwl-chero--bare { padding-bottom: 0; }

/* --- Stage: panel + hanging bubble --- */
.bwl-chero__stage { position: relative; }

/* Clip box: holds the panel + speckle. On course pages the main stylesheet
   extends it up behind the transparent site header (negative margin +
   matching padding), so the speckle can rise behind the white pill. */
.bwl-chero__clip {
	position: relative;
	overflow: hidden;
	border-radius: 0 0 20px 20px;
	background: var(--bwl-navy);   /* fills the header zone when extended up */
}
/* "Speckle spills below the panel" toggle: the dots overflow the panel's
   bottom edge onto the white below (membership hero). Sideways stays
   clipped so nothing causes horizontal scroll, and the quick-links bubble
   (z-index 4) keeps floating above the dots (z-index 1). */
.bwl-chero--spill .bwl-chero__clip {
	overflow: visible;
	overflow-x: clip;
}

.bwl-chero__panel {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	min-height: clamp(300px, 25vw, 400px);
	background: var(--bwl-navy);
	border-radius: 0 0 20px 20px;
}

/* chalk speckle — CENTRE-anchored, tuned via the block's range sliders
   (inline CSS vars). The image's CENTRE is placed at (X% across, Y% down)
   of the CLIP box (panel + the header zone on desktop), then rotated in
   place; the clip crops overflow. Defaults approximate the Figma (large
   streak across the upper right, 166deg). */
.bwl-chero__speckle {
	position: absolute;
	left: var(--ch-spk-x, 75%);          /* centre X: % across the panel */
	top: var(--ch-spk-y, 40%);           /* centre Y: % down the panel */
	width: var(--ch-spk-w, 95%);         /* % of the panel width */
	max-width: none;                     /* lift the theme's img cap */
	height: auto;
	transform: translate(-50%, -50%) rotate(var(--ch-spk-rot, 166deg));
	transform-origin: center;
	z-index: 1;
	pointer-events: none;
}

.bwl-chero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--bwl-content);
	margin-inline: auto;
	padding: 24px var(--ch-pad-x) 60px;
}
.bwl-chero__content { max-width: 860px; }

/* breadcrumb */
.bwl-chero__crumbs {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 0 0 48px;            /* TWEAK breadcrumb → title gap */
}
.bwl-chero__crumb-link,
.bwl-chero__crumb-here {
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}
.bwl-chero__crumb-link { text-decoration: underline; }
.bwl-chero__crumb-link:hover { color: #ffffff; opacity: 0.8; }
.bwl-chero__crumb-chev { flex: 0 0 auto; }

.bwl-chero__title {
	margin: 0;
	color: #ffffff;
	font-size: clamp(40px, 4.5vw, 64px);
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}
/* no breadcrumb above (membership hero): drop the title to the design height */
.bwl-chero__content > .bwl-chero__title:first-child {
	margin-top: 100px;           /* TWEAK title offset without breadcrumb */
}

/* optional white line under the title (membership hero) */
.bwl-chero__subtitle {
	margin: 27px 0 0;            /* TWEAK title → subtitle gap */
	max-width: 475px;
	color: #ffffff;
	font-size: 20px;
	font-weight: 300;
	line-height: 26px;
}

/* --- Quick-links bubble (hangs off the panel's bottom-right) --- */
.bwl-chero__nav {
	position: absolute;
	right: calc(max(0px, (100% - var(--bwl-content)) / 2) + var(--ch-pad-x));
	top: calc(100% - var(--ch-nav-peek));
	z-index: 4;
	width: min(400px, calc(100vw - 32px));
	padding: 22px 26px 24px;
	background: var(--bwl-tint);
	border: 1px solid var(--bwl-cyan);
	border-radius: 20px;
	box-shadow: 12px 12px 0 var(--bwl-cyan);
	color: var(--bwl-navy);
}
.bwl-chero__nav-label {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--bwl-navy);
}
.bwl-chero__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bwl-chero__nav-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 3px 0;
	color: var(--bwl-navy);
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
	text-decoration: none;
}
.bwl-chero__nav-list a:hover { color: var(--bwl-navy); opacity: 0.7; }
.bwl-chero__nav-chev { flex: 0 0 auto; }

/* --- Below the panel: intro + feature cards --- */
.bwl-chero__below {
	max-width: var(--bwl-content);
	margin-inline: auto;
	padding-inline: var(--ch-pad-x);
}
.bwl-chero__intro {
	max-width: 742px;            /* stays clear of the hanging bubble */
	margin: 88px 0 0;            /* TWEAK panel → intro gap */
	color: var(--bwl-navy);
	font-size: 26px;
	font-weight: 300;
	line-height: 30px;
}

/* optional heading above the intro (e.g. "Why become a member?") — with it,
   the heading takes the panel gap and the intro turns into 20px body copy */
.bwl-chero__below-title {
	max-width: 742px;
	margin: 88px 0 0;            /* TWEAK panel → heading gap */
	color: var(--bwl-navy);
	font-size: 40px;
	font-weight: 900;
	line-height: 40px;
	text-transform: uppercase;
}
.bwl-chero__below--headed .bwl-chero__intro {
	margin-top: 24px;            /* TWEAK heading → intro gap */
	max-width: 747px;
	font-size: 20px;
	line-height: 26px;
}

.bwl-chero__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 34px;                   /* TWEAK card gap */
	margin-top: 76px;            /* TWEAK intro → cards gap */
}
.bwl-chero__cards--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; }
.bwl-chero__card {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 130px;
	padding: 23px 25px;
	background: var(--bwl-navy);
	border: 1px solid #ffffff;
	border-radius: 20px;
	box-shadow: 12px 12px 0 var(--ch-accent);
}
.bwl-chero__card-icon { flex: 0 0 auto; width: 69px; height: auto; }
.bwl-chero__card-text {
	color: #ffffff;
	font-size: 26px;
	font-weight: 700;
	line-height: 28px;
}
/* 3-up variant (membership): slightly smaller card copy, per the Figma */
.bwl-chero__cards--n3 .bwl-chero__card-text { font-size: 20px; line-height: 26px; }

/* --- Mobile carousel arrows (hidden on desktop — the grid shows all cards) --- */
.bwl-chero__cards-nav { display: none; }
.bwl-chero__arrow {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	transition: opacity 0.15s ease;
}
.bwl-chero__arrow:disabled { opacity: 0.35; cursor: default; }

/* --- Responsive --- */
@media (max-width: 1200px) {
	.bwl-chero__cards,
	.bwl-chero__cards--n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.bwl-chero { padding-bottom: 40px; }
	.bwl-chero__panel {
		min-height: 0;
		border-radius: 0 0 16px 16px;
	}
	/* extra bottom padding: the quick-links bubble overlaps this edge */
	.bwl-chero__inner { padding: 24px 20px 130px; }   /* TWEAK panel bottom room */
	.bwl-chero__content { max-width: none; }

	.bwl-chero__crumb-chev,
	.bwl-chero__crumb-here { display: none; }   /* parent link only, like the other heroes */
	.bwl-chero__crumbs { margin-bottom: 40px; }
	.bwl-chero__title { font-size: 34px; line-height: 38px; }
	.bwl-chero__content > .bwl-chero__title:first-child { margin-top: 48px; }
	.bwl-chero__subtitle { margin-top: 16px; font-size: 16px; line-height: 22px; }

	/* speckle: mobile sliders win when the "position separately on mobile"
	   toggle is ON; otherwise each value falls back to the desktop slider */
	.bwl-chero__speckle {
		left: var(--ch-spk-x-m, var(--ch-spk-x, 75%));
		top: var(--ch-spk-y-m, var(--ch-spk-y, 40%));
		width: var(--ch-spk-w-m, var(--ch-spk-w, 95%));
		transform: translate(-50%, -50%) rotate(var(--ch-spk-rot-m, var(--ch-spk-rot, 166deg)));
	}

	/* bubble: in flow but pulled up over the panel's bottom edge */
	.bwl-chero__nav {
		position: relative;
		top: auto;
		right: auto;
		width: auto;
		margin: -90px 20px 0;        /* TWEAK bubble overlap over the panel */
		z-index: 4;
		border-radius: 16px;
		box-shadow: 6px 6px 0 var(--bwl-cyan);
		padding: 15px 20px 20px;
	}
	.bwl-chero__nav-list a { line-height: 30px; padding: 0; }

	.bwl-chero__below { padding-inline: 20px; }
	.bwl-chero__intro { margin-top: 56px; font-size: 20px; line-height: 26px; }
	.bwl-chero__below-title { margin-top: 56px; font-size: 34px; line-height: 34px; }
	.bwl-chero__below--headed .bwl-chero__intro { margin-top: 30px; font-size: 20px; line-height: 26px; }

	/* cards: one-per-view snap carousel. No full-bleed (no peek wanted) —
	   and the scrollport would clip the cyan offset shadow, so each card
	   is 6px narrower + the track keeps 6px bottom padding to fit it. */
	.bwl-chero__cards {
		display: flex;
		gap: 24px;
		overflow-x: auto;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding: 0 0 6px;            /* room for the bottom shadow */
		margin-top: 30px;            /* TWEAK intro → cards gap */
	}
	.bwl-chero__cards::-webkit-scrollbar { display: none; }
	.bwl-chero__card {
		flex: 0 0 calc(100% - 6px);  /* room for the right shadow */
		scroll-snap-align: start;
		min-height: 80px;
		padding: 19px 20px;
		gap: 20px;
		border-radius: 16px;
		border-color: var(--ch-accent);   /* accent border on mobile (white on desktop) */
		box-shadow: 6px 6px 0 var(--ch-accent);
	}
	.bwl-chero__card-icon { width: 34px; }
	.bwl-chero__card-text { font-size: 20px; line-height: 24px; }

	/* arrows: left-aligned under the cards */
	.bwl-chero__cards-nav {
		display: flex;
		justify-content: flex-start;
		gap: 13px;
		margin-top: 28px;            /* TWEAK cards → arrows gap */
	}

	/* 3-card (membership) variant: cards STACK instead of the carousel —
	   full width, bigger icons, no arrows */
	.bwl-chero__cards--n3 {
		flex-direction: column;
		gap: 20px;
		overflow: visible;
		scroll-snap-type: none;
		margin-top: 40px;            /* TWEAK intro → cards gap (stacked) */
	}
	.bwl-chero__cards--n3 .bwl-chero__card {
		flex-basis: auto;
		min-height: 97px;
		padding: 15px 19px;
		gap: 21px;
	}
	.bwl-chero__cards--n3 .bwl-chero__card-icon { width: 57px; }
	.bwl-chero__cards--n3 .bwl-chero__card-text { font-size: 16px; line-height: 22px; }
	.bwl-chero__cards--n3 + .bwl-chero__cards-nav { display: none; }
}

/* --- Course overview additions --- */

/* white paragraph inside the navy panel (under the title) */
.bwl-chero__panel-intro {
	margin: 30px 0 0;               /* TWEAK title → panel intro gap */
	max-width: 647px;
	color: #ffffff;
	font-size: 26px;
	font-weight: 300;
	line-height: 32px;
}

/* athlete cut-out at the panel's right, clipped with the panel */
.bwl-chero__photo {
	position: absolute;
	/* anchored to the CONTENT column's right edge (the Figma look), not the
	   viewport edge — nudge with --ch-photo-x (positive = further right) */
	right: calc(max(0px, (100% - var(--bwl-content)) / 2) + var(--ch-photo-x, 0px));
	bottom: 0;
	height: var(--ch-photo-h, 95%);  /* TWEAK photo height (% of the panel) */
	max-width: 62%;
	width: auto;
	object-fit: contain;
	object-position: right bottom;
	z-index: 1;                      /* above the speckle, below the copy */
	pointer-events: none;
}

/* second labelled group in the quick-links bubble */
.bwl-chero__nav-label--2 { margin-top: 24px; }   /* TWEAK gap above the 2nd group */

/* white feature-card style (Course overview): navy border/shadow/discs */
.bwl-chero--cards-light .bwl-chero__card {
	background: #ffffff;
	border-color: var(--bwl-navy);
	box-shadow: 12px 12px 0 var(--bwl-navy);
}
.bwl-chero--cards-light .bwl-chero__card-text { color: var(--bwl-navy); }
.bwl-chero--cards-light .bwl-chero__card-icon path[fill*="ch-accent"] { fill: var(--bwl-navy); }

@media (max-width: 900px) {
	.bwl-chero__panel-intro { font-size: 20px; line-height: 26px; margin-top: 20px; }
	.bwl-chero__photo { display: none; }   /* pending the mobile design */
	.bwl-chero--cards-light .bwl-chero__card { box-shadow: 6px 6px 0 var(--bwl-navy); }
}

/* two-group bubble (Course overview) hangs deeper below the panel —
   push the cards row clear of it */
@media (min-width: 901px) {
	.bwl-chero--nav2 .bwl-chero__cards { margin-top: 120px; }   /* TWEAK (single-group pages: 76) */
}

/* "See more" expander: hidden on desktop and on non-overview mobiles */
.bwl-chero__nav-more { display: none; }

/* --- Course overview variant — MOBILE (from the 362 Figma) --- */
@media (max-width: 900px) {
	/* panel intro: 20/32 white */
	.bwl-chero--overview .bwl-chero__panel-intro { font-size: 20px; line-height: 32px; }

	/* athlete photo: full width, flowing after the panel and overlapping
	   up onto its navy bottom */
	.bwl-chero--overview .bwl-chero__clip { overflow: visible; }
	.bwl-chero--overview .bwl-chero__photo {
		display: block;
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		max-width: none;
		height: auto;
		margin: -180px 0 0;          /* TWEAK overlap up onto the panel */
		z-index: 1;
	}

	/* bubble: compact — 2 links visible, the rest behind "See more";
	   chevrons point right */
	.bwl-chero--overview .bwl-chero__nav-chev { transform: rotate(-90deg); }
	.bwl-chero--overview .bwl-chero__nav:not(.is-open) .bwl-chero__nav-item:nth-child(n + 3),
	.bwl-chero--overview .bwl-chero__nav:not(.is-open) .bwl-chero__nav-label--2,
	.bwl-chero--overview .bwl-chero__nav:not(.is-open) .bwl-chero__nav-list + .bwl-chero__nav-list {
		display: none;
	}
	.bwl-chero--overview .bwl-chero__nav-more {
		display: inline-flex;
		align-items: center;
		gap: 55px;                   /* TWEAK "See more" ↔ plus circle gap */
		margin-top: 10px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		color: var(--bwl-navy);
		font-family: inherit;
		font-size: 16px;
		font-weight: 700;
		line-height: 24px;
	}
	.bwl-chero--overview .bwl-chero__nav.is-open .bwl-chero__nav-more { display: none; }

	/* feature cards: stacked full-width rows (icon left, 20/700 label right)
	   instead of the carousel */
	.bwl-chero--overview .bwl-chero__cards {
		display: block;
		margin-top: 44px;            /* TWEAK bubble → cards gap */
	}
	.bwl-chero--overview .bwl-chero__card {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 16px;
		min-height: 97px;
		margin: 0 0 22px;            /* TWEAK gap between stacked cards */
		padding: 14px 16px;
		border-radius: 16px;
	}
	.bwl-chero--overview .bwl-chero__card-icon { width: 57px; height: auto; flex: 0 0 auto; }
	.bwl-chero--overview .bwl-chero__card-text { font-size: 20px; line-height: 24px; }
	.bwl-chero--overview .bwl-chero__cards-nav { display: none; }
}

/* Course overview: taller panel (Figma: 666px @1440) — the bubble's top rows
   sit on the navy and the panel edge cuts in at the second link row */
@media (min-width: 901px) {
	.bwl-chero--overview { --ch-nav-peek: 100px; }   /* TWEAK: bubble above the edge */
	.bwl-chero--overview .bwl-chero__panel {
		/* Figma: 666px INCLUDING the header zone; the clip already adds
		   ~134px above the panel for the transparent header */
		min-height: clamp(360px, 37vw, 532px);       /* TWEAK panel height */
	}
	/* 6/12 columns: title + text left, picture right */
	.bwl-chero--overview .bwl-chero__content {
		max-width: calc(var(--bwl-content) * 6 / 12 - var(--ch-pad-x, 24px));
	}
	.bwl-chero--overview .bwl-chero__photo {
		max-width: calc(var(--bwl-content) * 6 / 12);
	}
}