/*---*\
Form Section
Intro copy beside a Gravity Form card on a photo background.

KEY FEATURES:
- Intro stacks above the card below 1200px. From 1200px they sit side by side
- Photo is decorative. The section color is the dark gradient, same as the CTA
- Slanted bottom uses .section-slanted in global.css
- Half-width Gravity Forms fields stay paired from 768px and stack below that
- Submit stays centered in the card

IMPLEMENTATION NOTES:
- Card chrome lives here. Field, label, focus, and error styles live in components/forms.css
- The photo is clipped on the media element so the section can stay free of overflow and clip-path
- Depends on fx_forms
\*---*/

.form-section {
    position: relative;
}

.form-section__media {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* min-width keeps the art at its 1920px scale on smaller screens instead of shrinking it to the section height */
.form-section__background {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 100%;
    min-width: 1920px;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transform: translateX(-50%);
}

.form-section > .container {
    position: relative;
    z-index: 1;
}

.form-section__layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid);
}

.form-section__card {
    box-sizing: border-box;
    width: 100%;
    padding: 25px;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-radius: 25px;
    /* border-image drops border-radius, so the gradient sits under a transparent border instead */
    background:
        linear-gradient(var(--color-surface-off-white), var(--color-surface-off-white)) padding-box,
        var(--gradient-red) border-box;
    background-color: var(--color-primary-dark);
    color: var(--color-paragraph);
}

/* Gravity Forms paints a 12-column grid and span-12 fields open extra tracks. One explicit column keeps every field stacked. Doubled .gform_wrapper beats .gravity-theme's later gap rule. */
.form-section .gform_wrapper.gform_wrapper .gform_fields {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--form-field-gap);
    column-gap: var(--form-field-gap);
}

.form-section .gform_wrapper .gfield,
.form-section .gform_wrapper .gfield input,
.form-section .gform_wrapper .gfield textarea,
.form-section .gform_wrapper .gfield select {
    min-width: 0;
    max-width: 100%;
}

/* .gfield.gfield outweighs .gravity-theme .gfield.gfield--width-full, which otherwise spans 12 and collapses the other columns. */
.form-section .gform_wrapper.gform_wrapper .gfield.gfield {
    grid-column: 1 / -1;
}

.form-section .gform_wrapper .gform_footer,
.form-section .gform_wrapper .gform_page_footer {
    display: flex;
    justify-content: center;
    margin: var(--form-field-gap) 0 0;
    padding: 0;
}

.form-section  .gform_required_legend {
    display: none;
}

@media (min-width: 768px) {
    .form-section .gform_wrapper.gform_wrapper .gform_fields {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--form-field-gap);
    }

    .form-section .gform_wrapper.gform_wrapper .gfield.gfield--width-half {
        grid-column: span 6;
        width: auto;
        max-width: none;
    }
}

@media (min-width: 1200px) {
    .form-section__layout {
        flex-direction: row;
        align-items: center;
    }

    .form-section__intro {
        flex: 1 1 0;
        min-width: 0;
        padding-right: 52px;
    }

    .form-section__intro h2:not(.h2):not(.h3):not(.h4):not(.h5):not(.h6) {
        font-size: 80px;
        font-weight: 900;
    }

    .form-section__card {
        flex: 0 1 757px;
        max-width: 757px;
    }
}