/* ed-responsive.css — Elm Dirt's OWN responsive layer for the frozen Funnelish clones.
 *
 * Why this exists: the clones ship two section sets toggled at 600px. The desktop set
 * (section.no-mobile) holds ALL the content; the mobile set (section.no-desktop) was
 * stripped empty by SingleFile at capture. On a phone the page therefore rendered blank.
 * Approved fix (Matt, 2026-07-02): show the desktop sections at phone width and reflow
 * them to a single readable column — bigger type for the older audience.
 *
 * Injected last in <head> by tools/responsive_fix.py. Shared by every pj-* variant.
 * Selectors are deliberately over-specified (section.section.…) so they outrank the
 * clone's own !important rules regardless of where its <style> blocks sit.
 */

/* Hero VSL facade — must never collapse to 0x0 inside a flex parent, at any width. */
.ed-vimeo-facade{display:block;width:100%!important;min-width:0;flex:1 1 100%;height:auto!important}

/* Short ambient motion clips (autoplay muted loop, driven by ed-ambient.js). */
video[data-ed-ambient]{display:block;width:100%;max-width:100%;height:auto}

@media only screen and (max-width:600px){
  html,body{overflow-x:hidden}

  /* 1) Un-hide the desktop set — it holds all the content. The empty mobile shells stay dead.
        (Scoped to SECTIONS only: element-level .no-mobile divs are real desktop-only toggles
        on the single-set variants and must stay hidden.) */
  section.section.no-mobile{display:flex!important}
  section.section.no-desktop{display:none!important}

  /* 2) Desktop-scale side padding (50px 100px inline) dies at phone width. */
  section.section{padding-left:14px!important;padding-right:14px!important}
  section.section .section_row{padding-left:0!important;padding-right:0!important}

  /* 3) One column: stack the 2-col rows, full-width columns, image above text. */
  section.section .section_row{display:flex!important;flex-direction:column!important;max-width:100%!important}
  section.section .row-column{display:block!important;width:100%!important;max-width:100%!important}
  /* .container = the icon/feature/logo grid: a flex ROW of container-boxes with desktop-scale
        inline side margins (margin:10px 100px). It becomes a centered WRAP row with the
        margins reclaimed; boxes that carry text/CTAs/media go full-width (= stacked,
        image-above-text), while image-only boxes (press logos, star rows) keep their
        natural size and sit together on a line — like Funnelish mobile. Browsers without
        :has() keep the all-stacked fallback. */
  section.section .container{flex-flow:row wrap!important;justify-content:center;align-items:center;
    width:auto!important;max-width:100%!important;margin-left:12px!important;margin-right:12px!important}
  section.section .container-box{flex:1 1 100%;width:100%!important;max-width:100%!important;min-width:0}
  section.section .container-box:not(:has(.paragraph,.headline,.text_element,.btn,video,iframe)){
    flex:0 1 auto!important;width:auto!important}

  /* 4) Nothing overflows the viewport. */
  section.section img{max-width:100%!important;height:auto!important}
  section.section video,section.section iframe,section.section .ed-vimeo-facade{max-width:100%!important}
  section.section [style*="width:"]{max-width:100%!important}

  /* 4b) Text blocks carry desktop-scale INLINE side margins (e.g. margin:30px 100px —
        200px of margin inside a 362px column = a 162px text sliver). Kill horizontal
        margins on text wrappers and let them take the full row; width:100% keeps them
        filling their flex .element-wrapper parent. Vertical rhythm stays untouched. */
  section.section .headline,section.section .paragraph,section.section .text_element{
    width:100%!important;max-width:100%!important;flex:1 1 100%;
    margin-left:12px!important;margin-right:12px!important}
  section.section .headline-inner,section.section .paragraph-inner{width:auto!important;max-width:100%!important}

  /* 5) Type scale UP — the audience skews older; small mobile type kills the read.
        Inner spans inherit so the clone's per-element pixel sizes can't shrink headings. */
  section.section h1{font-size:clamp(30px,8vw,36px)!important;line-height:1.22!important}
  section.section h2{font-size:clamp(26px,7vw,32px)!important;line-height:1.25!important}
  section.section h3,section.section h4{font-size:clamp(21px,6vw,26px)!important;line-height:1.3!important}
  section.section h1 *,section.section h2 *,section.section h3 *,section.section h4 *{font-size:inherit!important;line-height:inherit!important}
  section.section p,section.section li{font-size:18px!important;line-height:1.55!important}
  section.section p *,section.section li *{font-size:inherit!important}
}
