/* Mobile portraits reserve the upper composition for subjects and grow with long
   headlines. Do not reapply cover cropping or desktop animated overscan. */
@media (max-width: 760px) {
  :is(.adidas-case-hero, .about-landing-hero):has(source[srcset*="mobile-heroes/"]) {
    /* Match each existing photographic ground so the extended copy area has no seam. */
    --mobile-hero-ground: #151515;
    background: var(--mobile-hero-ground);
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
  }

  .about-landing-hero:has(source[srcset*="mobile-heroes/"]) {
    --mobile-hero-ground: var(--color-brand);
  }

  :is(.adidas-case-hero, .about-landing-hero):has(source[srcset*="mobile-heroes/"])::before {
    /* The veil follows the 2:3 artwork, not the potentially taller text block. */
    inset: 0 0 auto;
    height: auto;
    aspect-ratio: 2 / 3;
    background: linear-gradient(to bottom, transparent 30%,
      color-mix(in srgb, var(--mobile-hero-ground) 80%, transparent) 64%,
      var(--mobile-hero-ground) 100%);
  }

  .adidas-case-hero:has(source[srcset*="mobile-heroes/"]) .adidas-case-hero__media picture img,
  .about-landing-hero:has(source[srcset*="mobile-heroes/"]) .client-stories-hero__media img,
  .industry-retail-hero:has(source[srcset*="mobile-heroes/"]) .industry-retail-hero__media picture img {
    inset: 0 0 auto;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
    transform: none;
    animation: none;
  }

  .adidas-case-hero:has(source[srcset*="mobile-heroes/"]) .adidas-case-hero__content,
  .about-landing-hero:has(source[srcset*="mobile-heroes/"]) .about-landing-hero__content {
    /* Subjects stay above 60% of the portrait; copy starts just below that line. */
    padding-top: 92vw;
  }

  .adidas-case-hero:has(source[srcset*="mobile-heroes/"]) h1 {
    font-size: var(--type-heading-lg);
  }
}

/* Hero copy grows over the whole mobile frame; controls must remain above its
   transparent padding so every carousel dot stays reachable. */
@media (max-width: 760px) {
  :is(.adidas-case-hero, .about-landing-hero):has(source[srcset*="mobile-heroes/"])
  :is(.adidas-case-hero__dots, .industry-hero__dots) {
    z-index: 3;
  }
}

/* Existing Microsoft portrait artwork is taller than the new 2:3 compositions.
   End the media layer at the shared veil so its empty lower background cannot
   create a visible seam beneath the headline. */
@media (max-width: 760px) {
  .adidas-case-hero:has(source[srcset*="mobile-heroes/"]) .adidas-case-hero__media {
    bottom: auto;
    height: auto;
    aspect-ratio: 2 / 3;
  }
}