/* Feature Hero — Style Background compatibility only.
   Keeps the passed design colour field and layers Core patterns above it. */
.bjc-studio-design-core-designs-feature-hero { --bjc-design-base-background:linear-gradient(155deg,var(--bjc-feature-hero-primary,#17293a) 0%,var(--bjc-feature-hero-primary,#243d50) 45%,#f4eee4 45.1%,#f4eee4 100%); }


/* Style Background compatibility: preserve this design's own colour field as the
   bottom background layer while Core's selected pattern remains above it. */
.bjc-studio-design-core-designs-feature-hero.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%),
        var(--bjc-design-base-background) !important;
}
.bjc-studio-design-core-designs-feature-hero.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%),
        var(--bjc-design-base-background) !important;
}
.bjc-studio-design-core-designs-feature-hero.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%),
        var(--bjc-design-base-background) !important;
}
.bjc-studio-design-core-designs-feature-hero.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),
        var(--bjc-design-base-background) !important;
}
.bjc-studio-design-core-designs-feature-hero.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),
        var(--bjc-design-base-background) !important;
}
.bjc-studio-design-core-designs-feature-hero.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)),
        var(--bjc-design-base-background) !important;
}
.bjc-studio-design-core-designs-feature-hero.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)),
        var(--bjc-design-base-background) !important;
}