/* ═══════════════════════════════════════════════════════════
   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,
.campus-collage-img,
.campus-collage-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 center !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; }
}

/* Homepage card alignment */
.why-grid.why-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
}

.why-grid.why-grid-3 .why-card {
  height: 100% !important;
}

.programs-grid-compact {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 1.25rem !important;
}

.programs-grid-compact .program-card-compact {
  flex: 1 1 240px !important;
  max-width: 340px !important;
  min-height: 190px;
  display: flex !important;
  flex-direction: column;
  text-align: center;
}

.programs-grid-compact .program-card-link {
  margin-top: auto;
}

/* Photo collage — even 3-column grid, no gaps */
.campus-collage {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 220px !important;
  gap: 1rem !important;
}

.campus-collage-item,
.campus-collage-item:nth-child(1),
.campus-collage-item:nth-child(5) {
  grid-column: span 1 !important;
  overflow: hidden;
  border-radius: 16px;
  height: 100%;
}

.campus-collage-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.45s ease;
}

.campus-collage-item:hover img {
  transform: scale(1.04);
}

@media (max-width: 900px) {
  .campus-collage {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 180px !important;
  }
}

@media (max-width: 600px) {
  .campus-collage {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 220px !important;
  }
}

/* Inner-page and contact hero alignment */
.page-hero-content {
  width: min(920px, 100%);
  margin-inline: auto;
  text-align: center;
}

.page-hero-contact .page-hero-banner {
  aspect-ratio: 14 / 5 !important;
}

.page-hero-contact .page-hero-img {
  object-position: center 42% !important;
}

.leadership-photo-inline {
  width: min(280px, 100%);
  margin: 0 auto 1.25rem;
  border-radius: 14px;
}

@media (max-width: 900px) {
  .why-grid.why-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .campus-collage {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 170px;
  }

  .campus-collage-item,
  .campus-collage-item:nth-child(1),
  .campus-collage-item:nth-child(5) {
    grid-column: span 1;
  }
}

@media (max-width: 600px) {
  .why-grid.why-grid-3 {
    grid-template-columns: 1fr !important;
  }

  .programs-grid-compact .program-card-compact {
    flex-basis: 100% !important;
    max-width: none !important;
    min-height: 0;
  }

  .campus-collage {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }

  .page-hero-contact .page-hero-banner {
    aspect-ratio: 16 / 10 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   FINAL header / logo alignment (loaded last)
   Big visible logo · lower compact bar · perfect centering
   ═══════════════════════════════════════════════════════════ */

:root {
  --topbar-height: 36px;
  --header-height: 112px;
}

/* Slim contact bar */
.school-top-bar {
  min-height: var(--topbar-height) !important;
  height: auto !important;
  padding: 0 !important;
  display: block !important;
  position: relative !important;
  z-index: 1003 !important;
  overflow: hidden !important;
}

.school-top-bar-cols {
  min-height: var(--topbar-height);
  padding: 0.35rem 1.25rem !important;
  align-items: center !important;
}

/* Compact solid header — sits low & clean */
.site-header,
.is-front-page .site-header,
.is-front-page .site-header:not(.scrolled),
.is-front-page .site-header.scrolled {
  position: sticky !important;
  top: 0 !important;
  height: var(--header-height) !important;
  min-height: var(--header-height) !important;
  max-height: var(--header-height) !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(26, 61, 99, 0.12) !important;
  box-shadow: 0 2px 12px rgba(10, 25, 49, 0.06) !important;
  overflow: visible !important;
  z-index: 1002 !important;
}

.header-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  height: var(--header-height) !important;
  min-height: var(--header-height) !important;
  max-height: var(--header-height) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 1.25rem !important;
  box-sizing: border-box !important;
}

/* Logo — big, clear, perfectly centered in the bar */
.site-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  height: var(--header-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  align-self: center !important;
}

.site-logo .custom-logo-link {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  line-height: 0 !important;
}

.site-logo-img,
.custom-logo,
.custom-logo-link img,
.is-front-page .site-header:not(.scrolled) .site-logo-img,
.is-front-page .site-header:not(.scrolled) .custom-logo,
.is-front-page .site-header.scrolled .site-logo-img,
.is-front-page .site-header.scrolled .custom-logo {
  display: block !important;
  width: 120px !important;
  height: 120px !important;
  max-width: 120px !important;
  max-height: 120px !important;
  margin: 0 !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid rgba(26, 61, 99, 0.12) !important;
  box-shadow: 0 4px 16px rgba(10, 25, 49, 0.18) !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Nav — perfect vertical center */
.main-nav {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  min-width: 0 !important;
}

.nav-list {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.15rem !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}

.nav-list a {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 0.45rem 0.65rem !important;
  line-height: 1.2 !important;
  color: #0A1931 !important;
  white-space: nowrap;
}

/* Actions — perfect vertical center */
.header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  gap: 0.55rem !important;
  height: 100% !important;
}

.header-phone,
.header-whatsapp,
.header-search-toggle,
.mobile-toggle {
  align-self: center !important;
}

.header-actions .btn-sm {
  align-self: center !important;
  min-height: 40px !important;
}

/* Keep page content below the lower header */
.hero-gwh,
.is-front-page .hero-gwh {
  margin-top: 0 !important;
}

.page-hero {
  margin-top: 0 !important;
}

@media (max-width: 1100px) {
  :root { --header-height: 104px; }

  .site-logo-img,
  .custom-logo,
  .custom-logo-link img,
  .is-front-page .site-header:not(.scrolled) .site-logo-img,
  .is-front-page .site-header.scrolled .site-logo-img {
    width: 108px !important;
    height: 108px !important;
    max-width: 108px !important;
    max-height: 108px !important;
  }

  .nav-list a {
    font-size: 0.74rem !important;
    padding: 0.4rem 0.5rem !important;
  }
}

@media (max-width: 960px) {
  :root { --header-height: 96px; }

  .site-logo-img,
  .custom-logo,
  .custom-logo-link img,
  .is-front-page .site-header:not(.scrolled) .site-logo-img,
  .is-front-page .site-header.scrolled .site-logo-img {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
  }
}

@media (max-width: 768px) {
  :root {
    --topbar-height: 32px;
    --header-height: 88px;
  }

  .header-container {
    padding: 0 0.85rem !important;
    gap: 0.5rem !important;
  }

  .site-logo-img,
  .custom-logo,
  .custom-logo-link img,
  .is-front-page .site-header:not(.scrolled) .site-logo-img,
  .is-front-page .site-header.scrolled .site-logo-img {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    padding: 3px !important;
  }
}