/* ===========================================================================
   HERO SECTIONS - Core Styles
   Version: 5.9.0 - VIDEO HERO CSS ADDED
   Updated: March 2026

   CHANGES v5.9.0:
   ✅ ADDED: Complete CSS for Hero Pattern A (video hero) generated by
             helpers.php hero_video(). Previously the function generated
             .hero-video-section / .hero-video-container / .hero-video /
             .hero-video-fallback markup but no matching CSS existed.
   ✅ ADDED: .hero-video-fallback { display: none } — hides sibling <picture>
             fallback by default (it sits alongside <video>, not inside it).
   ✅ ADDED: .hero-video-fallback--active { display: block } — activated
             when helpers.php hero_video() is called with $show_fallback = true.
   ✅ ADDED: @media (prefers-reduced-motion: reduce) block that hides the
             <video> and reveals the <picture> fallback automatically.
   ✅ ADDED: Positioning so fallback fills the container as an overlay
             when both elements are present simultaneously.
   ✅ MAINTAINED: All fixes from v5.8.0 (webkit h1 visibility fix)
   ✅ MAINTAINED: All WCAG 2.2 AA compliance

   WCAG 2.2 Level AA Compliant
   =========================================================================== */

/* ===========================================================================
   HERO PATTERN A: VIDEO HERO
   Generated by helpers.php hero_video()

   HTML structure produced:
   <section class="hero-video-section">
     <div class="hero-video-container">
       <video class="hero-video" ...>
         <source src="..." type="video/mp4">
       </video>
       <picture class="hero-video-fallback [hero-video-fallback--active]">
         <source media="(max-width: 767px)" srcset="...">
         <img src="..." alt="..." fetchpriority="high">
       </picture>
     </div>
   </section>
   =========================================================================== */

.hero-video-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #000;
    margin-bottom: 0;
}

.hero-video-container {
    position: relative;
    width: 100%;
    /* 16:5 aspect ratio matches the lower-third overlay hero */
    aspect-ratio: 16 / 5;
    overflow: hidden;
    background-color: #000;
}

/* Fallback for browsers without aspect-ratio (Safari 14-, IE 11) */
@supports not (aspect-ratio: 16 / 5) {
    .hero-video-container {
        position: relative;
        padding-bottom: 31.25%; /* 5/16 × 100 */
        height: 0;
    }

    .hero-video,
    .hero-video-fallback {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* ============================================
   VIDEO ELEMENT
   ============================================ */
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ============================================
   PICTURE FALLBACK
   Sits as a SIBLING of <video>, not inside it.
   Hidden by default; revealed by:
   (a) .hero-video-fallback--active class (PHP $show_fallback = true)
   (b) prefers-reduced-motion media query (below)
   ============================================ */
.hero-video-fallback {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Active state — used when hero_video($show_fallback = true) */
.hero-video-fallback--active {
    display: block;
}

.hero-video-fallback img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/*
 * REDUCED MOTION: Hide the autoplaying video and reveal the static
 * fallback image for users who have motion reduction enabled.
 * This is automatic — no JS or PHP flag needed.
 */
@media (prefers-reduced-motion: reduce) {
    .hero-video {
        display: none;
    }

    .hero-video-fallback {
        display: block;
    }
}

/* ============================================
   GRADIENT OVERLAY ON VIDEO HERO
   Optional — add .hero-video-overlay div inside
   .hero-video-container if a gradient is needed.
   ============================================ */
.hero-video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(
        to top,
        rgba(10, 14, 26, 0.95) 0%,
        rgba(10, 14, 26, 0.85) 30%,
        rgba(10, 14, 26, 0.4) 70%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* ============================================
   MOBILE: VIDEO HERO
   ============================================ */
@media (max-width: 767px) {
    .hero-video-container {
        /* Switch to 2:1 on mobile to match lower-third hero */
        aspect-ratio: 2 / 1;
    }

    @supports not (aspect-ratio: 2 / 1) {
        .hero-video-container {
            padding-bottom: 50%;
        }
    }
}

/* ===========================================================================
   HERO PATTERN B: LOWER-THIRD OVERLAY (Primary Pattern)
   Desktop: Text overlays bottom third of image
   Mobile: Content below image in glass panel
   =========================================================================== */

.hero-lower-third {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #000;
    margin-bottom: 0;
}

.hero-image-wrapper {
    position: relative;
    width: 100%;
    height: auto;
}

.hero-image-wrapper .hero-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 16 / 5;
}

.hero-image-wrapper picture {
    display: block;
    width: 100%;
}

/* Fallback for browsers without aspect-ratio (Safari 14-, IE 11) */
@supports not (aspect-ratio: 16 / 5) {
    .hero-image-wrapper {
        position: relative;
        padding-bottom: 31.25%;
        height: 0;
        overflow: hidden;
    }

    .hero-image-wrapper .hero-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.hero-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(
        to top,
        rgba(10, 14, 26, 0.95) 0%,
        rgba(10, 14, 26, 0.85) 30%,
        rgba(10, 14, 26, 0.4) 70%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* DESKTOP: Content overlays BOTTOM of image (true lower-third) */
.hero-content-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 0 3rem 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.hero-content-wrapper .hero-content {
    max-width: 900px;
    width: 90%;
    text-align: center;
    background: rgba(15, 22, 35, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(183, 148, 246, 0.2);
    border-radius: 1rem;
    padding: 2rem 3rem;
    box-shadow:
        0 0 20px rgba(183, 148, 246, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

@supports not (backdrop-filter: blur(6px)) {
    .hero-content-wrapper .hero-content {
        background: rgba(15, 22, 35, 0.85);
    }
}

/*
 * FIX v5.8.0 (maintained): Reset webkit gradient-text applied globally
 * by 02-base.css. -webkit-text-fill-color always overrides color in
 * webkit, making the h1 transparent despite color: #ffffff.
 */
.hero-content-wrapper .hero-content h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #ffffff;
    background: none;
    -webkit-text-fill-color: initial;
    margin-bottom: 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.hero-content-wrapper .hero-description {
    font-size: clamp(1rem, 2vw, 1.125rem);
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.hero-content-wrapper .hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.hero-content-wrapper .hero-cta .btn {
    min-height: 44px;
    min-width: 44px;
}

/* ===========================================================================
   RESPONSIVE — LOWER-THIRD OVERLAY
   =========================================================================== */

@media (max-width: 1024px) {
    .hero-content-wrapper {
        padding: 1.5rem 0 2.5rem 0;
    }

    .hero-content-wrapper .hero-content {
        width: 95%;
        padding: 1.75rem 2.5rem;
    }
}

/* TABLET & MOBILE: Content moves BELOW image */
@media (max-width: 767px) {
    .hero-lower-third {
        margin-bottom: 0;
        overflow: hidden;
    }

    .hero-image-wrapper .hero-image {
        aspect-ratio: 2 / 1;
    }

    .hero-gradient-overlay {
        display: none;
    }

    .hero-content-wrapper {
        position: static;
        padding: 2rem 0;
        background: linear-gradient(
            to bottom,
            rgba(10, 14, 26, 1) 0%,
            rgba(15, 22, 35, 1) 100%
        );
    }

    .hero-content-wrapper .hero-content {
        background: rgba(15, 22, 35, 0.90);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid rgba(183, 148, 246, 0.3);
        border-radius: 1rem;
        padding: 1.5rem;
        margin: 0 1rem;
        max-width: 100%;
        width: auto;
        box-shadow:
            0 0 20px rgba(183, 148, 246, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    @supports not (backdrop-filter: blur(6px)) {
        .hero-content-wrapper .hero-content {
            background: rgba(15, 22, 35, 0.95);
        }
    }

    .hero-content-wrapper .hero-content h1 {
        font-size: clamp(1.5rem, 5vw, 1.875rem);
        color: #ffffff;
        background: none;
        -webkit-text-fill-color: initial;
        margin-bottom: 1rem;
        line-height: 1.15;
    }

    .hero-content-wrapper .hero-description {
        font-size: clamp(0.9375rem, 3vw, 1rem);
        margin-bottom: 1.25rem;
        line-height: 1.5;
    }

    .hero-content-wrapper .hero-cta {
        flex-direction: column;
        gap: 1.25rem;
    }

    .hero-content-wrapper .hero-cta .btn {
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
}

/* LANDSCAPE MOBILE */
@media (max-width: 767px) and (orientation: landscape) {
    .hero-content-wrapper {
        padding: 1.5rem 0;
    }

    .hero-content-wrapper .hero-content {
        padding: 1.25rem;
        max-width: 700px;
    }

    .hero-content-wrapper .hero-content h1 {
        font-size: 1.5rem;
        color: #ffffff;
        background: none;
        -webkit-text-fill-color: initial;
        margin-bottom: 0.75rem;
    }

    .hero-content-wrapper .hero-description {
        font-size: 0.9375rem;
        margin-bottom: 1rem;
    }

    .hero-content-wrapper .hero-cta {
        gap: 0.75rem;
    }
}

/* SMALL MOBILE */
@media (max-width: 480px) {
    .hero-content-wrapper {
        padding: 1.5rem 0;
    }

    .hero-content-wrapper .hero-content {
        padding: 1.25rem;
        margin: 0 0.75rem;
    }

    .hero-content-wrapper .hero-content h1 {
        font-size: 1.5rem;
        color: #ffffff;
        background: none;
        -webkit-text-fill-color: initial;
        margin-bottom: 0.875rem;
    }

    .hero-content-wrapper .hero-description {
        font-size: 0.9375rem;
        margin-bottom: 1rem;
    }
}

/* WCAG 2.2: 320px minimum */
@media (max-width: 320px) {
    .hero-content-wrapper .hero-content {
        margin: 0 0.5rem;
        padding: 1rem;
    }

    .hero-content-wrapper .hero-content h1 {
        font-size: 1.375rem;
        color: #ffffff;
        background: none;
        -webkit-text-fill-color: initial;
        margin-bottom: 0.75rem;
        word-wrap: break-word;
    }

    .hero-content-wrapper .hero-description {
        font-size: 0.875rem;
        margin-bottom: 0.875rem;
    }

    .hero-content-wrapper .hero-cta {
        gap: 0.75rem;
    }

    .hero-content-wrapper .hero-cta .btn {
        padding: 0.75rem 1rem;
        font-size: 0.9375rem;
    }
}

/* ===========================================================================
   HERO PATTERN C: STANDARD HERO (Legacy Support)
   =========================================================================== */

.hero {
    position: relative;
    width: 100%;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background-color: #000;
}

.hero picture {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.hero picture img,
.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(
        to top,
        rgba(10, 14, 26, 0.95) 0%,
        rgba(10, 14, 26, 0.85) 50%,
        rgba(10, 14, 26, 0) 100%
    );
    z-index: 2;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.hero-content h1 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: white;
    background: none;
    -webkit-text-fill-color: initial;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.hero-content .hero-description {
    color: rgba(255, 255, 255, 0.95);
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 800px;
}

.hero-content .cta-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-content .cta-buttons .btn {
    min-height: 44px;
    min-width: 44px;
}

@media (max-width: 767px) {
    .hero {
        min-height: 400px;
    }

    .hero::after {
        height: 50%;
    }

    .hero-content {
        padding: 2rem 1.5rem;
    }

    .hero-content .cta-buttons {
        flex-direction: column;
    }

    .hero-content .cta-buttons .btn {
        width: 100%;
    }
}

/* ===========================================================================
   BREADCRUMB NAVIGATION
   =========================================================================== */

.breadcrumb-nav {
    background: rgba(15, 22, 35, 0.6);
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(183, 148, 246, 0.15);
}

.breadcrumb {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.breadcrumb li:not(:last-child)::after {
    content: '›';
    color: rgba(183, 148, 246, 0.5);
    font-size: 1.25rem;
    line-height: 1;
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: #b794f6;
}

.breadcrumb a:focus-visible {
    outline: 2px solid #f97316;
    outline-offset: 2px;
    border-radius: 2px;
}

@media (max-width: 767px) {
    .breadcrumb-nav {
        padding: 0.5rem 0;
    }

    .breadcrumb li {
        font-size: 0.8125rem;
    }
}

@media (max-width: 320px) {
    .breadcrumb li {
        font-size: 0.75rem;
    }
}

/* ===========================================================================
   ACCESSIBILITY
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hero-gradient-overlay,
    .hero-content-wrapper,
    .hero::after {
        transition: none !important;
    }
}

@media (prefers-contrast: high) {
    .hero-gradient-overlay,
    .hero-video-overlay {
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.98) 0%,
            rgba(0, 0, 0, 0.9) 30%,
            rgba(0, 0, 0, 0.5) 70%,
            transparent 100%
        );
    }

    .hero-content-wrapper .hero-content {
        border-width: 2px;
        border-color: rgba(183, 148, 246, 0.5);
    }

    .breadcrumb-nav {
        border-bottom-width: 2px;
    }
}

/* ===========================================================================
   PRINT STYLES
   =========================================================================== */

@media print {
    .hero-video-section,
    .hero-lower-third {
        margin-bottom: 1rem;
    }

    .hero-video,
    .hero-gradient-overlay,
    .hero-video-overlay,
    .hero::after {
        display: none;
    }

    .hero-video-fallback {
        display: block;
        position: static;
        width: 100%;
        height: auto;
    }

    .hero-video-fallback img {
        width: 100%;
        height: auto;
        object-fit: unset;
    }

    .hero-content,
    .hero-content-wrapper .hero-content {
        position: static;
        color: #000;
        text-shadow: none;
        background: none;
        border: 1px solid #ccc;
        box-shadow: none;
        page-break-inside: avoid;
    }

    .breadcrumb-nav {
        display: none;
    }
}