/* ==========================================================================
   split.css - reusable alternating image/text row (buyers, sellers,
   physicians blocks on buyers-and-sellers.html + your-next-move.html)
   ========================================================================== */
.vr-split{display:grid; grid-template-columns:1fr 1fr; align-items:stretch;}
.vr-split:nth-child(odd){background:var(--vr-cream);}
.vr-split:nth-child(even){background:var(--vr-sand);}
.vr-split--reverse .vr-split__media{order:2;}
.vr-split--reverse .vr-split__body{order:1;}
/* No max-height. The row is `align-items:stretch`, so a cap here does not make
   the section shorter -- it just stops the photo short of the bottom and leaves
   a band of the section's own background under it. The seller marketing row is
   815px because of its six-item checklist, so a 620px cap left a 195px hole;
   the buyers rows were at 602 and 616, one line of copy away from the same. The
   text column governs the height and the photo follows it. */
.vr-split__media{min-height:360px; overflow:hidden;}
/* The media box is stretched to whatever height its text column needs, so its
   aspect swings from about 0.75:1 at the narrow end of the two-column layout to
   2.1:1 on a 1920 screen. The photos are cut 3:2 (see build-photoshoot-assets.sh),
   which means the wide end is where `cover` has to throw height away, and a
   centred object-position takes it off the top, i.e. off the subject's head.
   Anchoring above centre spends that trim on the foreground instead. */
.vr-split__media img{width:100%; height:100%; object-fit:cover; object-position:center 25%;}
/* One measure for the body copy, set in rem rather than ch. `ch` is relative to
   each element's own font-size, so the identical `52ch` on the paragraph
   (1.08rem) and the checklist (1.02rem) resolved to 429px and 397px: two
   different right edges inside a 665px column, which read as a wrapping bug
   rather than a measure. A shared rem value holds one edge, and at 38rem the
   checklist items mostly sit on a single line instead of turning over with
   250px of empty column beside them. */
.vr-split__body{--vr-split-measure:38rem;
  padding:var(--vr-section-y) 64px; display:flex; flex-direction:column; justify-content:center;}
.vr-split__head{font-weight:500; font-size:clamp(1.6rem,3vw,2.1rem); color:var(--vr-teal); line-height:1.25; margin-bottom:1rem;}
.vr-split__text{font-size:1.08rem; margin-bottom:1.6rem; max-width:var(--vr-split-measure);}
.vr-split__body .vr-btn{align-self:flex-start;}

@media (max-width:820px){
  .vr-split, .vr-split--reverse{grid-template-columns:1fr;}
  .vr-split--reverse .vr-split__media{order:0;}
  .vr-split--reverse .vr-split__body{order:0;}
  /* Stacked, the box went full-bleed at a flat 280px, i.e. a 2.9:1 letterbox
     that cropped these photos harder than any desktop width did. Let it take
     its height from a fixed aspect instead. */
  .vr-split__media{min-height:0; max-height:none; aspect-ratio:4/3;}
  .vr-split__body{padding:56px 24px;}
}