/* ============================================================
   VK RADIO TRADER — assets/css/mobile.css
   Recreated 2026-07-15. The previous mobile.css was deleted after
   being confirmed completely unused (never linked anywhere) — all
   real mobile responsiveness has always lived in style.css's own
   @media blocks. This file is for NEW mobile-specific fixes going
   forward, kept separate so they're easy to find and review as a
   group, rather than getting buried inside style.css's existing
   breakpoints.

   Loaded via a media-scoped <link> tag in header.php, so it only
   applies (and is only meaningfully active) below 768px — see that
   file for the exact breakpoint.
   ============================================================ */

/* ── RECENT LISTINGS / WANTED LISTINGS — FIXED 2026-07-15 ────
   Root cause found by reading the actual markup in index.php: the
   thumbnail column isn't .row-thumb itself — it's wrapped in an
   extra, unstyled <div> that's the REAL grid item occupying that
   column track. style.css's existing 960px rule hides .row-thumb,
   but that only empties out the wrapper's contents; the wrapper
   itself is still a grid item, still taking up its column, just
   rendering nothing — hence the blank space instead of a clean
   collapse. .row-loc and .row-age don't have this problem, since
   those ARE direct grid children with their own classes already.
   Fix: hide the actual wrapper (always the first direct child of
   .table-row) directly, instead of only its contents.

   Scoped with :has(.row-thumb) rather than a bare .table-row
   selector — .table-row is also used on pages/nets.php for a
   completely different 2-column layout with no thumbnail at all
   (checked directly — same shared .listings-table wrapper class
   too, so that alone wouldn't have been safe to scope against).
   A bare ".table-row > div:first-child" would have hidden the net
   name column there instead. This only matches rows that actually
   contain a .row-thumb, leaving nets.php untouched. */
@media (max-width: 960px) {
  .table-row:has(> div > .row-thumb) > div:first-child { display: none; }
}

/* ── LISTING.PHP — FIXED 2026-07-15 ──────────────────────────
   Two separate bugs found by reading the real markup:

   1) The two-column layout (image left, price/sidebar right) uses
      an inline style: grid-template-columns:1fr 320px. style.css
      already has a mobile-collapse rule for this exact pattern —
      but it's an attribute selector written for the OPPOSITE column
      order (320px 1fr, matching messages.php's sidebar), looking
      for the literal substring "grid-template-columns:320px". Since
      listing.php's actual text is "grid-template-columns:1fr 320px"
      — with "1fr " sitting between the colon and "320px" — that
      substring never matches, so the collapse rule silently never
      fires here. Sidebar just gets squeezed and cut off instead of
      stacking under the image. Added the missing selector variant.

   2) The gallery's main image box has a fixed height:420px (inline
      style) with object-fit:contain. On a narrow mobile width, a
      wide product photo scales down to fit, but the box height
      stays locked at 420px regardless — creating large empty dark
      bars above/below the now-much-shorter rendered image
      (classic letterboxing from a fixed-height container paired
      with a responsive-width one). Reduced the height specifically
      on mobile so it stays proportionate. */
.main > div[style*="grid-template-columns:1fr 320px"] {
  display: flex !important;
  flex-direction: column !important;
}
#main-img { height: 260px !important; }

/* ── CATEGORY NAV BAR — FIXED 2026-07-15 ─────────────────────
   .cat-nav-inner already has scrollbar-width:none and a hidden
   webkit scrollbar rule right next to overflow:visible — that
   combination only makes sense if the original intent was a
   horizontally-scrollable nav with the scrollbar hidden for a
   cleaner look. overflow:visible is the opposite of scrollable —
   it neither scrolls nor wraps, so once the nav items (All
   Listings, Wanted, Members, etc.) no longer fit a narrow screen,
   they just visually spill out past the edge instead. Likely a
   genuine typo (visible vs auto), not a deliberate choice, given
   the scrollbar-hiding CSS sitting right there unused. Fixed to
   actually scroll — the hidden-scrollbar styling now finally does
   what it always looked like it was meant to do. */
.cat-nav-inner { overflow-x: auto !important; }

/* ── REFERRAL POPUP — FIXED 2026-07-15 ───────────────────────
   Reported running off the right edge of the screen on mobile.
   The CSS itself (fixed overlay, flex-centered, inner box at
   width:100%/max-width:420px) looks structurally correct on paper,
   so rather than guess further without being able to do a live
   inspection on an actual phone, this is a defensive fix: force
   the box to never exceed the real viewport width no matter what
   else might be pushing it around. Doesn't diagnose the root cause,
   but should reliably stop the visible symptom either way. */
#referral-popup > div { max-width: calc(100vw - 2rem) !important; }

/* ── HOMEPAGE LISTING ROW (.rrow) — mobile, 2026-07-15 ───────
   Price was showing up missing on mobile, on every row including
   short titles nowhere near overflowing — so this isn't really the
   same "long title forces overflow" bug as before, it's the row's
   three pieces (photo/text/price) just not reliably having enough
   combined room on a narrow screen, once photo, gaps, and text are
   all accounted for. Rather than keep chasing the exact pixel math
   of why price specifically loses that fight, this makes the whole
   row more forgiving on mobile: photo stays put, but the text area
   and price are allowed to wrap onto their own line instead of
   being forced to always fit on one. Price still shows every time,
   it just sits under the title on mobile rather than beside it. */
/* ── HOMEPAGE LISTING ROW (.rrow) — mobile, 2026-07-15, v2 ───
   Abandoned the flex-wrap approach entirely — it worked in Chrome's
   device emulation but not on a real Android phone, meaning
   something about how flex-basis/width were resolving differed
   between the emulator and a real device. Rather than keep chasing
   that inconsistency, this switches mobile to plain stacked block
   elements instead: photo on top (full width), then title, then
   price below. No flexbox involved in the mobile layout at all —
   just the most basic block-stacking behavior in CSS, which every
   browser and device implements identically. */
.rrow { display: block !important; padding: 0.85rem 1rem; }
.rrow-thumb { display: block !important; width: 100% !important; height: 160px !important; margin-bottom: 0.6rem; }
.rrow-body { display: block !important; width: 100% !important; }
.rrow-price {
  display: block !important; width: 100% !important;
  flex: none !important;
  text-align: left !important; margin-top: 0.4rem !important;
  padding-left: 0 !important;
}

/* ── SEC-HEADER — FIXED 2026-07-15 ───────────────────────────
   Same exact gap as .rrow-body/.two-col before it — .sec-header
   (the "Recent Listings ... All listings →" row) is flex with no
   min-width:0, so a long title could push the "All listings" link
   past the edge. This is the third unrelated place today this same
   missing piece has shown up. */
.sec-header > * { min-width: 0; }
.sec-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── GLOBAL MOBILE SAFETY NET — 2026-07-15 ───────────────────
   Given how many separate, unrelated components have each turned
   out to have this same "missing min-width:0 lets content spill
   past the edge" gap today (.rrow, .two-col, .sec-header — likely
   not the last), this is a blanket backstop rather than continuing
   to hunt each one down individually as it's noticed. Doesn't fix
   the root cause in any specific component, but guarantees nothing
   can ever cause horizontal scroll/spillover on mobile again,
   regardless of which component it is or whether it's been found
   yet. Standard, safe, widely-used pattern for exactly this
   situation. */
body { overflow-x: hidden; }