/* ==========================================================================
   mobile-fixes.css

   Loaded AFTER the Webflow stylesheet. Fixes mobile defects that exist in the
   original published site (verified against stealthfounders.com at 375px: it
   reports the same 386px scrollWidth in a 375px viewport).

   Deliberately NOT using `overflow-x: hidden` on html/body/.page-wrapper — that
   creates a scroll container, which breaks `position: sticky` descendants and
   interferes with GSAP ScrollTrigger pinning and Lenis. Each root cause is
   fixed at its source instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Flex/grid children default to `min-width: auto`, so they refuse to shrink
      below their content's min-content width and burst out of the viewport.
      `min-width: 0` restores normal shrinking. This is the single most common
      cause of horizontal scroll on this site.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .about_us-image-wrapper,
  .about_us-cover-image-right-wrap,
  .requirements-wrap,
  .membership-requirements-grid > *,
  .our-philosophy-wrapper,
  .testimonials_text-wrapper,
  .testimonials_text,
  .testimonials_bottom-text,
  .testimonials_credential--wrap,
  .calendar-grid-image-w,
  .calendar-grid-text-w {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   1b. `.section_hero` is a COLUMN flex container with `align-items: center`, so
       its children are sized on the cross axis by `fit-content`. That resolves
       to the child's min-content width (387px) whenever min-content exceeds the
       375px viewport, and `min-width: 0` cannot cap it — cross-axis fit-content
       ignores it. `max-width: 100%` is what actually bounds the box, after
       which the inner `.container-large` (width: 100%) reflows to fit.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .padding-global {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   2. Fixed rem widths that exceed narrow viewports.
      .tabs_wrapper is `width: 25rem` at <=479px; with the fluid root font size
      that resolves to ~378px, wider than a 375px screen.
      .gradient-gray-wrap is a fixed-width divider that overhangs its grid cell.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .tabs_wrapper,
  .gradient-gray-wrap,
  .marquee_tribe-cover,
  .discount_card,
  .cta_card,
  .calendar_grid,
  .calendar-grid-inner-wrapper,
  .footer_grid,
  .query-block {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   2b. `minmax(<fixed>, ...)` grid tracks cannot shrink below their fixed
       minimum, so they overflow every viewport narrower than that minimum.
       The testimonials grid asks for a 550px (<=991px) / 450px (<=767px) track
       minimum — wider than any phone. `min(<fixed>, 100%)` keeps the intended
       track size on roomy screens while allowing it to collapse on narrow ones.

       NOTE: do not add `.testimonials_wrapper` to a `max-width: 100%` rule here.
       The base stylesheet caps it at `max-width: 80%` under 479px, and a later
       equal-specificity 100% would override that and widen the card.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .testimonials_grid {
    grid-template-columns: repeat(auto-fit, minmax(min(550px, 100%), 0.5fr));
  }
}

@media screen and (max-width: 767px) {
  .testimonials_grid {
    grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 0.5fr));
  }
}

/* --------------------------------------------------------------------------
   3. Media should never exceed its container.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  img,
  video,
  .w-background-video {
    max-width: 100%;
  }

  img {
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   4. Transform-animated decorative elements that paint past the viewport edge.

   Decorative absolutely-positioned text animates across the philosophy section,
   and `.gradient-gray-wrap` is a 5px-wide divider blown up with a scaleX transform
   as a reveal animation. Transforms are ignored by `max-width`, so the only way
   to contain it is to clip at the section boundary. `overflow-x: clip` (rather
   than `hidden`) does NOT create a scroll container, so sticky positioning,
   ScrollTrigger pinning, and Lenis are unaffected.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .section_our-philosophy,
  .section_membership-requirements {
    overflow-x: clip;
  }
}

/* --------------------------------------------------------------------------
   5. Touch targets: bring interactive elements up to the ~44px minimum.

   Use `display: flex`, NOT `inline-flex`. These links are block-level (`block`
   or `flex`) and stack vertically; `inline-flex` makes them inline-level, so
   they reflow onto a shared line and the stacked list collapses into a row.

   `.nav_menu_link` is deliberately excluded — it is already 57px tall, and
   restyling it collapses the open mobile menu from a stacked list into one row.

   The social icons are flex items in a row, so a min-width/min-height pair
   enlarges their hit area without touching `display`.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .footer_link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .socials_link-wrap,
  .founder-linkedin-link {
    min-width: 44px;
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   6. Prevent iOS Safari from auto-inflating text in the rotated/zoomed states,
      which desyncs the scroll-linked animations.
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}