/*
 * Two-column FAQ + capture form (sections/home-faq-contact.php). FAQ items
 * are styled in 26-faq.css, the capture card is the shared .lead-card
 * (00-lead-card.css); this file owns the section and the grid.
 *
 * The section closes the page, so it sits on the muted surface (same
 * treatment as .certificate / .about-teaser) and the capture card is the
 * dark primary panel already used by the SHRM partner block - the last
 * screen before the footer is the one place the page should push, and the
 * white FAQ cards read against it.
 */

.faq-contact {
    padding: 4.5vw 0;
    background: var(--color-surface-muted);
}

.faq-contact__grid {
    --bs-gutter-x: 3.33vw;
    --bs-gutter-y: 3.33vw;
}

.faq-contact__title {
    font-size: 1.88vw;
    margin: 0 0 2.08vw;
}

/* The column split is 1.2:1, which no 12-column step reproduces (7/5 shifts
   the form by ~4%). Bootstrap keeps the row, gutter and the mobile stack;
   only the exact desktop ratio is restored here. */
@media only screen and (min-width: 768px) {
    .faq-contact__grid > .faq-contact__faq {
        flex: 0 0 auto;
        width: 54.55%;
    }

    .faq-contact__grid > .faq-contact__lead {
        flex: 0 0 auto;
        width: 45.45%;
    }
}

@media only screen and (max-width: 767.98px) {
    .faq-contact__title {
        font-size: 6.4vw;
        margin: 0 0 5.33vw;
    }

    .faq-contact {
        padding: 9vw 0;
    }

    .faq-contact__grid {
        --bs-gutter-x: 8vw;
        --bs-gutter-y: 8vw;
    }
}