/* =========================
   HERO (Centered + Equal Height Cards)
   Wrapper class: hero-banner
========================= */

/* 1) Center the whole hero section */
.hero-banner{
  max-width: 1200px !important;
  margin: 24px auto !important;
  padding: 0 16px !important;
}

/* Remove extra padding from Kadence wrappers */
.hero-banner .kt-row-column-wrap,
.hero-banner .wp-block-kadence-column,
.hero-banner .kt-inside-inner-col{
  padding: 0 !important;
  margin: 0 !important;
}

/* 2) Two columns layout */
.hero-banner .kt-row-column-wrap{
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 28px !important;
  align-items: stretch !important;
}

/* Force both columns equal height */
.hero-banner .wp-block-kadence-column{
  height: 460px !important;
}

/* ✅ KEY FIX: make Kadence inner column stretch full height */
.hero-banner .wp-block-kadence-column > .kt-inside-inner-col{
  height: 100% !important;
  display: flex !important;
  align-items: stretch !important;
}

/* =========================
   LEFT: Smart Slider
========================= */

/* ✅ make slider container stretch inside flex column */
.hero-banner .wp-block-kadence-column:first-child .n2-section-smartslider{
  height: 100% !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10) !important;
}

/* keep your slider chain (safe) */
.hero-banner .wp-block-kadence-column:first-child .n2-ss-align,
.hero-banner .wp-block-kadence-column:first-child .n2-ss-slider,
.hero-banner .wp-block-kadence-column:first-child .n2-ss-slide-backgrounds,
.hero-banner .wp-block-kadence-column:first-child .n2-ss-slide-background{
  height: 100% !important;
  width: 100% !important;
}

/* Slider image fills card */
.hero-banner .wp-block-kadence-column:first-child .n2-ss-slide-background-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* =========================
   RIGHT: Banner
========================= */

/* ✅ make right block fill column height */
.hero-banner .wp-block-kadence-column:last-child .wp-block-image,
.hero-banner .wp-block-kadence-column:last-child .wp-block-uagb-image{
  height: 100% !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}

/* ✅ rounded card container fills height */
.hero-banner .wp-block-kadence-column:last-child figure,
.hero-banner .wp-block-kadence-column:last-child .wp-block-uagb-image__figure{
  height: 100% !important;
  width: 100% !important;
  flex: 1 1 auto !important; /* IMPORTANT */
  border-radius: 26px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10) !important;
  background: #fff !important;
  margin: 0 !important;
}

/* Image fills entire card */
.hero-banner .wp-block-kadence-column:last-child img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* =========================
   Responsive
========================= */
@media (max-width: 900px){
  .hero-banner .kt-row-column-wrap{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .hero-banner .wp-block-kadence-column{
    height: 280px !important;
  }

  .hero-banner .wp-block-kadence-column > .kt-inside-inner-col{
    height: 280px !important;
  }
}