/* Mobile-only cleanup for the approved desktop build.
   Desktop (901px+) is intentionally untouched. */
@media (max-width: 900px) {
  /* Use exactly one photo layer in each interior leader. */
  html body.interior-page main > section.jmf-matched-interior-hero,
  html body.interior-page main > section.jmf-mockup-leader {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: #071f43 !important;
    background-image: none !important;
    box-sizing: border-box !important;
  }

  html body.interior-page main > section.jmf-matched-interior-hero::before,
  html body.interior-page main > section.jmf-matched-interior-hero::after,
  html body.interior-page main > section.jmf-mockup-leader::before,
  html body.interior-page main > section.jmf-mockup-leader::after,
  html body.interior-page main > section.jmf-matched-interior-hero .products-hero-ink,
  html body.interior-page main > section.jmf-matched-interior-hero .page-hero-ink,
  html body.interior-page main > section.jmf-mockup-leader .products-hero-ink,
  html body.interior-page main > section.jmf-mockup-leader .page-hero-ink {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* The approved page photo is the sole visual layer. */
  html body.interior-page .jmf-approved-photo {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: none !important;
  }
  html body.interior-page .jmf-approved-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* One consistent readability gradient, not another photo. */
  html body.interior-page .jmf-approved-shade {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(90deg,
      rgba(3, 24, 52, .98) 0%,
      rgba(3, 24, 52, .92) 42%,
      rgba(3, 24, 52, .58) 72%,
      rgba(3, 24, 52, .22) 100%) !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  /* Keep the text in its original left-side location and center it vertically. */
  html body.interior-page main > section.jmf-matched-interior-hero > .container,
  html body.interior-page main > section.jmf-matched-interior-hero > .products-hero-inner,
  html body.interior-page main > section.jmf-matched-interior-hero > .page-hero-inner,
  html body.interior-page main > section.jmf-matched-interior-hero .products-hero-inner,
  html body.interior-page main > section.jmf-matched-interior-hero .page-hero-inner,
  html body.interior-page main > section.jmf-mockup-leader > .container,
  html body.interior-page main > section.jmf-mockup-leader > .products-hero-inner,
  html body.interior-page main > section.jmf-mockup-leader > .page-hero-inner {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    width: calc(100% - 40px) !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  html body.interior-page .jmf-hero-copy-lock {
    position: relative !important;
    inset: auto !important;
    width: min(72%, 420px) !important;
    max-width: min(72%, 420px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    align-self: center !important;
    text-align: left !important;
    transform: none !important;
  }

  html body.interior-page .jmf-matched-interior-title,
  html body.interior-page .products-hero-title,
  html body.interior-page .page-hero-title {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: 1.03 !important;
    letter-spacing: -.025em !important;
    font-weight: 700 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.interior-page .jmf-hero-copy-lock p,
  html body.interior-page .jmf-matched-interior-description,
  html body.interior-page .products-hero-subtitle,
  html body.interior-page .page-hero-subtitle {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    text-align: left !important;
  }

  /* Prevent legacy desktop/mobile duplicate hero sections from appearing. */
  html body.interior-page main > section.jmf-matched-interior-hero ~ section.jmf-matched-interior-hero,
  html body.interior-page main > section.jmf-mockup-leader ~ section.jmf-mockup-leader {
    display: none !important;
  }
}

@media (max-width: 520px) {
  html body.interior-page main > section.jmf-matched-interior-hero,
  html body.interior-page main > section.jmf-mockup-leader {
    height: 235px !important;
    min-height: 235px !important;
    max-height: 235px !important;
  }
  html body.interior-page .jmf-hero-copy-lock {
    width: 78% !important;
    max-width: 78% !important;
  }
  html body.interior-page .jmf-matched-interior-title,
  html body.interior-page .products-hero-title,
  html body.interior-page .page-hero-title {
    font-size: clamp(31px, 9.5vw, 42px) !important;
  }
}

/* FINAL MOBILE POSITIONING: all interior leader copy is anchored top-left.
   This block intentionally comes last so it overrides inline and earlier mobile rules. */
@media (max-width: 900px) {
  html body.interior-page main > section.jmf-matched-interior-hero,
  html body.interior-page main > section.jmf-mockup-leader,
  html body.interior-page main > section.jmf-trc-hero {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  html body.interior-page main > section.jmf-matched-interior-hero > .container,
  html body.interior-page main > section.jmf-matched-interior-hero > .products-hero-inner,
  html body.interior-page main > section.jmf-matched-interior-hero > .page-hero-inner,
  html body.interior-page main > section.jmf-matched-interior-hero .products-hero-inner,
  html body.interior-page main > section.jmf-matched-interior-hero .page-hero-inner,
  html body.interior-page main > section.jmf-mockup-leader > .container,
  html body.interior-page main > section.jmf-mockup-leader > .products-hero-inner,
  html body.interior-page main > section.jmf-mockup-leader > .page-hero-inner {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 auto !important;
    padding: 20px 0 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  html body.interior-page .jmf-hero-copy-lock,
  html body.interior-page .products-hero-copy,
  html body.interior-page .page-hero-copy {
    position: relative !important;
    inset: auto !important;
    width: min(84%, 440px) !important;
    max-width: min(84%, 440px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: flex-start !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    transform: none !important;
  }

  html body.interior-page .jmf-matched-interior-title,
  html body.interior-page .products-hero-title,
  html body.interior-page .page-hero-title,
  html body.interior-page .jmf-mockup-subtitle,
  html body.interior-page .jmf-hero-copy-lock h1,
  html body.interior-page .jmf-hero-copy-lock p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: flex-start !important;
  }

  /* Keep the already-approved Training Resources mobile layout top-left as well. */
  html body.interior-page main > section.jmf-trc-hero > .jmf-trc-hero-inner {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 auto !important;
    padding: 20px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 520px) {
  html body.interior-page main > section.jmf-matched-interior-hero > .container,
  html body.interior-page main > section.jmf-matched-interior-hero > .products-hero-inner,
  html body.interior-page main > section.jmf-matched-interior-hero > .page-hero-inner,
  html body.interior-page main > section.jmf-matched-interior-hero .products-hero-inner,
  html body.interior-page main > section.jmf-matched-interior-hero .page-hero-inner,
  html body.interior-page main > section.jmf-mockup-leader > .container,
  html body.interior-page main > section.jmf-mockup-leader > .products-hero-inner,
  html body.interior-page main > section.jmf-mockup-leader > .page-hero-inner,
  html body.interior-page main > section.jmf-trc-hero > .jmf-trc-hero-inner {
    padding-top: 18px !important;
  }
}