/* Mobile background — block horizontal drift (≤767px) */

@media (max-width: 767px) {
  :root {
    /* Cover-scale fallback before js/layout-scale.js runs (width-only token is ~0.2 on phones). */
    --gradient-scale: min(
      1,
      max(
        var(--gradient-scale-width),
        calc(100dvh / var(--layout-design-height))
      )
    );
  }

  html,
  body {
    overscroll-behavior-x: none;
  }

  .page__layers {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  /* Absolute clip scrolls with the document — gradient covers full page height.
     Inherits position:absolute; inset:0; overflow:clip from layout/background.css. */
  .page__gradient-clip {
    width: 100%;
    max-width: 100vw;
  }

  /* Stack height follows loaded slices — avoids empty 5-slice min-height when DOM has fewer imgs. */
  .page__gradient-stack {
    min-height: auto;
  }
}