/* TrainWithOkey — Hero Fit (Full Image in Hero Box) */

/* 1) Common hero wrappers seen in your layout; we keep it broad but safe */
.two-hero .hero-box,
.hero-media,
.tw-hero-media,
.tvo-hero-media,
.hero-card,
.wp-block-image.hero,
.wp-block-image.is-style-hero,
.section-hero .media,
.section-hero .hero-media {
  height: auto !important;
  aspect-ratio: auto !important;
}

/* 2) Make the image fill by width and keep full picture visible */
.two-hero .hero-box img,
.hero-media img,
.tw-hero-media img,
.tvo-hero-media img,
.hero-card img,
.wp-block-image.hero img,
.wp-block-image.is-style-hero img,
.section-hero .media img,
.section-hero .hero-media img {
  display: block !important;
  width: 100% !important;
  height: auto !important;          /* keep full image */
  object-fit: contain !important;   /* show entire picture */
  border-radius: 14px;
}

/* 3) Subtle text contrast boost inside dark heroes */
.hero, .hero *,
.section-hero, .section-hero * {
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* 4) Mobile: ensure hero area spans full width */
@media (max-width: 782px) {
  .two-hero .hero-box,
  .hero-media,
  .tw-hero-media,
  .tvo-hero-media,
  .hero-card,
  .wp-block-image.hero,
  .wp-block-image.is-style-hero {
    width: 100% !important;
  }
}