/* ============================================================
   Brand band widget
   ============================================================ */

.hs-band{
  position:relative;
  overflow:hidden;
  background:var(--hs-surface);
  border-top:1px solid var(--hs-line);
  border-bottom:1px solid var(--hs-line);
}

.hs-band__grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:stretch;
}
/* Flip puts the photo first visually WITHOUT reordering the DOM, so the reading
   order for a screen reader and for a keyboard stays text-then-image. */
.hs-band--flip .hs-band__txt{order:2}
.hs-band--flip .hs-band__pic{order:1}

.hs-band__txt{padding:78px 58px}
.hs-band__body{margin-bottom:14px}
.hs-band__body p{margin:0 0 14px}

.hs-band__pic{
  min-height:420px;
  background:
    linear-gradient(0deg,rgba(0,0,0,.3),rgba(0,0,0,.3)),
    var(--hs-band-img,none) center/cover no-repeat;
}

/* ---- Stats ----
   The count is not fixed. The client cut the numbers from three to two in review
   round 3, and a `repeat(3, …)` grid would then have left a visible empty cell —
   flex sizes to whatever survives. */
.hs-band__stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:24px}
.hs-band__stats b{display:block;font-size:34px;font-weight:800;line-height:1.1}
.hs-band__stats span{display:block;font-size:13px}

.hs-band__acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

@media(max-width:900px){
  .hs-band__grid{grid-template-columns:minmax(0,1fr)}
  /* Reset the flip on one column: with the text above and the photo below, the
     order swap would put a 420px image before any context. */
  .hs-band--flip .hs-band__txt,
  .hs-band--flip .hs-band__pic{order:initial}
  .hs-band__txt{padding:52px 24px}
  .hs-band__pic{min-height:260px}
  .hs-band__stats{gap:24px}
}