/* ==========================================================================
   Flex Layout — Contact Form + Sidebar
   rw-cfs = contact form sidebar

   Modifiers on .rw-cfs:
     --sidebar-left   → sidebar 450px left, form right
     --sidebar-right  → form left, sidebar 450px right
     --no-sidebar     → no sidebar, form centered at 900px
   ========================================================================== */

/* ── Outer wrapper ────────────────────────────────────────────────────────── */

.rw-cfs {
    padding-top:    var( --pad-top,    30px );
    padding-bottom: var( --pad-bottom, 30px );
    padding-left:   20px;
    padding-right:  20px;
}

/* ── Sidebar layouts — shared grid ───────────────────────────────────────── */

.rw-cfs--sidebar-left,
.rw-cfs--sidebar-right {
    display:     grid;
    gap:         20px;
    align-items: start;
}

.rw-cfs--sidebar-left {
    grid-template-columns: 450px 1fr;
}

.rw-cfs--sidebar-right {
    grid-template-columns: 1fr 450px;
}

/* Sidebar always renders first in DOM; flip visual order when position = right */
.rw-cfs--sidebar-right .rw-cfs__sidebar {
    order: 2;
}
.rw-cfs--sidebar-right .rw-cfs__form-panel {
    order: 1;
}

.rw-cfs--sidebar-left .rw-form-widget--contact,
.rw-cfs--sidebar-right .rw-form-widget--contact {
    margin-top: 45px;
}

/* ── No sidebar — centered form ──────────────────────────────────────────── */

.rw-cfs--no-sidebar .rw-cfs__form-panel {
    max-width: 900px;
    margin:    0 auto;
    width:     100%;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.rw-cfs__sidebar {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    position: relative;
}

.rw-cfs--sidebar-right .rw-cfs__sidebar,
.rw-cfs--sidebar-left .rw-cfs__sidebar {
    position: sticky;
    top: 150px;
}

/* ── Callout card ────────────────────────────────────────────────────────── */

.rw-cfs__callout {
    background:    var( --rw-accent );
    border-radius: var( --rw-corners );
    padding:       58px 62px;
}

.rw-cfs__callout a:hover {
    color: var(--rw-primary);
}

.rw-cfs__callout a:focus {
    color: inherit;
}

/* ── Form panel card ─────────────────────────────────────────────────────── */

/* Extend base rw-form-widget — contact modifier handles layout differences */
.rw-form-widget--contact .content-block {
    margin-bottom: 24px;
}

.rw-form-widget--contact .content-block__body {
    max-width: 720px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media ( max-width: 1024px ) {

    .rw-cfs--sidebar-left,
    .rw-cfs--sidebar-right {
        grid-template-columns: 1fr;
    }

    /* Sidebar always stacks below the form on mobile */
    .rw-cfs--sidebar-left .rw-cfs__sidebar,
    .rw-cfs--sidebar-right .rw-cfs__sidebar {
        order: 2;
    }

    .rw-cfs--sidebar-left .rw-cfs__form-panel,
    .rw-cfs--sidebar-right .rw-cfs__form-panel {
        order: 1;
    }

}

@media ( max-width: 768px ) {

    .rw-cfs {
        padding-top:    40px;
        padding-bottom: 40px;
    }

    .rw-cfs--sidebar-left,
    .rw-cfs--sidebar-right {
        gap: 30px;
    }

    .rw-cfs__callout {
        padding: 22px 20px;
    }

    .rw-form-widget--contact .content-block__title {
        font-size: 28px;
    }

}