/**
 * Cart Video Hero Styles
 * Premium video background for cart page header
 * Responsive best practices - fluid heights using clamp()
 */

/* ==========================================================================
   CART VIDEO HERO CONTAINER
   ========================================================================== */

.cart-hero {
    position: relative;
    width: 100%;
    height: clamp(250px, 35vh, 300px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .cart-hero {
        height: clamp(300px, 40vh, 360px);
    }
}

@media (min-width: 1024px) {
    .cart-hero {
        height: clamp(360px, 45vh, 420px);
    }
}

/* ==========================================================================
   VIDEO BACKGROUND LAYER
   ========================================================================== */

.cart-hero__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Video Element - object-fit: cover for no distortion */
.cart-hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

/* Fallback Image - covers full area */
.cart-hero__fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* ==========================================================================
   DARK OVERLAY - 40% OPACITY
   Using dark green (#1a2e1a) for brand consistency
   ========================================================================== */

.cart-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 46, 26, 0.4); /* Dark green at 40% opacity */
    z-index: 3;
}

/* ==========================================================================
   CENTERED TEXT CONTENT
   ========================================================================== */

.cart-hero__content {
    position: relative;
    z-index: 10; /* Above overlay, video, and fallback */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg, 1.5rem);
}

.cart-hero__title {
    font-family: var(--font-display, 'Lora', Georgia, serif);
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   ACCESSIBILITY & PERFORMANCE
   ========================================================================== */

/* Reduce motion preference - hide video, show fallback */
@media (prefers-reduced-motion: reduce) {
    .cart-hero__video {
        display: none;
    }
}

/* Video loading state */
.cart-hero__video[data-loaded="false"] {
    opacity: 0;
}

.cart-hero__video {
    opacity: 1;
    transition: opacity 0.6s ease;
}

/* ==========================================================================
   ENSURE HEADER NAV STAYS ABOVE HERO
   ========================================================================== */

.site-header {
    position: relative;
    z-index: 100;
}