/* BJC Content Sections smart styles — v0.5.0 */

.bjc-cs-design-classic-split .bjc-cs-inner {
	display: flex;
	align-items: center;
	gap: var(--bjc-cs-gap);
}

.bjc-cs-design-classic-split .bjc-cs-media,
.bjc-cs-design-classic-split .bjc-cs-content {
	flex: 1 1 50%;
}

.bjc-cs-design-classic-split.bjc-cs-media-right .bjc-cs-media {
	order: 2;
}

.bjc-cs-design-classic-split.bjc-cs-media-right .bjc-cs-content {
	order: 1;
}

.bjc-cs-design-stacked .bjc-cs-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3.25rem);
}

.bjc-cs-design-stacked .bjc-cs-media {
	width: min(100%, 1100px);
}

.bjc-cs-design-stacked .bjc-cs-content {
	width: min(100%, 760px);
	text-align: center;
}

.bjc-cs-design-editorial-offset .bjc-cs-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
	align-items: center;
	gap: 0;
	padding-block: clamp(3rem, 7vw, 7rem);
}

.bjc-cs-design-editorial-offset .bjc-cs-media {
	grid-column: 1 / 2;
	grid-row: 1;
	width: 100%;
}

.bjc-cs-design-editorial-offset .bjc-cs-content {
	position: relative;
	z-index: 1;
	grid-column: 2 / 3;
	grid-row: 1;
	margin-left: clamp(-5rem, -6vw, -2.5rem);
	padding: clamp(2rem, 4vw, 4rem);
	background: var(--e-global-color-primary-background, #fff);
	box-shadow: 0 18px 45px rgba(0, 0, 0, .12);
}

@media (max-width: 767px) {
.bjc-cs-design-classic-split .bjc-cs-inner,
	.bjc-cs-design-stacked .bjc-cs-inner {
		flex-direction: column;
		align-items: stretch;
	}
.bjc-cs-design-classic-split .bjc-cs-media,
	.bjc-cs-design-classic-split .bjc-cs-content,
	.bjc-cs-design-classic-split.bjc-cs-media-right .bjc-cs-media,
	.bjc-cs-design-classic-split.bjc-cs-media-right .bjc-cs-content {
		order: initial;
		flex-basis: auto;
	}
.bjc-cs-design-stacked .bjc-cs-content {
		text-align: left;
	}
.bjc-cs-design-editorial-offset .bjc-cs-inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
.bjc-cs-design-editorial-offset .bjc-cs-content {
		margin: -1.5rem 1rem 0;
		padding: clamp(1.5rem, 6vw, 2.5rem);
	}
}

.bjc-cs-design-editorial-overlap .bjc-cs-inner {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	align-items: center;
	padding-block: clamp(3rem, 7vw, 7rem);
}

.bjc-cs-design-editorial-overlap .bjc-cs-media {
	grid-column: 2;
	grid-row: 1;
}

.bjc-cs-design-editorial-overlap .bjc-cs-content {
	position: relative;
	z-index: 1;
	grid-column: 1 / 3;
	grid-row: 1;
	width: min(52%, 620px);
	margin-left: clamp(1rem, 5vw, 5rem);
	padding: clamp(2rem, 4vw, 4rem);
	background: var(--e-global-color-primary-background, #fff);
	box-shadow: 0 18px 45px rgba(0, 0, 0, .12);
}

.bjc-cs-design-showcase .bjc-cs-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(2rem, 4vw, 3.75rem);
	padding-block: clamp(4rem, 8vw, 8rem);
}

.bjc-cs-design-showcase .bjc-cs-content {
	width: min(100%, 760px);
	text-align: center;
}

.bjc-cs-design-showcase .bjc-cs-heading {
	font-size: clamp(2rem, 5vw, 4.75rem);
	line-height: 1.02;
}

.bjc-cs-design-showcase .bjc-cs-media {
	width: min(100%, 1280px);
}

.bjc-cs-design-colour-panel {
	padding-block: clamp(1.5rem, 4vw, 4rem);
}

.bjc-cs-design-colour-panel .bjc-cs-panel-shell {
	padding-inline: clamp(1rem, 4vw, 4rem);
}

.bjc-cs-design-colour-panel .bjc-cs-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
	align-items: center;
	gap: var(--bjc-cs-gap);
	padding: clamp(2rem, 5vw, 5rem);
	background: color-mix(in srgb, currentColor 5%, transparent);
	border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	border-radius: 18px;
}

.bjc-cs-design-colour-panel .bjc-cs-media > img {
	border-radius: 10px;
}

.bjc-cs-design-full-band .bjc-cs-band-bg {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background: color-mix(in srgb, currentColor 6%, transparent);
}

.bjc-cs-design-full-band .bjc-cs-inner {
	display: grid;
	grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
	align-items: center;
	gap: var(--bjc-cs-gap);
	width: min(100% - 2rem, 1240px);
	margin-inline: auto;
	padding-block: clamp(3rem, 7vw, 6rem);
}

.bjc-cs-design-full-band .bjc-cs-media > img {
	max-height: 620px;
	object-fit: cover;
}

.bjc-cs-design-statement .bjc-cs-inner {
	display: flex;
	justify-content: center;
	padding-block: clamp(5rem, 11vw, 10rem);
}

.bjc-cs-design-statement .bjc-cs-content {
	width: min(100%, 980px);
	text-align: center;
}

.bjc-cs-design-statement .bjc-cs-heading {
	font-size: clamp(2.5rem, 7vw, 6.5rem);
	line-height: .98;
	letter-spacing: -.025em;
}

.bjc-cs-design-statement .bjc-cs-body {
	width: min(100%, 720px);
	margin: 1.5rem auto 0;
	font-size: clamp(1rem, 1.5vw, 1.2rem);
}

@media (max-width: 767px) {
.bjc-cs-design-editorial-overlap .bjc-cs-inner,
	.bjc-cs-design-colour-panel .bjc-cs-inner,
	.bjc-cs-design-full-band .bjc-cs-inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
.bjc-cs-design-editorial-overlap .bjc-cs-media,
	.bjc-cs-design-editorial-overlap .bjc-cs-content {
		width: auto;
		margin: 0;
	}
.bjc-cs-design-editorial-overlap .bjc-cs-content {
		margin: -1.5rem 1rem 0;
		padding: clamp(1.5rem, 6vw, 2.5rem);
	}
.bjc-cs-design-colour-panel .bjc-cs-inner {
		gap: 1.75rem;
		padding: 1.5rem;
		border-radius: 12px;
	}
.bjc-cs-design-full-band .bjc-cs-inner {
		width: min(100% - 2rem, 1240px);
		gap: 1.75rem;
	}
}

.bjc-cs-design-editorial-offset.bjc-cs-media-right .bjc-cs-media { grid-column: 2 / 3; }

.bjc-cs-design-editorial-offset.bjc-cs-media-right .bjc-cs-content {
	grid-column: 1 / 2;
	margin-left: 0;
	margin-right: clamp(-5rem, -6vw, -2.5rem);
}

.bjc-cs-design-editorial-overlap.bjc-cs-media-left .bjc-cs-media { grid-column: 1; }

.bjc-cs-design-editorial-overlap.bjc-cs-media-left .bjc-cs-content {
	justify-self: end;
	margin-left: 0;
	margin-right: clamp(1rem, 5vw, 5rem);
}

.bjc-cs-design-editorial-overlap.bjc-cs-media-right .bjc-cs-media { grid-column: 2; }

.bjc-cs-design-editorial-overlap.bjc-cs-media-right .bjc-cs-content {
	justify-self: start;
	margin-left: clamp(1rem, 5vw, 5rem);
	margin-right: 0;
}

.bjc-cs-design-edge-feature .bjc-cs-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
	align-items: stretch;
	min-height: 520px;
	padding: 0;
}

.bjc-cs-design-edge-feature .bjc-cs-media { min-height: 100%; }

.bjc-cs-design-edge-feature .bjc-cs-media > img,
.bjc-cs-design-edge-feature .bjc-cs-embed > iframe,
.bjc-cs-design-edge-feature .bjc-cs-embed > video,
.bjc-cs-design-edge-feature .bjc-cs-self-video > video { width: 100%; height: 100%; object-fit: cover; }

.bjc-cs-design-edge-feature .bjc-cs-content { display:flex; flex-direction:column; justify-content:center; padding: clamp(2.5rem, 6vw, 6rem); }

.bjc-cs-design-edge-feature.bjc-cs-media-right .bjc-cs-media { order: 2; }

.bjc-cs-design-edge-feature.bjc-cs-media-right .bjc-cs-content { order: 1; }

.bjc-cs-design-inset-card { padding-block: clamp(2rem, 5vw, 5rem); }

.bjc-cs-design-inset-card .bjc-cs-inner {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(300px, 1.1fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
	padding: clamp(2rem, 5vw, 4rem);
	border: 1px solid rgba(0,0,0,.10);
	border-radius: 22px;
	box-shadow: 0 20px 60px rgba(0,0,0,.07);
}

.bjc-cs-design-inset-card .bjc-cs-media > img { border-radius: 14px; }

.bjc-cs-design-inset-card.bjc-cs-media-right .bjc-cs-media { order: 2; }

.bjc-cs-design-inset-card.bjc-cs-media-right .bjc-cs-content { order: 1; }

@media (max-width: 767px) {
.bjc-cs-design-editorial-offset.bjc-cs-media-right .bjc-cs-content { margin:-1.5rem 1rem 0; }
.bjc-cs-design-editorial-overlap.bjc-cs-media-left .bjc-cs-content,
	.bjc-cs-design-editorial-overlap.bjc-cs-media-right .bjc-cs-content { margin:-1.5rem 1rem 0; width:auto; }
}

.bjc-cs-design-editorial-offset.bjc-cs-media-right .bjc-cs-inner {
	grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr);
}

.bjc-cs-design-editorial-offset.bjc-cs-media-right .bjc-cs-media {
	grid-column: 2 / 3;
}

.bjc-cs-design-editorial-offset.bjc-cs-media-right .bjc-cs-content {
	grid-column: 1 / 2;
	margin-left: 0;
	margin-right: clamp(-5rem, -6vw, -2.5rem);
}

.bjc-cs-design-editorial-overlap.bjc-cs-media-left .bjc-cs-inner {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
}

.bjc-cs-design-editorial-overlap.bjc-cs-media-left .bjc-cs-media {
	grid-column: 1;
}

.bjc-cs-design-editorial-overlap.bjc-cs-media-left .bjc-cs-content {
	grid-column: 1 / 3;
	justify-self: end;
	margin-left: 0;
	margin-right: clamp(1rem, 5vw, 5rem);
}

.bjc-cs-design-editorial-overlap.bjc-cs-media-right .bjc-cs-inner {
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}

.bjc-cs-design-editorial-overlap.bjc-cs-media-right .bjc-cs-media {
	grid-column: 2;
}

.bjc-cs-design-editorial-overlap.bjc-cs-media-right .bjc-cs-content {
	grid-column: 1 / 3;
	justify-self: start;
	margin-left: clamp(1rem, 5vw, 5rem);
	margin-right: 0;
}

.bjc-cs-design-edge-feature.bjc-cs-media-right .bjc-cs-inner {
	grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
}

.bjc-cs-design-edge-feature.bjc-cs-media-left .bjc-cs-inner {
	grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
}

@media (max-width: 767px) {
.bjc-cs-design-editorial-offset.bjc-cs-media-right .bjc-cs-inner,
	.bjc-cs-design-editorial-overlap.bjc-cs-media-left .bjc-cs-inner,
	.bjc-cs-design-editorial-overlap.bjc-cs-media-right .bjc-cs-inner,
	.bjc-cs-design-edge-feature.bjc-cs-media-left .bjc-cs-inner,
	.bjc-cs-design-edge-feature.bjc-cs-media-right .bjc-cs-inner {
		display: flex;
		flex-direction: column;
	}
}

/* v0.5.1 — true mirrored variants */
.bjc-cs-design-inset-card.bjc-cs-media-left .bjc-cs-inner {
	grid-template-columns: minmax(0, .9fr) minmax(300px, 1.1fr);
}
.bjc-cs-design-inset-card.bjc-cs-media-left .bjc-cs-media { grid-column: 1; grid-row: 1; }
.bjc-cs-design-inset-card.bjc-cs-media-left .bjc-cs-content { grid-column: 2; grid-row: 1; }
.bjc-cs-design-inset-card.bjc-cs-media-right .bjc-cs-inner {
	grid-template-columns: minmax(300px, 1.1fr) minmax(0, .9fr);
}
.bjc-cs-design-inset-card.bjc-cs-media-right .bjc-cs-media { grid-column: 2; grid-row: 1; order: initial; }
.bjc-cs-design-inset-card.bjc-cs-media-right .bjc-cs-content { grid-column: 1; grid-row: 1; order: initial; }

.bjc-cs-design-colour-panel.bjc-cs-media-left .bjc-cs-inner {
	grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
}
.bjc-cs-design-colour-panel.bjc-cs-media-left .bjc-cs-media { grid-column: 1; grid-row: 1; }
.bjc-cs-design-colour-panel.bjc-cs-media-left .bjc-cs-content { grid-column: 2; grid-row: 1; }
.bjc-cs-design-colour-panel.bjc-cs-media-right .bjc-cs-inner {
	grid-template-columns: minmax(280px, .9fr) minmax(0, 1fr);
}
.bjc-cs-design-colour-panel.bjc-cs-media-right .bjc-cs-media { grid-column: 2; grid-row: 1; }
.bjc-cs-design-colour-panel.bjc-cs-media-right .bjc-cs-content { grid-column: 1; grid-row: 1; }

.bjc-cs-design-full-band.bjc-cs-media-left .bjc-cs-inner {
	grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
}
.bjc-cs-design-full-band.bjc-cs-media-left .bjc-cs-media { grid-column: 1; grid-row: 1; }
.bjc-cs-design-full-band.bjc-cs-media-left .bjc-cs-content { grid-column: 2; grid-row: 1; }
.bjc-cs-design-full-band.bjc-cs-media-right .bjc-cs-inner {
	grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
}
.bjc-cs-design-full-band.bjc-cs-media-right .bjc-cs-media { grid-column: 2; grid-row: 1; }
.bjc-cs-design-full-band.bjc-cs-media-right .bjc-cs-content { grid-column: 1; grid-row: 1; }

@media (max-width: 767px) {
	.bjc-cs-design-inset-card.bjc-cs-media-left .bjc-cs-inner,
	.bjc-cs-design-inset-card.bjc-cs-media-right .bjc-cs-inner,
	.bjc-cs-design-colour-panel.bjc-cs-media-left .bjc-cs-inner,
	.bjc-cs-design-colour-panel.bjc-cs-media-right .bjc-cs-inner,
	.bjc-cs-design-full-band.bjc-cs-media-left .bjc-cs-inner,
	.bjc-cs-design-full-band.bjc-cs-media-right .bjc-cs-inner {
		display: flex;
		flex-direction: column;
	}
}


/* v0.5.5 unified Smart Section panel geometry */
.bjc-cs-smart .bjc-cs-content {
	--bjc-cs-content-border-color: transparent;
	--bjc-cs-content-border-width: 0px;
	--bjc-cs-content-radius: 0px;
	--bjc-cs-content-padding: 24px;
	border: var(--bjc-cs-content-border-width) solid var(--bjc-cs-content-border-color);
	border-radius: var(--bjc-cs-content-radius);
	background-clip: padding-box;
}

/* Designs whose content panel already owns deliberate padding keep that layout padding.
   Other designs receive controlled panel padding so a background/border never traps text/actions on an edge. */
.bjc-cs-design-classic-split .bjc-cs-content,
.bjc-cs-design-stacked .bjc-cs-content,
.bjc-cs-design-showcase .bjc-cs-content,
.bjc-cs-design-statement .bjc-cs-content,
.bjc-cs-design-inset-card .bjc-cs-content,
.bjc-cs-design-full-band .bjc-cs-content,
.bjc-cs-design-colour-panel .bjc-cs-content {
	padding: var(--bjc-cs-content-padding);
}

.bjc-cs-design-editorial-offset .bjc-cs-content,
.bjc-cs-design-editorial-overlap .bjc-cs-content,
.bjc-cs-design-edge-feature .bjc-cs-content {
	border-radius: var(--bjc-cs-content-radius);
}

/* Section background belongs to one surface only. Full Band paints its full-width band instead of the inner box. */
.bjc-cs-design-full-band {
	background: transparent;
}
.bjc-cs-design-full-band .bjc-cs-band-bg {
	background: color-mix(in srgb, currentColor 6%, transparent);
}

/* v0.5.6 background separation */
.bjc-cs-smart {
	background-color: transparent;
}
.bjc-cs-smart > .bjc-cs-inner {
	background-color: transparent;
}
.bjc-cs-design-full-band .bjc-cs-band-bg {
	background-color: color-mix(in srgb, currentColor 6%, transparent);
}


/* v0.8.32 — Smart Section shared media contract. */
.bjc-cs-smart .bjc-cs-self-video,
.bjc-cs-smart .bjc-cs-self-video > video {
	display:block;
	width:100%;
	max-width:100%;
	height:auto;
	margin:0;
	padding:0;
	border:0;
	outline:0;
	box-shadow:none;
}

.bjc-cs-design-edge-feature .bjc-cs-self-video {
	min-height:100%;
	height:100%;
	overflow:hidden;
}

.bjc-cs-design-edge-feature .bjc-cs-self-video > video {
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

.bjc-cs-design-colour-panel .bjc-cs-self-video > video,
.bjc-cs-design-full-band .bjc-cs-self-video > video,
.bjc-cs-design-inset-card .bjc-cs-self-video > video {
	border-radius:inherit;
}


/* =========================================================
   v0.9.4 SMART SECTION SPACING + OPTIONAL TOP MARKER
   ========================================================= */

.bjc-cs-smart > .bjc-cs-top-marker {
	position:relative;
	z-index:10;
	width:min(100% - 2rem,1240px);
	margin:0 auto clamp(.65rem,1.25vw,1.1rem);
	padding:0;
}

/* Shared marker presentation also applies when Smart CSS is loaded alone. */
.bjc-cs-smart .bjc-cs-top-marker { line-height:1.2; }
.bjc-cs-smart .bjc-cs-top-marker-left { text-align:left; }
.bjc-cs-smart .bjc-cs-top-marker-center { text-align:center; }
.bjc-cs-smart .bjc-cs-top-marker-right { text-align:right; }
.bjc-cs-smart .bjc-cs-top-marker-image {
	display:block;
	width:90px;
	max-width:100%;
	height:auto;
	margin-bottom:.35rem;
	object-fit:contain;
}
.bjc-cs-smart .bjc-cs-top-marker-left .bjc-cs-top-marker-image { margin-left:0; margin-right:auto; }
.bjc-cs-smart .bjc-cs-top-marker-center .bjc-cs-top-marker-image { margin-left:auto; margin-right:auto; }
.bjc-cs-smart .bjc-cs-top-marker-right .bjc-cs-top-marker-image { margin-left:auto; margin-right:0; }
.bjc-cs-smart .bjc-cs-top-marker-text {
	margin:0;
	padding:0;
	font-size:.78rem;
	font-weight:600;
	letter-spacing:.045em;
	line-height:1.3;
	color:inherit;
}

/* Tight real-world page flow: remove oversized built-in top/bottom padding. */
.bjc-cs-design-editorial-offset .bjc-cs-inner,
.bjc-cs-design-editorial-overlap .bjc-cs-inner {
	padding-top:clamp(1rem,2vw,2rem);
	padding-bottom:clamp(1rem,2vw,2rem);
}

.bjc-cs-design-showcase .bjc-cs-inner {
	padding-top:clamp(1.25rem,2.5vw,2.5rem);
	padding-bottom:clamp(1.25rem,2.5vw,2.5rem);
}

.bjc-cs-design-colour-panel {
	padding-top:clamp(.75rem,1.5vw,1.5rem);
	padding-bottom:clamp(.75rem,1.5vw,1.5rem);
}
.bjc-cs-design-colour-panel .bjc-cs-inner {
	padding-top:clamp(1.25rem,2.5vw,2.25rem);
	padding-bottom:clamp(1.25rem,2.5vw,2.25rem);
}

.bjc-cs-design-full-band .bjc-cs-inner {
	padding-top:clamp(1.25rem,2.5vw,2.5rem);
	padding-bottom:clamp(1.25rem,2.5vw,2.5rem);
}

.bjc-cs-design-statement .bjc-cs-inner {
	padding-top:clamp(2rem,4vw,4rem);
	padding-bottom:clamp(2rem,4vw,4rem);
}

.bjc-cs-design-edge-feature .bjc-cs-inner {
	min-height:0;
}

@media (max-width:767px) {
	.bjc-cs-smart > .bjc-cs-top-marker {
		width:calc(100% - 2rem);
		margin-bottom:.65rem;
	}
}