/*
 * BJC Media Frames v0.9.2
 * Decorative, content-neutral frames. Shortcode/plugin output retains control
 * of its own dimensions and responsive behaviour.
 */
.bjc-cs-media-frame {
	--bjc-mf-accent: var(--e-global-color-secondary, #50665a);
	--bjc-mf-background: transparent;
	--bjc-mf-padding: 14px;
	--bjc-mf-thickness: 2px;
	--bjc-mf-radius: 10px;
	position:relative;
	box-sizing:border-box;
	width:100%;
	max-width:none;
	color:inherit;
	overflow:visible;
}
.bjc-cs-media-frame *,
.bjc-cs-media-frame *::before,
.bjc-cs-media-frame *::after { box-sizing:border-box; }
.bjc-cs-media-frame-outer,
.bjc-cs-media-frame-inner { position:relative; width:100%; min-width:0; }
.bjc-cs-media-frame-inner { padding:var(--bjc-mf-padding); background:var(--bjc-mf-background); }
.bjc-cs-media-frame .bjc-cs-media { width:100%; max-width:none; margin:0; }
.bjc-cs-media-frame .bjc-cs-media > img,
.bjc-cs-media-frame .bjc-cs-self-video > video { display:block; width:100%; max-width:100%; height:auto; }
.bjc-cs-media-frame .bjc-cs-embed { width:100%; max-width:none; overflow:visible; }
.bjc-cs-media-frame .bjc-cs-embed > iframe,
.bjc-cs-media-frame .bjc-cs-embed > video { display:block; width:100%; max-width:100%; }

/* 1. Clean Gallery */
.bjc-cs-media-frame-clean-gallery .bjc-cs-media-frame-outer {
	padding:5px;
	border:var(--bjc-mf-thickness) solid var(--bjc-mf-accent);
	border-radius:var(--bjc-mf-radius);
}
.bjc-cs-media-frame-clean-gallery .bjc-cs-media-frame-inner {
	border:1px solid color-mix(in srgb,var(--bjc-mf-accent) 48%,transparent);
	border-radius:max(0px,calc(var(--bjc-mf-radius) - 5px));
}

/* 2. Cinema */
.bjc-cs-media-frame-cinema .bjc-cs-media-frame-outer {
	padding:clamp(7px,1vw,12px);
	border:calc(var(--bjc-mf-thickness) * 2) solid var(--bjc-mf-accent);
	border-radius:var(--bjc-mf-radius);
	background:color-mix(in srgb,var(--bjc-mf-accent) 16%,#111);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 14px 34px rgba(0,0,0,.16);
}
.bjc-cs-media-frame-cinema .bjc-cs-media-frame-inner {
	border:1px solid color-mix(in srgb,var(--bjc-mf-accent) 55%,#000);
	border-radius:max(0px,calc(var(--bjc-mf-radius) - 4px));
}

/* 3. Editorial */
.bjc-cs-media-frame-editorial { padding:8px 10px 10px 8px; }
.bjc-cs-media-frame-editorial::before,
.bjc-cs-media-frame-editorial::after {
	content:""; position:absolute; pointer-events:none;
}
.bjc-cs-media-frame-editorial::before {
	inset:0 18px 18px 0;
	border-top:calc(var(--bjc-mf-thickness) * 2) solid var(--bjc-mf-accent);
	border-left:calc(var(--bjc-mf-thickness) * 2) solid var(--bjc-mf-accent);
}
.bjc-cs-media-frame-editorial::after {
	inset:18px 0 0 18px;
	border-right:var(--bjc-mf-thickness) solid color-mix(in srgb,var(--bjc-mf-accent) 60%,transparent);
	border-bottom:var(--bjc-mf-thickness) solid color-mix(in srgb,var(--bjc-mf-accent) 60%,transparent);
}
.bjc-cs-media-frame-editorial .bjc-cs-media-frame-inner { border-radius:var(--bjc-mf-radius); }

/* 4. Technical */
.bjc-cs-media-frame-technical .bjc-cs-media-frame-outer {
	padding:7px;
	border:var(--bjc-mf-thickness) solid var(--bjc-mf-accent);
	clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% calc(100% - 22px),calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px),0 22px);
}
.bjc-cs-media-frame-technical .bjc-cs-media-frame-outer::before,
.bjc-cs-media-frame-technical .bjc-cs-media-frame-outer::after {
	content:""; position:absolute; z-index:2; pointer-events:none; background:var(--bjc-mf-accent);
}
.bjc-cs-media-frame-technical .bjc-cs-media-frame-outer::before { width:54px; height:4px; left:34px; top:8px; }
.bjc-cs-media-frame-technical .bjc-cs-media-frame-outer::after { width:4px; height:38px; right:8px; bottom:34px; }

/* 5. Soft Panel */
.bjc-cs-media-frame-soft-panel .bjc-cs-media-frame-outer {
	padding:5px;
	border-radius:var(--bjc-mf-radius);
	background:color-mix(in srgb,var(--bjc-mf-accent) 9%,transparent);
	box-shadow:0 12px 34px rgba(0,0,0,.10),inset 0 0 0 var(--bjc-mf-thickness) color-mix(in srgb,var(--bjc-mf-accent) 40%,transparent);
}
.bjc-cs-media-frame-soft-panel .bjc-cs-media-frame-inner {
	border-radius:max(0px,calc(var(--bjc-mf-radius) - 5px));
	box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bjc-mf-accent) 22%,transparent);
}

/* 6. Architectural */
.bjc-cs-media-frame-architectural { padding:8px; }
.bjc-cs-media-frame-architectural::before,
.bjc-cs-media-frame-architectural::after {
	content:""; position:absolute; pointer-events:none;
}
.bjc-cs-media-frame-architectural::before {
	inset:0;
	border:calc(var(--bjc-mf-thickness) * 2) solid var(--bjc-mf-accent);
	clip-path:polygon(0 0,34% 0,34% 7px,66% 7px,66% 0,100% 0,100% 100%,66% 100%,66% calc(100% - 7px),34% calc(100% - 7px),34% 100%,0 100%);
}
.bjc-cs-media-frame-architectural::after {
	inset:8px;
	border:1px solid color-mix(in srgb,var(--bjc-mf-accent) 52%,transparent);
}
.bjc-cs-media-frame-architectural .bjc-cs-media-frame-inner { border-radius:max(0px,calc(var(--bjc-mf-radius) - 4px)); }

/* 7. Accent Corners */
.bjc-cs-media-frame-accent-corners { padding:7px; }
.bjc-cs-media-frame-accent-corners::before,
.bjc-cs-media-frame-accent-corners::after {
	content:""; position:absolute; inset:0; pointer-events:none;
}
.bjc-cs-media-frame-accent-corners::before {
	background:
		linear-gradient(var(--bjc-mf-accent),var(--bjc-mf-accent)) left top/54px var(--bjc-mf-thickness) no-repeat,
		linear-gradient(var(--bjc-mf-accent),var(--bjc-mf-accent)) left top/var(--bjc-mf-thickness) 54px no-repeat,
		linear-gradient(var(--bjc-mf-accent),var(--bjc-mf-accent)) right bottom/54px var(--bjc-mf-thickness) no-repeat,
		linear-gradient(var(--bjc-mf-accent),var(--bjc-mf-accent)) right bottom/var(--bjc-mf-thickness) 54px no-repeat;
}
.bjc-cs-media-frame-accent-corners::after {
	background:
		linear-gradient(color-mix(in srgb,var(--bjc-mf-accent) 55%,transparent),color-mix(in srgb,var(--bjc-mf-accent) 55%,transparent)) right top/30px 1px no-repeat,
		linear-gradient(color-mix(in srgb,var(--bjc-mf-accent) 55%,transparent),color-mix(in srgb,var(--bjc-mf-accent) 55%,transparent)) right top/1px 30px no-repeat,
		linear-gradient(color-mix(in srgb,var(--bjc-mf-accent) 55%,transparent),color-mix(in srgb,var(--bjc-mf-accent) 55%,transparent)) left bottom/30px 1px no-repeat,
		linear-gradient(color-mix(in srgb,var(--bjc-mf-accent) 55%,transparent),color-mix(in srgb,var(--bjc-mf-accent) 55%,transparent)) left bottom/1px 30px no-repeat;
}

/* 8. Stage */
.bjc-cs-media-frame-stage { padding:clamp(7px,1vw,12px); }
.bjc-cs-media-frame-stage::before {
	content:""; position:absolute; inset:0; pointer-events:none;
	border-top:calc(var(--bjc-mf-thickness) * 2) solid var(--bjc-mf-accent);
	border-bottom:calc(var(--bjc-mf-thickness) * 2) solid var(--bjc-mf-accent);
	background:
		linear-gradient(90deg,var(--bjc-mf-accent),transparent 22%,transparent 78%,var(--bjc-mf-accent)) top/100% 1px no-repeat,
		linear-gradient(90deg,var(--bjc-mf-accent),transparent 22%,transparent 78%,var(--bjc-mf-accent)) bottom/100% 1px no-repeat;
}
.bjc-cs-media-frame-stage .bjc-cs-media-frame-outer {
	padding:5px;
	border-left:var(--bjc-mf-thickness) solid color-mix(in srgb,var(--bjc-mf-accent) 60%,transparent);
	border-right:var(--bjc-mf-thickness) solid color-mix(in srgb,var(--bjc-mf-accent) 60%,transparent);
}
.bjc-cs-media-frame-stage .bjc-cs-media-frame-inner {
	border-radius:var(--bjc-mf-radius);
	box-shadow:0 12px 30px rgba(0,0,0,.10);
}

@media (max-width:767px) {
	.bjc-cs-media-frame-editorial,
	.bjc-cs-media-frame-architectural,
	.bjc-cs-media-frame-accent-corners,
	.bjc-cs-media-frame-stage { padding:8px; }
}


/* v0.9.1 — compact container fit + optional caption/CTA. */
.elementor-widget-bjc-media-frame > .elementor-widget-container {
	margin:0;
	padding:0;
}

.bjc-cs-media-frame {
	margin:0;
	padding-block:0;
}

.bjc-cs-media-frame-footer {
	position:relative;
	z-index:3;
	display:block;
	width:100%;
	margin:0;
	padding-top:clamp(8px,1vw,14px);
	line-height:1.35;
}

.bjc-cs-media-frame > .bjc-cs-media-frame-footer {
	padding-inline:var(--bjc-mf-padding);
	padding-bottom:0;
}

.bjc-cs-media-frame-footer-left { text-align:left; }
.bjc-cs-media-frame-footer-center { text-align:center; }
.bjc-cs-media-frame-footer-right { text-align:right; }

.bjc-cs-media-frame-caption {
	display:block;
	margin:0;
	padding:0;
	font-size:20px;
	font-weight:600;
	line-height:1.25;
	color:inherit;
}

.bjc-cs-media-frame-cta {
	display:inline-block;
	margin-top:5px;
	padding:0;
	font-size:16px;
	font-weight:600;
	line-height:1.3;
	color:var(--bjc-mf-accent);
	text-decoration:none;
}

a.bjc-cs-media-frame-cta:hover,
a.bjc-cs-media-frame-cta:focus {
	text-decoration:underline;
	text-underline-offset:3px;
}

.bjc-cs-media-frame-cta span[aria-hidden="true"] {
	display:inline-block;
	margin-left:.18em;
	transition:transform .18s ease;
}

a.bjc-cs-media-frame-cta:hover span[aria-hidden="true"],
a.bjc-cs-media-frame-cta:focus span[aria-hidden="true"] {
	transform:translateX(.18em);
}

/*
 * Elementor canvas visibility:
 * give an uncustomised frame a stronger neutral accent in the editor only.
 * Live/custom colours remain untouched.
 */
body.elementor-editor-active .bjc-cs-media-frame {
	--bjc-mf-accent:#3f5147;
}

@media (max-width:767px) {
	.bjc-cs-media-frame { --bjc-mf-padding:10px; }
	.bjc-cs-media-frame-footer { padding-top:8px; }
}


/* v0.9.2 — Rich Text content inside Media Frames. */
.bjc-cs-media-frame-rich-text {
	display:block;
	width:100%;
	max-width:none;
	margin:0;
	padding:0;
	color:inherit;
	line-height:1.55;
	overflow-wrap:anywhere;
}

.bjc-cs-media-frame-rich-text > :first-child {
	margin-top:0;
}

.bjc-cs-media-frame-rich-text > :last-child {
	margin-bottom:0;
}

.bjc-cs-media-frame-rich-text p,
.bjc-cs-media-frame-rich-text ul,
.bjc-cs-media-frame-rich-text ol,
.bjc-cs-media-frame-rich-text blockquote {
	margin-top:0;
	margin-bottom:.85em;
}

.bjc-cs-media-frame-rich-text h1,
.bjc-cs-media-frame-rich-text h2,
.bjc-cs-media-frame-rich-text h3,
.bjc-cs-media-frame-rich-text h4,
.bjc-cs-media-frame-rich-text h5,
.bjc-cs-media-frame-rich-text h6 {
	margin-top:0;
	margin-bottom:.5em;
	color:inherit;
	line-height:1.15;
}

.bjc-cs-media-frame-rich-text a {
	color:var(--bjc-mf-accent);
	text-decoration:underline;
	text-underline-offset:3px;
}

.bjc-cs-media-frame-rich-text ul,
.bjc-cs-media-frame-rich-text ol {
	padding-left:1.4em;
}

.bjc-cs-media-frame-rich-text blockquote {
	padding:.25em 0 .25em 1em;
	border-left:3px solid var(--bjc-mf-accent);
}