/* Desktop hero: full-bleed decorative plates with one undistorted subject.
   Keep all composition and control changes above the mobile breakpoint. */
@media (min-width: 881px) {
  .broadcast-hero {
    --desktop-hero-gutter: clamp(32px, 4vw, 72px);
    --desktop-hero-width: min(calc(100% - var(--desktop-hero-gutter) * 2), 1600px);
  }

  /* These old moving crops each contain another complete photograph. */
  .broadcast-slide--open .broadcast-stage__flag-wave,
  .broadcast-slide--open .broadcast-stage__ufc-motion,
  .broadcast-slide--open .broadcast-stage__spotlight,
  .broadcast-slide--open .broadcast-stage__ink {
    display: none;
  }

  .broadcast-slide--open .broadcast-stage {
    background: #050506;
  }

  .broadcast-slide--open .broadcast-stage__field {
    inset: 0;
    /* This plate has no person, so it can fill any desktop aspect ratio. */
    background: #050506 url("assets/images/hero-layers/broadcast-field-v4.png") center / cover no-repeat;
    transform: none;
  }

  .broadcast-slide--open .broadcast-stage__photo {
    position: absolute;
    inset: 0 auto 0 67%;
    width: auto;
    height: 100%;
    aspect-ratio: 1672 / 941;
    /* Anchor the athlete, not the centre of the wide composite canvas. */
    transform: translateX(-57.6%);
  }

  .broadcast-slide--open .broadcast-stage__photo > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
    /* Preserve the whole athlete (x=797..1130), overhead light and floor.
       Blend only the empty side scenery into the full-bleed clean plate. */
    -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 47%, #000 69%, transparent 82%);
    mask-image: linear-gradient(90deg, transparent 38%, #000 47%, #000 69%, transparent 82%);
  }

  .broadcast-slide--open .broadcast-stage__field::after {
    background: linear-gradient(90deg, rgba(5, 5, 6, 0.54), rgba(5, 5, 6, 0.2) 36%, transparent 55%);
  }

  .broadcast-offer,
  .broadcast-hero .broadcast-slide--trust .trust-layout {
    width: var(--desktop-hero-width);
    margin-inline: auto;
    padding-top: clamp(36px, 5svh, 64px);
    padding-bottom: clamp(112px, 14svh, 160px);
  }

  .broadcast-offer__copy,
  .broadcast-hero .broadcast-slide--trust .trust-copy {
    width: min(42vw, 620px);
    min-width: 0;
  }

  .broadcast-offer h1 {
    font-size: clamp(60px, 6.4vw, 110px);
  }

  .broadcast-offer__lead,
  .broadcast-hero .broadcast-slide--trust .trust-copy > p:not(.trust-copy__eyebrow) {
    max-width: 43ch;
    font-size: clamp(14px, 1.04vw, 17px);
    line-height: 1.55;
  }

  .broadcast-offer__actions {
    flex-wrap: wrap;
    gap: 18px 22px;
  }

  .broadcast-offer__phone {
    font-size: 10px;
    line-height: 1.5;
  }

  .broadcast-offer__proof {
    bottom: 30px;
    width: min(42vw, 560px);
  }

  .broadcast-coach-bug {
    top: 32px;
    right: var(--desktop-hero-gutter);
  }

  .broadcast-hero .broadcast-pager {
    right: var(--desktop-hero-gutter);
    bottom: 30px;
  }

  .broadcast-hero .broadcast-slide--trust .trust-editorial__backdrop--composite {
    inset: 0;
    /* Cover applies only to the clean decoration, never to Sasha's portrait. */
    background: #050506 url("assets/images/hero-slide-2/thai-tiger-background-v1.png") right center / cover no-repeat;
  }

  .broadcast-hero .broadcast-slide--trust .trust-editorial__backdrop--composite::before,
  .broadcast-hero .broadcast-slide--trust .trust-editorial__backdrop--composite::after {
    display: none;
    background: none;
    content: none;
  }

  .broadcast-hero .broadcast-slide--trust .trust-editorial__scene {
    inset: 0;
    width: var(--desktop-hero-width);
    height: auto;
    margin-inline: auto;
    aspect-ratio: auto;
    background: none;
    transform: none;
  }

  .broadcast-hero .broadcast-slide--trust .trust-editorial__sasha {
    top: auto;
    right: auto;
    bottom: 0;
    left: 78%;
    width: auto;
    height: min(100%, 104vw);
    max-width: none;
    /* The alpha subject spans x=796..1151 in the 1376px-wide original.
       Center its visible bounds, not the large transparent canvas. */
    transform: translateX(-70.785%);
    object-fit: contain;
  }

  .broadcast-hero .broadcast-slide--trust .trust-editorial__shade {
    background: linear-gradient(90deg, rgba(5, 5, 6, 0.5), rgba(5, 5, 6, 0.12) 44%, transparent 62%);
  }

  .broadcast-hero .broadcast-slide--trust .trust-copy {
    position: relative;
    inset: auto;
    width: min(44vw, 720px);
    padding: 0;
  }

  .broadcast-hero .broadcast-slide--trust .trust-copy h2 {
    font-size: clamp(54px, 5.8vw, 94px);
    line-height: 0.91;
  }

  .broadcast-hero .broadcast-slide--trust .trust-copy > p:not(.trust-copy__eyebrow) {
    font-size: clamp(16px, 1.18vw, 20px);
    line-height: 1.6;
    margin-bottom: 24px;
  }

  .broadcast-hero .broadcast-slide--trust .trust-copy li {
    min-height: clamp(84px, 6vw, 96px);
    padding: 14px 12px;
  }

  .broadcast-hero .broadcast-slide--trust .trust-copy li strong {
    font-size: clamp(26px, 1.9vw, 34px);
  }

  .broadcast-hero .broadcast-slide--trust .trust-copy li span {
    font-size: 12px;
  }

  .broadcast-hero .broadcast-slide--trust .trust-copy .swipe-button {
    --control-width: 380px;
    --control-height: 68px;
    --control-orb: 56px;
    --control-side: 68px;
    --control-label-size: 13px;
    --control-chevron-width: 30px;
  }

  .broadcast-hero .broadcast-slide--trust .trust-copy__eyebrow,
  .broadcast-offer__eyebrow {
    font-size: 10px;
    line-height: 1.35;
    flex-wrap: wrap;
  }
}

/* Tall desktop windows keep the complete first athlete to the right of copy. */
@media (min-width: 881px) and (max-aspect-ratio: 6 / 5) {
  .broadcast-slide--open .broadcast-stage__photo {
    left: 77%;
  }

  .broadcast-offer {
    align-items: flex-end;
    padding-bottom: 150px;
  }

  .broadcast-offer__copy {
    width: min(52vw, 620px);
  }

  .broadcast-offer h1 {
    font-size: clamp(60px, 7.1vw, 92px);
  }

  .broadcast-coach-bug {
    right: auto;
    left: var(--desktop-hero-gutter);
    text-align: left;
  }

  .broadcast-slide--open .broadcast-stage__field::after {
    background:
      linear-gradient(180deg, transparent 35%, rgba(5, 5, 6, 0.2) 55%, rgba(5, 5, 6, 0.78) 100%),
      linear-gradient(90deg, rgba(5, 5, 6, 0.28), transparent 58%);
  }
}

/* In the intermediate desktop aspect ratio neither upper corner has enough
   room for the redundant coach label without covering the raised glove/copy. */
@media (min-width: 881px) and (min-aspect-ratio: 6 / 5) and (max-aspect-ratio: 3 / 2) {
  .broadcast-coach-bug {
    display: none;
  }
}

/* A short desktop window still needs room for the copy and lower controls. */
@media (min-width: 881px) and (max-height: 740px) {
  .broadcast-offer {
    padding-top: 24px;
    padding-bottom: 132px;
  }

  .broadcast-offer h1 {
    font-size: clamp(52px, 5.4vw, 82px);
  }

  .broadcast-hero .broadcast-slide--trust .trust-layout {
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .broadcast-hero .broadcast-slide--trust .trust-copy h2 {
    font-size: clamp(48px, 5.4vw, 76px);
  }

  .broadcast-hero .broadcast-slide--trust .trust-copy > p:not(.trust-copy__eyebrow) {
    margin-bottom: 18px;
    font-size: clamp(15px, 1.04vw, 17px);
    line-height: 1.45;
  }

  .broadcast-hero .broadcast-slide--trust .trust-copy li {
    min-height: 76px;
    padding: 10px 12px;
  }

  .broadcast-hero .broadcast-slide--trust .trust-copy li strong {
    font-size: clamp(26px, 1.7vw, 30px);
  }

  .broadcast-hero .broadcast-slide--trust .trust-copy .swipe-button {
    --control-width: 360px;
    --control-height: 60px;
    --control-orb: 48px;
    --control-side: 60px;
    --control-label-size: 12px;
  }
}