/* BJC Smart Studio — canonical consolidated frontend stylesheet. */
.bjc-studio-section {
	--bjc-studio-gap:32px;
	--bjc-studio-accent:#6750a4;
	--bjc-studio-media-width:48%;
	--bjc-studio-media-align:center; /* legacy design default */
	--bjc-studio-media-vertical-align:center; /* legacy design default */
	--bjc-studio-media-x:0px;
	--bjc-studio-media-y:0px;
	--bjc-studio-media-shadow-x:0px;
	--bjc-studio-media-shadow-y:12px;
	--bjc-studio-media-shadow-blur:18px;
	--bjc-studio-media-shadow-color:rgba(0,0,0,.28);
	--bjc-studio-text-width:100%;
	--bjc-studio-text-align-box:start; /* legacy horizontal design default */
	--bjc-studio-text-horizontal-align:var(--bjc-studio-text-align-box);
	--bjc-studio-text-vertical-align:center; /* legacy design default */
	--bjc-studio-text-x:0px;
	--bjc-studio-text-y:0px;
	--bjc-studio-text-align:left;
	--bjc-studio-action-color:var(--bjc-studio-accent);
	--bjc-studio-action-text:#fff;
	--bjc-studio-line-color:var(--bjc-studio-accent);
	--bjc-studio-line-width:3px;
	--bjc-studio-line-inset:8%;
	--bjc-studio-line-offset:10px;
	--bjc-studio-line-radius:8px;
	box-sizing:border-box;
	position:relative;
	width:100%;
	min-width:0;
	color:var(--e-global-color-text,#333);
	background:transparent;
}
.bjc-studio-section *, .bjc-studio-section *::before, .bjc-studio-section *::after { box-sizing:border-box; }
.bjc-studio-inner { position:relative; width:100%; margin:0 auto; min-width:0; gap:var(--bjc-studio-gap); }
.bjc-studio-copy, .bjc-studio-media { min-width:0; }
.bjc-studio-media { translate:var(--bjc-studio-media-x) var(--bjc-studio-media-y); }
.bjc-studio-copy { position:relative; z-index:2; width:min(var(--bjc-studio-text-width),100%); justify-self:var(--bjc-studio-text-horizontal-align); align-self:var(--bjc-studio-text-vertical-align); translate:var(--bjc-studio-text-x) var(--bjc-studio-text-y); text-align:var(--bjc-studio-text-align); }
.bjc-studio-eyebrow { margin:0 0 .55rem; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--bjc-studio-accent); }
.bjc-studio-heading { margin:0 0 .65rem; font-size:clamp(2rem,4vw,4.5rem); line-height:1.02; }
.bjc-studio-subheading { margin:0 0 .9rem; font-size:clamp(1.05rem,1.7vw,1.35rem); line-height:1.35; opacity:.82; }
.bjc-studio-body { line-height:1.68; }
.bjc-studio-body > :first-child { margin-top:0; }
.bjc-studio-body > :last-child { margin-bottom:0; }

/* Canonical layout contract. Style Formatting controls placement. */
.bjc-studio-section.bjc-studio-arrangement-media-left .bjc-studio-inner,
.bjc-studio-section.bjc-studio-arrangement-text-left .bjc-studio-inner {
	display:grid;
	align-items:start;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

/*
 * v0.16.02 — Side-by-side media footprint isolation.
 *
 * Text remains the only content that determines the natural section height.
 * Media is a free visual layer: changing its width or X/Y position does not
 * participate in layout sizing and therefore cannot move the section bottom.
 */
.bjc-studio-arrangement-media-left .bjc-studio-copy {
	grid-column:2;
	grid-row:1;
}
.bjc-studio-arrangement-text-left .bjc-studio-copy {
	grid-column:1;
	grid-row:1;
}
.bjc-studio-arrangement-media-left .bjc-studio-media,
.bjc-studio-arrangement-text-left .bjc-studio-media {
	position:absolute;
	z-index:1;
	top:0;
	margin:0;
	width:var(--bjc-studio-media-width);
	max-width:none;
}
.bjc-studio-arrangement-media-left .bjc-studio-media {
	left:0;
}
.bjc-studio-arrangement-text-left .bjc-studio-media {
	right:0;
}

/* 0.16.77 — Style vertical arrangements. The original stylesheet only
 * defined stacking order inside the mobile breakpoint, leaving desktop
 * vertical selections without a layout and Media 1 at its intrinsic size.
 * Scope the vertical stage to Styles; Frame and horizontal layouts are intact.
 * Existing X/Y translations, media sizing and text formatting remain live. */
.bjc-studio-content-design.bjc-studio-arrangement-media-above .bjc-studio-inner,
.bjc-studio-content-design.bjc-studio-arrangement-text-above .bjc-studio-inner {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--bjc-studio-gap);
}
.bjc-studio-content-design.bjc-studio-arrangement-media-above .bjc-studio-media,
.bjc-studio-content-design.bjc-studio-arrangement-text-above .bjc-studio-media {
    position:relative;
    inset:auto;
    flex:0 0 auto;
    width:calc(var(--bjc-studio-media-width) * 1.2);
    max-width:100%;
    margin-inline:auto;
    align-self:center;
}
.bjc-studio-content-design.bjc-studio-arrangement-media-above .bjc-studio-copy,
.bjc-studio-content-design.bjc-studio-arrangement-text-above .bjc-studio-copy {
    flex:0 0 auto;
    width:min(var(--bjc-studio-text-width),100%);
    max-width:800px;
    margin-inline:auto;
    align-self:center;
}
.bjc-studio-content-design.bjc-studio-arrangement-media-above .bjc-studio-media,
.bjc-studio-content-design.bjc-studio-arrangement-text-above .bjc-studio-copy { order:1; }
.bjc-studio-content-design.bjc-studio-arrangement-media-above .bjc-studio-copy,
.bjc-studio-content-design.bjc-studio-arrangement-text-above .bjc-studio-media { order:2; }

/* Anchor side-by-side media to the inner stage top, not its text-driven height.
 * Media X/Y remains independently controlled by the existing translate property.
 * Do not use top:50% / translateY(-50%): text area height would move media. */

/*
 * With media removed from layout flow, the section's bottom spacing belongs
 * only to the text/content stage. Keep a small deliberate breathing space.
 */
.bjc-studio-section.bjc-studio-arrangement-media-left .bjc-studio-inner,
.bjc-studio-section.bjc-studio-arrangement-text-left .bjc-studio-inner {
	padding-bottom:clamp(8px,1vw,12px);
}


/* Decoration positioning is independent of text/media alignment. */
.bjc-studio-design-plugin-feature .bjc-studio-copy::before { margin-left:0; margin-right:auto; }
.bjc-studio-decoration-align-center.bjc-studio-design-plugin-feature .bjc-studio-copy::before { margin-left:auto; margin-right:auto; }
.bjc-studio-decoration-align-right.bjc-studio-design-plugin-feature .bjc-studio-copy::before { margin-left:auto; margin-right:0; }
.bjc-studio-decoration-align-center.bjc-studio-decoration-stripe::before { left:50%; right:auto; transform:translateX(-50%); }
.bjc-studio-decoration-align-right.bjc-studio-decoration-stripe::before { left:auto; right:0; }
.bjc-studio-decoration-align-left.bjc-studio-decoration-orbit::before { left:-90px; right:auto; }
.bjc-studio-decoration-align-left.bjc-studio-decoration-orbit::after { left:-20px; right:auto; }
.bjc-studio-decoration-align-center.bjc-studio-decoration-orbit::before { left:50%; right:auto; transform:translateX(-50%); }
.bjc-studio-decoration-align-center.bjc-studio-decoration-orbit::after { left:50%; right:auto; transform:translateX(-50%); }

/* Style Backgrounds — background-only treatments that do not consume pseudo-elements,
 * so they can coexist cleanly with Style Decorations and vertical lines. */
.bjc-studio-section {
    --bjc-studio-bg-accent:#6750a4;
    --bjc-studio-bg-secondary:#ffffff;
    --bjc-studio-bg-scale:48px;
    --bjc-studio-bg-strength:14%;
}
.bjc-studio-background-soft-circles {
    background-image:
        radial-gradient(circle var(--bjc-studio-bg-scale) at 16% 28%, color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 0 98%, transparent 100%),
        radial-gradient(circle var(--bjc-studio-bg-scale) at 38% 76%, color-mix(in srgb,var(--bjc-studio-bg-secondary) var(--bjc-studio-bg-strength),transparent) 0 98%, transparent 100%),
        radial-gradient(circle var(--bjc-studio-bg-scale) at 74% 24%, color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 0 98%, transparent 100%),
        radial-gradient(circle var(--bjc-studio-bg-scale) at 88% 72%, color-mix(in srgb,var(--bjc-studio-bg-secondary) var(--bjc-studio-bg-strength),transparent) 0 98%, transparent 100%) !important;
    background-size:auto !important;
}
.bjc-studio-background-corner-glow {
    background-image:
        radial-gradient(circle at 0 0, color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent), transparent 38%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb,var(--bjc-studio-bg-secondary) var(--bjc-studio-bg-strength),transparent), transparent 38%) !important;
    background-size:auto !important;
}
.bjc-studio-background-angled-panels {
    background-image:linear-gradient(125deg,
        color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 0 24%,
        transparent 24% 68%,
        color-mix(in srgb,var(--bjc-studio-bg-secondary) var(--bjc-studio-bg-strength),transparent) 68% 100%) !important;
    background-size:auto !important;
}
.bjc-studio-background-dots {
    background-image:radial-gradient(circle,color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 1.6px,transparent 1.8px) !important;
    background-size:var(--bjc-studio-bg-scale) var(--bjc-studio-bg-scale) !important;
}
.bjc-studio-background-grid {
    background-image:
        linear-gradient(color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 1px,transparent 1px),
        linear-gradient(90deg,color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 1px,transparent 1px) !important;
    background-size:var(--bjc-studio-bg-scale) var(--bjc-studio-bg-scale) !important;
}
.bjc-studio-background-diagonal-lines {
    background-image:repeating-linear-gradient(135deg,
        color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 0 2px,
        transparent 2px calc(var(--bjc-studio-bg-scale) / 2)) !important;
}
.bjc-studio-background-crosshatch {
    background-image:
        repeating-linear-gradient(45deg,color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 0 1px,transparent 1px calc(var(--bjc-studio-bg-scale) / 2)),
        repeating-linear-gradient(-45deg,color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 0 1px,transparent 1px calc(var(--bjc-studio-bg-scale) / 2)) !important;
}

/* Additional built-in Background Pack 0 designs (0.17.45). */
.bjc-studio-background-checkerboard {
    background-image:
        linear-gradient(45deg, color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 25%, transparent 25% 75%, color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 75%),
        linear-gradient(45deg, color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 25%, transparent 25% 75%, color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 75%) !important;
    background-position:0 0,calc(var(--bjc-studio-bg-scale) / 2) calc(var(--bjc-studio-bg-scale) / 2) !important;
    background-size:var(--bjc-studio-bg-scale) var(--bjc-studio-bg-scale) !important;
}
.bjc-studio-background-horizontal-bands {
    background-image:repeating-linear-gradient(0deg,
        color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 0 3px,
        transparent 3px calc(var(--bjc-studio-bg-scale) / 2)) !important;
    background-size:auto !important;
}
.bjc-studio-background-spotlight-beam {
    background-image:conic-gradient(from 155deg at 50% -18%,
        transparent 0deg,
        color-mix(in srgb,var(--bjc-studio-bg-accent) var(--bjc-studio-bg-strength),transparent) 23deg,
        color-mix(in srgb,var(--bjc-studio-bg-secondary) var(--bjc-studio-bg-strength),transparent) 45deg,
        transparent 68deg 360deg) !important;
    background-size:auto !important;
}

/* Decorations */
.bjc-studio-decoration-corner-lines::before,
.bjc-studio-decoration-corner-lines::after { content:""; position:absolute; width:70px; height:70px; pointer-events:none; opacity:.55; }
.bjc-studio-decoration-corner-lines::before { left:12px; top:12px; border-left:2px solid var(--bjc-studio-decoration-color, var(--bjc-studio-accent)); border-top:2px solid var(--bjc-studio-decoration-color, var(--bjc-studio-accent)); }
.bjc-studio-decoration-corner-lines::after { right:12px; bottom:12px; border-right:2px solid var(--bjc-studio-decoration-color, var(--bjc-studio-accent)); border-bottom:2px solid var(--bjc-studio-decoration-color, var(--bjc-studio-accent)); }
.bjc-studio-decoration-dots::before {
    content:"";
    position:absolute;
    z-index:5;
    top:18px;
    left:20px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--bjc-studio-decoration-color, var(--bjc-studio-accent));
    box-shadow:18px 0 0 color-mix(in srgb,var(--bjc-studio-decoration-color, var(--bjc-studio-accent)) 72%,transparent), 36px 0 0 color-mix(in srgb,var(--bjc-studio-decoration-color, var(--bjc-studio-accent)) 46%,transparent), 9px 16px 0 color-mix(in srgb,var(--bjc-studio-decoration-color, var(--bjc-studio-accent)) 58%,transparent), 27px 16px 0 color-mix(in srgb,var(--bjc-studio-decoration-color, var(--bjc-studio-accent)) 34%,transparent);
    opacity:.82;
    pointer-events:none;
}
.bjc-studio-decoration-align-center.bjc-studio-decoration-dots::before { left:50%; transform:translateX(-23px); }
.bjc-studio-decoration-align-right.bjc-studio-decoration-dots::before { left:auto; right:56px; }
.bjc-studio-decoration-stripe::before { content:""; position:absolute; left:0; top:0; bottom:0; width:7px; background:var(--bjc-studio-decoration-color, var(--bjc-studio-accent)); opacity:.8; pointer-events:none; }
.bjc-studio-decoration-orbit::before,
.bjc-studio-decoration-orbit::after { content:""; position:absolute; border:1px solid var(--bjc-studio-decoration-color, var(--bjc-studio-accent)); border-radius:50%; opacity:.18; pointer-events:none; }
.bjc-studio-decoration-orbit::before { width:220px; height:220px; right:-90px; top:-110px; }
.bjc-studio-decoration-orbit::after { width:110px; height:110px; right:-20px; top:-45px; }

/* Independent configurable vertical line decoration. */
.bjc-studio-vertical-line { position:absolute; z-index:6; top:var(--bjc-studio-line-inset); bottom:var(--bjc-studio-line-inset); width:var(--bjc-studio-line-width); border-radius:var(--bjc-studio-line-radius); pointer-events:none; }
.bjc-studio-line-side-left .bjc-studio-vertical-line { left:var(--bjc-studio-line-offset); }
.bjc-studio-line-side-center .bjc-studio-vertical-line { left:50%; transform:translateX(-50%); }
.bjc-studio-line-side-right .bjc-studio-vertical-line { right:var(--bjc-studio-line-offset); }
.bjc-studio-line-solid .bjc-studio-vertical-line { background:var(--bjc-studio-line-color); }
.bjc-studio-line-double .bjc-studio-vertical-line { width:calc(var(--bjc-studio-line-width) * 3); border-left:var(--bjc-studio-line-width) solid var(--bjc-studio-line-color); border-right:var(--bjc-studio-line-width) solid var(--bjc-studio-line-color); }
.bjc-studio-line-dashed .bjc-studio-vertical-line { background:repeating-linear-gradient(to bottom,var(--bjc-studio-line-color) 0 14px,transparent 14px 24px); }
.bjc-studio-line-dotted .bjc-studio-vertical-line { background:repeating-radial-gradient(circle at 50% calc(var(--bjc-studio-line-width)/2),var(--bjc-studio-line-color) 0 calc(var(--bjc-studio-line-width)/2),transparent calc(var(--bjc-studio-line-width)/2 + 1px) calc(var(--bjc-studio-line-width)*2.4)); }
.bjc-studio-line-tapered .bjc-studio-vertical-line { background:linear-gradient(to bottom,transparent,var(--bjc-studio-line-color) 16%,var(--bjc-studio-line-color) 84%,transparent); }

@media (max-width:767px) {
	.bjc-studio-section.bjc-studio-arrangement-media-left .bjc-studio-inner,
	.bjc-studio-section.bjc-studio-arrangement-text-left .bjc-studio-inner { display:flex; flex-direction:column; align-items:stretch; }
	.bjc-studio-section .bjc-studio-media { width:min(var(--bjc-studio-media-width),100%); align-self:var(--bjc-studio-media-align); }
	.bjc-studio-section .bjc-studio-copy { width:min(var(--bjc-studio-text-width),100%); align-self:var(--bjc-studio-text-horizontal-align); }
	.bjc-studio-arrangement-media-left .bjc-studio-media,
	.bjc-studio-arrangement-media-above .bjc-studio-media { order:1; }
	.bjc-studio-arrangement-media-left .bjc-studio-copy,
	.bjc-studio-arrangement-media-above .bjc-studio-copy { order:2; }
	.bjc-studio-arrangement-text-left .bjc-studio-copy,
	.bjc-studio-arrangement-text-above .bjc-studio-copy { order:1; }
	.bjc-studio-arrangement-text-left .bjc-studio-media,
	.bjc-studio-arrangement-text-above .bjc-studio-media { order:2; }
	.bjc-studio-design-stacked-feature .bjc-studio-media { order:1; }
	.bjc-studio-design-stacked-feature .bjc-studio-copy { order:2; }
	.bjc-studio-design-reverse-offset.bjc-studio-arrangement-media-left .bjc-studio-copy,
	.bjc-studio-design-reverse-offset.bjc-studio-arrangement-text-left .bjc-studio-copy { margin-left:0; margin-right:0; transform:none; }
}

/* Rich body content behaves consistently across the reading-oriented and general styles. */
.bjc-studio-body a { color:var(--bjc-studio-accent); text-underline-offset:2px; }
.bjc-studio-body h2, .bjc-studio-body h3, .bjc-studio-body h4,
.bjc-studio-body h5, .bjc-studio-body h6 { margin:1.05em 0 .45em; line-height:1.18; }
.bjc-studio-body blockquote {
	margin:1em 0; padding:.25em 0 .25em 1em;
	border-left:3px solid var(--bjc-studio-accent);
}
.bjc-studio-body ul, .bjc-studio-body ol { padding-left:1.4em; }

@media (max-width:767px) {
	.bjc-studio-design-magazine-feature .bjc-studio-inner,
	.bjc-studio-design-plugin-feature .bjc-studio-inner { padding:1.15rem; }
}

/* Manually scalable, vertically centred shortcode media inside geometric shapes.
 * The outer media box remains the clipping viewport while the immediate shortcode
 * output scales from its centre without resizing nested plugin controls or artwork. */
.bjc-studio-section:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded)
.bjc-studio-shortcode-shell > .bjc-studio-shortcode-embed {
	align-items:center;
}
.bjc-studio-section:not(.bjc-studio-shape-natural):not(.bjc-studio-shape-rounded)
.bjc-studio-shortcode-shell > .bjc-studio-shortcode-embed > :first-child {
	transform:scale(calc(var(--bjc-studio-shortcode-scale, 100) / 100));
	transform-origin:center center;
}

/* 0.16.66 — isolated Style Links. */
.bjc-studio-content-design .bjc-studio-actions {
    display: block;
    width: 100%;
    line-height: normal;
    margin-top: 12px;
}
.bjc-studio-content-design .bjc-studio-action {
    display: inline-block;
    color: var(--bjc-studio-action-color);
    text-decoration: none;
    line-height: 1.2;
}
.bjc-studio-content-design .bjc-studio-button {
    padding: .72em 1.15em;
    border: 2px solid var(--bjc-studio-action-color);
}
.bjc-studio-content-design .bjc-studio-button-filled,
.bjc-studio-content-design .bjc-studio-button-pill {
    background: var(--bjc-studio-action-color);
    color: var(--bjc-studio-action-text);
}
.bjc-studio-content-design .bjc-studio-button-outline {
    background: transparent;
    color: var(--bjc-studio-action-color);
}
.bjc-studio-content-design .bjc-studio-button-soft {
    background: color-mix(in srgb, var(--bjc-studio-action-color) 18%, transparent);
    color: var(--bjc-studio-action-color);
    border-color: transparent;
}
.bjc-studio-content-design .bjc-studio-button-pill {
    border-radius: 999px;
}

/* 0.16.66 — isolated Style media-shape contract.
 * Shape modules own geometry. This layer gives normal Styles the same reliable
 * media viewport behaviour already proven by the separate Frame system. */
.bjc-studio-content-design {
    --bjc-studio-media-fit: cover;
    --bjc-studio-media-focus: 50% 50%;
}
/* 0.16.66 — Style shaped-media centring mirrors the proven Frame contract. */
.bjc-studio-content-design:not(.bjc-studio-shape-natural) .bjc-studio-media {
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.bjc-studio-content-design.bjc-studio-shape-natural .bjc-studio-media {
    overflow:hidden;
}
.bjc-studio-content-design .bjc-studio-media > img,
.bjc-studio-content-design .bjc-studio-media > .bjc-studio-image,
.bjc-studio-content-design .bjc-studio-media > video,
.bjc-studio-content-design .bjc-studio-media > .bjc-studio-self-video {
    display:block;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:var(--bjc-studio-media-fit,cover) !important;
    object-position:var(--bjc-studio-media-focus,50% 50%) !important;
}
.bjc-studio-content-design .bjc-studio-media > iframe,
.bjc-studio-content-design .bjc-studio-media > .wp-video,
.bjc-studio-content-design .bjc-studio-media > .wp-video-shortcode {
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
}

.bjc-studio-content-design:not(.bjc-studio-shape-natural) .bjc-studio-media > :not(img):not(video) {
    width:100%;
    max-width:100%;
    margin:auto;
}
.bjc-studio-content-design:not(.bjc-studio-shape-natural) .bjc-studio-media > :not(img):not(video) iframe,
.bjc-studio-content-design:not(.bjc-studio-shape-natural) .bjc-studio-media > :not(img):not(video) video {
    display:block;
    width:100%;
    max-width:100%;
    margin:auto;
    object-fit:var(--bjc-studio-media-fit,cover);
    object-position:var(--bjc-studio-media-focus,50% 50%);
}
.bjc-studio-content-design:not(.bjc-studio-shape-natural) .bjc-studio-shortcode-shell {
    display:flex;
    align-items:center;
    justify-content:center;
}
.bjc-studio-content-design:not(.bjc-studio-shape-natural) .bjc-studio-shortcode-shell > .bjc-studio-shortcode-embed {
    width:100%; max-width:100%; margin:auto;
}


/* 0.16.66 — Style-only Text Only media state.
 * With no media selected, remove the unused two-column media footprint and
 * allow the existing Style text-width/alignment controls to govern the copy. */
.bjc-studio-content-design.bjc-studio-no-media .bjc-studio-inner {
    display: block;
}
.bjc-studio-content-design.bjc-studio-no-media .bjc-studio-copy {
    grid-column: auto;
    grid-row: auto;
}


/* 0.16.66 — Style-only Highlight Text media.
 * The normal Style media wrapper remains the shape owner, so existing Media
 * Size, X/Y, Shape, Background, Border, Radius, Padding and Shadow controls
 * continue to govern the highlighted-text object. */
.bjc-studio-content-design .bjc-studio-media.bjc-studio-style-text-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: var(--bjc-studio-media-focus, 50% 50%);
	background-size: var(--bjc-studio-media-fit, cover);
}
.bjc-studio-content-design .bjc-studio-style-text-stage .bjc-studio-style-highlight-text {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	line-height: normal;
	overflow-wrap: anywhere;
}
.bjc-studio-content-design .bjc-studio-style-text-stage .bjc-studio-style-highlight-text > :first-child { margin-top: 0; }
.bjc-studio-content-design .bjc-studio-style-text-stage .bjc-studio-style-highlight-text > :last-child { margin-bottom: 0; }


/* 0.16.66 — Highlight Text shadow correction.
 * The generic media drop-shadow remains untouched for established media.
 * Highlight Text uses a true box shadow on reliable box/radius shapes so the
 * shadow cannot colour the text-shape interior. */
.bjc-studio-content-design .bjc-studio-media.bjc-studio-style-text-stage {
	filter: none !important;
}
.bjc-studio-content-design.bjc-studio-shape-natural .bjc-studio-media.bjc-studio-style-text-stage,
.bjc-studio-content-design.bjc-studio-shape-square .bjc-studio-media.bjc-studio-style-text-stage,
.bjc-studio-content-design.bjc-studio-shape-rounded .bjc-studio-media.bjc-studio-style-text-stage,
.bjc-studio-content-design.bjc-studio-shape-circle .bjc-studio-media.bjc-studio-style-text-stage,
.bjc-studio-content-design.bjc-studio-shape-oval .bjc-studio-media.bjc-studio-style-text-stage,
.bjc-studio-content-design.bjc-studio-shape-arch .bjc-studio-media.bjc-studio-style-text-stage {
	box-shadow:
		var(--bjc-studio-media-shadow-x)
		var(--bjc-studio-media-shadow-y)
		var(--bjc-studio-media-shadow-blur)
		var(--bjc-studio-media-shadow-color);
}
/* The shadow switcher writes filter:none when off; use that state to suppress
 * the Highlight Text box-shadow as well. */

/* Optional Style Media 2. No Frame selectors or inherited Media 1 sizing. */
.bjc-studio-content-design .bjc-studio-inner:has(> .bjc-studio-media-two) { position: relative; }
.bjc-studio-content-design .bjc-studio-media-two { position: absolute; z-index: 2; top: 0; left: 50%; width: var(--bjc-studio-media-two-width, 30%); max-width: 100%; translate: var(--bjc-studio-media-two-x, 0px) var(--bjc-studio-media-two-y, 0px); }
.bjc-studio-content-design .bjc-studio-media-two-image { display: block; width: 100%; height: auto; }

/* Optional Style Media 3; independent of Media 1 and Media 2. */
.bjc-studio-content-design .bjc-studio-inner:has(> .bjc-studio-media-three) { position: relative; }
.bjc-studio-content-design .bjc-studio-media-three { position: absolute; z-index: 3; top: 0; left: 50%; width: var(--bjc-studio-media-three-width, 30%); max-width: 100%; translate: var(--bjc-studio-media-three-x, 0px) var(--bjc-studio-media-three-y, 0px); }
.bjc-studio-content-design .bjc-studio-media-three-image { display: block; width: 100%; height: auto; }

/* Optional Style Media 4; independent of Media 1, 2 and 3. */
.bjc-studio-content-design .bjc-studio-inner:has(> .bjc-studio-media-four) { position: relative; }
.bjc-studio-content-design .bjc-studio-media-four { position: absolute; z-index: 4; top: 0; left: 50%; width: var(--bjc-studio-media-four-width, 30%); max-width: 100%; translate: var(--bjc-studio-media-four-x, 0px) var(--bjc-studio-media-four-y, 0px); }
.bjc-studio-content-design .bjc-studio-media-four-image { display: block; width: 100%; height: auto; }


/* 0.16.72: optional Style media border/radius containment; no Frame changes. */
.bjc-studio-content-design .bjc-studio-media-two { box-sizing: border-box; border: 0 solid transparent; border-radius: 0; }
.bjc-studio-content-design .bjc-studio-media-two-image { border-radius: inherit; }
.bjc-studio-content-design .bjc-studio-media-three { box-sizing: border-box; border: 0 solid transparent; border-radius: 0; }
.bjc-studio-content-design .bjc-studio-media-three-image { border-radius: inherit; }
.bjc-studio-content-design .bjc-studio-media-four { box-sizing: border-box; border: 0 solid transparent; border-radius: 0; }
.bjc-studio-content-design .bjc-studio-media-four-image { border-radius: inherit; }

/* 0.16.80 — Style media layers above the text box. Preserve independent
 * sizing/positioning and the existing Frame stacking rules. */
.bjc-studio-content-design .bjc-studio-copy { z-index: 2; }
.bjc-studio-content-design .bjc-studio-media { z-index: 3; }
.bjc-studio-content-design .bjc-studio-media-two { z-index: 4; }
.bjc-studio-content-design .bjc-studio-media-three { z-index: 5; }
.bjc-studio-content-design .bjc-studio-media-four { z-index: 6; }

/* 0.16.81 — opt-in aspect ratios for ordinary Styles only. Existing shape
 * defaults, all clipped shapes and all Frame geometry remain unchanged. */
.bjc-studio-content-design:is(.bjc-studio-shape-square,.bjc-studio-shape-rounded,.bjc-studio-shape-oval,.bjc-studio-shape-arch).bjc-studio-ratio-16-9 .bjc-studio-media { aspect-ratio:16 / 9 !important; }
.bjc-studio-content-design:is(.bjc-studio-shape-square,.bjc-studio-shape-rounded,.bjc-studio-shape-oval,.bjc-studio-shape-arch).bjc-studio-ratio-4-3 .bjc-studio-media { aspect-ratio:4 / 3 !important; }
.bjc-studio-content-design:is(.bjc-studio-shape-square,.bjc-studio-shape-rounded,.bjc-studio-shape-oval,.bjc-studio-shape-arch).bjc-studio-ratio-1-1 .bjc-studio-media { aspect-ratio:1 / 1 !important; }
.bjc-studio-content-design:is(.bjc-studio-shape-square,.bjc-studio-shape-rounded,.bjc-studio-shape-oval,.bjc-studio-shape-arch).bjc-studio-ratio-3-4 .bjc-studio-media { aspect-ratio:3 / 4 !important; }
.bjc-studio-content-design:is(.bjc-studio-shape-square,.bjc-studio-shape-rounded,.bjc-studio-shape-oval,.bjc-studio-shape-arch).bjc-studio-ratio-9-16 .bjc-studio-media { aspect-ratio:9 / 16 !important; }

/* 0.16.82 — opt-in Styles ratio extension. Keep Circle and all Frames unchanged.
 * Existing shape masks/borders/shadows remain owned by their original modules. */
.bjc-studio-content-design:not(.bjc-studio-shape-circle):is(.bjc-studio-ratio-16-9,.bjc-studio-ratio-4-3,.bjc-studio-ratio-1-1,.bjc-studio-ratio-3-4,.bjc-studio-ratio-9-16,.bjc-studio-ratio-custom,.bjc-studio-ratio-original) .bjc-studio-media { height:auto !important; }
.bjc-studio-content-design:not(.bjc-studio-shape-circle).bjc-studio-ratio-16-9 .bjc-studio-media { aspect-ratio:16 / 9 !important; }
.bjc-studio-content-design:not(.bjc-studio-shape-circle).bjc-studio-ratio-4-3 .bjc-studio-media { aspect-ratio:4 / 3 !important; }
.bjc-studio-content-design:not(.bjc-studio-shape-circle).bjc-studio-ratio-1-1 .bjc-studio-media { aspect-ratio:1 / 1 !important; }
.bjc-studio-content-design:not(.bjc-studio-shape-circle).bjc-studio-ratio-3-4 .bjc-studio-media { aspect-ratio:3 / 4 !important; }
.bjc-studio-content-design:not(.bjc-studio-shape-circle).bjc-studio-ratio-9-16 .bjc-studio-media { aspect-ratio:9 / 16 !important; }
.bjc-studio-content-design:not(.bjc-studio-shape-circle):is(.bjc-studio-ratio-custom,.bjc-studio-ratio-original) .bjc-studio-media { aspect-ratio:var(--bjc-studio-selected-ratio,auto) !important; }
/* Original ratio without WordPress attachment metadata: natural images size themselves. */
.bjc-studio-content-design.bjc-studio-shape-natural.bjc-studio-ratio-original:not([style*="--bjc-studio-selected-ratio"]) .bjc-studio-media > img { height:auto !important; object-fit:contain !important; }


/* 0.16.83 — honour the existing Core media width control in horizontal
 * Styles, including externally registered Design Pack styles. This changes
 * the shared control bridge only; individual approved pack CSS is untouched. */
.bjc-studio-section.bjc-studio-content-design.bjc-studio-arrangement-media-left .bjc-studio-inner > .bjc-studio-media,
.bjc-studio-section.bjc-studio-content-design.bjc-studio-arrangement-text-left .bjc-studio-inner > .bjc-studio-media {
    width:var(--bjc-studio-media-width);
    max-width:none;
}
/* The default style has no pack-specific media positioning. Apply the
 * existing X/Y values via transform for browsers/editors where translate
 * on its shape wrapper was not taking effect. Do not move Frames or packs. */
.bjc-studio-section.bjc-studio-design-default-style > .bjc-studio-inner > .bjc-studio-media {
    translate:none;
    transform:translate(var(--bjc-studio-media-x),var(--bjc-studio-media-y));
}

/* 0.16.85 — Feature Hero optional design palette. These selectors deliberately
   exceed the approved pack specificity; no pack files are changed. Blank
   controls preserve the pack's original gradient and media-stage treatment. */
.bjc-studio-section.bjc-studio-design-core-designs-feature-hero {
    background:linear-gradient(155deg,var(--bjc-feature-hero-primary,#17293a) 0%,var(--bjc-feature-hero-primary,#243d50) 45%,var(--bjc-feature-hero-accent,#f4eee4) 45.1%,var(--bjc-feature-hero-accent,#f4eee4) 100%);
}
.bjc-studio-section.bjc-studio-design-core-designs-feature-hero .bjc-studio-inner::before {
    background:var(--bjc-feature-hero-secondary,linear-gradient(135deg,rgba(120,174,190,.35),rgba(14,31,48,.2)));
}

/* 0.16.87: Optional Diagonal palette. Preserve the pack's original polygon
   geometry and untouched defaults; recolour only its actual background layers. */
.bjc-studio-section.bjc-studio-design-core-designs-diagonal {
    background-color:var(--bjc-diagonal-primary,#4b1934);
}
.bjc-studio-section.bjc-studio-design-core-designs-diagonal::before {
    background-color:var(--bjc-diagonal-secondary,#b9eee2);
}
.bjc-studio-section.bjc-studio-design-core-designs-diagonal .bjc-studio-copy {
    background-color:var(--bjc-diagonal-accent,#fff1d9);
}

/* 0.16.88: On Diagonal only, the existing Container Background control
   colours the fourth visible layer (the diagonal separator). The purple
   design background remains controlled solely by Purple Background. */
.bjc-studio-section.bjc-studio-design-core-designs-diagonal::after {
    background-color:var(--bjc-diagonal-separator,#fff1d9);
}

/* 0.16.99 — Core Default Style mobile reference contract.
 * This is intentionally placed after the shared Style/media bridge so the
 * desktop media-width/X-Y rules cannot reassert themselves on phones.
 * It mirrors the passed Design Pack Master mobile template, scoped only to
 * Core Default Style. Desktop and all Design Pack styles remain untouched. */
@media (max-width:767px) {
 .bjc-studio-section.bjc-studio-design-default-style {
   width:100%; max-width:100%; min-width:0;
 }
 .bjc-studio-section.bjc-studio-design-default-style .bjc-studio-inner {
   display:flex; flex-direction:column; align-items:stretch;
   width:100%; max-width:100%; min-width:0;
   min-height:0; padding:16px; gap:20px;
 }
 .bjc-studio-section.bjc-studio-design-default-style .bjc-studio-inner > .bjc-studio-media {
   position:relative; inset:auto; top:auto; right:auto; bottom:auto; left:auto;
   flex:0 1 auto; display:block;
   width:100%; max-width:100%; min-width:0;
   margin:0 auto; align-self:center; justify-self:center;
   translate:none; transform:none;
 }
 .bjc-studio-section.bjc-studio-design-default-style:is(.bjc-studio-arrangement-media-left,.bjc-studio-arrangement-text-left) .bjc-studio-inner > .bjc-studio-media {
   width:100% !important; max-width:100% !important;
 }
 .bjc-studio-section.bjc-studio-design-default-style:is(.bjc-studio-arrangement-media-left,.bjc-studio-arrangement-text-left) .bjc-studio-inner > .bjc-studio-media > img {
   display:block; width:100%; max-width:100%; height:auto;
 }
 .bjc-studio-section.bjc-studio-design-default-style .bjc-studio-inner > .bjc-studio-copy {
   position:relative; grid-column:auto; grid-row:auto;
   flex:0 1 auto; width:100%; max-width:100%; min-width:0;
   height:auto; margin:0; align-self:stretch; justify-self:stretch;
   translate:none; transform:none; overflow-wrap:anywhere;
 }
 .bjc-studio-section.bjc-studio-design-default-style:is(.bjc-studio-arrangement-media-left,.bjc-studio-arrangement-media-above) .bjc-studio-inner > .bjc-studio-media {order:1;}
 .bjc-studio-section.bjc-studio-design-default-style:is(.bjc-studio-arrangement-media-left,.bjc-studio-arrangement-media-above) .bjc-studio-inner > .bjc-studio-copy {order:2;}
 .bjc-studio-section.bjc-studio-design-default-style:is(.bjc-studio-arrangement-text-left,.bjc-studio-arrangement-text-above) .bjc-studio-inner > .bjc-studio-copy {order:1;}
 .bjc-studio-section.bjc-studio-design-default-style:is(.bjc-studio-arrangement-text-left,.bjc-studio-arrangement-text-above) .bjc-studio-inner > .bjc-studio-media {order:2;}
 .bjc-studio-section.bjc-studio-design-default-style .bjc-studio-media > img,
 .bjc-studio-section.bjc-studio-design-default-style .bjc-studio-media > video,
 .bjc-studio-section.bjc-studio-design-default-style .bjc-studio-media > iframe {max-width:100%;}
 .bjc-studio-section.bjc-studio-design-default-style .bjc-studio-top-content {
   position:relative; max-width:100%; min-width:0;
 }
}



/* 0.17.00 — Default Text Box copied from passed Design Master 2.0.0-7.
 * Core ID is deliberately unique so an active Design Master cannot overwrite/move it. */
/* Default Text Box — independent text-only reference design.
 * No media markup is rendered by this design's template.
 * Core remains authoritative for text width, X/Y position, alignment,
 * typography, colours, background, border, radius, shadow and padding. */
.bjc-studio-section.bjc-studio-content-design.bjc-studio-design-core-default-text-box .bjc-studio-inner {
 display:grid;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:auto auto;
 align-items:start;
 width:100%;
 max-width:1180px;
 min-width:0;
 min-height:0;
 margin:0 auto;
 padding:clamp(20px,3vw,36px);
}

/* Keep optional Top Content with the independent text box rather than at the
 * outer section edge. It follows the same Core text width/horizontal position
 * contract as the copy below it. */
.bjc-studio-section.bjc-studio-content-design.bjc-studio-design-core-default-text-box .bjc-studio-top-content {
 grid-column:1;
 grid-row:1;
 width:var(--bjc-studio-text-width,100%);
 max-width:100%;
 min-width:0;
 justify-self:var(--bjc-studio-text-horizontal-align);
 margin-bottom:12px;
}

.bjc-studio-section.bjc-studio-content-design.bjc-studio-design-core-default-text-box .bjc-studio-copy {
 grid-column:1;
 grid-row:2;
 order:initial;
 width:var(--bjc-studio-text-width,100%);
 max-width:none;
 margin:0;
 justify-self:var(--bjc-studio-text-horizontal-align);
 align-self:var(--bjc-studio-text-vertical-align);
 background:#f5f2eb;
 border:1px solid rgba(41,51,77,.16);
 border-radius:12px;
 padding:clamp(18px,2.5vw,30px);
 box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.bjc-studio-design-core-default-text-box .bjc-studio-heading {
 letter-spacing:-0.02em;
 line-height:1.08;
 color:#29334d;
 font-family:Georgia,serif;
}
.bjc-studio-design-core-default-text-box .bjc-studio-eyebrow {color:#7445b8;letter-spacing:.15em;font-family:Arial,sans-serif;}
.bjc-studio-design-core-default-text-box .bjc-studio-subheading {color:#007e92;font-family:Arial,sans-serif;}
.bjc-studio-design-core-default-text-box .bjc-studio-body {color:#505d6b;font-family:Arial,sans-serif;}
@media (max-width:767px) {
 .bjc-studio-section.bjc-studio-content-design.bjc-studio-design-core-default-text-box .bjc-studio-inner {
  display:flex; flex-direction:column; align-items:stretch;
  width:100%; max-width:100%; min-width:0; min-height:0;
  margin:0; padding:16px; gap:20px;
 }
 .bjc-studio-section.bjc-studio-content-design.bjc-studio-design-core-default-text-box .bjc-studio-top-content {
  position:relative; width:100%; max-width:100%; min-width:0;
  margin:0; translate:none; transform:none; align-self:stretch; justify-self:stretch;
 }
 .bjc-studio-section.bjc-studio-content-design.bjc-studio-design-core-default-text-box .bjc-studio-copy {
  position:relative; order:initial; flex:0 1 auto;
  width:100%; max-width:100%; min-width:0; height:auto; margin:0;
  align-self:stretch; justify-self:stretch;
  translate:none; transform:none; overflow-wrap:anywhere;
 }
}


/* 0.17.04 — Mobile multi-video shortcode flow.
 * The built-in [bjc_videos] grid already changes to one column below 767px.
 * Release only that known multi-item grid from the ordinary media viewport's
 * fixed aspect-ratio/height and clipping so every video can stack naturally.
 * Single shortcode embeds and all non-video media retain the established
 * Style/shape behaviour. */
@media (max-width:767px) {
 .bjc-studio-content-design .bjc-studio-media.bjc-studio-shortcode-shell:has(.bjc-video-grid) {
   aspect-ratio:auto !important;
   height:auto !important;
   min-height:0;
   overflow:visible !important;
   display:block;
 }
 .bjc-studio-content-design .bjc-studio-media.bjc-studio-shortcode-shell:has(.bjc-video-grid) > .bjc-studio-shortcode-embed {
   width:100% !important;
   height:auto !important;
   max-width:100% !important;
   max-height:none !important;
   margin:0;
   overflow:visible;
   transform:none !important;
 }
 .bjc-studio-content-design .bjc-studio-media.bjc-studio-shortcode-shell:has(.bjc-video-grid) > .bjc-studio-shortcode-embed > .bjc-video-grid {
   width:100%;
   max-width:100%;
   height:auto;
   transform:none !important;
 }
}

/* Optional Top Content links inherit the existing logo/label presentation. */
.bjc-studio-top-content-link { color: inherit; text-decoration: none; display: block; max-width: 100%; }
.bjc-studio-top-content-link .bjc-studio-top-content-text { color: inherit; }

/* Independent numbered CSS background layers. Content remains above them. */
.bjc-studio-section.bjc-studio-background-layered { position:relative; isolation:isolate; }
.bjc-studio-section.bjc-studio-background-layered > .bjc-studio-background-layer {
 position:absolute; inset:0; pointer-events:none; border-radius:inherit; overflow:hidden;
}
.bjc-studio-section.bjc-studio-background-layered > :not(.bjc-studio-background-layer) { position:relative; z-index:10; }