/* ── BlockFlow: ThinkVP — comprehensive mobile overflow fixes ── */

/* Level 1: Absolute hard-stops */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
*, *::before, *::after { box-sizing: border-box; min-width: 0; }

/* Level 2: Every text element wraps */
h1, h2, h3, h4, h5, h6, p, a, li, span, div, label, button {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Level 3: Media stays inside its container */
img, svg, video, iframe { max-width: 100%; height: auto; display: block; }

/* Level 4: Every grid/flex child is contained */
.tvp-grid-4 > *, .tvp-grid-3 > *, .tvp-grid-2 > *,
.tvp-split > *, .tvp-split-even > *, .tvp-split-wide > *,
.tvp-roster > *, .tvp-stats > *, section > * { overflow: hidden; }

/* Level 5: Sections never spill */
section, main, header, footer, nav { overflow-x: hidden; }

/* ── Nav: hamburger always shows at ≤900px ── */
@media (max-width: 900px) {
  .tvp-nav-links  { display: none !important; }
  .tvp-nav-cta    { display: none !important; }
  .tvp-nav-status { display: none !important; }
  .tvp-nav-hamburger { display: flex !important; }
}

/* ── WordPress block columns: fix nested flex layout ── */
/* The block mapper wraps tier card content in wp:columns (flex).
   WordPress renders those as horizontal rows by default. Force column stacking. */
.tvp-grid-4 .wp-block-columns,
.tvp-grid-4 [class*="wp-container-"],
.tvp-grid-4 .is-layout-flex {
  flex-direction: column !important;
  flex-wrap: wrap !important;
}
.tvp-grid-4 .wp-block-column {
  max-width: 100% !important;
  flex-basis: auto !important;
  min-width: 0 !important;
}

/* ── Tablet (601-1100px): 2-col grids ── */
@media (max-width: 1100px) {
  .tvp-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .tvp-roster { grid-template-columns: repeat(2, 1fr) !important; }
  .tvp-grid-4 > *:nth-child(2n) { border-right: none !important; }
  .tvp-grid-4 > *:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.08); }
}

/* ── Mobile (≤600px): everything single column ── */
@media (max-width: 600px) {
  /* All grids → 1 column */
  .tvp-grid-4,
  .tvp-grid-3,
  .tvp-grid-2,
  .tvp-split,
  .tvp-split-even,
  .tvp-split-wide,
  .tvp-roster { grid-template-columns: 1fr !important; }

  /* Remove stray column borders */
  .tvp-grid-4 > *, .tvp-grid-2 > * {
    border-right: none !important;
    padding-left: 0 !important;
  }

  /* Stats: 2-up on mobile */
  .tvp-stats { grid-template-columns: repeat(2, 1fr) !important; }

  /* CTA strip stacks */
  .tvp-cta-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }

  /* Footer → 1-col */
  .tvp-footer-grid { grid-template-columns: 1fr !important; }
  .tvp-footer-grid > *:first-child { grid-column: auto !important; }

  /* Section horizontal padding tightens */
  .tvp-section {
    padding-left: clamp(16px,4vw,24px) !important;
    padding-right: clamp(16px,4vw,24px) !important;
  }

  /* Art panels: match the SVG viewBox ratio exactly — zero top/bottom clipping.
     Portrait SVGs use viewBox="0 0 400 500" (4:5); square SVGs viewBox="0 0 400 400" (1:1).
     aspect-ratio + height:auto lets the browser size the container correctly
     so xMidYMid slice has nothing to crop. */
  .tvp-aspect-portrait {
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    width: 100% !important;
  }
  .tvp-aspect-square {
    aspect-ratio: 1 !important;
    height: auto !important;
    width: 100% !important;
  }

  /* Buttons always full-width on mobile */
  .tvp-btn { width: 100% !important; text-align: center !important; justify-content: center !important; }
  .tvp-btn-row { flex-direction: column !important; gap: 14px !important; }

  /* Tier card: remove min-height constraint so content doesn't clip */
  .tvp-grid-4 > * { min-height: auto !important; }

  /* Hero head (kicker row) wraps */
  .tvp-hero-head { flex-direction: column !important; gap: 8px !important; }
}

/* == BlockFlow: Universal Mobile Responsiveness == */

/* Hard-stop horizontal scroll on every theme */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
*, *::before, *::after { box-sizing: border-box; }

/* All children of grid/flex containers get min-width:0 so they
   never blow past their track/axis */
* { min-width: 0; }

/* Media stays inside its container */
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }

/* Text wraps instead of overflowing */
h1, h2, h3, h4, h5, h6, p, li, a, span, label, td, th, blockquote {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Sections never spill horizontally */
section, article, aside, header, footer, main, nav { overflow-x: hidden; }

/* Tables scroll rather than blow out */
table { width: 100%; overflow-x: auto; display: block; }

/* === Restore WordPress block column stacking ===
   wp-block-library is dequeued for design compatibility, but that removes
   WordPress's native column-stacking CSS. Re-implement it here so every
   theme using wp:columns gets correct mobile behaviour. */
.wp-block-columns { flex-wrap: wrap; }
.wp-block-column  { min-width: 0; }

@media (max-width: 599px) {
  /* Match WordPress's own breakpoint and selector pattern */
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
    max-width:  100% !important;
    min-width:  100% !important;
  }
  /* Also handle dynamically-injected wp-container-* layout classes */
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap !important;
  }
  [class*="wp-container-"].is-layout-flex {
    flex-wrap: wrap !important;
  }
}

/* === Breakpoints for common layout patterns === */

/* Tablet: 4-col → 2-col */
@media (max-width: 1024px) {
  [class*="grid-4"]  { grid-template-columns: repeat(2, 1fr) !important; }
  [class*="cols-4"]  { grid-template-columns: repeat(2, 1fr) !important; }
  [class*="columns-4"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Mobile: everything → 1-col, flex stacks */
@media (max-width: 640px) {
  [class*="grid-"]   { grid-template-columns: 1fr !important; }
  [class*="cols-"]   { grid-template-columns: 1fr !important; }
  [class*="columns-"] { grid-template-columns: 1fr !important; }
  [class*="split"]   { grid-template-columns: 1fr !important; }
  [class*="roster"]  { grid-template-columns: 1fr !important; }
  [class*="flex-row"],
  [class*="row-"]    { flex-direction: column !important; }

  /* Padding: clamp to comfortable mobile width */
  section, .section { padding-left:  clamp(16px, 4vw, 24px) !important;
                       padding-right: clamp(16px, 4vw, 24px) !important; }

  /* Buttons wrap and stay on-screen */
  .btn, [class*="btn-"], [class*="-btn"] {
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* Nav: hide links, show hamburger — works for any theme with these patterns */
  [class*="nav-links"], [class*="nav-menu"] { display: none !important; }
  [class*="hamburger"], [class*="menu-btn"], [class*="nav-toggle"] { display: flex !important; }
}

/* ================================================ */