/* ============================================================
   BWL — Blog article
   Hero: breadcrumb (link ‹ current), 40/700 title, meta row
   (cyan category pill + clock + read time), 26/32 intro — 7/12;
   hero picture 5/12 right (radius 20) over the grey backdrop
   panel (rounded bottom-right, chalk speckle top-right) with the
   blue-tint SHARE card under it. Then a full-bleed gallery
   carousel (arrows bottom-left), and the body row: 7/12 article
   content + 4/12 peach download cards that float with the scroll
   (view.js — same behaviour as the course detail booking card).
   ============================================================ */

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

	/* the actual content-column width (capped by the viewport) */
	--ba-col: min(calc(100vw - 2 * var(--bwl-gutter)), calc(var(--bwl-content) - 2 * var(--bwl-gutter)));

	/* TWEAK geometry */
	--ba-panel-bg: transparent;     /* hero backdrop panel colour (the Figma grey was a placeholder — panel now only stages the chalk speckle) */
	--ba-panel-h: 931px;            /* backdrop panel height */
	--ba-ggap: 32px;                /* gallery gap between slides (same as About the Event) */
	--ba-float-top: 110px;          /* download float: viewport offset (clears the sticky pill) */

	position: relative;
	padding-bottom: 60px;
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif);
	color: var(--bwl-navy);
}

.bwl-blog__inner {
	position: relative;
	z-index: 1;
	max-width: var(--bwl-content);
	margin-inline: auto;
	padding-inline: var(--bwl-gutter);
}

/* --- Hero backdrop panel: from ~20% of the column to the right screen
   edge, rounded bottom-right, chalk speckle clipped inside --- */
.bwl-blog__hero { position: relative; }
.bwl-blog__panel {
	position: absolute;
	top: 0;
	left: calc(50% - var(--ba-col) * 0.3);   /* = column left + 20% of the column */
	right: calc(50% - 50vw);
	height: var(--ba-panel-h);
	background: var(--ba-panel-bg);
	border-radius: 0 0 20px 0;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}
/* chalk speckle — CENTRE-anchored, tuned via the block's range sliders */
.bwl-blog__spk {
	position: absolute;
	left: var(--ba-spk-x, 85%);
	top: var(--ba-spk-y, 30%);
	width: var(--ba-spk-w, 120%);
	max-width: none;
	height: auto;
	transform: translate(-50%, -50%) rotate(var(--ba-spk-rot, 143deg));
	transform-origin: center;
	pointer-events: none;
}

/* --- Hero grid: text 7/12, picture 5/12 --- */
.bwl-blog__hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) calc(var(--ba-col) * 0.33);
	gap: 50px;                       /* TWEAK text ↔ picture gap */
	align-items: start;
	padding-top: 90px;               /* TWEAK space above the breadcrumb */
}

/* breadcrumb: underlined link ‹ current */
.bwl-blog__crumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 60px;                /* TWEAK breadcrumb → title gap */
}
.bwl-blog__crumb-link,
.bwl-blog__crumb-here {
	color: var(--bwl-navy);
	font-size: 12px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}
.bwl-blog__crumb-link { text-decoration: underline; }
.bwl-blog__crumb-link:hover { color: var(--bwl-navy); opacity: 0.7; }
.bwl-blog__crumb-chev { flex: 0 0 auto; }

.bwl-blog__title {
	margin: 0 0 46px;                /* TWEAK title → meta gap */
	max-width: 636px;
	color: var(--bwl-navy);
	font-size: 40px;
	font-weight: 700;
	line-height: 46px;
}

/* meta: cyan category pill + clock + read time */
.bwl-blog__meta {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0 0 60px;                /* TWEAK meta → intro gap */
}
.bwl-blog__cat {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px 5px;
	background: var(--bwl-cyan);
	border-radius: 34px;
	color: var(--bwl-navy);
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}
.bwl-blog__read {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bwl-navy);
	font-size: 12px;
	font-weight: 300;
	line-height: 12px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}
.bwl-blog__clock { flex: 0 0 auto; }

.bwl-blog__intro {
	margin: 0;
	max-width: 747px;
	color: var(--bwl-navy);
	font-size: 26px;
	font-weight: 300;
	line-height: 32px;
}

/* hero picture + share card (right column) */
.bwl-blog__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 522 / 375;
	object-fit: cover;
	border-radius: 20px;
}
.bwl-blog__share {
	margin-top: 60px;                /* TWEAK picture → share gap */
	margin-left: auto;
	width: min(293px, 100%);         /* right-aligned with the picture edge */
	padding: 15px 36px 20px;
	background: var(--bwl-tint);
	border: 1px solid var(--bwl-cyan);
	border-radius: 20px;
	box-shadow: 12px 12px 0 var(--bwl-cyan);
}
.bwl-blog__share-label {
	display: block;
	margin-bottom: 10px;
	color: var(--bwl-navy);
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}
.bwl-blog__share-icons {
	display: flex;
	align-items: center;
	gap: 25px;
}
.bwl-blog__share-link {
	display: inline-flex;
	line-height: 0;
	transition: opacity 0.15s ease;
}
.bwl-blog__share-link:hover { opacity: 0.7; }

/* --- Gallery: full-bleed carousel, images run off BOTH screen edges --- */
.bwl-blog__gallery {
	position: relative;
	z-index: 1;
	margin-top: 76px;                /* TWEAK hero → gallery gap */
}
.bwl-blog__track {
	display: flex;
	gap: var(--ba-ggap);
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	margin-inline: calc(50% - 50vw);
	padding-inline: max(var(--bwl-gutter), calc((100vw - var(--bwl-content)) / 2 + var(--bwl-gutter)));
	scroll-padding-left: max(var(--bwl-gutter), calc((100vw - var(--bwl-content)) / 2 + var(--bwl-gutter)));
}
.bwl-blog__track::-webkit-scrollbar { display: none; }
/* wrapper does radius + clip (crisp corners); img fills it */
.bwl-blog__slide {
	flex: 0 0 calc((var(--ba-col) - 2 * var(--ba-ggap)) / 2.5);   /* 2 full + a ~50% peek of the 3rd (About the Event) */
	scroll-snap-align: start;
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	isolation: isolate;
}
.bwl-blog__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 489 / 375;
	object-fit: cover;
	border-radius: 0;
}
/* arrows: bottom-LEFT under the track */
.bwl-blog__nav {
	display: flex;
	justify-content: flex-start;
	gap: 13px;
	margin-top: 29px;                /* TWEAK gallery → arrows gap */
	max-width: var(--bwl-content);
	margin-inline: auto;
	padding-inline: var(--bwl-gutter);
}
.bwl-blog__arrow {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	transition: opacity 0.15s ease;
}
.bwl-blog__arrow:disabled { opacity: 0.35; cursor: default; }

/* --- Body row: 7/12 content + 4/12 floating downloads --- */
.bwl-blog__body-row {
	display: grid;
	grid-template-columns: calc(var(--ba-col) * 7 / 12) calc(var(--ba-col) * 4 / 12);   /* content 7/12, downloads 4/12 */
	gap: calc(var(--ba-col) * 1 / 12);   /* exactly one column between them */
	align-items: stretch;            /* the aside spans the row = float limit */
	margin-top: 90px;                /* TWEAK gallery → body gap */
}
/* no downloads: the layout must NOT change (Gary's note) — the copy keeps
   the same 7/12 column and the empty 4/12 lane stays reserved */
.bwl-blog__body-row--nodl { grid-template-columns: calc(var(--ba-col) * 7 / 12) calc(var(--ba-col) * 4 / 12); }

/* article typography (h2/h3/p/blockquote from the Figma) — the grid column
   IS the 7/12 width, no extra cap (a cap re-inflated the gap) */
.bwl-blog__content { min-width: 0; }
.bwl-blog__content > *:first-child { margin-top: 0; }
.bwl-blog__content h2 {
	margin: 60px 0 30px;             /* TWEAK section gaps */
	color: var(--bwl-navy);
	font-size: 40px;
	font-weight: 700;
	line-height: 42px;
}
.bwl-blog__content h3 {
	margin: 50px 0 30px;
	color: var(--bwl-navy);
	font-size: 32px;
	font-weight: 700;
	line-height: 42px;
}
.bwl-blog__content p {
	margin: 0 0 1.3em;
	color: var(--bwl-navy);
	font-size: 20px;
	font-weight: 300;
	line-height: 26px;
}
/* pull-quote / lead paragraphs */
.bwl-blog__content blockquote {
	margin: 50px 0;
	padding: 0;
	border: 0;                       /* kill the theme's blockquote bar */
	font-style: normal;
}
.bwl-blog__content blockquote p {
	font-size: 26px;
	font-weight: 300;
	line-height: 32px;
}
.bwl-blog__content a { color: var(--bwl-navy); text-decoration: underline; }
.bwl-blog__content a:hover { opacity: 0.7; }
.bwl-blog__content img { border-radius: 20px; height: auto; }
/* two pictures on the same line: split the row evenly with a gap */
.bwl-blog__content img + img { margin-left: 40px; }   /* TWEAK gap (fallback for old browsers) */
@supports selector(p:has(> img)) {
	.bwl-blog__content p:has(> img + img) {
		display: flex;
		gap: 40px;                   /* TWEAK gap between side-by-side images */
		flex-wrap: wrap;
	}
	.bwl-blog__content p:has(> img + img) img {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		margin: 0;
		object-fit: cover;
	}
}
.bwl-blog__content ul,
.bwl-blog__content ol {
	margin: 0 0 1.3em;
	padding-left: 24px;
	color: var(--bwl-navy);
	font-size: 20px;
	font-weight: 300;
	line-height: 26px;
}

/* downloads: peach cards, floating alongside the content (view.js) */
.bwl-blog__dl { position: relative; }
.bwl-blog__dl-inner {
	display: flex;
	flex-direction: column;
	gap: 30px;                       /* TWEAK gap between cards (Figma: 30) */
}
.bwl-blog__dl-card {
	display: flex;
	align-items: center;
	gap: 22px;
	min-height: 93px;
	padding: 20px 26px;
	background: var(--bwl-peach);
	border-radius: 20px;
	color: var(--bwl-navy);
	font-size: 20px;
	font-weight: 300;
	line-height: 26px;
	text-decoration: none;
}
.bwl-blog__dl-svg { flex: 0 0 auto; }
/* hover: the arrow drops into the tray (same as Key downloads) */
.bwl-blog__dl-arrow { transition: transform 0.2s ease; }
.bwl-blog__dl-card:hover .bwl-blog__dl-arrow { transform: translateY(5px); }
.bwl-blog__dl-card:hover { color: var(--bwl-navy); }
.bwl-blog__dl-label { color: var(--bwl-navy); }

/* stray empty paragraphs from the editor must not stretch the column */
.bwl-blog__content p:empty { display: none; }

/* editable orange CTA at the bottom of the article
   (a.-prefixed so the content's link styling can't underline it) */
/* the block's own button — and any "button" link inside the copy (the old
   CMS marked call-to-action links as class="button pink"; the migrated
   articles/pages keep that class) gets the same orange pill */
a.bwl-blog__btn,
.bwl-blog__content a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;                /* TWEAK content → button gap */
	padding: 8px 20px;
	background: #ff4a00;
	border-radius: 20px;
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
	transition: background 0.15s ease;
}
a.bwl-blog__btn:hover,
.bwl-blog__content a.button:hover { background: #d63c00; color: #ffffff; opacity: 1; }
.bwl-blog__content a.button { margin-top: 0; margin-right: 8px; }   /* in-copy: flows with the paragraph */

.bwl-blog__placeholder { color: #6b7280; }

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

	/* stacked in the 360 Figma's order: crumb → title → meta → picture →
	   share → intro (the two column wrappers dissolve, their children are
	   ordered directly) */
	.bwl-blog__hero-grid {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding-top: 24px;
	}
	.bwl-blog__hero-text,
	.bwl-blog__hero-media { display: contents; }
	.bwl-blog__crumbs { order: 1; margin-bottom: 40px; }
	.bwl-blog__title  { order: 2; margin-bottom: 20px; font-size: 26px; line-height: 30px; }
	.bwl-blog__meta   { order: 3; margin-bottom: 40px; gap: 46px; }
	.bwl-blog__image  { order: 4; margin-bottom: 30px; aspect-ratio: 319 / 300; }
	.bwl-blog__share  { order: 5; margin: 0 0 60px; }
	.bwl-blog__intro  { order: 6; font-size: 20px; line-height: 26px; }

	/* only the section link in the breadcrumb (per the 360 Figma) */
	.bwl-blog__crumb-here,
	.bwl-blog__crumbs .bwl-blog__crumb-chev { display: none; }

	.bwl-blog__share {
		margin-left: 0;
		width: 100%;
		padding: 18px 24px 20px;
		box-shadow: 6px 6px 0 var(--bwl-cyan);
	}

	.bwl-blog__gallery { margin-top: 60px; }
	.bwl-blog__slide { flex-basis: 86%; border-radius: 16px; }   /* one per view + peek (About the Event) */
	.bwl-blog__nav { margin-top: 20px; justify-content: center; }   /* arrows centred (360 Figma) */

	.bwl-blog__body-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		margin-top: 40px;
	}
	.bwl-blog__content h2 { font-size: 26px; line-height: 30px; margin: 60px 0 20px; }
	.bwl-blog__content h3 { font-size: 20px; line-height: 30px; margin: 40px 0 16px; }

	/* side-by-side pictures stack under each other on mobile */
	.bwl-blog__content img + img { margin: 16px 0 0; }
	@supports selector(p:has(> img)) {
		.bwl-blog__content p:has(> img + img) {
			flex-direction: column;
			gap: 16px;               /* TWEAK gap between stacked images */
		}
		.bwl-blog__content p:has(> img + img) img {
			flex: 0 0 auto;
			width: 100%;
			margin: 0;
		}
	}
	.bwl-blog__content p,
	.bwl-blog__content ul,
	.bwl-blog__content ol { font-size: 16px; line-height: 22px; }
	.bwl-blog__content blockquote p { font-size: 20px; line-height: 26px; }

	.bwl-blog__dl-inner { gap: 16px; }
	.bwl-blog__dl-card { min-height: 72px; padding: 14px 20px; font-size: 16px; line-height: 20px; }
}