/* Decorations share the photo's intrinsic canvas; the natural portrait stays untouched. */
@media (max-width: 880px) {
  .broadcast-slide--open .broadcast-stage__photo {
    position: relative;
  }

  .broadcast-slide--open .broadcast-stage__photo > img {
    /* The contained 941 × 1671 photo can end above the stage bottom.
       Blend its empty lower background, without scaling or masking the figure. */
    --mobile-photo-bottom: min(100%, 177.577vw);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--mobile-photo-bottom) - 80px), transparent var(--mobile-photo-bottom));
    mask-image: linear-gradient(to bottom, #000 calc(var(--mobile-photo-bottom) - 80px), transparent var(--mobile-photo-bottom));
  }

  .broadcast-slide--open .broadcast-stage__photo::after {
    position: absolute;
    inset: 0;
    background: url("assets/hero-mobile-fx.svg") center top / contain no-repeat;
    pointer-events: none;
    content: "";
  }

  .broadcast-slide--open .broadcast-offer__copy {
    top: var(--mobile-offer-offset, 0px);
  }
}

/* Browser bars shorten the viewport on phones. Fit only the portrait to that
   height; the backdrop must still reach both screen edges. */
@media (max-width: 880px) and (orientation: portrait) {
  .broadcast-slide--open .broadcast-stage__field {
    background: #000 url("assets/hero-mobile-fx.svg") center top / 100% auto no-repeat;
  }

  .broadcast-slide--open .broadcast-stage__photo {
    position: absolute;
    top: 0;
    left: 50%;
    width: auto;
    height: min(100%, calc(100vw * 1671 / 941));
    aspect-ratio: 941 / 1671;
    transform: translateX(-50%);
  }

  .broadcast-slide--open .broadcast-stage__photo > img {
    /* Feather empty margins only. Keep the photographed figure opaque. */
    -webkit-mask-image:
      linear-gradient(90deg, transparent, #000 18%, #000 88%, transparent),
      linear-gradient(to bottom, #000 calc(100% - 80px), transparent);
    mask-image:
      linear-gradient(90deg, transparent, #000 18%, #000 88%, transparent),
      linear-gradient(to bottom, #000 calc(100% - 80px), transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  .broadcast-slide--open .broadcast-stage__photo::after {
    /* Keep the light registered to Sasha; edge graphics now belong to the stage. */
    background-image: url("assets/hero-mobile-light.svg");
  }
}

@media (max-width: 880px) and (max-height: 700px) and (orientation: portrait) {
  .broadcast-slide--open .broadcast-stage__photo {
    height: min(76%, calc(100vw * 1671 / 941));
  }
}

@media (max-width: 880px) and (max-height: 620px) and (orientation: portrait) {
  .broadcast-slide--open .broadcast-offer {
    padding-bottom: 56px;
  }
}