/* ============================================
   HOME HERO - LAYOUT ONLY
   Mobile First
   ============================================ */

.hero {
    background-color: var(--color-dark);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    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 {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    background-image: none;
    padding: var(--space-2xl) var(--space-gutter) 0;
}

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

.hero-home-frame {
    display: block;
    position: relative;
    z-index: 1;
    width: max-content;
    max-width: 100%;
    max-height: 24rem;
    margin: var(--space-xl) auto 0;
}

body.page-home .hero-home-photo {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 24rem;
    height: auto;
    object-fit: contain;
    object-position: center;
}

/* ============================================
   TABLET (769px and up)
   Text stays on the dark field. The photo is a
   real image beside it, so the headline cannot
   cover the faces.
   ============================================ */

@media (min-width: 769px) {
    body.page-home .hero {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr);
        align-items: stretch;
        column-gap: var(--space-lg);
        background-image: none;
        min-height: 0;
        padding: 0;
    }

    body.page-home .hero .container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: var(--space-3xl) var(--space-xl) var(--space-3xl) var(--space-gutter);
    }

    body.page-home .hero-home-frame {
        align-self: center;
        width: 100%;
        max-width: none;
        max-height: none;
        margin: 0;
    }

    body.page-home .hero-home-photo {
        width: 100%;
        max-width: none;
        max-height: none;
        height: auto;
        aspect-ratio: 744 / 706;
        object-fit: contain;
        object-position: center;
    }
}

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

@media (min-width: 1280px) {
    body.page-home .hero {
        grid-template-columns: minmax(0, 1.25fr) minmax(22rem, 0.75fr);
    }
}

.home-mission-intro {
    padding: var(--space-2xl) var(--space-lg);
    margin-bottom: var(--space-2xl);
    border-radius: var(--space-lg);
    background-color: var(--color-primary);
    background-image: linear-gradient(color-mix(in srgb, var(--color-dark) 18%, transparent), color-mix(in srgb, var(--color-dark) 18%, transparent)), url('/imgs/humanistic-mission-meeting.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 var(--space-md) var(--space-xl) color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.home-mission-intro h3,
.home-mission-intro .h-sub {
    color: var(--color-on-primary);
}

.home-mission-intro .h-rule {
    background: var(--color-on-primary-muted);
}

.home-mission-intro .h-sub:last-child {
    color: var(--color-on-primary-muted);
    margin-top: var(--space-xl);
    margin-bottom: 0;
    padding-top: var(--space-lg);
    border-top: thin solid var(--color-glass-border);
}

.home-acronym-card {
    margin-block: var(--space-lg);
    padding: var(--space-lg);
    border: thin solid var(--color-border);
    border-left: var(--space-xs) solid var(--color-primary);
    border-radius: var(--space-sm);
    background: linear-gradient(135deg, var(--color-bg-white), color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-luxury)));
    box-shadow: 0 var(--space-xs) var(--space-md) color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.home-acronym-card h5 {
    color: var(--color-primary);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: thin solid var(--color-border);
}

.home-acronym-card .acronym-list {
    margin: 0;
}

.home-acronym-card .acronym-list li + li {
    margin-top: var(--space-sm);
}

.home-acronym-card strong {
    color: var(--color-primary);
}