/* ---------------------------------------------------------------------------
   Mobile responsiveness for the inline-styled React site.

   The whole site is built with React inline styles, which cannot hold @media
   rules. These author-stylesheet rules use !important so they override the
   element's inline styles on small screens (an important author declaration
   beats a normal inline declaration in the CSS cascade).

   Scope: phones, <= 767px. Desktop/tablet are untouched.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Never let anything force horizontal scrolling. */
  html, body { overflow-x: hidden; }

  /* Collapse multi-column LAYOUT grids (fr-based, repeat(), and wide fixed
     columns like 380px) to a single stacked column.
     EXCLUDE the small icon/number + text utility grids whose first track is
     18px / 20px / 36px / 80px — those must stay side-by-side. */
  [style*="grid-template-columns"]:not([style*="columns: 18px"]):not([style*="columns: 20px"]):not([style*="columns: 36px"]):not([style*="columns: 80px"]) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  /* Tame the oversized 64px section side-padding so content gets the width. */
  section { padding-left: 22px !important; padding-right: 22px !important; }

  /* The case-study rows/headers bleed past their section with negative side
     margins on desktop; neutralize that on mobile so they don't overflow. */
  .pp-cs-row, .pp-acc-head {
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }

  /* Shrink the big display headings. Values are floors that only ever reduce
     the home page's sizes (h1 = 86, h2 = 44-60). h3 is left alone because it
     ranges down to ~18px and must not be enlarged. */
  h1 { font-size: 36px !important; line-height: 1.12 !important; }
  h2 { font-size: 30px !important; line-height: 1.18 !important; }

  /* Big practice names in the case studies — linked AND non-linked, so they
     all shrink to the same size on phones. */
  .pp-cs-name, .pp-acc-name { font-size: 26px !important; }

  /* Keep images inside the viewport. (Do NOT force height:auto — it breaks
     object-fit:cover images like the founder portrait, which fill a fixed
     aspect-ratio box via height:100%.) */
  img { max-width: 100% !important; }

  /* --- Header / nav --- */
  /* Tighten the header padding and shrink the logo. */
  header { padding-left: 20px !important; padding-right: 20px !important; }
  .v1-nav-logo { height: 108px !important; }

  /* Hide the cramped top utility bar on phones; its actions (Book a Call,
     phone) now live inside the hamburger menu. */
  .v1-utilbar { display: none !important; }

  /* Pull the hero content in from the screen edges. */
  .v1-hero-content { padding-left: 22px !important; padding-right: 22px !important; padding-top: 120px !important; }

  /* --- Hero video --- */
  /* Full-bleed (cancel the global section side-padding for the hero). */
  .v1-hero-section { padding-left: 0 !important; padding-right: 0 !important; }
  /* Shorter hero on phones (880px is absurdly tall). */
  .v1-hero-box { height: 640px !important; }
  /* Size the YouTube iframe to a TRUE 16:9 box that covers the 640px hero
     (640 x 16/9 = 1138). The inline min-width/height:100% forced a wrong
     aspect ratio (letterbox bars); override them to 0 so the video stays
     16:9 and just crops the sides. It's centered via the inline transform. */
  .v1-hero-video {
    width: 1138px !important; height: 640px !important;
    min-width: 0 !important; min-height: 0 !important;
    /* Shift the crop right so Lauren (on the right of the 16:9 frame) stays
       visible instead of being cut off by a centered crop. */
    transform: translate(-64%, -50%) !important;
  }

  /* --- "The Solution" block (mobile only) --- */
  /* Drop the two rules around the "Together, these turn…" callout. */
  .v1-solution-callout { border-top: 0 !important; border-bottom: 0 !important; padding-top: 8px !important; padding-bottom: 8px !important; }
  /* Less empty space after the "Book a Consult Call" button. */
  #how-we-work { padding-bottom: 56px !important; }

  /* Horizontal photo/program carousel: 440px cards are wider than the phone.
     Size them to ~80vw so a full card shows with a peek of the next. */
  .v1-gallery-scroll { grid-auto-columns: 80vw !important; padding-right: 22px !important; }

  /* Contact form section: 140px top padding leaves a huge gap under the
     "Let's Talk" heading on phones. Tighten it. */
  .v1-contact-section { padding-top: 44px !important; padding-bottom: 72px !important; }

  /* "Meet the Founder" strip: on phones put the text above the portrait
     (desktop keeps image-left / text-right). */
  .v1-founder-text { order: 1 !important; }
  .v1-founder-media { order: 2 !important; }
}