/* Milan's Roofing V20 — mobile recovery / hardening.
   Loaded LAST. Purpose: make phone/tablet behavior deterministic, lightweight and touch-first. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

@media (max-width:1024px){
  html,body{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
  body{position:relative!important}
  main,section,header,footer,nav,div,article,aside,figure{min-width:0}
  img,video,canvas,svg,iframe{max-width:100%;height:auto}

  /* One predictable mobile shell. */
  .wrap,
  .inner-hero-content,
  .premium-page-hero__grid,
  .system-detail-page .hero-grid,
  .inner-page main>.hero .hero-grid,
  footer .wrap,.footer .wrap{
    width:calc(100% - 36px)!important;
    max-width:none!important;
    margin-left:18px!important;
    margin-right:18px!important;
  }

  /* Header: logo + minimal phone + hamburger. Never squeeze desktop nav into a phone. */
  .header-shell,header.header{
    width:100%!important;
    height:76px!important;
    min-height:76px!important;
  }
  .header-shell .header,header.header>.wrap{
    width:calc(100% - 28px)!important;
    max-width:none!important;
    min-height:76px!important;
    height:76px!important;
    margin:0 14px!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 42px 44px!important;
    align-items:center!important;
    gap:8px!important;
  }
  .header-shell nav,header.header nav{display:none!important}
  .brand{min-width:0!important;overflow:hidden!important}
  .brand img{width:156px!important;max-width:156px!important;height:46px!important;object-fit:contain!important;object-position:left center!important}
  .header-phone,header.header .phone{
    display:flex!important;position:relative!important;
    width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;
    margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
  }
  .mobile-menu-btn,.mobile-menu,.menu{
    display:inline-flex!important;width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;margin:0!important;
  }

  /* Drawer: fixed to the actual viewport, lighter than the old giant-shadow implementation. */
  .mobile-panel,.mobile-nav{
    position:fixed!important;top:76px!important;left:0!important;right:0!important;
    width:100%!important;max-width:none!important;height:calc(100dvh - 76px)!important;
    padding:18px 18px 28px!important;margin:0!important;
    overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;
    background:#111412!important;color:#fff!important;
    box-shadow:0 18px 45px rgba(0,0,0,.20)!important;
    transform:translateX(102%)!important;visibility:hidden!important;opacity:0!important;
    z-index:9999!important;
    will-change:transform;
  }
  .mobile-panel.open,.mobile-nav.open{transform:translateX(0)!important;visibility:visible!important;opacity:1!important}
  body.nav-open{overflow:hidden!important;touch-action:none!important}
  .mobile-panel a,.mobile-nav a{font-size:18px!important;min-height:56px!important}

  /* No expensive glass/hover processing on touch devices. */
  .header-shell,header.header,.mobile-panel,.mobile-nav,.project-label,.gallery-item span,.real-project-grid figcaption,
  .sd-feature-image span{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .kinetic-track,.partner-track{animation:none!important;transform:none!important}
  .reveal,.fade{opacity:1!important;transform:none!important;transition:none!important}

  /* Core hero system. */
  .hero,.inner-hero,.sd-hero,.premium-page-hero,.system-detail-page main>.hero{
    height:auto!important;max-height:none!important;min-height:520px!important;
  }
  .hero-content,.inner-hero-content,.sd-hero .inner-hero-content,.system-detail-page .hero-grid{
    min-height:520px!important;height:auto!important;padding-top:68px!important;padding-bottom:58px!important;
  }
  .premium-page-hero,.inner-page main>.hero{padding:58px 0!important}
  .hero-content,.premium-page-hero__grid,.inner-page main>.hero .hero-grid,.system-detail-page .hero-grid{
    grid-template-columns:1fr!important;gap:34px!important;
  }
  .hero-side,.hero-proof,.hero-caption,.system-detail-page .hero-side{display:none!important}
  .hero h1,.inner-hero h1,.premium-page-hero h1,.system-detail-page main>.hero h1,.content-page h1{
    font-size:clamp(42px,12.2vw,58px)!important;line-height:.92!important;letter-spacing:-.045em!important;
    max-width:100%!important;overflow-wrap:normal!important;word-break:normal!important;text-wrap:balance!important;
  }
  .hero-copy,.inner-hero p,.premium-page-hero__copy>p,.system-detail-page main>.hero p{font-size:16px!important;line-height:1.58!important;max-width:100%!important}
  .hero-actions,.premium-page-hero__actions,.system-detail-page .hero-actions{display:flex!important;flex-direction:column!important;gap:10px!important;width:100%!important}
  .hero-actions .btn,.premium-page-hero__actions a,.system-detail-page .hero-actions .btn{width:100%!important;justify-content:center!important}

  /* Every multi-column editorial layout becomes one intentional column. */
  .intro-grid,.owner-grid,.split,.systems-layout,.work-head,.services-head,.service-explorer-head,
  .system-showcase .section-head,.contact-grid,.contact-premium,.cta-grid,.final-grid,.end-grid,.finance-panel,
  .map-grid,.bridge-grid,.gallery-intro-grid,.gallery-head,.project-head,.install-grid,.install-head,.overview-grid,
  .notes-head,.selector .wrap,.service-grid,.system-grid,.system-showcase-grid,.real-project-grid,.process,.notes-grid,
  .area-grid,.blog-row,.fact-line,.project-media,.gallery-grid,.project-mosaic,
  .sd-overview-grid,.sd-feature-grid,.sd-section-head,.sd-principle-grid,.sd-related-grid,.sd-final-grid{
    grid-template-columns:1fr!important;
  }

  /* V19 service-detail layouts: remove desktop-only heights/sticky behavior. */
  .sd-overview,.sd-feature,.sd-principles,.sd-related,.sd-final{padding-top:74px!important;padding-bottom:78px!important}
  .sd-overview-grid{display:block!important}
  .sd-overview-index{margin-bottom:26px!important}
  .sd-fact-stack{display:grid!important;grid-template-columns:1fr!important;margin-top:34px!important}
  .sd-feature-grid{display:flex!important;flex-direction:column!important;gap:32px!important}
  .sd-feature-image{order:1!important;width:100%!important;height:auto!important;aspect-ratio:4/3!important;min-height:0!important}
  .sd-feature-copy{order:2!important}
  .sd-section-head{display:block!important;margin-bottom:32px!important}
  .sd-section-head>p{margin-top:20px!important}
  .sd-principle{min-height:0!important;padding:26px 0 30px!important;border-right:0!important}
  .sd-related-heading{position:static!important;top:auto!important}
  .sd-related-row{grid-template-columns:minmax(0,1fr) 24px!important;gap:8px 12px!important;padding:23px 0!important}
  .sd-related-copy{grid-column:1!important}
  .sd-related-arrow{grid-column:2!important;grid-row:1/3!important}
  .sd-final-grid{display:block!important}
  .sd-final-copy{margin-top:26px!important}

  /* Landing/service selectors must never preserve desktop side-by-side widths. */
  .service-explorer-grid,.system-showcase-grid{grid-template-columns:1fr!important}
  .service-stage,.system-preview{min-height:320px!important;height:auto!important;border-left:0!important}
  .service-nav,.system-menu{width:100%!important}

  /* Project/gallery media. */
  .project-mosaic{display:grid!important;gap:12px!important}
  .project-mosaic .project,.project-mosaic .project.small,.project{height:290px!important;min-height:290px!important;grid-column:auto!important;grid-row:auto!important}
  .project-media,.gallery-grid{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
  .project-media figure,.gallery-grid figure,.gallery-grid figure:nth-child(n){height:auto!important;min-height:0!important;grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/3!important}
  .project-media img,.gallery-grid img{width:100%!important;height:100%!important;object-fit:cover!important}

  /* Forms and cards. */
  .premium-form{grid-template-columns:1fr!important}
  .estimate-card{padding:26px 18px!important}
  .form-control input,.form-control select,.form-control textarea{font-size:16px!important;max-width:100%!important}
  .footer-grid{grid-template-columns:1fr!important}
  .footer-brand{grid-column:auto!important}
}

@media (max-width:480px){
  .wrap,.inner-hero-content,.premium-page-hero__grid,.system-detail-page .hero-grid,.inner-page main>.hero .hero-grid,footer .wrap,.footer .wrap{
    width:calc(100% - 28px)!important;margin-left:14px!important;margin-right:14px!important;
  }
  .header-shell .header,header.header>.wrap{width:calc(100% - 22px)!important;margin:0 11px!important;grid-template-columns:minmax(0,1fr) 38px 40px!important;gap:6px!important}
  .brand img{width:142px!important;max-width:142px!important}
  .header-phone,header.header .phone{width:36px!important;min-width:36px!important;height:38px!important;min-height:38px!important}
  .mobile-menu-btn,.mobile-menu,.menu{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important}
  .hero,.inner-hero,.sd-hero,.premium-page-hero,.system-detail-page main>.hero,.hero-content,.inner-hero-content,.sd-hero .inner-hero-content,.system-detail-page .hero-grid{min-height:480px!important}
  .hero h1,.inner-hero h1,.premium-page-hero h1,.system-detail-page main>.hero h1,.content-page h1{font-size:clamp(39px,12.7vw,52px)!important}
  .sd-feature-image{aspect-ratio:1/1!important}
}

@media (hover:none),(pointer:coarse){
  a:hover,.btn:hover,.project:hover,.card:hover,.post:hover,.sd-step:hover,.sd-fact:hover,.sd-principle:hover,.sd-related-row:hover{transform:none!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}