/* Miracles V8.6.2.4.7.6.4.2.2.3.9.3 — Mobile Image Warmup & Scroll Delivery. */
img{height:auto}

/* Keep content-visibility as a desktop-only optimization.
   Mobile Safari/WebKit can leave stale composited text layers while fast-scrolling
   large image sections, which looks like duplicated/ghosted white copy. */
@supports (content-visibility:auto){
  @media (min-width:1025px){
    body .page-section,body .section,body .cta,body .miracles-wp-live-projects,body .project-section,body .project-gallery,body .home-section,body .about-home,body .home-inquiry,body .featured-projects{
      content-visibility:auto;
      contain-intrinsic-size:auto 900px
    }
  }
  body .hero,body .page-hero,body .project-hero,body .cinematic-hero{content-visibility:visible;contain:none}
}

@media (max-width:1024px),(hover:none),(pointer:coarse){
  html{scroll-behavior:auto!important}
  @supports (content-visibility:auto){
    body .page-section,body .section,body .cta,body .miracles-wp-live-projects,body .project-section,body .project-gallery,body .home-section,body .about-home,body .home-inquiry,body .featured-projects{
      content-visibility:visible!important;
      contain:none!important;
    }
  }
}

@media (max-width:767px){
  .hero .cinematic-hero-slide{will-change:auto!important}
  .language-backdrop,.mobile-nav-panel{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  a,button,summary{touch-action:manipulation}
}

@media (hover:none),(pointer:coarse){.logo:hover{transform:none!important;filter:none!important}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}


/* 3.9.2 root-cause fix: when the homepage editorial grid switches from CSS Grid
   to display:block on phones, its <a> cards must remain block formatting contexts.
   Otherwise absolutely positioned images/copy lose the card box and multiple white
   overlay labels stack over the following section headings. */
@media (max-width:600px){
  body.home .editorial-grid{display:block!important}
  body.home .editorial-grid>.editorial-card,
  body .home-content .editorial-grid>.editorial-card{
    display:block!important;
    position:relative!important;
    width:100%!important;
    min-height:62vw!important;
    margin:0 0 10px!important;
    overflow:hidden!important;
    isolation:isolate;
  }
  body .home-content .editorial-card>img{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;
  }
  body .home-content .editorial-card>.editorial-card-copy{
    position:absolute!important;z-index:2!important;left:18px!important;right:18px!important;bottom:18px!important;
  }
}

/* MIRACLES V8.6.2.4.7.6.4.2.2.3.9.5 — Mobile Product Card Flow + Inner Header Continuity
   Product category pages also switch link-based visual grids to display:block on phones.
   Keep every <a> card as its own block formatting context so absolutely-positioned
   image/copy layers cannot collapse and paint over the section heading. */
@media (max-width:620px){
  body .category-image-grid{display:block!important}
  body .category-image-grid>.category-image-card{
    display:block!important;
    position:relative!important;
    width:100%!important;
    min-height:70vw!important;
    margin:0 0 10px!important;
    overflow:hidden!important;
    isolation:isolate!important;
  }
  body .category-image-grid>.category-image-card>img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  body .category-image-grid>.category-image-card>.copy{
    position:absolute!important;
    z-index:2!important;
    left:20px!important;
    right:20px!important;
    bottom:20px!important;
  }

  /* Apply the same containment rule to legacy inner visual grids used by Furniture,
     Lighting, Services and other second/third-level pages. */
  body .visual-grid{display:block!important}
  body .visual-grid>.visual-card{
    display:block!important;
    position:relative!important;
    width:100%!important;
    min-height:66vw!important;
    margin:0 0 10px!important;
    overflow:hidden!important;
    isolation:isolate!important;
  }
  body .visual-grid>.visual-card>img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  body .visual-grid>.visual-card>.visual-copy{
    position:absolute!important;
    z-index:2!important;
    left:20px!important;
    right:20px!important;
    bottom:20px!important;
  }
}