/* ==========================================================================
   HERO IMAGES — one treatment, used everywhere a painted scene appears.

   Same height, same picture width, same fade, on every page:
     - the picture is held to one side at 58% of the width
     - its inner edge dissolves into the papyrus page with ONE gradient
     - the copy sits on the papyrus on the other side, never in a box

   .hi-left   copy on the left, picture on the right   (Sobek stands on the right of the painting)
   .hi-right  copy on the right, picture on the left   (Sobek stands on the left of the painting)
              -> exactly the same gradient, mirrored

   The pictures are the owner's original files, untouched. Framing is CSS only:
     --pos    which part of the painting to keep on wide screens
     --pos-m  the same for phones, where the picture stacks above the copy
   .hi-flip mirrors a painting so Sobek faces the copy.
   ========================================================================== */
.hero-img {
  --hi-w: 58%;                       /* picture width */
  --hi-solid: 42%;                   /* where the fade starts (= 100% - picture width) */
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: clamp(460px, 38vw, 620px);
  background: var(--papyrus);
}

.hi-pic {
  position: absolute; top: 0; bottom: 0; z-index: -2;
  width: var(--hi-w); height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 40%); display: block;
}
/* <picture> only chooses the file (original on desktop, light copy on phones); it takes no part in layout. */
.hero-img > picture { display: contents; }
.hi-left  .hi-pic { right: 0; }
.hi-right .hi-pic { left: 0; }
.hi-flip { transform: scaleX(-1); }

/* THE gradient. Mirrored for .hi-right, otherwise identical. */
.hero-img::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--hi-dir, 90deg),
    var(--papyrus) 0%, var(--papyrus) var(--hi-solid),
    rgba(251,246,237,.86) 48%, rgba(251,246,237,.45) 56%, rgba(251,246,237,0) 66%);
}
.hi-right { --hi-dir: 270deg; }

.hi-inner { display: flex; padding-block: clamp(40px, 5vw, 72px); }
.hi-right .hi-inner { justify-content: flex-end; }

.hi-copy { width: min(100%, 540px); }
.hi-copy h1 { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.1rem); line-height: 1.08; }
.hi-copy h2 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); }
.hi-copy h1 .strike { color: rgba(11,58,126,.5); text-decoration: line-through; text-decoration-color: var(--yolk-dk); text-decoration-thickness: 5px; }
.hi-copy .lede { margin-top: 18px; color: #3C4568; max-width: 48ch; }
.hi-copy p { color: var(--muted); }
.hi-copy .hero-cta { margin-top: 28px; gap: 12px; }
.hi-copy .btn { padding-inline: 22px; font-size: 1rem; }
.hi-copy .store-row { justify-content: flex-start; }
.hero-img .hero-proof { color: #3C4568; margin-top: 24px; }
.hero-img .hero-proof svg { color: var(--croc-text); }

/* The steps that follow the "How it works" hero sit closer to it. */
.section-after-band { padding-top: clamp(40px, 5vw, 64px); }

/* ---- phones and small tablets: picture on top, copy underneath ---- */
@media (max-width: 860px) {
  .hero-img { display: flex; flex-direction: column; min-height: 0; }
  .hero-img::after { display: none; }
  .hi-pic { position: static; width: 100%; height: auto; aspect-ratio: 900 / 680; object-position: var(--pos-m, 50% 40%); }
  .hi-inner, .hi-right .hi-inner { justify-content: center; padding-block: 32px 48px; }
  .hi-copy { width: 100%; text-align: center; }
  .hi-copy h1 .nowrap { white-space: normal; }
  .hi-copy .lede { margin-inline: auto; }
  .hi-copy .hero-cta, .hi-copy .store-row, .hero-img .hero-proof { justify-content: center; }
}

/* Under the two store buttons in the home hero. */
.hero-listen { margin-top: 16px; }
@media (max-width: 860px) { .hero-listen { text-align: center; } }