/**
 * Form lift: a section that lifts a form (WPForms) with a heading and text.
 * Contact, quote request, newsletter: the form decides the purpose, the block
 * only lays it out.
 *
 * globalClass: form-lift   (the row inside a section)
 *
 * Variants:
 *   (none)                two columns from 768px: text left, form right
 *   form-lift--stacked    text above the form, both centered, form max 640px
 *   form-lift--compact    small centered lift for a short form (newsletter):
 *                         text and form on one row from 990px
 *
 * Structure:
 *   .form-lift.gb-container [.form-lift--stacked]
 *     .form-lift-content.gb-container  > h2|h3.form-lift-title + p.form-lift-text (+ contact details)
 *     .form-lift-form.gb-container     > WPForms block (wp:wpforms/form-selector)
 *   Put a palette wrapper on the section for a colored lift.
 *
 * The form itself is styled by css/forms.css and the palette (GP prints the
 * field and button colors from colors.css); keep WPForms on "Base styling
 * only" so those apply.
 *
 * Tuning: --form-lift-gap (48px)
 *
 * Chain animations: the row is the chain: content (1), form (2).
 */

:root {
    --form-lift-gap: 48px;
}

.form-lift,
.form-lift > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px var(--form-lift-gap);
}

.form-lift > .block-editor-inner-blocks {
    width: 100%;
}

.form-lift-content,
.form-lift-form {
    flex: 1 1 100%;
    min-width: 0;
}

.form-lift-content > * {
    margin: 0;
}

.form-lift-title {
    font-size: var(--h2-size);
}

.form-lift-text {
    margin-top: 16px;
    max-width: 480px;
}

.form-lift-content p + p {
    margin-top: 12px;
}

/* WPForms inside the lift */
.form-lift-form .wpforms-container {
    margin: 0;
}

.form-lift-form .wpforms-field {
    padding-top: 0;
    margin-bottom: 16px;
}

/* Stacked: centered text above a narrower form */
.form-lift--stacked,
.form-lift--stacked > .block-editor-inner-blocks > .block-editor-block-list__layout {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.form-lift--stacked .form-lift-content,
.form-lift--stacked .form-lift-form {
    width: 100%;
    max-width: 640px;
}

.form-lift--stacked .form-lift-text {
    margin-left: auto;
    margin-right: auto;
}

/* Compact: short lift, smaller heading */
.form-lift--compact .form-lift-title {
    font-size: var(--h3-size);
}

.form-lift--compact .form-lift-text {
    margin-top: 8px;
}

@media only screen and (min-width: 768px) {
    .form-lift:not(.form-lift--stacked) .form-lift-content,
    .form-lift:not(.form-lift--stacked) .form-lift-form {
        flex: 1 1 calc((100% - var(--form-lift-gap)) / 2);
    }

    .form-lift:not(.form-lift--stacked):not(.form-lift--compact) .form-lift-content {
        position: sticky;
        top: calc(var(--header-height, 90px) + 24px);
    }
}

@media only screen and (min-width: 990px) {
    /* Same specificity as the 768px rule above, so later wins. */
    .form-lift:not(.form-lift--stacked).form-lift--compact .form-lift-content {
        flex: 0 1 40%;
    }

    .form-lift:not(.form-lift--stacked).form-lift--compact .form-lift-form {
        flex: 1 1 0;
    }
}