/* bp-shared-overrides.css — Root fixes for two shared Webflow classes that
 * overflow the viewport across multiple pages at intermediate widths (1024,
 * 1180, 1280, 1366) that Webflow's base breakpoints (991/767/479) don't cover.
 *
 * Loaded by pages that use the shared header-accent / split-title pattern.
 * NOT loaded by /online-coaching (bespoke). NOT edited in strength-society.webflow.css.
 *
 * Verified 2026-07-22 against live prod: gate saw 25 container-past-viewport
 * hits across Home / About / Sessions / Programming; the two patterns below
 * account for ~17 of them.
 */

/* ------------------------------------------------------------------------
 * FIX 1 — .header-text-accent
 *
 * Decorative aria-hidden "ghost reveal" that renders the big accent word
 * behind the main title. Webflow base sets white-space:nowrap + overflow:clip
 * WITHOUT a width cap, so at narrow widths its box grows past viewport (e.g.
 * "the programming" at 48px on iPad-1024 = 190px past). Since it's always
 * aria-hidden the visual clip hides nothing real.
 * ------------------------------------------------------------------------ */
.header-text-accent {
  max-width: 100vw !important;
  box-sizing: border-box !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  overflow: clip !important;
}

/* Cap containers that hold the accent so their measured box stays within
 * viewport (getBoundingClientRect on the parent still reports past-viewport
 * even if the child clips, if the parent grows to the child's intrinsic size). */
.header-text-container:has(.header-text-accent) {
  max-width: 100vw !important;
  box-sizing: border-box !important;
  /* Split axes: clip horizontally so the nowrap accent can never push
   * viewport, but stay visible vertically so a wrapped h1 (e.g. "THE
   * PROGRAMMING" going to two lines on mobile) isn't cut off by the
   * container's flex height. */
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* At tablet-and-below, Webflow's base `.header-text-container { height:10vh }`
 * is too short for a wrapped H1 to fit — "THE PROGRAMMING" spilled below the
 * .base_section.header bottom and got clipped by its overflow:hidden. Let the
 * container grow to fit its content while preserving a minimum hero height. */
@media (max-width: 991px) {
  .header-text-container {
    height: auto !important;
    min-height: 12vh !important;
    padding: 8px 0 !important;
  }
  .base_section.header {
    overflow: visible !important;
  }
}

/* ------------------------------------------------------------------------
 * FIX 2 — .h1-header inside .header-text-container.header-flexed-down / .flexed-down
 *
 * The stacked split-title pattern (Home ENDURANCE/HYPERTROPHY/POWER, About
 * OUR/STUDIO, Programming MORE/ABOUT/US). Webflow base font-size is a fluid
 * clamp that reaches ~86px at desktop-1024. HYPERTROPHY (11 chars of Matroska,
 * ~1.13 px/char/pt) needs ~1076px at 86px — pushes the flex container past
 * viewport by 26px at 1024.
 *
 * Root fix: (a) cap the flex container to its parent width so it can never
 * outgrow the .w-container, (b) fluid-clamp the h1 so no single word exceeds
 * viewport at 1024/1180/1280/1366 — the widths Webflow's own breakpoints miss.
 * ------------------------------------------------------------------------ */
.header-text-container.header-flexed-down,
.header-text-container.flexed-down {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Webflow base rule for .header-text-container.flexed-down at some breakpoints
 * uses `position: absolute; inset: 0 -10% 0 10%` — that's a 10% left offset
 * with a NEGATIVE 10% right, so at 768 viewport the container starts at x=77
 * and extends 77px past the right edge, dragging its stacked h1s with it (the
 * About "OUR/STUDIO" and Programming "MORE ABOUT US" tablet-768 bugs). At
 * ≤991 (Webflow's tablet break) neutralise the absolute positioning so the
 * container flows normally inside its padded .overlay-text-container parent. */
@media (max-width: 991px) {
  /* Exclude .full-length: it's the /programming full-bleed overlay
   * (STRENGTH. FUNCTIONALITY. LONGEVITY.) which is INTENTIONALLY absolute
   * over the image and centered via top:45% + transform:translateY(-50%).
   * Forcing static there dropped it below the image and the last line got
   * clipped by the section's overflow:hidden. */
  .header-text-container.flexed-down:not(.full-length),
  .header-text-container.header-flexed-down:not(.full-length) {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
  }
}

/* Clamp only at widths where the desktop h0 (~86px) makes HYPERTROPHY / long
 * words overflow. At >=1440 the natural size fits — leave it alone so wide
 * viewports don't regress to a smaller title than they had. */
@media (max-width: 1439px) {
  /* Excludes .hero-h1 (Home hero, staying at Webflow base 58px inside the padded
   * .hero-copy column) and .centered (FAQ "Have a question?" / footer titles that
   * already render fine at all widths). */
  .header-text-container.header-flexed-down .h1-header:not(.hero-h1):not(.centered),
  .header-text-container.flexed-down .h1-header:not(.hero-h1):not(.centered) {
    font-size: min(86px, 7.6vw) !important;
    line-height: 90% !important;
    max-width: 100%;
    word-break: normal;
    overflow-wrap: normal;
  }
}

/* Guard: the Home hero title uses .h1-header.hero-h1 with its own scoping
 * outside the split-title containers — this fix intentionally does NOT reach
 * it (selector nests .header-text-container.header-flexed-down / .flexed-down).
 * The About/Programming mobile ≤991 overrides are more specific and continue
 * to win at those widths. */