/* ==========================================================================
   BROKER — "The broker who always knows your business"
   --------------------------------------------------------------------------
   Depends on tokens.css + base.css.

   Every number below was measured off the signed-off reference at
   360 / 390 / 480 / 768 / 900 / 992 / 1024 / 1200 / 1440 / 1920. Everything
   that already exists as a token is used as a token — this section adds no
   new ones, because it is built entirely out of the shared unit (--br-u):

     column gap    2u → 4u → 16u/3   (768 / 992 / 1200)
     row gap       2u                 (stacked)
     title → lead  1u
     lead → CTAs   4u/3
     CTA gap       u/2
     photo radius  1u
     section gap   2u  (as MARGIN — see .br-broker)

   Layout model:
     Two equal flex columns (flex: 1 1 0) with the photo ordered first from
     768 up. The photo is a fixed 3:4 frame and is the tallest thing in the
     row, so it — not the copy — sets the section height at desktop; the copy
     column is centred against it. Nothing here has a fixed height, so the
     row simply grows if the copy wraps to more lines.
   ========================================================================== */

.br-broker {
  /* Section rhythm is a MARGIN in the reference, not padding, so two adjacent
     sections collapse to a single 2u gap instead of stacking 2u + 2u. Keep it
     a margin on assembly, and do not wrap the sections in a flex/grid parent
     (that would suppress the collapse and double every gap on the page). */
  margin-block: var(--br-section-y);
}

/* --------------------------------------------------------------------------
   LAYOUT
   Mobile is a single column, copy first. The reference does the same: the
   headline earns the scroll, the portrait rewards it.
   -------------------------------------------------------------------------- */

.br-broker__layout {
  display: flex;
  flex-direction: column;
  gap: var(--br-flow-lg);            /* 2u — 48.231 @390, 56.308 @1440 */
}

/* --------------------------------------------------------------------------
   MEDIA
   Measured 3:4 at every width, radius = 1u, object-fit cover. The frame
   carries the radius (not the <img>) so the crop can never bleed a square
   corner past the mask while the photo decodes.
   -------------------------------------------------------------------------- */

.br-broker__figure {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--br-radius-lg); /* 1u — 24.115 @390, 28.154 @1440 */
  /* Holds the frame in the page's own neutral while the photo decodes, so the
     row never lands on bare white and never reflows. */
  background-color: var(--br-bg-band);
}

/* There used to be a `.br-broker__figure > picture { display:block }` rule
   here, because <picture> is an inline wrapper with no box of its own and the
   portrait's `height: 100%` had nothing to resolve against. The <picture> is
   gone — the WebP source layer it existed to hold was measurably worse than
   the JPEG (see the note in scripts/genimg.mjs) — so the <img> is now a direct
   child of the frame and resolves its height against the frame's own
   aspect-ratio box. If a <picture> ever comes back, this rule has to too. */

.br-broker__portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The source is 2:3 and the frame is 3:4, so cover trims ~45px off the top
     and bottom. Dead-centre is what the reference does and it lands the eyes
     on the upper third — do not "improve" this to a top-weighted crop. */
  object-position: 50% 50%;
}

/* --------------------------------------------------------------------------
   COPY COLUMN
   The CTA row's own behaviour depends on how wide THIS column ends up, not
   on how wide the window is — see the container query further down — so the
   column is declared as the query container.
   -------------------------------------------------------------------------- */

.br-broker__content {
  display: flex;
  flex-direction: column;
  container: br-broker-content / inline-size;
}

/* h2 inherits the shared section-heading ramp from base.css untouched:
   Inter 600, 45.457/57 at -0.03em in #0e0f0c — measured, exact.
   Only the gap below it is this section's business. */
.br-broker__heading {
  margin-bottom: var(--br-flow-sm);   /* 1u — 28.154 @1440 */
  /* Leading deliberately NOT overridden: the reference balances this headline
     (measured `text-wrap: balance`), which is what base.css already does. It
     matters below desktop — at 390 balancing gives the reference's
     "The broker who / always knows / your business" (246/221/220px) where
     greedy wrapping would give "…always knows your / business" (246/300/130). */
}

/* .br-lead carries the measured 20/28 at +0.005em in #454745. */
.br-broker__lead {
  margin-bottom: var(--br-flow-md);   /* 4u/3 — 37.538 @1440 */
  /* No `text-wrap` here on purpose: base.css sets `p { text-wrap: auto }`
     page-wide, which is what the reference computes (measured `wrap/auto` at
     all 32 widths sampled 320-1920), so this paragraph already breaks where
     the reference breaks. An earlier local `text-wrap: initial` override has
     been removed — same computed value, but it restated a page-wide decision
     and carried a claim that `pretty` changes the line count at 768, which is
     false (see the note below).

     DO NOT "improve" this to `text-wrap: pretty`. It is tempting: the
     reference leaves the word "year." as a ~41-46px orphan on its own line
     across six bands (410-440, 530-536, 904-950, 1066-1148, 1200-1256,
     1452-1472), and `pretty` fixes every one of them at no line-count cost.
     But the reference HAS that orphan, and this page is judged in a blind
     side-by-side against it — at 1200 the reference's last line is 46.06px
     and `pretty` makes ours 95.33px. That is a visible rag difference at
     common laptop widths, i.e. exactly the kind of tell the comparison is
     looking for. Prettier than the reference is still not the reference.
     Measured both ways in scripts/_r3-wrap.mjs. */
}

/* --------------------------------------------------------------------------
   CTA ROW
   -------------------------------------------------------------------------- */

.br-broker__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--br-flow-2xs);            /* u/2 — 12.058 @390, 14.077 @1440 */
}

/* The 200px minimum on the primary pill is a desktop-only rule in the
   reference: below the 992px breakpoint "Get a quote" is content-width
   (measured 136.9px at 480), not a 200px slab next to a 180px ghost. */
@media (max-width: 991.98px) {
  .br-broker__actions .br-btn--primary { min-width: 0; }
}

/* Measured behaviour, and the reason this is a container query rather than a
   media query: the reference drops both CTAs to full width and stacks them
   whenever the COPY COLUMN is narrower than 445px. That is true at 768 and at
   1024 (columns of 318px and 379px) but false at 1199 (465px) — which no
   viewport breakpoint can express, because the column gap widens at 1200 and
   makes the column narrower again.

   The threshold is 445.25px rather than a round 445 because the column moves
   in ~0.5px steps and the reference's last stacking step lands ON 445.015625
   (viewport 1236); the next step up is 445.515625 (viewport 1237), which rows.
   445.25 sits between the two, so we stack at 1236 and row at 1237 exactly as
   the reference does. Do not tighten this to 445.02 — that lands on the
   measured value itself and is fragile to layout-unit rounding. Verified with
   scripts/_r3-cta.mjs: zero divergence across 1180-1280. */
@container br-broker-content (max-width: 445.25px) {
  .br-broker__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .br-broker__actions .br-btn {
    width: 100%;
    min-width: 0;
    /* Stacked, the pill owns the full column, so a label longer than the two
       shipped here must wrap INSIDE it rather than cross the rounded edge onto
       the page. .br-btn is nowrap by default and .br-btn--wrap left-aligns, so
       neither is right for a centred full-width pill: relax the wrap locally
       and let the existing centring do the rest. The pill grows 48px -> ~72px;
       nothing here is height-constrained. */
    white-space: normal;
    overflow-wrap: break-word;
  }
}

/* --------------------------------------------------------------------------
   TWO COLUMNS — from 768 up.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .br-broker__layout {
    flex-direction: row;
    align-items: center;
    column-gap: var(--br-flow-lg);    /* 2u — 51.138 @768 */
  }

  /* Photo left, copy right. This row is the media-first one in the
     alternating set; the two rows after it mirror this. */
  .br-broker__figure { order: -1; }

  .br-broker__figure,
  .br-broker__content {
    flex: 1 1 0;
    /* Without this a long unbroken word would refuse to shrink the column
       and push the row past the container. */
    min-width: 0;
  }
}

/* Measured: the column gap steps at 992 (not 1024) and again at 1200. */
@media (min-width: 992px) {
  .br-broker__layout { column-gap: calc(var(--br-u) * 4); }   /* 105.723 @992 */
}

@media (min-width: 1200px) {
  .br-broker__layout { column-gap: var(--br-flow-2xl); }      /* 150.154 @1440 */
}