/**
 * CADMasters Digital Platform — Global Hero System
 * Reusable hero layout, backgrounds, overlay, typography, and animation tokens.
 * All hero sections must inherit these styles — do not create page-specific hero CSS.
 */

:root {
    --hero-min-height: var(--hero-height, 100vh);
    --hero-content-max-width: 640px;
    --hero-heading-font: var(--font-heading, var(--cm-font-display, "Manrope", sans-serif));
    --hero-subtitle-font: var(--font-body, var(--cm-font-ui, "Inter", sans-serif));
    --hero-heading-weight: 700;
    --hero-heading-line-height: 1.15;
    --hero-subtitle-weight: 400;
    --hero-heading-color: var(--hero-theme-heading-color, #111827);
    --hero-body-color: var(--hero-theme-body-color, #374151);
    --hero-button-bg: var(--hero-theme-button-bg, var(--btn-primary-bg, #0b3d91));
    --hero-button-color: var(--hero-theme-button-color, var(--btn-primary-text, #ffffff));
    --hero-overlay-color: var(--hero-overlay, rgba(0, 0, 0, 0.4));
    --hero-image-position: center;
    --hero-image-size: cover;
    --hero-content-align: left;
    --hero-vertical-align: center;
}

/* ── Base hero shell ──────────────────────────────────────────────────── */

.hero-section,
.cms-hero {
    position: relative;
    display: flex;
    align-items: var(--hero-vertical-align, center);
    height: var(--hero-height-mobile, var(--hero-min-height, var(--hero-height, 100vh)));
    min-height: var(--hero-height-mobile, var(--hero-min-height, var(--hero-height, 100vh)));
    max-height: var(--hero-height-mobile, var(--hero-min-height, var(--hero-height, 100vh)));
    overflow: hidden;
    isolation: isolate;
}

@media (min-width: 768px) {
    .hero-section,
    .cms-hero {
        height: var(--hero-height, 100vh);
        min-height: var(--hero-height, 100vh);
        max-height: var(--hero-height, 100vh);
    }
}

.hero-section.has-bg-slideshow .media-presenter--hero-background,
.cms-hero.has-bg-slideshow .media-presenter--hero-background {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-section--height-fullscreen,
.cms-hero.hero-section--height-fullscreen {
    min-height: 100vh;
    height: var(--hero-height, 100vh);
    max-height: var(--hero-height, 100vh);
}

.hero-section .container,
.cms-hero > .container {
    position: relative;
    z-index: 3;
    width: 100%;
}

.hero-section .hero-content,
.cms-hero .hero-content {
    position: relative;
    z-index: 3;
}

/* ── Content width & alignment ────────────────────────────────────────── */

.hero-section .hero-content,
.cms-hero .hero-content,
.hero-section .cms-hero-content {
    max-width: var(--hero-content-max-width, 640px);
}

.hero-content-width-small .hero-content,
.hero-content-width-small .cms-hero-content {
    max-width: 480px;
}

.hero-content-width-medium .hero-content,
.hero-content-width-medium .cms-hero-content {
    max-width: 640px;
}

.hero-content-width-large .hero-content,
.hero-content-width-large .cms-hero-content {
    max-width: 800px;
}

.hero-content-width-full .hero-content,
.hero-content-width-full .cms-hero-content {
    max-width: 100%;
}

.hero-section.hero-align-left .hero-content {
    text-align: left;
    margin-right: auto;
}

.hero-section.hero-align-center .hero-content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.hero-section.hero-align-right .hero-content {
    text-align: right;
    margin-left: auto;
}

.hero-section.hero-valign-top {
    align-items: flex-start;
}

.hero-section.hero-valign-center {
    align-items: center;
}

.hero-section.hero-valign-bottom {
    align-items: flex-end;
}

/* ── Typography ───────────────────────────────────────────────────────── */

.hero-section .hero-title,
.hero-section .hero-content h1,
.cms-hero .hero-title,
.cms-hero .hero-content h1 {
    font-family: var(--hero-heading-font);
    font-weight: var(--hero-heading-weight, 700);
    line-height: var(--hero-heading-line-height, 1.15);
    color: var(--hero-heading-color);
}

.hero-section .hero-description,
.hero-section .hero-content .lead,
.cms-hero .hero-description,
.cms-hero .hero-content .lead {
    font-family: var(--hero-subtitle-font);
    font-weight: var(--hero-subtitle-weight, 400);
    color: var(--hero-body-color);
    max-width: var(--hero-content-max-width, 640px);
}

/* ── Background types ─────────────────────────────────────────────────── */

.hero-section.hero-bg-solid,
.cms-hero.hero-bg-solid {
    background-color: var(--hero-background-color, var(--theme-dark, #0b2a4a));
}

.hero-section.hero-bg-gradient,
.cms-hero.hero-bg-gradient {
    background-image: var(--hero-background-gradient, linear-gradient(135deg, #0b2a4a 0%, #2563eb 100%));
}

.hero-section.hero-bg-image,
.hero-section.hero-bg-image-overlay,
.hero-section.has-bg-image,
.cms-hero.hero-bg-image,
.cms-hero.hero-bg-image-overlay {
    background-color: transparent;
}

.hero-section .cms-hero-background,
.hero-section .hero-animation-bg,
.cms-hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: var(--hero-image-position, center);
    background-size: var(--hero-image-size, cover);
    background-repeat: no-repeat;
}

/* ── Overlay ──────────────────────────────────────────────────────────── */

.hero-section .hero-overlay,
.cms-hero .hero-overlay {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--hero-overlay-color, rgba(0, 0, 0, 0.4));
    pointer-events: none;
}

.hero-section.hero-has-overlay:not(:has(.hero-overlay))::before,
.cms-hero.hero-has-overlay:not(:has(.hero-overlay))::before,
.hero-theme-preview.cms-hero .hero-theme-preview__overlay {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--hero-overlay-color, rgba(0, 0, 0, 0.4));
    pointer-events: none;
}

.hero-section.hero-overlay-none::before,
.cms-hero.hero-overlay-none::before {
    display: none;
}

/* ── CTA buttons (Global Button System integration) ───────────────────── */

.hero-section .btn-hero-primary,
.cms-hero .btn-hero-primary {
    background-color: var(--hero-button-bg);
    border-color: var(--hero-button-bg);
    color: var(--hero-button-color) !important;
    font-family: var(--btn-font-family, var(--font-navigation, "Manrope", sans-serif));
    font-weight: var(--btn-font-weight, 600);
}

.hero-section .btn-hero-primary:hover,
.hero-section .btn-hero-primary:focus-visible,
.cms-hero .btn-hero-primary:hover {
    filter: brightness(1.08);
    color: var(--hero-button-color) !important;
}

/* ── Video & animated backgrounds ─────────────────────────────────────── */

.hero-section.has-bg-video .hero-video-bg,
.hero-section.has-bg-animation .hero-animation-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-section.has-bg-video .hero-video-bg video,
.hero-section.has-bg-animation .hero-animation-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-animation-mobile-fallback {
    display: none;
}

@media (max-width: 767.98px) {
    .hero-section.has-bg-video .hero-video-bg video {
        display: none;
    }

    .hero-section.has-bg-video .hero-animation-mobile-fallback,
    .hero-section.has-bg-video .hero-video-bg img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ── Parallax & motion (performance-friendly) ─────────────────────────── */

.hero-motion--parallax .hero-animation-bg canvas,
.hero-motion--parallax .hero-animation-image {
    will-change: transform;
}

.hero-gradient-animation {
    background-size: 200% 200%;
    animation: hero-gradient-shift 18s ease infinite;
}

@keyframes hero-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Theme Manager preview ────────────────────────────────────────────── */

.hero-theme-preview.cms-hero {
    min-height: var(--hero-height, 320px);
}

.hero-theme-preview.cms-hero .hero-theme-preview__content {
    max-width: var(--hero-content-max-width, 640px);
}

.hero-theme-preview.cms-hero .hero-theme-preview__button {
    background-color: var(--hero-button-bg);
    border-color: var(--hero-button-bg);
    color: var(--hero-button-color);
}

/* ── Accessibility ────────────────────────────────────────────────────── */

.hero-section:focus-within {
    outline: none;
}

.hero-section .hero-actions a:focus-visible,
.cms-hero .hero-actions a:focus-visible {
    outline: 2px solid var(--hero-button-bg, var(--btn-outline-border, #0b3d91));
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .hero-motion--parallax .hero-animation-bg canvas,
    .hero-motion--parallax .hero-animation-image,
    .hero-motion--ken_burns .hero-animation-image,
    .hero-motion--slow_zoom .hero-animation-image,
    .hero-motion--floating .hero-animation-image,
    .hero-gradient-animation,
    .hero-section.hero-anim-fade-in .hero-content > *,
    .hero-section.hero-anim-slide-up .hero-content > *,
    .hero-section.hero-anim-slide-left .hero-content > *,
    .hero-section.hero-anim-zoom-in .hero-content > * {
        animation: none !important;
        transform: none !important;
        will-change: auto;
    }
}