/* ==============================================================
   Media band — full-bleed lifestyle photo

   New component (see media-band.pug for why). Same bleed technique
   as .cartypes__scroller--bleed: true edge-to-edge, both sides break
   out to the actual viewport width rather than the page's centred
   max-width column. Relies on the overflow-x guard already on
   html/body in base.css.
   ============================================================== */

.media-band {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* Asymmetric on purpose. Above this sits Metrics — also full-bleed,
     already carrying its own generous bottom padding — so the two
     bands touch directly rather than leaving a stray white sliver
     between them. Below sits the Fleet heading, a return to
     contained, padded content, which is the transition that actually
     needs the gap. */
  margin-top: 0;
  margin-bottom: var(--media-band-gap);

  aspect-ratio: var(--media-band-ratio);
  max-height: var(--media-band-max-h);
  overflow: hidden;
}

/* object-fit:cover, not the image's own aspect ratio: the band's
   ratio is fixed (and capped by max-height above), so the photo
   crops to fill it rather than letterboxing or stretching. */
.media-band__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}