/* ============================================
   HOME HERO - LAYOUT ONLY
   Mobile First
   Content-sized height (Joseph approved 2026-09-14):
   reward BG still clears the nav without 75–90vh voids.
   ============================================ */

.hero {
    background-color: var(--color-dark);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('/imgs/rewards-dark-mobile.webp?v=3');
    min-height: 0;
    display: flex;
    align-items: center;
    padding: var(--space-2xl) var(--space-gutter);
    text-align: center;
}

/* Hero content container */
.hero .h-container,
.hero .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Left-aligned on home page */
body.page-home .hero {
    text-align: left;
    background-image: url('/imgs/rewards-dark-mobile.webp?v=3');
    background-position: center center;
    min-height: 0;
    padding: var(--space-2xl) var(--space-gutter);
}

body.page-home .hero h1 {
    max-width: 11em;
    margin-right: auto;
    margin-left: 0;
}

body.page-home .hero p {
    max-width: 38ch;
    margin-left: 0;
    margin-right: auto;
}

body.page-home .hero .hero-veteran {
    margin-left: 0;
    margin-right: auto;
}

/* ============================================
   TABLET (769px and up)
   ============================================ */

@media (min-width: 769px) {
    body.page-home .hero {
        background-image: url('/imgs/rewards-dark-tablet.webp?v=5');
        background-position: right center;
        min-height: 0;
        padding: var(--space-3xl) var(--space-gutter);
    }
}

/* ============================================
   DESKTOP (1280px and up)
   ============================================ */

@media (min-width: 1280px) {
    body.page-home .hero {
        background-image: url('/imgs/rewards-dark.webp?v=3');
        background-position: center top;
        min-height: 0;
        padding: var(--space-3xl) var(--space-gutter);
    }
}