/* =========================================================
   HOME PAGE
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero {
    position: relative;
    isolation: isolate;

    min-height:
        clamp(34rem, 72vh, 48rem);

    display: flex;
    align-items: stretch;

    overflow: hidden;

    background:
        var(--color-dark);

    color:
        var(--color-light);
}


/*
 * Full hero photograph.
 */

.hero__background {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;
    object-position: center;
}


/*
 * Purple hero gradient.
 *
 * This is a dedicated element rather than relying on the same
 * pseudo-element used for texture. Keeping the gradient and grain
 * separate avoids one effect replacing the other.
 */

.hero__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(36, 21, 54, 0.98) 0%,
            rgba(36, 21, 54, 0.94) 20%,
            rgba(36, 21, 54, 0.82) 38%,
            rgba(36, 21, 54, 0.58) 56%,
            rgba(36, 21, 54, 0.28) 74%,
            rgba(36, 21, 54, 0.10) 100%
        );
}


/*
 * The existing hero grain from components.css remains present
 * through .hero::before. This rule only controls its stacking.
 */

.hero::before {
    z-index: 2;
}


.hero__inner {
    position: relative;

    z-index: 3;

    min-height:
        clamp(34rem, 72vh, 48rem);

    display: flex;
    align-items: center;

    padding-block:
        clamp(5rem, 10vw, 8rem);
}


.hero__copy {
    width:
        min(100%, 43rem);
}


.hero__copy h1 {
    max-width: 11ch;

    margin-bottom: 1.4rem;

    color:
        var(--color-light);
}


.hero__lede {
    max-width: 36rem;

    margin-bottom: 2rem;

    color:
        #f3edf6;

    font-size:
        var(--step-1);
}


/* ---------------------------------------------------------
   CONSTITUENT SERVICES
   --------------------------------------------------------- */

.home-intro {
    padding-top:
        clamp(4rem, 8vw, 7rem);
}


.home-intro__header {
    max-width: 52rem;

    margin-bottom: 2.25rem;
}


.home-intro__header > p:not(.eyebrow) {
    color:
        var(--text-muted);

    font-size:
        var(--step-1);
}


.home-intro__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        clamp(1rem, 2.5vw, 1.5rem);
}


/* ---------------------------------------------------------
   LEGISLATIVE FEATURE
   --------------------------------------------------------- */

.work-feature__copy {
    max-width: 36rem;
}


.work-feature__copy h2,
.district-feature h2,
.office-section h2 {
    margin-bottom: 1.25rem;
}


/* ---------------------------------------------------------
   DISTRICT FEATURE
   --------------------------------------------------------- */

.district-feature__image {
    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    border-radius:
        var(--radius-lg);
}


.district-feature__copy > p:not(.eyebrow) {
    color:
        var(--text-muted);
}


/* ---------------------------------------------------------
   OFFICE
   --------------------------------------------------------- */

.office-section {
    background:
        var(--surface-soft);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 52rem) {

    .home-intro__grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   MOBILE HERO
   ========================================================= */

@media (max-width: 44rem) {

    .hero {
        min-height:
            clamp(37rem, 82vh, 45rem);

        align-items: flex-end;
    }


    /*
     * On mobile the gradient runs vertically so the upper
     * portion of the photograph remains visible while the
     * lower text area maintains strong contrast.
     */

    .hero__overlay {
        background:
            linear-gradient(
                0deg,
                rgba(36, 21, 54, 0.99) 0%,
                rgba(36, 21, 54, 0.96) 26%,
                rgba(36, 21, 54, 0.82) 45%,
                rgba(36, 21, 54, 0.50) 63%,
                rgba(36, 21, 54, 0.18) 82%,
                rgba(36, 21, 54, 0.08) 100%
            );
    }


    .hero__inner {
        min-height:
            clamp(37rem, 82vh, 45rem);

        align-items: flex-end;

        padding-top: 15rem;

        padding-bottom:
            clamp(3rem, 9vw, 5rem);
    }


    .hero__copy h1 {
        max-width: 10ch;
    }


    .hero__lede {
        font-size:
            var(--step-0);
    }

}