/* Keeps the original two-column hero composition while controlling layer order. */
body[data-page="home"] .home-hero__visual {
  position: relative;
  z-index: 0;
}

body[data-page="home"] .home-hero__content {
  position: relative;
  z-index: 2;
  isolation: isolate;
}

body[data-page="home"] .home-hero__content::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -32px -112px -32px -48px;
  background: linear-gradient(90deg, rgba(4, 14, 30, .98) 0%, rgba(5, 17, 35, .95) 66%, rgba(6, 20, 40, .78) 84%, rgba(7, 21, 42, 0) 100%);
  pointer-events: none;
}

body[data-page="home"] .home-hero__content > * {
  position: relative;
  z-index: 2;
}

@media (max-width: 860px) {
  body[data-page="home"] .home-hero__content::before {
    inset: -24px -32px -24px;
    background: rgba(4, 14, 30, .88);
  }
}

@media (max-width: 767px) {
  body[data-page="home"] .home-hero__grid {
    position: relative;
    min-height: 0;
  }

  body[data-page="home"] .home-hero__visual {
    position: absolute;
    inset: auto calc(50% - 50vw) 0;
    display: block;
    width: auto;
    height: clamp(240px, 72vw, 320px);
    min-height: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
  }

  body[data-page="home"] .home-hero__visual::before {
    background: linear-gradient(180deg, #07162a 0%, rgba(7,22,42,.88) 30%, rgba(7,22,42,.28) 62%, rgba(5,14,28,.18) 100%);
  }

  body[data-page="home"] .home-hero__visual img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    transform: none;
  }

  body[data-page="home"] .home-hero__content::before {
    inset: -20px -16px -20px;
    background: linear-gradient(180deg, rgba(4,14,30,.98) 0%, rgba(5,17,35,.92) 64%, rgba(7,21,42,.28) 100%);
  }
}

/* This file is loaded after responsive.css, so these rules win in the cascade. */
@media (min-width: 1121px) and (max-width: 1599px) {
  body[data-page="home"] .home-hero__visual {
    position: absolute;
    inset: 0 calc(50% - 50vw) 0 calc(540px + clamp(48px, 5vw, 76px) - clamp(24px, 3vw, 48px));
    width: auto;
    margin: 0;
  }
}

@media (min-width: 1600px) {
  body[data-page="home"] .home-hero__visual {
    position: absolute;
    inset: 0 calc(50% - 50vw) 0 calc(600px + clamp(64px, 5vw, 104px) - clamp(36px, 4.5vw, 86px));
    width: auto;
    margin: 0;
  }
}