/* BiomedRx network — full-width parallax bands + 5:4 feature-card art.
   SINGLE SOURCE OF TRUTH: edit here, then redeploy this one file per site.
   (Previously inlined on every page, which made each tweak a 71k-page deploy.)

   Band geometry: the source banners are 3:1, so a full-width image renders
   ~33.4vw tall. The band must stay MEANINGFULLY shorter -- that surplus is the
   parallax travel. 28vw shows ~84% of each photo while keeping 53-261px of
   travel, and guarantees image > band at every width so no blank strip appears.
*/
.brx-htm-band,.brx-cmp-band,.brx-mem-band{width:100%;margin:0;line-height:0;overflow:hidden;height:min(380px,28vw)}
.brx-htm-band img,.brx-cmp-band img,.brx-mem-band img{width:100%!important;height:auto!important;max-height:none!important;display:block;will-change:transform}
.brx-mem-band{border-top:1px solid rgba(120,90,50,.28);border-bottom:1px solid rgba(120,90,50,.28)}
.brx-mem-band img{filter:saturate(.92)}

/* 5:4 illustration at the top of each feature card. The files are already 5:4,
   so object-fit never actually crops -- it only guards against a stray source. */
.brx-card-illus{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:12px;margin:0 0 16px}

/* .bd-scenes gallery (blackdollar.app / blackamericanparty.com). The class was
   in the markup with NO rule anywhere, so its 20 <figure>s fell back to block
   layout and stacked full-width down the page. Grid, 4 across. Tiles are 5:4 to
   match the source files (1402x1122) so nothing is cropped. */
.bd-scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}
.bd-scenes figure{margin:0}
.bd-scenes img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:14px}
@media (max-width:1100px){.bd-scenes{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.bd-scenes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.bd-scenes{grid-template-columns:repeat(2,1fr);gap:10px}}

@media (prefers-reduced-motion:reduce){.brx-htm-band img,.brx-cmp-band img,.brx-mem-band img{transform:none!important}}

/* ---------------------------------------------------------------------------
   biomedrxmedspa.com additions (2026-09-01)

   .brx-spa-band  - same parallax band as the rest of the network, its own class
   so the med spa's bands can be restyled without touching 84 other sites. The
   source art here is NOT uniformly 3:1: it comes in 3.00, 2.73 and 2.33. All
   three render taller than a 28vw band at every viewport, so the travel and the
   no-blank-strip guarantee both still hold - do not raise the band height.

   .brx-vband     - the 1:3 vertical banners. A 724x2172 image at full mobile
   width would be ~1,125px tall, which is why it is height-capped and cropped
   rather than laid out at its natural ratio, and why it drops out entirely on
   narrow screens where it is decorative rather than informative.
--------------------------------------------------------------------------- */
.brx-spa-band{width:100%;margin:0;line-height:0;overflow:hidden;height:min(380px,28vw);contain:paint}
.brx-spa-band img{width:100%!important;height:auto!important;max-height:none!important;display:block}

.brx-vsplit{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:stretch}
.brx-vsplit.left{grid-template-columns:300px minmax(0,1fr)}
.brx-vband{margin:0;line-height:0;border-radius:var(--rad,14px);overflow:hidden;min-height:100%}
.brx-vband img{display:block;width:100%;height:100%;min-height:420px;max-height:640px;object-fit:cover}

@media (max-width:900px){
  .brx-vsplit,.brx-vsplit.left{grid-template-columns:1fr}
  .brx-vband{display:none}
}
@media (prefers-reduced-motion:reduce){.brx-spa-band img{transform:none!important}}