/* Base Variables - Light Mode Default */
:root {
    --hero-bg: url('/images/AbstractLight.jpg');
    --hero-overlay: rgba(255, 255, 255, 0.1);
    --hero-text-color: #eeeeee;
    --hero-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dark Mode Overrides (Manual class or System preference) */
@media (prefers-color-scheme: dark) {
    :root {
        --hero-bg: url('/images/AbstractDark.jpg');
        --hero-overlay: rgba(0, 0, 0, 0.4);
        --hero-text-color: #ffffff;
        --hero-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    }
}

[data-theme="light"] {
    --hero-bg: url('/images/AbstractLight.jpg');
    --hero-overlay: rgba(255, 255, 255, 0.1);
    --hero-text-color: #eeeeee;
    --hero-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] {
    --hero-bg: url('/images/AbstractDark.jpg');
    --hero-overlay: rgba(0, 0, 0, 0.4);
    --hero-text-color: #ffffff;
    --hero-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Hero Section */
.gallery-stage {
    width: 100%;
    height: 13rem;
    background: linear-gradient(var(--hero-overlay), var(--hero-overlay)), 
                var(--hero-bg) center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.4s ease; /* Smooth swap when theme changes */
}

.hero-elevated {
    text-align: center;
}

.hero-text {
    font-size: 2rem;
    font-weight: 400;
    color: var(--hero-text-color);
    text-shadow: var(--hero-shadow);
    letter-spacing: -0.2px;
    padding-top: 0.2rem;
}

/* Desktop Only Space Adjustment */
@media (min-width: 1025px) {
    .space-adjustment {
        margin-top: 20px;
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .gallery-stage {
        height: 8rem;
        border-radius: 0;
    }

    .hero-text {
        font-size: 1.1rem;
        padding-top: 1.25rem;
    }

    .space-adjustment {
        padding: 0;
        margin-top: 0;
    }
}