/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* container query */

.newsletter-cta {
    container-type: inline-size;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* containers */

section.newsletter-cta {
    padding: 15px 0;
}

.newsletter-cta__inner {
    position: relative;
    overflow: hidden;
    border-radius: var(--box-border-radius-lg);
    background: var(--blue-dk);

    display: flex;
    align-items: stretch;
    min-height: 320px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* content */

.newsletter-cta__content {
    flex: 1 1 50%;
    padding: 42px 4px 42px 37px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.newsletter-cta__header.section-header {
    margin-bottom: 12px;
}

.newsletter-cta__header.section-header h2 {
    gap: 0;
}

.newsletter-cta__title .pre-title {
    margin-bottom: 0;
    color: var(--white);
}

.newsletter-cta__title .section-title {
    color: var(--white);
}

.newsletter-cta__description {
    margin-bottom: 8px;
    max-width: 560px;
}

.newsletter-cta__description,
.newsletter-cta__description p {
    color: var(--white);
    /* Body default (500) falls back to Verdana Regular (400) and reads heavy on the
       dark background — use the Light (300) face for the intended thin 16px body copy. */
    font-weight: 300;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* form */

.newsletter-cta__form {
    max-width: 560px;
}

.newsletter-cta__form .gform_wrapper {
    margin: 0;
}

.newsletter-cta__form .gform_wrapper form {
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: stretch;
}

.newsletter-cta__form .gform_wrapper .gform_body,
.newsletter-cta__form .gform_wrapper .gform-body {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    margin: 0;
}

.newsletter-cta__form .gform_wrapper .gform_fields {
    display: block;
    margin: 0;
    padding: 0;
    grid-row-gap: 0;
}

.newsletter-cta__form .gform_wrapper .gfield {
    padding: 0;
    margin: 0;
}

.newsletter-cta__form .gform_wrapper .gfield_label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#page .newsletter-cta__form .gform_wrapper .ginput_container input[type="email"],
#page .newsletter-cta__form .gform_wrapper .ginput_container input[type="text"] {
    width: 100%;
    min-width: 0;
    padding-left: 47px;
    border: none;
    background-color: var(--white);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%230060af' d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/></svg>");
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 22px auto;

    color: var(--black);

    box-shadow: none;
    outline: none;
}

#page .newsletter-cta__form .gform_wrapper .ginput_container input::placeholder {
    color: #888;
    opacity: 1;
}

#page .newsletter-cta__form .gform_wrapper .ginput_container input:focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.newsletter-cta__form .gform_footer {
    flex: 0 0 auto;
    display: flex;
}

.newsletter-cta__form .gform_wrapper .gform_validation_errors,
.newsletter-cta__form .gform_wrapper .validation_message {
    color: var(--white);
}

.newsletter-cta__form .gform_confirmation_message {
    color: var(--white);
    font-family: "Cachet";
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.4px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* image */

.newsletter-cta__image {
    flex: 1 1 50%;
    align-self: stretch;
}

.newsletter-cta__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* responsive */

@container (max-width: 820px) {
    .newsletter-cta__inner {
        flex-direction: column-reverse;
        min-height: unset;
    }

    .newsletter-cta__content {
        flex: 1 1 100%;
        padding: 28px 24px;
    }

    .newsletter-cta__image {
        flex: 0 0 220px;
        height: 220px;
    }

    /* Stacked: drop the desktop 560px cap so the email field and button fill the
       full column width instead of being constrained on the right. */
    .newsletter-cta__form {
        max-width: none;
    }

    .newsletter-cta__form .gform_wrapper form {
        flex-direction: column;
        gap: 8px;
    }

    #page .newsletter-cta__form .gform_wrapper input[type="submit"],
    #page .newsletter-cta__form .gform_wrapper button[type="submit"],
    #page .newsletter-cta__form .gform_wrapper .gform_button {
        width: 100%;
    }
}