/* ============================================================
   VEHIX — Responsive hardening (loaded LAST, after the design CSS)
   Surgical fixes only. No redesign — these address concrete
   "doesn't fit the screen" causes and make a WIDE logo mark sit
   correctly. Kept separate so the design files stay byte-faithful.
   ============================================================ */

/* ---- 1. Kill horizontal overflow site-wide ----
   The hero/world decorative glows are intentionally wider than the
   viewport (min(1200px,130vw)); without a page-level clamp they let
   the page scroll sideways / render "zoomed out" on phones. */
html, body { max-width: 100%; overflow-x: hidden; }
/* honor notch / rounded-corner safe areas on the page gutter */
.wrap { padding-left: max(var(--gutter), env(safe-area-inset-left));
        padding-right: max(var(--gutter), env(safe-area-inset-right)); }

/* ---- 2. Logo mark: never squish a wide mark into a square ----
   Design CSS hard-codes square logo boxes (30/26/56/60px). The Vehix
   wing+V mark is wide, so we fix HEIGHT and let WIDTH scale to ratio. */
.brand img      { width: auto; height: 30px; }
.foot-brand img { width: auto; height: 26px; }
#wipe .wipe-mark{ width: auto; height: 56px; }
#enter img      { width: auto; height: 60px; }
/* keep the brand lockup from wrapping on very narrow screens */
.brand { gap: 9px; min-width: 0; }
.brand b { white-space: nowrap; }

/* ---- 3. Tablet / small-laptop band (861–1024px) ----
   Two-column app "worlds" are locked to ~92vh, which leaves awkward
   empty bands on shorter tablet viewports. Relax the min-height and
   tighten the column gap so content drives the height. */
@media (min-width: 861px) and (max-width: 1024px) {
  .app-world { min-height: 0; padding-block: clamp(3.5rem, 2rem + 6vw, 6rem); }
  .app-world .wrap { gap: clamp(2rem, 1rem + 3vw, 4rem); }
  .hero-lite .display { font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem); }
}

/* ---- 4. Small phones (≤460px) ----
   Single-column tiles, no left-over square aspect; comfortable tap
   targets; prevent the floating mock card from pushing width. */
@media (max-width: 460px) {
  .ix-grid { grid-template-columns: 1fr; }
  .app-square { min-height: 150px; }
  .hero-lite .display { font-size: clamp(2rem, 1.2rem + 5vw, 2.8rem); }
  .aw-cta, .fhero-cta, .hero-cta { gap: 12px; }
  .aw-btn, .fbtn, .btn { width: 100%; justify-content: center; }
  /* let the long footer link row wrap instead of overflowing */
  footer.site .wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ---- 5. Media never overflows its column on any breakpoint ---- */
.aw-media, .fhero-media, .mock-stage, .moment-media { max-width: 100%; }
.aw-media > *, .fhero-media > * { max-width: 100%; }
.phone { max-width: min(286px, 78vw); }
.window { max-width: min(460px, 92vw); }

/* ---- 6. Respect users who turn off motion (belt-and-suspenders) ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}