/* ==================== ELEMENTAL BANNERS ==================== */
/* Four element video banners for page headers */

.element-banner {
    position: relative;
    width: 100%;
    height: clamp(280px, 40vh, 450px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px; /* Account for fixed nav + add top spacing */
}

.element-banner__video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

.element-banner__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.element-banner__content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: var(--color-white);
    padding: var(--space-xl);
    padding-top: var(--space-3xl); /* Extra top padding to push text down */
}

.element-banner__title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--weight-normal);
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
    color: var(--color-white);
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.element-banner__subtitle {
    font-size: var(--text-lg);
    font-style: italic;
    opacity: 0.95;
    text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

/* ===== EARTH BANNER ===== */
/* Green/brown tones - growth, grounding, stability */
.element-banner--earth {
    background: linear-gradient(135deg, #2d3e2c 0%, #4a5d49 100%);
}

.element-banner--earth .element-banner__overlay {
    background: linear-gradient(
        to bottom,
        rgba(45, 62, 44, 0.4) 0%,
        rgba(45, 62, 44, 0.2) 50%,
        rgba(45, 62, 44, 0.5) 100%
    );
}

/* ===== WATER BANNER ===== */
/* Blue tones - flow, emotion, cleansing */
.element-banner--water {
    background: linear-gradient(135deg, #1a3a4a 0%, #2d5a6a 100%);
}

.element-banner--water .element-banner__overlay {
    background: linear-gradient(
        to bottom,
        rgba(26, 58, 74, 0.4) 0%,
        rgba(26, 58, 74, 0.2) 50%,
        rgba(26, 58, 74, 0.5) 100%
    );
}

/* ===== FIRE BANNER ===== */
/* Orange/red tones - transformation, passion, energy */
.element-banner--fire {
    background: linear-gradient(135deg, #4a2a1a 0%, #6a3a2a 100%);
}

.element-banner--fire .element-banner__overlay {
    background: linear-gradient(
        to bottom,
        rgba(74, 42, 26, 0.4) 0%,
        rgba(74, 42, 26, 0.2) 50%,
        rgba(74, 42, 26, 0.5) 100%
    );
}

/* ===== AIR BANNER ===== */
/* Light blue/white tones - thought, freedom, spirit */
.element-banner--air {
    background: linear-gradient(135deg, #4a5a6a 0%, #6a7a8a 100%);
}

.element-banner--air .element-banner__overlay {
    background: linear-gradient(
        to bottom,
        rgba(74, 90, 106, 0.4) 0%,
        rgba(74, 90, 106, 0.2) 50%,
        rgba(74, 90, 106, 0.5) 100%
    );
}

/* ===== FULL HEIGHT HERO VARIANT ===== */
.element-banner--hero {
    height: 100vh;
    min-height: 600px;
}

.element-banner--hero .element-banner__title {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-md);
}

.element-banner--hero .element-banner__tagline {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-style: italic;
    margin-bottom: var(--space-xl);
    line-height: var(--leading-relaxed);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .element-banner {
        height: clamp(150px, 25vh, 250px);
    }
    
    .element-banner__title {
        font-size: var(--text-3xl);
    }
    
    .element-banner--hero {
        height: 100vh;
        min-height: 500px;
    }
    
    .element-banner--hero .element-banner__title {
        font-size: var(--text-4xl);
    }
}

/* ===== PLACEHOLDER STATE ===== */
/* For pages without video - shows a styled placeholder */
.element-banner__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 0;
    color: rgba(255, 255, 255, 0.3);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.element-banner__placeholder small {
    font-size: var(--text-xs);
    margin-top: var(--space-xs);
    opacity: 0.6;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .element-banner__video {
        display: none;
    }
}