/*
 * Campaign hero
 */

.hero--campaign {
    padding-block: 0;

    background: var(--color-cream);
}

.hero--campaign::after {
    display: none;
}

.hero--campaign .hero__inner {
    display: grid;
    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    align-items: stretch;

    min-height: 31rem;
}

.hero--campaign .hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    max-width: none;

    padding:
        var(--space-8)
        var(--space-8)
        var(--space-8)
        0;
}

.hero--campaign .hero__heading {
    max-width: 8ch;

    font-size: clamp(4.75rem, 8vw, 7.5rem);
}

.hero--campaign .hero__body {
    max-width: 34rem;
}

.hero--campaign .hero__media {
    min-height: 31rem;

    margin-right:
        calc(
            (var(--container-width) - 100vw)
            / 2
        );

    overflow: hidden;

    background: var(--color-gold);
}

.hero--campaign .hero__image,
.hero--campaign .hero__media-placeholder {
    width: 100%;
    height: 100%;

    min-height: 31rem;
}

.hero--campaign .hero__image {
    display: block;

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

.hero--campaign .hero__media-placeholder {
    display: grid;
    place-items: center;

    background:
        linear-gradient(
            145deg,
            var(--color-cream),
            var(--color-gold)
        );

    color: var(--color-ink);

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero--campaign .hero__media-placeholder span {
    padding: var(--space-4);

    border: 1px solid rgba(36, 0, 70, 0.3);
    border-radius: var(--radius-sm);
}


/*
 * Senate announcement
 *
 * Primary video above a supporting photograph and statement.
 */

.home-announcement {
    padding-block: var(--space-9);

    background: var(--color-cream);
}

.home-announcement__inner {
    display: grid;

    gap: var(--space-7);
}


/*
 * Primary announcement video
 */

.home-announcement__video {
    position: relative;

    display: grid;
    place-items: center;

    overflow: hidden;

    width: 100%;

    aspect-ratio: 16 / 9;

    border-radius: var(--radius-sm);

    background:
        linear-gradient(
            145deg,
            var(--color-coral),
            var(--color-orange)
        );

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

.home-announcement__video-element {
    position: relative;
    z-index: 0;

    display: block;

    width: 100%;
    height: 100%;

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

    background: var(--color-ink);
}

.home-announcement__video::after {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(36, 0, 70, 0.28),
            transparent 58%
        );

    content: "";

    pointer-events: none;
}

.home-announcement__play {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 5.25rem;
    height: 5.25rem;

    padding-left: 0.3rem;

    border: 2px solid var(--color-cream);
    border-radius: 50%;

    background: rgba(36, 0, 70, 0.76);
    color: var(--color-cream);

    font-size: 1.4rem;
}

.home-announcement__media-label {
    position: absolute;
    right: var(--space-5);
    bottom: var(--space-5);
    left: var(--space-5);
    z-index: 2;

    padding-top: var(--space-2);

    border-top: 1px solid currentColor;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}


/*
 * Supporting photo and announcement copy
 */

.home-announcement__lower {
    display: grid;
    grid-template-columns:
        minmax(17rem, 0.82fr)
        minmax(0, 1.18fr);

    align-items: center;

    gap: var(--space-8);
}

.home-announcement__photo {
    position: relative;

    display: grid;
    place-items: center;

    overflow: hidden;

    width: 100%;

    aspect-ratio: 4 / 5;

    border-radius: var(--radius-sm);

    background:
        linear-gradient(
            145deg,
            var(--color-gold),
            var(--color-cream)
        );

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

.home-announcement__photo-image {
    display: block;

    width: 100%;
    height: 100%;

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

.home-announcement__photo
    .home-announcement__media-label {
    color: var(--color-ink);
}

.home-announcement__content {
    max-width: 37rem;

    padding-block: var(--space-5);
}

.home-announcement__eyebrow {
    margin: 0 0 var(--space-3);

    color: var(--color-coral);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.home-announcement__title {
    max-width: 9ch;

    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(3.5rem, 5.5vw, 5.75rem);
    font-weight: 800;
    line-height: 0.9;

    letter-spacing: -0.04em;
}

.home-announcement__copy {
    max-width: 34rem;

    margin-block:
        var(--space-5)
        var(--space-6);

    color: var(--color-ink-soft);

    font-size: 1rem;
    line-height: 1.7;
}

.home-announcement__copy p {
    margin:
        0
        0
        var(--space-4);
}

.home-announcement__copy p:last-child {
    margin-bottom: 0;
}


/*
 * Responsive
 */

@media (max-width: 75rem) {
    .hero--campaign .hero__media {
        margin-right:
            calc(
                0rem
                - var(--container-padding)
            );
    }
}

@media (max-width: 56rem) {
    .hero--campaign .hero__inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(20rem, 0.9fr);
    }

    .hero--campaign .hero__content {
        padding-right: var(--space-6);
    }

    .home-announcement__lower {
        grid-template-columns:
            minmax(15rem, 0.8fr)
            minmax(0, 1.2fr);

        gap: var(--space-7);
    }
}

@media (max-width: 48rem) {
    .hero--campaign .hero__inner {
        grid-template-columns: 1fr;

        min-height: 0;
    }

    .hero--campaign .hero__content {
        padding:
            var(--space-8)
            0
            var(--space-7);
    }

    .hero--campaign .hero__heading {
        font-size: clamp(4rem, 18vw, 6rem);
    }

    .hero--campaign .hero__media {
        min-height: 24rem;

        margin-inline:
            calc(
                0rem
                - var(--container-padding)
            );
    }

    .hero--campaign .hero__image,
    .hero--campaign .hero__media-placeholder {
        min-height: 24rem;
    }

    .home-announcement {
        padding-block: var(--space-8);
    }

    .home-announcement__play {
        width: 4.25rem;
        height: 4.25rem;
    }

    .home-announcement__lower {
        grid-template-columns: 1fr;

        gap: var(--space-6);
    }

    .home-announcement__photo {
        width: min(100%, 25rem);

        justify-self: start;
    }

    .home-announcement__content {
        max-width: 42rem;

        padding-block: 0;
    }
}

@media (max-width: 36rem) {
    .home-announcement__video {
        margin-inline:
            calc(
                0rem
                - var(--container-padding)
            );

        width:
            calc(
                100%
                + (var(--container-padding) * 2)
            );

        border-radius: 0;
    }

    .home-announcement__photo {
        width: 72%;
    }

    .home-announcement__title {
        font-size: clamp(3.25rem, 15vw, 4.5rem);
    }
}