/* index-hero-fix.css (v2)
   Goal: Keep hero stable across switches BUT allow it to look "bigger" (less reduced)
   - Bigger desktop hero via taller max-height clamp
   - Side images match main height using the old 2-up math (but without layout jump)
   Safe: include AFTER styles.css on index.html only
*/

/* Bigger hero on desktop */
:root{
  --index-hero-h: clamp(560px, 72vh, 860px);
}

/* Main hero: stable sizing */
.hero-media-main{
  width: 100%;
  aspect-ratio: 16 / 10;             /* change to 16/9 (more wide) or 4/3 (more tall) */
  max-height: var(--index-hero-h);
  height: auto !important;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
}

/* No-sides should NOT change sizing */
.hero-media.no-sides .hero-media-main{
  height: auto !important;
  max-height: var(--index-hero-h);
}

.hero-media-main img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Side images: keep them visually larger by matching the main hero height */
.hero-media{
  align-items: stretch;
}

.hero-media-sides{
  height: var(--index-hero-h) !important;
}

/* 2 stacked side images that fill the same height as main */
.hero-media-sides img{
  width: 100%;
  height: calc((var(--index-hero-h) - 1.25rem) / 2) !important; /* 1.25rem = gap */
  object-fit: cover;
  display: block;
}

/* Responsive: on smaller screens, let everything flow naturally */
@media (max-width: 960px){
  :root{ --index-hero-h: clamp(420px, 56vh, 620px); }

  .hero-media-main{
    max-height: none;
  }

  .hero-media-sides{
    height: auto !important;
  }
  .hero-media-sides img{
    height: auto !important;
    aspect-ratio: 16 / 10;
  }
}

/* Safety: prevent horizontal overflow from hero region */
.hero, .hero-wrap, .hero-main, .hero-media{
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 760px){

  /* stack media area */
  .hero-media{
    grid-template-columns: 1fr !important;
  }

  /* MAIN: show full image (no crop) */
  .hero-media-main{
    aspect-ratio: auto !important;
    max-height: none !important;
  }
  .hero-media-main img{
    height: auto !important;
    object-fit: contain !important;
    background: #fff; /* or #f6f7fb */
  }

  /* SIDES: 2-card row, equal height */
  .hero-media-sides{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    height: auto !important;
    margin-top: 12px;
    align-items: stretch;
  }
  .hero-media-sides img{
    width: 100%;
    height: 220px !important;             /* equal height */
    object-fit: cover;          /* consistent fill */
    object-position: center;    /* change to top center if needed */
    border-radius: 18px;
    background: #f6f7fb;
    display: block;
  }
}