/* Raycin Vehicles — mobile/responsive overrides.
 * Loaded after vehicles.css. Targets phones + small tablets.
 * Goal: nothing horizontal-scrolls except tables (which become swipeable
 * via a block/overflow-x wrapper), padding tightens, font sizes scale,
 * sidebars + sticky elements unstick on small screens so content can breathe.
 */

/* ── Tablet & smaller (<=900px) — the existing grid breakpoints already
 *    drop side-by-side layouts to single column at 900px. We add: ── */
@media (max-width: 900px) {
  .rvn-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
  /* Section nav becomes horizontal scroll instead of wrapping to 3 lines */
  .rv-secnav,
  .rvdev-subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .rv-secnav a,
  .rvdev-subnav a {
    flex: 0 0 auto;
  }
  /* Filter sidebar (now stacked above grid) — full-width controls */
  .rv-side .rv-srch input,
  .rv-side .rv-select {
    font-size: 14px;
  }
  /* Tables stay as proper tables; parent containers scroll horizontally if needed.
   * NB: do not use display:block on the <table> itself — that collapses the
   * cell layout and makes columns visually mash together. */
  .rvn-card,
  .rv-pricewrap,
  .rv-cmp-wrap,
  .rvdev-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .rv-cmp-table,
  .rvdev-table,
  .rv-price-table { min-width: 560px; }
}

/* ── Phone (<=620px) ── */
@media (max-width: 620px) {
  .rvn-wrap {
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
  }
  /* Vehicle title — 34px is too big on phones */
  .rvn-title { font-size: 24px; }
  .rvn-arc-head .rvn-title { font-size: 20px; }

  /* Archive cards — 215-220px min becomes 1.5 cards on a 360px screen; force 2 cols cleanly */
  .rvn-cards,
  .rv-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .rvn-vcard-name,
  .rv-card-title { font-size: 14px; }
  .rvn-vcard-price,
  .rv-price { font-size: 12px; }
  .rv-card-stats { gap: 6px; padding: 6px 9px; }
  .rv-card-stats span { font-size: 8px; }
  .rv-card-stats b { font-size: 11px; }
  .rv-card-foot { padding: 6px 9px; }

  /* Toolbar: search input shouldn't push the count chip off-screen */
  .rv-toolbar { gap: 8px; }
  .rvn-search { margin-left: 0; width: 100%; }
  .rvn-search input { width: 100%; min-width: 0; }

  /* Filter chips row scrolls horizontally instead of vertically blowing up */
  .rvn-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .rvn-chip { flex: 0 0 auto; }

  /* Single-vehicle media area shouldn't be sticky on phones */
  .rvn-media { position: static; }

  /* Stat rows — make labels/values readable in narrow column */
  .rvn-stat b { font-size: 16px; }
  .rvn-dl { grid-template-columns: auto 1fr; gap: 4px 12px; }

  /* Buttons that were inline become full-width-friendly */
  .rvn-actions .rvn-btn { padding: 12px 14px; font-size: 14px; }

  /* Compare floating bar — stack contents so the Compare CTA stays reachable */
  #rv-compare-bar {
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  #rv-compare-bar .lbl { flex: 1 1 100%; font-size: 13px; }
  #rv-compare-go { margin-left: 0; flex: 1; }
  #rv-compare-clear { flex: 0 0 auto; }

  /* Class Builder grid: smaller min so each vehicle pill fits */
  .rv-cb-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); max-height: 280px; }

  /* Section nav — slimmer pills */
  .rv-secnav a,
  .rvdev-subnav a {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* ── Small phone (<=420px) — last-mile tuning ── */
@media (max-width: 420px) {
  .rvn-cards,
  .rv-grid {
    /* On a really narrow viewport, two columns become too cramped — go single */
    grid-template-columns: 1fr;
  }
  .rvn-title { font-size: 22px; }
  /* Hide the model-code copy chip + tier pill on smallest screens to declutter */
  .rv-copy { display: none; }
  .rvn-vcard-tier,
  .rv-card-tier { font-size: 10px; padding: 1px 5px; }
}