/* =========================================================
   NPW RESPONSIVE FOUNDATION — BREAKPOINTS / UTILITIES
   Step 03
   Governing breakpoints: 980px, 720px, 430px.
   Shell-specific earlier collapse remains permitted only where
   actual navigation length requires it.
   ========================================================= */

/* Base utility contracts. These are opt-in so the approved homepage
   remains visually unchanged unless a reusable responsive utility is
   explicitly applied by a page/component. */
.u-scroll-x {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.u-no-wrap {
  white-space: nowrap;
}

.u-min-0 {
  min-width: 0;
}

.u-full {
  width: 100%;
}

/* Tablet transition: preserve desktop editorial density while allowing
   reusable grids/splits to simplify before the mobile breakpoint. */
@media (max-width: 980px) {
  .layout-grid.tablet-2,
  .layout-grid.tablet-2-even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout-grid.tablet-2 > [class*="span-"],
  .layout-grid.tablet-2-even > [class*="span-"] {
    grid-column: auto;
  }

  .u-stack-tablet {
    display: flex !important;
    flex-direction: column !important;
  }

  .u-hide-tablet {
    display: none !important;
  }

  .u-scroll-x-tablet {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile: single-column content, 14px minimum outer margin and mobile
   section rhythm. This matches the approved homepage transition while
   extending it to the reusable interior layout contract. */
@media (max-width: 720px) {
  .layout-container {
    width: min(var(--container-max), calc(100% - 28px));
  }

  .section-space {
    padding-block: var(--section-space-mobile);
  }

  .section-space-compact {
    padding-block: var(--space-12);
  }

  .layout-grid,
  .layout-grid.tablet-2,
  .layout-grid.tablet-2-even,
  .layout-split-40-60,
  .layout-split-50-50 {
    grid-template-columns: 1fr;
  }

  .layout-grid > [class*="span-"] {
    grid-column: 1 / -1;
  }

  .u-stack-mobile {
    display: flex !important;
    flex-direction: column !important;
  }

  .u-full-mobile {
    width: 100% !important;
  }

  .u-hide-mobile {
    display: none !important;
  }

  .u-show-mobile {
    display: revert !important;
  }

  .u-scroll-x-mobile {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .u-text-left-mobile {
    text-align: left !important;
  }
}

/* Narrow mobile: reduce avoidable horizontal pressure without shrinking
   typography below the Design System's readable scale. */
@media (max-width: 430px) {
  .layout-grid {
    gap: var(--space-4);
  }

  .layout-split-40-60,
  .layout-split-50-50 {
    gap: var(--space-6);
  }

  .u-stack-narrow {
    display: flex !important;
    flex-direction: column !important;
  }

  .u-full-narrow {
    width: 100% !important;
  }

  .u-hide-narrow {
    display: none !important;
  }
}