/* ============================================================
   BWL — Page hero (About)
   Navy panel: left-aligned content + a single right-hand image.
   Outside the clip: the orange speckle (bottom-left) and a light-
   blue nav-link bubble (bottom-right, hanging below the panel).
   ============================================================ */

.bwl-phero {
	--bwl-navy: #00085e;
	--bwl-orange: #ff4a00;
	--bwl-tint: #e0fbff;
	--bwl-cyan: #00ccff;
	--bwl-phero-gap: 250px;          /* TWEAK room below the panel for the hanging bubble */
	--bwl-nav-overhang: 220px;       /* TWEAK how far the nav bubble hangs below the panel
	                                    (≈ 2 link rows stay over the navy, the rest in white) */
	position: relative;
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif);
	padding-bottom: var(--bwl-phero-gap);
}

/* --- Navy panel (clips the image) --- */
.bwl-phero__panel {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-start;                 /* content anchored to the top (design), not centred */
	min-height: clamp(420px, 39vw, 560px);   /* TWEAK panel height (compact, per design) */
	background: var(--bwl-navy);
	border-radius: 0 0 20px 20px;
}

/* --- Right image (bleeds to the right edge) --- */
/* the <picture> just swaps the source per breakpoint; display:contents keeps
   the <img> as the real flex/positioned element. */
.bwl-phero__pic { display: contents; }
.bwl-phero__img {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 100%;                    /* TWEAK image size */
	width: auto;
	max-width: 55%;
	object-fit: contain;
	object-position: bottom right;
	z-index: 1;
	pointer-events: none;
}

/* --- Left content --- */
.bwl-phero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1600px;
	margin-inline: auto;
	/* top padding clears the floating header pill (~140px over the panel) +
	   the gap before the title */
	padding: 196px 24px 48px;   /* TWEAK top padding; 24px sides = the shared content gutter (aligns with Our Story) */
}
.bwl-phero__content {
	max-width: 700px;
}
.bwl-phero__title {
	margin: 0 0 24px;
	color: #ffffff;
	font-size: 64px;         /* Figma: 64 / 64 */
	font-weight: 900;
	line-height: 64px;
	text-transform: uppercase;
	overflow-wrap: break-word;
}
.bwl-phero__body {
	max-width: 700px;
	color: #ffffff;
	font-size: 20px;
	font-weight: 300;   /* Nobel Light (override of the universal 400 pin mirrored in main style.css) */
	line-height: 26px;
}
.bwl-phero__body p { margin: 0 0 1em; color: #ffffff; }
.bwl-phero__body p:last-child { margin-bottom: 0; }
.bwl-phero__body a { color: #ffffff; text-decoration: underline; }

/* --- Orange speckle (bottom-left, crossing the panel edge) ---
   Matches the homepage hero: anchored to the panel bottom, same size,
   offset and rotation. */
.bwl-phero__speckle {
	position: absolute;
	left: 0;
	bottom: var(--bwl-phero-gap);
	width: clamp(480px, 75vw, 1500px);                              /* match homepage hero */
	height: auto;
	transform: translate(-24%, calc(60% + 20px)) rotate(14deg);     /* match homepage hero */
	transform-origin: center;
	z-index: 3;
	pointer-events: none;
}

/* --- Nav-link bubble (bottom-right, hangs below the panel) --- */
.bwl-phero__nav {
	position: absolute;
	right: clamp(16px, 5vw, 90px);
	bottom: calc(var(--bwl-phero-gap) - var(--bwl-nav-overhang));
	z-index: 4;
	width: min(440px, 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-phero__nav-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--bwl-navy);
}
.bwl-phero__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bwl-phero__nav-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	color: var(--bwl-navy);
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	text-decoration: none;
}
.bwl-phero__nav-list a:hover { color: var(--bwl-navy); font-weight: 700; }
.bwl-phero__chev { flex: 0 0 auto; transition: transform 0.12s ease; }
.bwl-phero__chev path { transition: stroke-width 0.12s ease; }
/* the chevron picks up the hover too: thicker stroke (matches the bold text) + a small slide */
.bwl-phero__nav-list a:hover .bwl-phero__chev { transform: translateX(3px); }
.bwl-phero__nav-list a:hover .bwl-phero__chev path { stroke-width: 3; }

/* "See more" toggle — only used on mobile; all links show on desktop. */
.bwl-phero__more-cb {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.bwl-phero__more { display: none; }

/* --- Responsive --- */
@media (max-width: 900px) {
	.bwl-phero {
		padding-bottom: 32px;
		--bwl-bubble-rise: 92px;   /* how far the bubble (and the speckle's top) sit above the panel bottom */
	}

	/* stack: content (heading + body) then the image below, inside the panel */
	.bwl-phero__panel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}
	.bwl-phero__inner { order: 1; padding: 48px 24px 0; }
	.bwl-phero__title { font-size: 34px; line-height: 38px; }

	/* athlete image: shown, near-square, rounded, full width (with a small
	   inset) at the bottom of the panel */
	.bwl-phero__img {
		display: block;
		order: 2;
		position: static;
		inset: auto;
		width: auto;
		max-width: none;
		height: auto;
		align-self: stretch;
		aspect-ratio: 1 / 1;            /* square — upload a square image to the mobile field */
		object-fit: cover;
		object-position: center;        /* centred (the mobile image is already square) */
		border-radius: 16px;
		margin: 10px 0 0;               /* 10px gap after the text; full panel width */
	}

	/* anchor the speckle to the panel (stage), not the section, so it stays
	   put when the nav bubble expands and grows the section. */
	.bwl-phero__stage { position: relative; }

	/* speckle shown (like the homepage hero on mobile): wider than the
	   viewport so it bleeds off the bottom-left edge. */
	.bwl-phero__speckle {
		display: block;
		left: 0;
		/* stage bottom == panel bottom, so 100% is the panel edge; lift the
		   speckle's top by the bubble rise => its top sits on the bubble top. */
		top: calc(100% - var(--bwl-bubble-rise));
		bottom: auto;
		width: 220vw;                                /* >100vw bleeds off the page (10% bigger) */
		max-width: none;
		transform: translate(-30%, -20px) rotate(14deg);   /* TWEAK: Y nudges the speckle up(−)/down(+) from the bubble top */
	}

	/* nav bubble flows below the panel instead of overlapping; relative (not
	   static) so its z-index applies and it sits ABOVE the speckle */
	.bwl-phero__nav {
		position: relative;
		right: auto;                                   /* clear the desktop offsets (they'd shift a */
		bottom: auto;                                  /* relative element left/up) */
		z-index: 4;
		margin: calc(-1 * var(--bwl-bubble-rise)) auto 0;  /* centre the bubble; pulled up over the image (shared with the speckle) */
		width: min(440px, calc(100% - 32px));          /* 440 on tablet, full-minus-gutter on phones */
		border-radius: 16px;
		box-shadow: 6px 6px 0 var(--bwl-cyan);
	}
	.bwl-phero__nav-list a {
		padding: 3px 0;
		font-size: 16px;
		line-height: 30px;
	}

	/* collapse rows past the 2nd behind "See more" */
	.bwl-phero__nav-item--extra { display: none; }
	.bwl-phero__more-cb:checked ~ .bwl-phero__nav-list .bwl-phero__nav-item--extra { display: block; }

	.bwl-phero__more {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin-top: 6px;
		font-size: 16px;
		font-weight: 700;
		line-height: 24px;
		color: var(--bwl-navy);
		cursor: pointer;
	}
	/* +/- icon (plus when collapsed, minus when expanded) */
	.bwl-phero__more-icon {
		position: relative;
		flex: 0 0 auto;
		width: 14px;
		height: 14px;
	}
	.bwl-phero__more-icon::before,
	.bwl-phero__more-icon::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		background: var(--bwl-navy);
	}
	.bwl-phero__more-icon::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
	.bwl-phero__more-icon::after  { width: 2px; height: 12px; transform: translate(-50%, -50%); }
	.bwl-phero__more-cb:checked ~ .bwl-phero__more .bwl-phero__more-icon::after { opacity: 0; }
}