/**
 * Spotlight image strip — a decorative, full-bleed band of random photos
 * shown between the breadcrumb bar and the page content on interior pages.
 *
 * Images come from the curated "spotlight" media set and reshuffle on every
 * page load (see Drupal\mvsd_helpers\SpotlightStrip). Equal-width flex tiles
 * with object-fit:cover turn mixed-aspect photos into a seamless band with no
 * seams or partial images, regardless of the source aspect ratios.
 */

.spotlight-strip-region {
  width: 100%;
  /* Fallback colour behind images while they load / if any are missing. */
  background: var(--color-primary);
}

.spotlight-strip {
  display: flex;
  gap: 0;
  width: 100%;
  /* Height scales with the VIEWPORT so the band stays a small, consistent
     slice of the screen instead of a fixed slab: ~200px on a 2K panel
     (1440 tall, where 14vh ≈ 200px) and above, shrinking on shorter screens
     (~151px at 1080p, floored at 115px), and capped so ultra-wide / 4K never
     grow it. Mobile keeps its own fixed height (below), and very wide
     viewports get a slightly taller band (see the 2K+ block). */
  height: clamp(115px, 14vh, 200px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  line-height: 0; /* remove inline-image descender whitespace */
}

.spotlight-strip img {
  flex: 1 1 0;
  min-width: 0; /* allow flex items to shrink below intrinsic width */
  width: 100%;
  height: clamp(115px, 14vh, 200px); /* match the strip; see note above */
  object-fit: cover;
  display: block;
}

/* 2K+ desktop: a slightly taller band so less of each photo is cropped.
   The six tiles are equal fractions of the viewport WIDTH, so a wider screen
   makes every tile wider while the band's vh-driven height stays put — at
   2560px the tiles are ~424x200 against a 600x400 source, so object-fit:cover
   shows only 200/282.8 = 70.7% of each photo (~15% shaved off the top and the
   bottom). Matching the best figure the current design already reaches on
   desktop (81.8% at 1280x800) needs 0.818 x 282.8 = 231.4px, hence the 232px
   cap; 16vh reaches 230px at 1440 tall, so coefficient and cap agree at the
   design point and the band grows ~15% rather than jumping a tier. The 115px
   floor is carried over unchanged so a short window never gets a slab.

   Triggered on WIDTH because width is what makes the tiles wider (and so the
   crop worse), and because a maximised window's viewport width is just the
   panel minus a scrollbar, whereas its height varies by 100-250px with the
   tab/bookmark bars — a min-height test would simply never fire on a real
   1440p monitor. 2200px clears any 1920 panel (~1905px of viewport) and sits
   well under a 2560 one (~2545px). */
@media (min-width: 2200px) {
  .spotlight-strip,
  .spotlight-strip img {
    height: clamp(115px, 16vh, 232px);
  }
}

/* Tablet: show 4 tiles. */
@media (max-width: 1024px) {
  .spotlight-strip img:nth-child(n + 5) {
    display: none;
  }
}

/* Mobile: show 3 tiles, shorter band. */
@media (max-width: 640px) {
  .spotlight-strip,
  .spotlight-strip img {
    height: 150px;
  }
  .spotlight-strip img:nth-child(n + 4) {
    display: none;
  }
}

/* Decorative — never print. */
@media print {
  .spotlight-strip-region {
    display: none;
  }
}