/* ═══════════════════════════════════════════════════════════
   LVGI Photo Alignment — exact slot ratios + object-fit cover
   Loaded after ux-fixes.css
   ═══════════════════════════════════════════════════════════ */

/* Every image fills its slot without distortion */
.hero-gwh-img,
.page-hero-img,
.page-hero-banner img,
.overview-image-real,
.leadership-img,
.leadership-photo img,
.news-card-img,
.blog-card-img,
.news-card-image img,
.blog-card-image img,
.program-img img,
.facility-img,
.facility-img-wrap img,
.activity-img,
.activity-img-wrap img,
.sport-img,
.sport-img-wrap img,
.image-card-img,
.facilities-showcase-img,
.facilities-showcase-media img,
.trust-img,
.gallery-img,
.gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 35% !important;
  display: block !important;
}

/* Hero — 16:9 full-bleed */
.hero-gwh-media {
  overflow: hidden;
}
.hero-gwh-img {
  object-position: center 40% !important;
}

/* Page hero banner — 3:1 strip */
.page-hero-banner {
  aspect-ratio: 3 / 1 !important;
  max-height: none !important;
  overflow: hidden;
}
.page-hero-banner img,
.page-hero-img {
  height: 100% !important;
  max-height: none !important;
  object-position: center 30% !important;
}

/* Overview — 4:3 */
.overview-image-wrap {
  aspect-ratio: 4 / 3 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden;
}
.overview-image-wrap .overview-image-real {
  min-height: 0 !important;
  max-height: none !important;
}

/* Leadership — 3:4 portrait */
.leadership-photo {
  aspect-ratio: 3 / 4 !important;
  max-height: none !important;
  overflow: hidden;
}
.leadership-photo img,
.leadership-img {
  min-height: 0 !important;
  max-height: none !important;
  object-position: center 20% !important;
}

/* News / blog cards — 16:10 */
.news-card-image,
.blog-card-image {
  aspect-ratio: 16 / 10 !important;
  max-height: none !important;
  overflow: hidden !important;
}
.news-card-image img,
.blog-card-image img,
.news-card-img,
.blog-card-img {
  max-height: none !important;
}

/* Program cards — 16:9 */
.program-card-v2 .program-img {
  aspect-ratio: 16 / 9 !important;
  max-height: none !important;
  overflow: hidden;
}

/* Showcase — 16:9 */
.facilities-showcase-media {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  overflow: hidden;
}
.facilities-showcase-media img,
.facilities-showcase-img {
  min-height: 0 !important;
}

/* Square tiles — trust, facilities, activities, sports */
.trust-item-img,
.facility-card-v2 .facility-img-wrap,
.activity-card-v2 .activity-img-wrap,
.sport-card-v2 .sport-img-wrap,
.image-card-media {
  aspect-ratio: 1 / 1 !important;
  max-height: none !important;
  overflow: hidden;
}

/* Gallery — uniform 4:3 grid (not uneven masonry columns) */
.gallery-masonry {
  columns: unset !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
}

.gallery-item {
  break-inside: unset !important;
  margin-bottom: 0 !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden;
  border-radius: 12px;
}

.gallery-item img,
.gallery-img {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item[hidden] {
  display: none !important;
}

/* Gallery filter pills */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin: 0 0 1.75rem;
}

.gallery-filter-btn {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(74, 127, 167, 0.45);
  background: rgba(255, 255, 255, 0.65);
  color: #1A3D63;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.gallery-filter-btn:hover,
.gallery-filter-btn.active {
  background: linear-gradient(135deg, #1A3D63, #4A7FA7);
  color: #fff;
  border-color: transparent;
}

@media (max-width: 1100px) {
  .gallery-masonry { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 768px) {
  .gallery-masonry { grid-template-columns: repeat(2, 1fr) !important; }
  .page-hero-banner { aspect-ratio: 16 / 9 !important; }
  .facilities-showcase-media { height: auto !important; }
}

@media (max-width: 480px) {
  .gallery-masonry { grid-template-columns: 1fr !important; }
}