/* Hero Polish — matches inner pages to the home hero look
   - Wide 16:9 image (not tall portrait)
   - Bigger title
   - Slimmer frame, no extra meta stack height
   - Taller section
*/

/* Inner page hero — taller, more spacious */
.site-hero.site-hero--inner:not(.site-hero--text-only) {
  min-height: 60vh !important;
  padding-bottom: clamp(40px, 5vw, 60px) !important;
}

/* Match home title size */
.site-hero--inner .site-hero-title,
.site-hero--inner .site-hero-title.is-long {
  font-size: clamp(32px, 3.8vw, 48px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  font-weight: 800 !important;
}
body:not(.eng) .site-hero--inner .site-hero-title,
body:not(.eng) .site-hero--inner .site-hero-title.is-long {
  font-size: clamp(20px, 2.4vw, 32px) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

/* Slimmer green frame — matches home */
.site-hero--inner .site-hero-media {
  padding: 8px !important;
  box-shadow: 0 24px 60px rgba(15, 35, 60, 0.2) !important;
  border-radius: var(--hero-img-radius-outer, 24px) !important;
}

/* CRITICAL: Override the padding-bottom hack with proper aspect-ratio
   The old CSS uses height:0 + padding-bottom:calc(75%+...) making it portrait.
   We need to reset that and use 16:9 like home. */
.site-hero.site-hero--inner:not(.site-hero--text-only) .site-hero-media-frame {
  height: auto !important;
  padding-bottom: 0 !important;
  aspect-ratio: 16 / 9 !important;
  position: relative !important;
  overflow: hidden !important;
}

.site-hero.site-hero--inner:not(.site-hero--text-only) .site-hero-media-frame img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Wider media area on desktop */
@media (min-width: 901px) {
  .site-hero--inner .site-hero-container {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
    gap: clamp(28px, 4.5vw, 56px) !important;
    align-items: center !important;
  }
  .site-hero--inner .site-hero-media {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Mobile */
@media (max-width: 900px) {
  .site-hero.site-hero--inner:not(.site-hero--text-only) {
    min-height: auto !important;
  }
  .site-hero--inner .site-hero-title,
  .site-hero--inner .site-hero-title.is-long {
    font-size: clamp(30px, 7vw, 44px) !important;
  }
}


/* Header logo sizing — compact enough for Malayalam navigation */
.logo-mark {
  width: 64px !important;
  height: 64px !important;
  padding: 4px !important;
}
.logo-name {
  font-size: 1.18rem !important;
  font-weight: 900 !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  color: var(--brand-green, #174836) !important;
  letter-spacing: -0.02em !important;
}
.logo-sub {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  color: var(--brand-green, #174836) !important;
  opacity: 0.85;
}

/* Fixed-height nav prevents translated labels from stretching the header */
.nav .nav-w {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  height: 84px !important;
}

html[lang="ml"] .logo-name {
  font-size: 1.05rem !important;
}

html[lang="ml"] .logo-sub {
  font-size: 0.54rem !important;
}

/* Bigger logo in footer — all pages */
.footer-brand .logo-mark {
  width: 72px !important;
  height: 72px !important;
  padding: 6px !important;
}
.f-brand-name {
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  letter-spacing: -0.02em !important;
}