/* MaxDent v20 — strict mobile SHRINK-TO-FIT guard | 2026-08-17
   Goal: every marketing/content image is fully visible on mobile with zero crop.
   Desktop is intentionally untouched. */

@media (max-width: 820px){
  /* 1) Hero/side artwork is placed before the page heading/copy. */
  body.mx-secondary-page .mx-secondary-hero-grid,
  body.mx-site-shell .mx4-hero-grid,
  body.mx-site-shell .mx5-download-hero-grid{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }

  body.mx-secondary-page .mx-secondary-visual,
  body.mx-secondary-page .mx-secondary-media,
  body.mx-site-shell .mx4-hero-media,
  body.mx-site-shell .mx5-download-hero-media{
    order:-1 !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    margin:0 auto 18px !important;
    overflow:hidden !important;
  }

  /* 2) Remove all boxes that can force a crop around content artwork. */
  body.mx-site-shell main :is(
    .mx-secondary-picture,
    .mx-secondary-media > picture,
    .mx4-hero-media > picture,
    .mx5-download-hero-media > picture,
    .mx2-hero-media > picture,
    .mx2-cinema,
    .mx2-wide-cinema,
    .mx2-lab-cinema,
    .mx-real-shot,
    .mx-manual-shot
  ){
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
  }

  body.mx-site-shell main :is(
    .mx-secondary-picture,
    .mx-secondary-media > picture,
    .mx4-hero-media > picture,
    .mx5-download-hero-media > picture,
    .mx2-hero-media > picture,
    .mx2-cinema > picture,
    .mx2-wide-cinema > picture,
    .mx2-lab-cinema > picture
  ){
    display:block !important;
    overflow:visible !important;
  }

  /* 3) Strict SHRINK TO FIT: natural aspect ratio, never cover, never fixed height. */
  body.mx-site-shell main :is(
    .mx-secondary-visual,
    .mx-secondary-media,
    .mx4-hero-media,
    .mx5-download-hero-media,
    .mx2-hero-media,
    .mx2-cinema,
    .mx2-wide-cinema,
    .mx2-lab-cinema,
    .mx-real-shot,
    .mx-manual-shot
  ) img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
    scale:1 !important;
    clip-path:none !important;
    animation:none !important;
  }

  /* 4) Homepage hero is a normal full image block on mobile, not a cropped background-like panel. */
  body.home-page .mx2-hero{
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
  }
  body.home-page .mx2-hero-media{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    overflow:visible !important;
  }
  body.home-page .mx2-hero-media .mx2-hero-shade{
    pointer-events:none !important;
  }
  body.home-page .mx2-hero-inner{
    margin-top:0 !important;
    padding-top:22px !important;
  }

  /* 5) Homepage grids cannot stretch images back into fixed-height crops. */
  body.home-page .mx2-clinical-grid,
  body.home-page .mx2-clinical-main,
  body.home-page .mx-real-proof-grid{
    height:auto !important;
    min-height:0 !important;
    align-items:start !important;
  }
  body.home-page .mx2-clinical-main img,
  body.home-page .mx-real-shot-main img{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
  }

  /* 6) Captions are moved below screenshots so they never hide part of the image. */
  body.mx-site-shell main .mx-real-shot figcaption,
  body.home-page main .mx2-cinema figcaption{
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    margin:0 !important;
    border-radius:0 0 16px 16px !important;
    transform:none !important;
  }
  body.home-page main .mx2-wide-overlay{
    position:relative !important;
    inset:auto !important;
  }

  /* 7) Manual and feature screenshots also use their untouched natural ratio. */
  body.mx-secondary-page main .mx-feature-proof-grid,
  body.mx-secondary-page main .mx-real-proof-grid{
    align-items:start !important;
  }
  body.mx-secondary-page main .mx-real-shot,
  body.mx-secondary-page main .mx-manual-shot{
    overflow:hidden !important;
  }

  /* Small payment/provider marks are already logos, not cinematic content; keep them contained. */
  body.mx-site-shell main .mx4-payment-card img{
    object-fit:contain !important;
    max-width:100% !important;
    height:auto !important;
  }
}