/* ============================================================================
   Mobile corrections, site wide.
   Loaded last from includes/luxury_head.php so it overrides the page styles.

   Written from measurement at 393px (iPhone 15/16 width), not from guesses:
   every rule here answers something that was observed overflowing, clipping
   or sitting under a thumb. Desktop is untouched, every rule is inside a
   max-width media query.
   ========================================================================= */

@media (max-width: 767px) {

  /* ── 1. Nothing may push the PAGE sideways ──────────────────────────────
     Measured: Compare.php reported a 485px document on a 393px viewport, and
     model.php 473px, because wide tables and nav strips widened the body
     rather than scrolling inside their own box. A reader then drags the whole
     page sideways and the header slides away.
     The page stays put; the wide thing scrolls inside itself (rule 2). */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* ── 2. Wide content scrolls INSIDE its own box ─────────────────────────
     Tables are the honest case for sideways scrolling: a specification
     comparison cannot usefully reflow to 393px. Let them scroll, with
     momentum, instead of breaking the page. */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table thead, table tbody { display: table; width: max-content; min-width: 100%; }
  .table-wrap, .overflow-x-auto { -webkit-overflow-scrolling: touch; }

  /* Tab and filter strips scroll rather than wrap into a ragged block, and
     lose the scrollbar that eats 8px of a small screen. */
  .nav-underline-wrap, .tabs-scroll, .chip-row, .filter-row,
  .glass-pill-row, .pill-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; white-space: nowrap;
  }
  .nav-underline-wrap::-webkit-scrollbar, .tabs-scroll::-webkit-scrollbar,
  .chip-row::-webkit-scrollbar, .filter-row::-webkit-scrollbar { display: none; }

  /* ── 3. Long unbroken strings ───────────────────────────────────────────
     References carry no spaces: 03.3119.3600/56.M3100 and
     565.NX.1470.RX.1204 ran straight out of their card. Break them, but never
     break a figure: "$68,95 / 4" was the result of applying this too widely. */
  h1, h2, h3, h4, p, li, td, th, dd, dt, figcaption { overflow-wrap: anywhere; }
  .price, .figure, [class*="text-2xl"], [class*="text-3xl"],
  [class*="rounded-full"], .stat-value, .num {
    overflow-wrap: normal; word-break: keep-all;
  }

  /* Flex and grid children default to min-width:auto, which refuses to shrink
     below their content and is the usual cause of a card pushing past the
     screen edge. */
  .flex > *, .grid > * { min-width: 0; }

  /* ...but NOT inside a strip that is meant to scroll sideways. Allowing the
     eight Analytics section links to shrink squeezed them to 19-36px each
     while their labels need about 90px, so the text printed on top of itself.
     Here the link keeps its width and the strip scrolls instead. */
  #report-nav a, .tabs-scroll > *, .chip-row > * {
    min-width: max-content;
    flex: 0 0 auto;
  }

  /* ── 4. Tap targets ─────────────────────────────────────────────────────
     Measured 23 controls under 40px on model.php, 24 on search.php. Apple
     and Google both ask for 44px. Applied as a minimum box, not a size, so
     the design is unchanged where it already complies. */
  a[class*="btn"], button, [role="button"],
  .pagination a, .pagination button,
  .chip, .pill, .tab, .nav-underline,
  .icon-btn, .glass-pill, .glass-btn-ghost, .ba-card {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* The header's search and menu buttons measured 38x38. Square them off at
     44 so a thumb hits them reliably. */
  .icon-btn { min-width: 44px; width: 44px; height: 44px; }
  .logo { min-height: 44px; display: inline-flex; align-items: center; }
  /* Filter chips measured 27px tall. Padding rather than a fixed height, so
     a chip that already wraps to two lines still grows. */
  .glass-pill { padding-top: .55rem; padding-bottom: .55rem; }
  /* Inline links inside running text keep their natural size: making every
     link 44px tall would wreck a paragraph. */
  p a, li a, td a, .prose a { min-height: 0; display: inline; }
  /* A breadcrumb is navigation, not prose. Padding rather than min-height so
     the trail stays on one line while the targets grow vertically.
     NOT a blanket `nav a`: that caught the Analytics report sub-nav, whose
     links are inline-flex inside a flex row, and overriding their display
     collapsed the row so all eight section links printed on top of each
     other. Only breadcrumb trails. */
  .breadcrumb a, .nav-underline {
    min-height: 0;
    display: inline-block;
    padding-top: .55rem;
    padding-bottom: .55rem;
  }

  /* Form controls: 16px prevents iOS zooming the whole page on focus, which
     is the single most common mobile annoyance on a search field. */
  input, select, textarea { font-size: 16px; min-height: 44px; }

  /* ── 5. Images never exceed their box ───────────────────────────────── */
  img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

  /* ── 6. Spacing ─────────────────────────────────────────────────────────
     Desktop section padding leaves a 393px screen mostly empty, and the
     reader scrolls past nothing. */
  section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
    padding-left: 1rem; padding-right: 1rem;
  }

  /* Headlines sized for a 1440px screen are too large at 393px and wrap to
     four or five lines. */
  h1 { font-size: clamp(1.6rem, 8vw, 2.4rem) !important; line-height: 1.15; }
  h2 { font-size: clamp(1.4rem, 6.5vw, 2rem) !important;  line-height: 1.2; }

  /* ── 7. Sticky bars must not eat the screen ─────────────────────────────
     A sticky header plus a sticky filter bar left under half the viewport for
     content on a 852px-tall phone. */
  .sticky-filters, .sticky-sub { position: static !important; }

  /* ── 8. Search page controls ────────────────────────────────────────────
     Read off the served markup rather than guessed: the Filters control is
     button.glass-btn-ghost and the counts line is div.glass-strip.

     The button was clipped at the right edge with its icon over its label.
     Two causes: the flex row it sits in needs ~470px, and a `white-space:
     nowrap` I had applied to all buttons stopped it shrinking. Give it a
     width it can keep and let the row wrap. */
  /* The Filters button was clipped at the right edge with its icon printed
     over its label, because a `white-space: nowrap` applied to all buttons
     stopped it shrinking. Give it a size it can keep. */
  .glass-btn-ghost {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-left: .9rem; padding-right: .9rem;
  }

  /* Children of a flex strip must be allowed to shrink, or a long counts line
     pushes the sort control off the edge. NOT flex-wrap: the search field is
     also a .glass-strip, and wrapping it threw the Search button out of the
     input and over the chips below. */
  .glass-strip > * { min-width: 0; }
}


/* Very small phones, 360px and under: the two-column card grids become one
   column rather than squeezing a watch, a name and a price into 160px. */
@media (max-width: 380px) {
  .grid-cols-2 > * { min-width: 0; }
  #popular-models, #top-movers, #gphg-home-grid { grid-template-columns: 1fr !important; }
}