/* ==========================================================================
   Star Musical Entertainer — carousel sizing fixes
   Loaded last.

   The bug: the first slide displayed correctly, then after advancing two or
   three slides every image changed size.

   Cause: `.carousel-track` used `align-items: stretch`, so each slide grew to
   match the tallest slide currently in the flex row. Because the gallery
   holds a mix of phone portraits and landscapes, whichever tall image entered
   the row redefined the height for all of them, and the images stretched with
   it. The aspect-ratio on `.gallery-item` was then being overridden by that
   stretched height.

   Fix: slides align to the start rather than stretching, and the ratio is
   enforced on the tile itself so it cannot be resized by a sibling.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Stop slides inheriting the tallest sibling's height
   -------------------------------------------------------------------------- */

.carousel-track {
  /* `start` keeps each slide at its own natural height, so one tall image
     cannot resize the rest of the row. */
  align-items: flex-start;
}

.carousel-slide {
  /* A slide must not stretch, and must not shrink below its share. */
  align-self: flex-start;
  height: auto;
}

/* --------------------------------------------------------------------------
   2. Enforce the tile ratio inside a carousel
   `aspect-ratio` is ignored when an ancestor imposes a definite height, which
   is what stretching did. With stretching removed the ratio applies, but
   these rules make the intent explicit and immune to future changes.
   -------------------------------------------------------------------------- */

.carousel-slide .gallery-item {
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  width: 100%;
  display: block;
}

/* Cards inside a carousel keep equal height, which is desirable there —
   their media frame is already fixed, so only the text length varies. */
.carousel-slide > .card {
  height: 100%;
}
.carousel-track:has(> .carousel-slide > .card) {
  align-items: stretch;
}

/* Testimonials benefit from equal height for the same reason. */
.carousel-track:has(> .carousel-slide > .testimonial) {
  align-items: stretch;
}
.carousel-slide > .testimonial {
  height: 100%;
}

/* --------------------------------------------------------------------------
   3. Single source of truth for the gallery tile ratio
   Earlier rules set 1/1 in one place and 4/3 in another at the same
   breakpoint, so the winner depended on file order. One ratio, everywhere.
   -------------------------------------------------------------------------- */

.gallery-item,
.carousel-slide .gallery-item {
  aspect-ratio: 1 / 1;
}

/* Collages are the deliberate exception: a square crop destroys their
   internal grid, so they keep a wide frame and letterbox instead. */
.gallery-item--collage,
.carousel-slide .gallery-item--collage {
  aspect-ratio: 4 / 3;
}

/* --------------------------------------------------------------------------
   4. Images fill the tile exactly
   -------------------------------------------------------------------------- */

.carousel-slide .gallery-item picture,
.carousel-slide .gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
}
.carousel-slide .gallery-item img {
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   5. Reserve the track height so advancing does not shift the page
   Without a stable height the sections below jump as slides change.
   -------------------------------------------------------------------------- */

.carousel-viewport { contain: layout; }

/* --------------------------------------------------------------------------
   6. Video carousel posters
   -------------------------------------------------------------------------- */

.carousel-slide .video-thumb {
  aspect-ratio: 16 / 9;
  height: auto;
}

/* --------------------------------------------------------------------------
   7. Small screens
   One tile per view, still square, so the grid and the carousel agree.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .carousel-slide .gallery-item,
  .gallery-item { aspect-ratio: 1 / 1; }

  .carousel-slide .gallery-item--collage { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   8. Fallback for engines without :has()
   The rules above use :has() to keep card and testimonial carousels
   stretching. Where it is unsupported those carousels fall back to
   flex-start, which is harmless — cards simply size to their own content.
   -------------------------------------------------------------------------- */

@supports not selector(:has(*)) {
  .testimonial-carousel .carousel-track,
  .card-carousel .carousel-track { align-items: stretch; }
}