/* ============================================================
   BWL — Competitions hero
   Navy panel (bottom-rounded, rises behind the transparent
   header): breadcrumb + 64/900 title + white 20/26 intro (max
   526px) + orange/outline buttons in the LEFT 6/12; the athlete
   cut-out photo in the RIGHT 6/12, bottom-aligned. The
   quick-links bubble hangs off the panel's bottom-right.
   Optional navy 26/30 intro paragraph below the panel.
   Dedicated block for the Safeguarding page — iterate freely,
   nothing else uses these styles.
   ============================================================ */

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

	/* TWEAK geometry */
	--co-pad-x: var(--bwl-gutter);   /* content inset */
	--co-nav-peek: 100px;            /* bubble top above the panel bottom */

	position: relative;
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif);
	padding-bottom: 72px;            /* TWEAK block bottom breathing room */
}

.bwl-cohero__stage { position: relative; }

/* Clip box: extended up behind the transparent header by the main
   stylesheet (same treatment as the course/overview heroes). */
.bwl-cohero__clip {
	position: relative;
	overflow: hidden;
	border-radius: 0 0 20px 20px;
	background: var(--bwl-navy);
}

.bwl-cohero__panel {
	position: relative;
	min-height: clamp(360px, 37vw, 532px);   /* TWEAK (Figma incl. the 134px header zone) */
	background: var(--bwl-navy);
	border-radius: 0 0 20px 20px;
}

.bwl-cohero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--bwl-content);
	margin-inline: auto;
	padding: 44px var(--co-pad-x) 80px;   /* TWEAK content position (Figma: roomier, more centred) */
}
.bwl-cohero__content {
	max-width: calc(var(--bwl-content) * 6 / 12 - var(--co-pad-x));   /* 6/12 left */
}

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

.bwl-cohero__title {
	margin: 0 0 68px;                /* TWEAK title → intro gap (= breadcrumb gap, equal air) */
	color: #ffffff;
	font-size: clamp(40px, 4.5vw, 64px);
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}
.bwl-cohero__intro {
	margin: 0;
	max-width: 526px;
	color: #ffffff;
	font-size: 20px;
	font-weight: 300;
	line-height: 26px;
}

/* button row under the intro */
.bwl-cohero__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;                       /* TWEAK gap between buttons */
	margin-top: 56px;                /* TWEAK intro → buttons gap */
}
.bwl-cohero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 20px;
	border-radius: 20px;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
	transition: background 0.15s ease, opacity 0.15s ease;
}
.bwl-cohero__btn--orange {
	background: #ff4a00;
	color: #ffffff;
}
.bwl-cohero__btn--orange:hover { background: #d63c00; color: #ffffff; }
.bwl-cohero__btn--outline {
	color: #ffffff;
	box-shadow: inset 0 0 0 1px #ffffff;
}
.bwl-cohero__btn--outline:hover { color: #ffffff; opacity: 0.75; }

/* athlete photo: bleeds to the page's right edge, full panel height —
   same treatment as the Page hero (About us) image */
.bwl-cohero__photo {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 115%;                    /* TWEAK image size (15% over the panel, rises into the header zone) */
	width: auto;
	max-width: 63%;
	object-fit: contain;
	object-position: bottom right;
	z-index: 1;
	pointer-events: none;
}

/* --- Quick-links bubble --- */
.bwl-cohero__nav {
	position: absolute;
	right: calc(max(0px, (100% - var(--bwl-content)) / 2) + var(--co-pad-x));
	top: calc(100% - var(--co-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-cohero__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-cohero__nav-label--2 { margin-top: 18px; }   /* TWEAK gap above the 2nd group */
.bwl-cohero__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bwl-cohero__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-cohero__nav-list a:hover { color: var(--bwl-navy); opacity: 0.7; }
.bwl-cohero__nav-chev { flex: 0 0 auto; }

/* "See more" expander: mobile-only */
.bwl-cohero__nav-more { display: none; }

/* --- Below: navy intro paragraph (left of the hanging bubble) --- */
.bwl-cohero__below {
	max-width: var(--bwl-content);
	margin-inline: auto;
	padding-inline: var(--co-pad-x);
}
.bwl-cohero__below-intro {
	margin: 110px 0 0;               /* TWEAK panel → intro gap */
	max-width: 742px;                /* stays clear of the hanging bubble */
	color: var(--bwl-navy);
	font-size: 26px;
	font-weight: 300;
	line-height: 30px;
}

/* --- Mobile (first pass — fine-tune when the mobile Figma lands) --- */
@media (max-width: 900px) {
	.bwl-cohero { padding-bottom: 40px; }

	.bwl-cohero__clip { overflow: visible; }
	.bwl-cohero__panel { min-height: 0; border-radius: 0 0 16px 16px; }
	.bwl-cohero__inner { padding: 20px 24px 40px; }
	.bwl-cohero__content { max-width: none; }

	.bwl-cohero__crumbs { margin-bottom: 45px; }
	.bwl-cohero__crumb-here,
	.bwl-cohero__crumbs .bwl-cohero__crumb-chev { display: none; }   /* link only, per the Figma */
	.bwl-cohero__title { font-size: 34px; line-height: 38px; margin-bottom: 30px; }
	.bwl-cohero__intro { font-size: 20px; line-height: 32px; }   /* Figma: 20/32 */
	/* buttons stack vertically per the 362 Figma */
	.bwl-cohero__btns {
		flex-direction: column;
		align-items: flex-start;
		margin-top: 30px;
		gap: 20px;                   /* TWEAK gap between stacked buttons */
	}

	/* photo: full width, flowing after the panel, overlapping up onto it.
	   The desktop cut-out is very wide (athlete small inside it), so the
	   Figma's portrait-ish 362×403 frame CROPS into it — cover zooms the
	   athlete up big; the object-position % steers which part shows. */
	.bwl-cohero__photo {
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		max-width: none;
		height: auto;
		aspect-ratio: 362 / 403;                /* TWEAK frame shape (Figma: 362×403) */
		object-fit: cover;
		object-position: 75% bottom;            /* TWEAK horizontal focus (100% = right edge) */
		margin: -162px 0 0;                     /* TWEAK overlap up onto the panel (Figma: 162) */
		display: block;
	}

	/* bubble: in flow, boxed with 20px gutters, riding up over the photo */
	.bwl-cohero__nav {
		position: relative;
		right: auto;
		top: auto;
		width: auto;
		margin: -300px 20px 0;       /* TWEAK pull-up over the photo (Figma: bubble high on the photo) */
		padding: 15px 21px 18px;
		border-radius: 16px;
		box-shadow: 6px 6px 0 var(--bwl-cyan);
	}
	/* photo hidden on mobile (toggle) or missing: hide it, grow the panel so
	   ALL the text shows (the bubble overlap eats 60px of the panel bottom),
	   and let the bubble only overlap the panel edge, not a photo */
	.bwl-cohero--photo-hide-m .bwl-cohero__photo { display: none; }
	.bwl-cohero--no-photo .bwl-cohero__inner,
	.bwl-cohero--photo-hide-m .bwl-cohero__inner { padding-bottom: 110px; }   /* TWEAK text ↔ bubble air */
	.bwl-cohero--no-photo .bwl-cohero__nav,
	.bwl-cohero--photo-hide-m .bwl-cohero__nav { margin-top: -60px; }   /* TWEAK */

	/* collapsed per the Figma: label + 2 links, the rest behind "See more";
	   chevrons rotate to point right, rows on a roomy 30px line */
	.bwl-cohero__nav-list a { line-height: 30px; padding: 0; }
	.bwl-cohero__nav-chev { transform: rotate(-90deg); }
	.bwl-cohero__nav:not(.is-open) .bwl-cohero__nav-item:nth-child(n + 3),
	.bwl-cohero__nav:not(.is-open) .bwl-cohero__nav-label--2,
	.bwl-cohero__nav:not(.is-open) .bwl-cohero__nav-list--2 {
		display: none;
	}
	.bwl-cohero__nav-more {
		display: inline-flex;
		align-items: center;
		gap: 16px;                   /* 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-cohero__nav.is-open .bwl-cohero__nav-more { display: none; }

	.bwl-cohero__below-intro { margin-top: 40px; font-size: 20px; line-height: 26px; }
}