/* ==========================================================================
   Trust badges row  —  #protection
   --------------------------------------------------------------------------
   Depends on tokens.css + base.css.

   Everything here is a measured number expressed as a token. Reference
   values @1440 (viewport 1440, content 1240):

     section spacing   56.3076px block  = --br-section-y (2u)
     hairline          1px rgba(14,15,12,.12) = --br-border
     column gap        28.1539px        = --br-flow-sm (1u)
     column padding    18.7693px top    = --br-flow-xs (2u/3)
     circle → title    18.7693px        = 2 x --br-flow-3xs (u/3 twice)
     title → copy       9.3846px        = --br-flow-3xs (u/3)
     circle            48px, ring inset 0 0 0 1px --br-border
     icon              24px, #0e0f0c
     title             20 / 28 / 600 / +0.005em / #0e0f0c  = .br-h4
     copy              18 / 26 / 400 / +0.01em  / #454745  = .br-body
     link              inherits copy, 600, #1f1902, underline offset 0.3em
     3-up breakpoint   768px
   ========================================================================== */

.br-protection {
  /* The reference spaces its sections with MARGIN, not padding, so two
     neighbours collapse to a single 2u gap instead of stacking two of them.
     Measured 56.3076px @1440 / 48px @360 / 60px @1920 — that is --br-section-y
     exactly at every width. */
  margin-block: var(--br-section-y);
}

/* --------------------------------------------------------------------------
   The row. One column until 768, three from 768 up. The hairline that
   separates this row from the hero is the top edge of the grid itself.

   minmax(0, 1fr) rather than a bare 1fr: bare 1fr resolves to
   minmax(auto, 1fr), so one unbreakable token — a long AFSL string, a URL
   pasted into the copy — pushes its own track wide and steals width from
   the other two. The reference has that bug; equal columns are the point of
   the row, so this does not inherit it.
   -------------------------------------------------------------------------- */
.br-protection__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--br-flow-sm);
  border-top: 1px solid var(--br-border);
}

@media (min-width: 768px) {
  .br-protection__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   One credential. align-items:flex-start is doing real work: it shrinks the
   title to its own text width (so a short title never claims a full column
   of clickable/hover area) while a long paragraph still fills the column.
   -------------------------------------------------------------------------- */
.br-protection__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--br-flow-3xs);
  padding-top: var(--br-flow-xs);
}

/* The circle carries a second u/3 of its own, so the space under it reads as
   2u/3 while title → copy stays at u/3. Measured on the reference. */
.br-protection__circle {
  margin-bottom: var(--br-flow-3xs);
}

/* --------------------------------------------------------------------------
   Icons.

   The design is a FILLED icon set; ours is an outline set reproducing the
   same ink. Filled glyphs end at full stem width, so the default terminal
   here is cut flat — round caps drop a half-cap of ink at every free end and
   the whole set reads lighter than the design beside it. Joins stay round:
   the pediment apex is a rounded point in the design, and its tip lands on
   y=2.97 that way, which is what was measured.

   Two terminals measured as something other than flat, so those paths carry
   their own stroke-linecap attribute rather than being forced into the rule:
   the headset boom ends round (the design rounds it, and a flat cut there
   reads as a cut pipe), and the two ear cups end square, which is what
   fills the 1x1 step between the cup and the headband in the design.

   Specificity note: base.css sets the cap on `.br-icon-circle > svg[data-stroke]`,
   so the override has to out-weigh two classes plus an element — hence the
   section ancestor rather than a bare class.
   -------------------------------------------------------------------------- */
.br-protection .br-protection__icon[data-stroke] {
  stroke-linecap: butt;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Type.

   Both of these opt out of a shared wrapping default, and both are measured
   rather than taste.

   base.css balances every heading. At 768 and 1024 "Trusted by Australian
   businesses" is two lines, and balancing moves a word down — the reference
   fills line one and lets line two run short ("Trusted by Australian /
   businesses"; balanced gives "Trusted by / Australian businesses").

   base.css also sets text-wrap: pretty on every <p>. The reference's second
   paragraph genuinely ends on the single word "broker", which is exactly the
   orphan `pretty` exists to remove — so it re-breaks the whole paragraph.

   Both shared defaults are right for prose elsewhere; they are wrong for a
   surface being reproduced line for line.
   -------------------------------------------------------------------------- */
.br-protection__heading {
  text-wrap: wrap;
  /* A long token has to break inside the heading instead of blowing the column
     out. Must stay `anywhere` — see the note on .br-protection__copy below for
     why `break-word` is inert in this layout. Do not soften it. */
  overflow-wrap: anywhere;
}

.br-protection__copy {
  text-wrap: wrap;
  /* Same guard as the heading, and it has to be the same VALUE — see below.
     The copy is the field that actually carries the live content (the AFSL
     string, the inline link), so an unbreakable token here — a pasted URL, a
     licence number typed without spaces — is the realistic failure, and it
     blows out the whole page rather than just the column: minmax(0, 1fr) stops
     the TRACK growing, so the overflow escapes the grid and scrolls the
     document instead.

     `anywhere`, NOT `break-word`. This looks like the more aggressive of the
     two and it is tempting to reach for the softer one, but break-word is
     simply inert here, measured:

       value                        p min-content   p width   page scrollWidth
       break-word                        691.56      691.55        1637
       anywhere                           18.17      394.56        1440

     .br-protection__item above is a flex column with align-items: flex-start,
     so the paragraph is sized fit-content = min(max-content, max(min-content,
     available)) rather than stretched to the track. Its min-content floor is
     therefore load-bearing — and per CSS Text 3, soft wrap opportunities from
     `break-word` are explicitly NOT counted toward min-content, while ones
     from `anywhere` are. So break-word leaves the floor at the full length of
     the token, fit-content resolves to it, and the paragraph overflows a track
     that minmax(0, 1fr) is correctly holding at 394.56px. min-width: 0 does
     not help either (same 1637px) — the width comes from fit-content, not from
     a flex minimum.

     Nothing is given up by choosing `anywhere`: the two values produce
     IDENTICAL soft wrap opportunities for actual line breaking, and differ
     only in intrinsic sizing. Neither will break a word that fits on a line of
     its own. Verified rather than assumed — every line rect at 320/360/390/
     767/768/1024/1280/1440/1920 is unchanged to 0.01px, and the heading has
     shipped on `anywhere` since round 2 matching the reference at every one of
     those widths. */
  overflow-wrap: anywhere;
}

/* The emphasised run inside the copy takes the heading ink (#0e0f0c), not the
   button ink (#1f1902) that the shared <b> rule reaches for. Measured. */
.br-protection__copy b {
  color: var(--br-text-heading);
}

/* --------------------------------------------------------------------------
   The one inline link in the section.

   Measured on the reference: rest #1f1902 with the underline left to the
   font (thickness `auto`, ~1.1px at 18px Inter); hover moves colour only,
   #1f1902 → #2b2305, and leaves the underline alone. base.css thickens the
   rule to 2px on hover, which is right for links sitting on their own but
   wrong here — and it is not in the transition list, so it snapped while the
   colour eased. Colour-only keeps both halves of the state on one clock.

   Keyboard focus takes the same ink as hover, which is what the reference
   does; the ring itself comes from the global focus treatment in base.css.
   -------------------------------------------------------------------------- */
.br-protection__copy .br-link,
.br-protection__copy .br-link:hover {
  text-decoration-thickness: auto;
}

.br-protection__copy .br-link:focus-visible {
  color: var(--br-ink-hover);
}