/* ==========================================================================
   Star Musical Entertainer — crop positioning
   Loaded last.

   The problem: feature images were cropping through people's faces.

   Why it happened. Half the photo library (32 of 65) is portrait-oriented
   phone photography, and in 24 of those the subjects sit in the upper 42% of
   the frame — event photographs are framed with people high and floor or
   decor filling the lower half. `object-fit: cover` defaults to
   `object-position: center`, so squeezing a tall portrait into a 4:3 landscape
   frame removes the top and bottom equally, which takes the heads off.

   The fix has two parts:
     1. Anchor crops near the top, where the faces are.
     2. Give feature images a taller frame so portraits lose less to the crop.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Crop anchoring
   28% keeps the head-and-shoulders region in frame for both portrait and
   landscape sources, without pushing so far up that group shots lose their
   lower half.
   -------------------------------------------------------------------------- */

.gallery-item img,
.gallery-item picture > img,
.card-media img,
.card-media picture > img,
.media-frame img,
.media-frame picture > img,
.carousel-slide .gallery-item img {
  object-position: center 28%;
}

/* Collages are letterboxed rather than cropped, so they stay centred. */
.gallery-item--collage img { object-position: center center; }

/* Video posters are 16:9 already, matching the source footage, so no crop
   correction is needed. */
.video-thumb img { object-position: center center; }

/* --------------------------------------------------------------------------
   2. Taller feature frames
   A 4:3 frame discards 44% of a 3:4 portrait. 4:5 discards only 6%, so far
   more of the photograph survives and the subject stays comfortably inside.
   -------------------------------------------------------------------------- */

.media-frame { aspect-ratio: 4 / 5; }

/*
 * Detail-page hero images.
 *
 * 16:9 proved far too wide for this library. The sources are mostly 4:3,
 * 1:1 and portrait phone photographs, so a 16:9 frame was discarding between
 * 25% and 55% of each picture — taking the subject's head with it on the
 * taller ones. 3:2 still reads as a banner but keeps much more of the frame.
 */
.media-frame--wide { aspect-ratio: 3 / 2; }
.media-frame--wide img { object-position: center 30%; }

/*
 * Pre-made collages are grids of photographs. Cropping one cuts through its
 * internal cells, so it is letterboxed inside the frame instead — the whole
 * image stays visible against the section background.
 */
.media-frame--contain img {
  object-fit: contain;
  object-position: center center;
  background: var(--ink-2);
}

/* Explicit portrait variant, for when a tall source should stay tall. */
.media-frame--portrait { aspect-ratio: 3 / 4; }

/* --------------------------------------------------------------------------
   3. Card thumbnails
   Cards sit in a grid, so a very tall frame would make rows enormous. 4:3
   stays, but the crop anchors higher so faces survive.
   -------------------------------------------------------------------------- */

.card-media img { object-position: center 25%; }

/* --------------------------------------------------------------------------
   4. Gallery tiles
   Square tiles crop a 3:4 portrait by 25%. Anchoring at 25% keeps the head
   region and drops floor detail instead.
   -------------------------------------------------------------------------- */

.gallery-item img { object-position: center 25%; }

/* --------------------------------------------------------------------------
   5. Per-image overrides
   A handful of photographs have their subject unusually low or high. These
   were identified by measuring skin-tone distribution per image
   (_tools/analyse_crops.php) and are corrected individually.
   -------------------------------------------------------------------------- */

/* Subject near the top of the frame. */
[src*="artists-at-jagran-venue"],
[src*="bhajan-sandhya-performance"],
[src*="event-moments"],
[src*="rajesh-bajaj-with-artists-wedding"] { object-position: center 18% !important; }

/* Subject low in the frame — wide stage shots and decor. */
[src*="chowki-devotional-setup"],
[src*="dj-console-sound-setup"],
[src*="event-lighting-ambience"],
[src*="devotional-stage-decor"],
[src*="event-production-overview"] { object-position: center 55% !important; }

/* --------------------------------------------------------------------------
   6. Mobile
   On a phone the feature image is full width, so it can afford to be taller
   still — nothing sits beside it competing for space.
   -------------------------------------------------------------------------- */

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

@media (max-width: 640px) {
  /* Cards go full width; a slightly taller frame shows more of the subject. */
  .card-media { aspect-ratio: 4 / 3; }
}