/**
 * 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). */
  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;
}

/* 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;
  }
}