/* Approved high-resolution devotional garden artwork for the homepage hero. */
.home-page .hero-art {
  background-image: url("/images/home-gods-divine-garden-v2.webp") !important;
  background-position: center 48% !important;
  background-repeat: no-repeat !important;
}

/* The desktop artwork uses a deep maroon veil behind the copy. Keep the
   typography luminous and readable while leaving the mobile copy dark on its
   separate cream panel. */
@media (min-width: 701px) {
  .home-page .hero-copy h1 {
    color: #fffaf0;
    text-shadow: 0 2px 22px rgba(31, 5, 4, 0.45);
  }

  .home-page .hero-copy h1 span {
    color: #f4cd75;
  }

  .home-page .hero-lede,
  .home-page .hero-trust {
    color: rgba(255, 250, 240, 0.94);
    text-shadow: 0 1px 14px rgba(31, 5, 4, 0.48);
  }

  .home-page .hero .eyebrow {
    color: #f6d98d;
  }
}

@media (min-width: 1100px) {
  .home-page .hero-art {
    inset: var(--header-height) 0 0;
    top: var(--header-height);
    width: 100%;
    aspect-ratio: auto;
    transform: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background-size: cover !important;
    background-position: center 48% !important;
    box-shadow: none;
  }

  .home-page .hero::after {
    background: linear-gradient(
      90deg,
      rgba(43, 10, 8, 0.98) 0%,
      rgba(56, 14, 10, 0.91) 34%,
      rgba(52, 12, 9, 0.46) 54%,
      rgba(38, 8, 6, 0.08) 74%,
      transparent 86%
    );
  }
}

@media (min-width: 701px) and (max-width: 1099px) {
  .home-page .hero-art {
    inset: 0;
    border: 0;
    border-radius: 0;
    background-position: 62% 20% !important;
    background-size: cover !important;
    box-shadow: none;
  }

  /* Keep the intermediate laptop/tablet hero consistent with the approved
     desktop treatment. The legacy ivory overlay and animated light layer
     combined into a grey wash at these widths, making the artwork look dim. */
  .home-page .hero::after {
    background: linear-gradient(
      90deg,
      rgba(43, 10, 8, 0.9) 0%,
      rgba(56, 14, 10, 0.76) 34%,
      rgba(52, 12, 9, 0.34) 55%,
      rgba(38, 8, 6, 0.06) 73%,
      transparent 84%
    );
  }

  .home-page .hero-light {
    display: none;
  }
}

@media (max-width: 700px) {
  .home-page .hero-art {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 240px;
    /* background-size:cover only ever crops ONE axis (the other always
       shows in full) - repositioning could never trim empty space on
       all four sides at once, which is why the pond on the left and
       the empty floor at the bottom kept showing regardless of
       position tweaks. Fixed properly: a separate, pre-cropped source
       image (below) tightly framed on all four deities' faces, at its
       own native ratio, so cover only needs to do minor edge trimming
       instead of carrying the whole composition problem. */
    aspect-ratio: 1240 / 810;
    border: 0;
    border-radius: 0;
    background-image: url("/images/home-gods-divine-garden-v2-mobile.webp") !important;
    background-position: center top !important;
    background-size: cover !important;
    box-shadow: none;
  }
}