/* ==========================================================================
   photo-fit.css — keeps people in frame.
   Loaded last on every page. Photos are still cropped to fit their frames,
   but the crop is biased towards the upper part of the picture (where faces
   are), and several frames were reshaped to 4:3 so far less is cut away.
   ========================================================================== */

/* 1. Default: bias every cropped photo upwards so heads are not clipped. */
.ministry-card>img,.programme-card>img,.ed-programme img,.ed-step img,.ed-reel img,
.ed-photo-stack>img,.ed-photo-tile img,.ed-action>img,.detail-photos img,
.page-hero figure img,.photo-reel img,.collection-photo img,.gallery-photo img,
.rida-lead img,.rida-photo-strip img,.rida-about-grid img,.ed-team-grid article img,
.building-image>img,.freedom-feature>img,.gather-image img,.hero-photo img,
.card-media img,.story-photo img{object-position:50% 30%}

/* 2. Portrait originals inside wide frames: bias further up. */
img.is-portrait{object-position:50% 20%!important}
/* 3. Very wide originals: keep the middle. */
img.is-wide{object-position:50% 45%!important}
/* 4. Square-ish originals sit well slightly above centre. */
img.is-square{object-position:50% 28%!important}

/* 5. Reshape the tightest frames to 4:3 — the shape most of these photos
      already are — so the crop almost disappears. */
.ministry-card>img{height:auto;aspect-ratio:4/3}
.programme-card>img{height:auto;aspect-ratio:4/3}
.ed-programme img{height:auto;aspect-ratio:4/3}
.ed-step img{height:auto;aspect-ratio:4/3}
.ed-photo-stack>img{height:auto;aspect-ratio:4/3}
.detail-photos img{height:auto;aspect-ratio:4/3}
.page-hero figure img{height:auto;aspect-ratio:4/3}
.ed-reel img{height:auto;aspect-ratio:4/3}
.rida-photo-strip img{height:auto;aspect-ratio:4/3}
.rida-about-grid img{height:auto;aspect-ratio:4/3}

/* 6. Portrait photos in those reshaped frames get their own taller frame
      instead of losing their top and bottom. */
.ed-reel img.is-portrait,.detail-photos img.is-portrait{aspect-ratio:3/4}

/* 7. Lead images: a little more room, a gentler crop. */
.rida-lead img{height:auto;aspect-ratio:3/2}
.rida-lead figure:nth-child(2) img{aspect-ratio:3/4;object-position:50% 25%}
.ed-action>img{min-height:340px;object-position:50% 30%}
.ed-cover>img{object-position:50% 38%}
.building-image>img{height:auto;aspect-ratio:3/4;max-height:620px}

/* 8. Tiles: square-ish frames crop landscape photos the least. */
.collection-photo{aspect-ratio:1/1}
.collection-photo:nth-child(9n+1){aspect-ratio:2/1.04}
.gallery-photo{aspect-ratio:1}

/* 9. Full-size views must never crop at all. */
dialog img,.ed-lightbox img,.collection-viewer #collection-full{object-fit:contain!important;object-position:center!important}

@media(max-width:900px){
  .ed-action>img{min-height:0;aspect-ratio:16/10;height:auto}
  .building-image>img{aspect-ratio:4/3}
}
@media(max-width:700px){
  .rida-lead img{aspect-ratio:4/3}
  .rida-lead figure:nth-child(2) img{height:auto;aspect-ratio:3/4;object-fit:cover;background:none}
  .ed-step img{aspect-ratio:1/1}
  .collection-photo{aspect-ratio:1/1}
  .collection-photo:nth-child(9n+1){aspect-ratio:2/1.04}
}
@media(max-width:560px){
  .gallery-photo,.gallery-photo:first-child{aspect-ratio:4/3}
  .ministry-card>img,.programme-card>img{aspect-ratio:4/3}
}

/* 10. The photo-archive grids show every picture whole — nothing cropped.
       A masonry column layout lets portrait and landscape photographs sit
       side by side at their own natural shape. */
.ed-photo-grid{display:block;columns:4;column-gap:13px;grid-template-columns:none}
.ed-photo-tile{width:100%;margin:0 0 13px;break-inside:avoid;aspect-ratio:auto!important;min-height:0!important;grid-column:auto!important;grid-row:auto!important;background:transparent}
.ed-photo-tile img{height:auto!important;width:100%;object-fit:contain!important}
.ed-photo-tile:after{right:10px;bottom:22px}

/* 11. Portrait photographs elsewhere get a taller cell rather than losing
       their top and bottom. */
.ed-step img.is-portrait{aspect-ratio:1/1}
.ed-photo-stack>img.is-portrait{aspect-ratio:3/4}
.ed-programme img.is-portrait,.programme-card>img.is-portrait,.ministry-card>img.is-portrait{aspect-ratio:1/1}
.rida-about-grid{align-items:start}
.rida-about-grid img.is-portrait{aspect-ratio:3/4}
/* A reel frame marked portrait that actually holds a landscape photo. */
.photo-reel figure.portrait:not(:has(img.is-portrait)){width:470px}

/* 12. Page cover banners: a taller, gentler crop. */
.ed-cover{height:auto;aspect-ratio:2/1;max-height:640px}
.ed-cover>img{height:100%}

@media(max-width:900px){.ed-photo-grid{columns:3}}
@media(max-width:700px){
  .ed-photo-grid{columns:2;column-gap:9px}
  .ed-photo-tile{margin-bottom:9px}
  .ed-cover{aspect-ratio:4/3;height:auto;max-height:420px}
}
.ed-programme img.is-wide,.programme-card>img.is-wide,.ministry-card>img.is-wide,.ed-step img.is-wide{aspect-ratio:16/9}