/* ==========================================================================
   Star Musical Entertainer — image system
   Loaded last. Gives every image on the site a predictable, consistent frame.

   The problem this solves: images were rendering at their natural aspect
   ratio in several places, so a tall portrait photograph appeared many times
   larger than a landscape one in the same row. The source photographs are a
   mix of phone portraits, landscapes and square crops, so the layout has to
   impose the ratio rather than inherit it.

   Approach: every image sits inside a frame with a fixed aspect ratio, and
   fills it with `object-fit: cover`. Nothing is distorted — the frame crops.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The core rule
   `object-fit` only applies to replaced elements, so it must land on the
   <img> itself. Applying it to the <picture> wrapper (as before) does
   nothing, which is why images escaped their containers.
   -------------------------------------------------------------------------- */

.gallery-item picture,
.card-media picture,
.video-thumb picture,
.media-frame picture,
.recent-post picture {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery-item picture > img,
.card-media picture > img,
.video-thumb picture > img,
.media-frame picture > img,
.recent-post picture > img,
.gallery-item > img,
.card-media > img,
.video-thumb > img,
.media-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --------------------------------------------------------------------------
   2. Frame ratios
   A small set of ratios used consistently, rather than each component
   inventing its own.
   -------------------------------------------------------------------------- */

/* Gallery tiles: square. Reads as an even grid regardless of source photo. */
.gallery-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Card thumbnails: 4:3 gives portraits enough height to stay recognisable
   while keeping every card in a row the same height. */
.card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

/* Video posters keep the 16:9 of the source footage. */
.video-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}

/* Feature images beside body copy — About, homepage intro, service and event
   detail pages. Previously these had no ratio and rendered at natural size. */
.media-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212,165,66,.24);
  background: var(--ink-3);
}

/* A taller variant for portrait-led subjects such as the artist photograph. */
.media-frame--portrait { aspect-ratio: 3 / 4; }

/* A wide variant for banner-style images. */
.media-frame--wide { aspect-ratio: 16 / 9; }

/* Sidebar thumbnails in the blog widget. */
.recent-post img {
  width: 68px;
  height: 68px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   3. Collage images
   Two source files are pre-made collages whose own internal grid is destroyed
   by a square crop. They keep their natural proportions inside a wide frame.
   -------------------------------------------------------------------------- */

.gallery-item--collage { aspect-ratio: 4 / 3; }
.gallery-item--collage img { object-fit: contain; background: var(--ink-2); }

/* --------------------------------------------------------------------------
   4. Consistent card heights
   Cards in a grid stretch to match the tallest, so their bodies must flex or
   the media frames end up misaligned.
   -------------------------------------------------------------------------- */

.grid > .card,
.carousel-slide > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.card-footer { margin-top: auto; }

/* --------------------------------------------------------------------------
   5. Loading state
   A neutral background prevents a white flash before the image paints.
   -------------------------------------------------------------------------- */

.gallery-item,
.card-media,
.video-thumb,
.media-frame { background: var(--ink-3); }

/* --------------------------------------------------------------------------
   6. Responsive ratio adjustments
   Very tall frames waste vertical space on a phone, where the viewport is
   already narrow.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .media-frame--portrait { aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  /* Cards go full width, so a slightly wider ratio keeps them compact. */
  .card-media { aspect-ratio: 16 / 10; }

  .media-frame,
  .media-frame--portrait { aspect-ratio: 4 / 3; }

  /* Two square tiles per row on a phone. */
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The tile ratio itself is set once in carousel-fixes.css so the grid and
     the carousel can never disagree — having two different values at the
     same breakpoint made the winner depend on stylesheet order. */
}

@media (max-width: 380px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
}

/* --------------------------------------------------------------------------
   7. Overlay legibility
   With a consistent crop the caption sits in a predictable place, so the
   gradient can be tuned to match.
   -------------------------------------------------------------------------- */

.gallery-overlay {
  background: linear-gradient(to top, rgba(21,10,8,.92) 0%, rgba(21,10,8,.35) 45%, transparent 100%);
}
.gallery-overlay h4 {
  font-size: .92rem;
  line-height: 1.3;
  /* Long titles are clamped to two lines so tiles stay uniform. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  .gallery-overlay { padding: var(--sp-3); }
  .gallery-overlay h4 { font-size: .8rem; }
  .gallery-overlay span { font-size: .66rem; }
}