/* =============================================
   DOMA ELITE CLUB — elite-club.php

   The page reuses the sales-row layout wholesale: .page-about +
   .page-sales (page-services.css) supply the banner, the single-row
   .sales-list and the .abt-reveal / .abt-reveal-media slide-in.
   ============================================= */

/* One row and nothing under it. The shared 80–140px list floor is sized
   for a page that ends on a band or a reference grid; here it stacked on
   the newsletter section's own top pad (responsive.css restores one on
   mobile) and read as a dead block under the copy — most visibly on a
   phone, where the text is the last thing in the column. Keep only
   enough for the copy to clear the newsletter card. */
.page-club .sales-list {
  padding-bottom: clamp(32px, 5vh, 56px);
}

/* ---- The clip is sized by the copy beside it ----
   The club text runs to four paragraphs — far past the fixed 2:3 portrait
   the service rows use, so the column hung a long way below the picture and
   the pair stopped reading as one block. Above the stacking breakpoint the
   row stretches instead: the frame takes the text column's height and a
   wider basis, so it grows and shrinks with however much copy the page
   carries and never ends short of it.

   Both overrides below are deliberately more specific than the shared rules
   they replace (page-services.css): `.sales-media:has(> video)` pins the 2:3
   ratio, and `.sales-media video` sets object-fit: contain — correct for a
   frame cut to the clip's own ratio, letterboxing for one that is not. */
@media (min-width: 881px) {
  /* Wider content edge than the service rows (--sales-max: 1040px): this
     page carries one row and no band, so nothing else has to line up with
     it, and the extra width all goes to the copy. */
  .page-club .sales-list {
    max-width: 1240px;
  }
  .page-club .sales-row {
    align-items: stretch;
  }
  /* The clip is the accent, not the subject — it stays a narrow strip and
     the text column takes the rest of the row. */
  .page-club .sales-media,
  .page-club .sales-media:has(> video) {
    flex: 0 1 clamp(260px, 24vw, 340px);
    aspect-ratio: auto;
  }
  .page-club .sales-media__video {
    height: 100%;
    object-fit: cover;
  }
  /* Takes the rest of the row, so the copy sets the height rather than
     being squeezed into a 420px column beside a wider picture. */
  .page-club .sales-body {
    flex: 1 1 0;
    /* Row height is whichever column is taller — with the copy this wide
       that is usually the clip, so the text is centred against the frame
       instead of hanging from its top edge. */
    justify-content: center;
  }
  .page-club .sales-body .abt-lead {
    max-width: 65ch;
  }
}