/* Light homepage hero — the portrait zone and the band height.

   The approved light home opens on a bright, near-white band: the copy sits on
   the left in ink, and the portrait holds the right of the band at full height,
   its left edge dissolved into the white with a mask so it does not read as a
   pasted-on card. styles.css owns the band surface and the type; this file
   positions the portrait and sizes the band. */

body.home-light .hero-shell {
  display: flex;
  min-height: clamp(430px, 40vw, 600px);
  align-items: center;
  padding-block: clamp(28px, 3.4vw, 48px);
}

body.home-light .hero-persona {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(46%, 620px);
  margin: 0;
}

body.home-light .hero-persona img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}

@media (max-width: 780px) {
  /* The portrait becomes a banner above the copy instead of a layer beside it. */
  body.home-light .hero-shell {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding-block: 0 var(--sp-7);
  }

  body.home-light .hero-persona {
    position: relative;
    order: -1;
    width: 100%;
    height: clamp(240px, 62vw, 340px);
  }

  body.home-light .hero-persona img {
    -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 32%);
    mask-image: linear-gradient(0deg, transparent 0, #000 32%);
  }

  body.home-light .hero-copy { padding-top: var(--sp-5); }
  body.home-light .hero-description { font-size: var(--fs-body); }
}