/*------------------------------------*\

    Template: Contact Page (Phase 1 static html/contact.html)

    Wraps the existing inner-page masthead plus the Half Text / Half Form
    block so the white band and form column overlap the masthead photo per
    Figma "Contact Us Masthead & Half Text Half Form Sections".

    FIGMA
        Mobile:  https://www.figma.com/design/CY7FSqnBvtnAqjfBklhmJh/?node-id=10342-40452
        Tablet:  (none - interpolate mobile/desktop)
        Desktop: https://www.figma.com/design/CY7FSqnBvtnAqjfBklhmJh/?node-id=10291-15030

    DEPENDENCIES
        - custom-properties.css   (--color-*-static, spacing/typography tokens)
        - components/masthead.css
        - components/half-image-text.css
        - blocks/general/half-text-half-form.css

\*------------------------------------*/


/* ==========================================================
   HERO WRAPPER
   Groups masthead + overlapping section so z-index stays local.
=========================================================== */

.contact-page-hero {
    position: relative;
    z-index: 0;
    display: flow-root;
}

.contact-page-hero .masthead {
    position: relative;
    z-index: 0;
}


/* ==========================================================
   CONTACT MASTHEAD TEXT ALIGNMENT

   Default inner-page masthead centers .masthead__inner (masthead.css).
   Contact prototype keeps breadcrumbs + H1 left-aligned
   inside the Bootstrap .container so they line up with the content column.
=========================================================== */

.masthead--contact-page .masthead__inner {
    align-items: flex-start;
    text-align: left;
}

.masthead--contact-page .breadcrumbs {
    justify-content: flex-start;
}

.masthead--contact-page .masthead__intro {
    margin-left: 0;
    margin-right: auto;
}

/*
 * Tablet range needs extra masthead room so the heading does not sit under
 * the lifted half-form section.
 */
@media (min-width: 768px) and (max-width: 1199px) {

    .masthead--contact-page {
        padding-bottom: 150px;
    }

}


/* ==========================================================
   HALF FORM SECTION (contact variant)

   - No gradient/photo overlay (omit __background in HTML).
   - Light column uses standard dark-on-white tokens (global half-form
     assumes inverse copy for the gradient variant).
   - Negative margin pulls the section (white bg) up into the masthead.
   - Do NOT add padding-top equal to overlap on the section (that cancels
     the bleed). Clearance lives on the text column only; the form column
     uses --contact-page-form-pull for extra lift into the hero.
   - overflow: visible overrides .half-text-half-form { overflow: hidden }
     so the lifted form frame is not clipped.
=========================================================== */

.half-text-half-form--contact-page.half-text-half-form {
    overflow: visible;
}

.half-text-half-form--contact-page.half-and-half {
    --contact-page-section-overlap: 0;
    --contact-page-form-pull: 0;
    margin-top: calc(-1 * var(--contact-page-section-overlap));
    padding-top: 0;
    padding-bottom: var(--section-margins);
    position: relative;
    z-index: 1;
}

/* Restore primary-green subheading on white (base half-form forces inverse). */
.half-text-half-form--contact-page.half-text-half-form .half-and-half__col--text .sub-heading {
    color: var(--color-primary);
}

/* Stable tokens survive --color-* shadowing from .half-text-half-form. */
.half-text-half-form--contact-page.half-text-half-form .half-and-half__col--text {
    --color-heading: var(--color-heading-static);
    --color-body: var(--color-body-static);
    color: var(--color-body);
}

.half-text-half-form--contact-page.half-text-half-form .half-and-half__col--text .half-and-half__heading {
    color: var(--color-heading-static);
}

/* Mobile / tablet: green card meets masthead stack; no white frame. */
.half-text-half-form--contact-page .half-text-half-form__form-frame {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    margin-top: var(--soft-small);
}

/* Desktop: white shell + bottom-aligned columns so the form rises into masthead. */
@media (min-width: 1200px) {

    /*
     * Keep long page titles inside the left half so they do not run under
     * the overlapping form column, and reserve clear space below the heading.
     */
    .masthead--contact-page {
        padding-bottom: 160px;
    }

    .masthead--contact-page .masthead__inner {
        max-width: calc(50% - var(--content-gap));
    }

    .masthead--contact-page .masthead__heading {
        max-width: 100%;
    }

    .half-text-half-form--contact-page.half-and-half {
        --contact-page-section-overlap: 8rem;
        --contact-page-form-pull: 7rem;
    }

    .half-text-half-form--contact-page .half-text-half-form__form-frame {
        background-color: var(--color-white);
        padding: var(--space-paragraph-to-button) var(--space-paragraph-to-button) 0;
        border-top-left-radius: var(--border-radius-lg);
        border-top-right-radius: var(--border-radius-lg);
        margin-top: calc(-1 * var(--contact-page-form-pull));
    }

    .half-text-half-form--contact-page .half-and-half__row {
        align-items: center;
    }

    .half-text-half-form--contact-page .half-text-half-form__form-col {
        justify-content: flex-end;
    }

}

@media (min-width: 768px) and (max-width: 1199px) {

    .half-text-half-form--contact-page.half-and-half {
        --contact-page-section-overlap: 6rem;
    }

}