/* =========================================================
   QUOTE FORM — 50/50 LAYOUT FIX
   The theme's own CSS sets display:grid with two equal
   columns, but caps the whole block at max-width:900px and
   gap:0, so it renders narrower than the sections above it
   and each half floats as its own separate card instead of
   one unified two-panel card. This override matches it to
   full section width and forces a clean, gapless 50/50 split.

   No new images/requests — pure layout, so no CWV impact.
   ========================================================= */

#cab-quote-form .cab-quote-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    max-width: none !important;   /* was 900px — now matches the section above */
    width: 100% !important;
    margin: 0 auto !important;
    align-items: stretch !important;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

#cab-quote-form .cab-quote-image,
#cab-quote-form .cab-quote-form-box {
    width: 100% !important;
    min-width: 0 !important;   /* stops grid children from blowing out their track */
    box-shadow: none !important;
    border-radius: 0 !important;
}

#cab-quote-form .cab-quote-image { min-height: 100%; }

#cab-quote-form .cab-quote-image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 460px;
    object-fit: cover !important;
    display: block;
}

#cab-quote-form .cab-quote-form-box { padding: 40px; }

@media (max-width: 750px) {
    #cab-quote-form .cab-quote-wrap { grid-template-columns: 1fr !important; }
    #cab-quote-form .cab-quote-image img { min-height: 220px; }
}

/* =========================================================
   ROUTE PAGE MAIN LAYOUT — mobile stacking fix
   Separate from .cab-quote-wrap above. .cab-two-col wraps the
   WHOLE route-page body (content left, sticky quote form right)
   and travel-eye's own style.css already has a mobile rule for
   it — but an earlier, unscoped `.cab-two-col{grid-template-
   columns:1fr 1fr !important}` rule sits right above that media
   query and !important always wins over a non-important rule,
   regardless of source order or specificity. So the intended
   mobile stacking rule was being silently overridden, and the
   page rendered as two floating columns on every screen size —
   exactly what showed in the screenshots (div.cab-two-col at
   396px wide × 12677px tall). Matching !important here, loaded
   after the parent's stylesheet, so this wins instead.
   ========================================================= */
@media (max-width: 900px) {
    .cab-two-col { grid-template-columns: 1fr !important; }
    .cab-two-col-right { position: static !important; }
}