/* Image-first heroes: loaded only by the six approved EN/TH pages. */
body[data-page="home"] .hero,
body:is([data-page="yacht"], [data-page="route"]) .subpage-hero {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
}

body[data-page="home"] .hero-visual,
body:is([data-page="yacht"], [data-page="route"]) .subpage-hero-media {
  order: -1;
  width: 95%;
  height: auto;
  min-height: 0;
  aspect-ratio: 5 / 2;
  margin-inline: auto;
  align-self: auto;
}

body[data-page="home"] .hero-visual > img,
body:is([data-page="yacht"], [data-page="route"]) .subpage-hero-media > img {
  object-fit: cover;
}

body[data-page="home"] .hero-visual > img {
  object-position: 49% 50%;
}

/* The original 3:2 yacht photo has sky above the vessel: crop sky, not hull. */
body[data-page="yacht"] .subpage-hero-media > img {
  object-position: 50% 70%;
}

body[data-page="route"] .subpage-hero-media > img {
  object-position: 49% 50%;
}

body[data-page="home"] .hero-copy,
body:is([data-page="yacht"], [data-page="route"]) .subpage-hero-copy {
  min-width: 0;
  min-height: 0;
  padding: 3.5rem 5vw;
}

body[data-page="home"] .hero-image-cta {
  display: inline-flex;
  max-width: calc(100% - 3.2rem);
}

@media (max-width: 680px) {
  body[data-page="home"] .hero-visual,
  body:is([data-page="yacht"], [data-page="route"]) .subpage-hero-media {
    width: 100%;
    height: clamp(220px, 40vw, 272px);
    aspect-ratio: auto;
  }

  body[data-page="home"] .hero-copy,
  body:is([data-page="yacht"], [data-page="route"]) .subpage-hero-copy {
    padding: 2.5rem 1.25rem;
  }

  /* Keep the image CTA and caption in separate overlay rows on narrow screens. */
  body[data-page="home"] .hero-image-cta {
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    width: auto;
    max-width: none;
    min-height: 48px;
    padding: .6rem .8rem;
    gap: .5rem;
  }

  body[data-page="home"] .hero-caption {
    bottom: 4.75rem;
  }
}