/* Recce NI Storefront 1.0.0-beta.4 — mobile image integrity.
 * Mobile layouts show the complete supplied artwork instead of cropping it.
 */

@media (max-width: 760px) {
  /* HERO: full campaign image first, content beneath. No cover crop. */
  body .rni-storefront-homepage .rni-flagship-hero,
  body .rni-storefront-homepage .rni-hero-track,
  body .rni-storefront-homepage .rni-hero-slide {
    height: calc(66.666vw + 410px) !important;
    min-height: 640px !important;
    max-height: 760px !important;
    background: #07110c !important;
  }

  body .rni-storefront-homepage .rni-hero-slide picture {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    overflow: hidden !important;
    background: #07110c !important;
  }

  body .rni-storefront-homepage .rni-hero-slide picture img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    background: #07110c !important;
  }

  body .rni-storefront-homepage .rni-hero-slide::before {
    inset: 0 !important;
    background: linear-gradient(
      180deg,
      rgba(7,17,12,0) 0,
      rgba(7,17,12,0) calc(66.666vw - 50px),
      rgba(7,17,12,.72) calc(66.666vw - 12px),
      #07110c calc(66.666vw + 28px),
      #07110c 100%
    ) !important;
  }

  body .rni-storefront-homepage .rni-hero-content {
    position: relative !important;
    width: calc(100% - 36px) !important;
    min-height: 100% !important;
    margin-inline: auto !important;
    padding: calc(66.666vw + 34px) 0 68px !important;
    justify-content: flex-start !important;
  }

  body .rni-storefront-homepage .rni-hero-content h1 {
    max-width: 12ch !important;
  }

  /* Keep carousel controls inside the content zone. */
  body .rni-storefront-homepage .rni-hero-dots {
    bottom: 20px !important;
  }

  /* PROMOTIONAL BANNERS: complete artwork, then copy. */
  body .rni-storefront-homepage .rni-unified-campaign {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    background: #07110c !important;
  }

  body .rni-storefront-homepage .rni-unified-campaign > img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    background: #07110c !important;
  }

  body .rni-storefront-homepage .rni-unified-campaign-shade {
    display: none !important;
  }

  body .rni-storefront-homepage .rni-unified-campaign-copy,
  body .rni-storefront-homepage .rni-trade-campaign .rni-unified-campaign-copy {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    padding: 24px 22px 26px !important;
    background: #07110c !important;
  }

  body .rni-storefront-homepage .rni-unified-campaign-copy strong {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }

  body .rni-storefront-homepage .rni-unified-campaign:hover > img,
  body .rni-storefront-homepage .rni-unified-campaign:focus-visible > img {
    transform: none !important;
  }

  /* Department artwork must also remain fully visible. */
  body .rni-storefront-homepage .rni-department-card,
  body .rni-storefront-homepage .rni-department-card .rni-department-image {
    aspect-ratio: 3 / 2 !important;
  }

  body .rni-storefront-homepage .rni-department-card .rni-department-image {
    object-fit: contain !important;
    object-position: center center !important;
    background: #07110c !important;
  }
}

@media (max-width: 390px) {
  body .rni-storefront-homepage .rni-flagship-hero,
  body .rni-storefront-homepage .rni-hero-track,
  body .rni-storefront-homepage .rni-hero-slide {
    height: calc(66.666vw + 440px) !important;
  }
}