/* ============================================================================
   RESPONSIVE — the O@W mobile standard
   ----------------------------------------------------------------------------
   Build desktop-first, then reach for these modifiers to control STACKING,
   COLUMN SPANS, VISIBILITY, ALIGNMENT, and TOUCH TARGETS at each breakpoint.
   Every layout built with this system should pass through these decisions in
   the build phase — not get "made responsive" later.

   Three breakpoints, inherited from the original Webflow build:

     --bp--tablet            991px   ≤ tablet / small laptop
     --bp--mobile-landscape  767px   ≤ large phone / portrait tablet  (where
                                     multi-column grids collapse to one)
     --bp--mobile            479px   ≤ phone (type + gutter fine-tuning)

   CSS media queries can't read custom properties, so the px values are
   repeated literally below. Keep them in sync with these tokens.
   ========================================================================== */
:root {
  --bp--tablet: 991px;
  --bp--mobile-landscape: 767px;
  --bp--mobile: 479px;

  /* Minimum interactive target on touch devices (44px) */
  --touch-target--min: 2.75rem;
}

/* ----------------------------------------------------------------------------
   1 · STACKING — turn a flex row into a column at a breakpoint.
   Add to any element that is already a flex row (e.g. u-hflex-*).
   Stacking is sticky: a tablet stack stays stacked on mobile too.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .u-stack-tablet { flex-direction: column; align-items: stretch; }
}
@media (max-width: 767px) {
  .u-stack-mobile { flex-direction: column; align-items: stretch; }
}

/* Reverse the visual order when a row stacks (e.g. media-above-text on mobile) */
@media (max-width: 767px) {
  .u-order-first-mobile { order: -1; }
  .u-order-last-mobile  { order: 1; }
}

/* ----------------------------------------------------------------------------
   2 · COLUMN SPANS per breakpoint — for the 12-column .u-grid-desktop.
   The tablet band keeps all 12 tracks, so explicit spans are meaningful there;
   scoped to 768–991 so they never override the single-column mobile stack.
   On phones every grid collapses to one column by default (the stacking
   standard); use .u-grid-mobile-2 to deliberately keep a 2-up for tight pairs.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .u-column-tablet-1  { grid-column: span 1; }
  .u-column-tablet-2  { grid-column: span 2; }
  .u-column-tablet-3  { grid-column: span 3; }
  .u-column-tablet-4  { grid-column: span 4; }
  .u-column-tablet-5  { grid-column: span 5; }
  .u-column-tablet-6  { grid-column: span 6; }
  .u-column-tablet-7  { grid-column: span 7; }
  .u-column-tablet-8  { grid-column: span 8; }
  .u-column-tablet-9  { grid-column: span 9; }
  .u-column-tablet-10 { grid-column: span 10; }
  .u-column-tablet-11 { grid-column: span 11; }
  .u-column-tablet-12 { grid-column: span 12; }
}

@media (max-width: 767px) {
  /* Re-establish a 2-up grid on phones for tight pairs (stats, logos) */
  .u-grid-mobile-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .u-grid-mobile-2 > [class*="u-column-"] { grid-column: span 1 !important; }
}

/* ----------------------------------------------------------------------------
   3 · VISIBILITY — show/hide by breakpoint.
   *-hide-*  removes the element at or below a breakpoint.
   u-only-*  shows the element ONLY at or below a breakpoint (hidden above).
   Pair u-hide-mobile (desktop nav) with u-only-mobile (hamburger menu).
   -------------------------------------------------------------------------- */
@media (max-width: 991px) { .u-hide-tablet { display: none !important; } }
@media (max-width: 767px) { .u-hide-mobile { display: none !important; } }

@media (min-width: 992px) { .u-only-tablet-down { display: none !important; } }
@media (min-width: 768px) { .u-only-mobile      { display: none !important; } }

/* ----------------------------------------------------------------------------
   4 · ALIGNMENT — re-center or re-align content once it stacks.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .u-text-center-mobile { text-align: center; }
  .u-text-left-mobile   { text-align: left; }
  .u-full-width-mobile  { width: 100%; }
  /* Button groups go full-width-stacked on phones for easy thumb taps */
  .u-buttons-stack-mobile { flex-direction: column; align-items: stretch; }
  .u-buttons-stack-mobile > .btn { width: 100%; }
}

/* ----------------------------------------------------------------------------
   5 · TOUCH TARGETS — interactive elements are never smaller than 44px.
   The .btn floor is baked into components.css; this is the opt-in utility for
   any other tappable element (icon button, nav link, close affordance).
   -------------------------------------------------------------------------- */
.u-touch-target {
  min-height: var(--touch-target--min);
  min-width: var(--touch-target--min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (pointer: coarse) {
  .btn-text, a:not(.btn) { min-height: var(--touch-target--min); }
}

/* ----------------------------------------------------------------------------
   6 · OVERFLOW GUARDS — keep wide content (marquees, tables) from forcing a
   horizontal page scroll on phones.
   -------------------------------------------------------------------------- */
.u-overflow-x-clip   { overflow-x: clip; }
.u-overflow-x-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }