/* Porter's RV Sales: fit fixes for phones and large screens.
   Loaded after styles.css (the original Grok styles), so these win. */

/* Nothing on any page may push the page wider than the screen. */
html, body { overflow-x: clip; }
img, iframe, video { max-width: 100%; }
main, main * { min-width: 0; }
h1, h2, h3, p, li { overflow-wrap: anywhere; }

/* ---------- Phones (under 640px) ---------- */
@media (max-width: 639px) {
  /* Header: one compact bar that scrolls away, so photos get the screen.
     Call and Text are always reachable in the bar pinned to the bottom. */
  header.sticky { position: static; }
  header > div { padding-top: 10px; padding-bottom: 6px; }
  header .logo-mark { height: 2rem; max-width: 11.5rem; }
  header a[href^="sms:"] { display: none; }
  header a[href^="tel:"] { height: 2.5rem; padding-left: 0.9rem; padding-right: 0.9rem; }

  /* Menu on one line that slides sideways instead of wrapping to two rows. */
  header nav[aria-label="Main"] {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 6px -16px 0;
    padding: 0 12px 2px;
    gap: 0;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  header nav[aria-label="Main"]::-webkit-scrollbar { display: none; }
  header nav[aria-label="Main"] a { flex-shrink: 0; height: 2.5rem; padding-left: 0.7rem; padding-right: 0.7rem; }

  /* Headlines sized for a phone. */
  main h1 { font-size: 2.1rem; line-height: 1.12; }
  main h2 { font-size: 1.65rem; line-height: 1.2; }
  main section > div:first-child h1 { font-size: 2.35rem; }

  /* Rows of buttons stack full width instead of running off the edge. */
  main .flex-nowrap { flex-wrap: wrap; }
  main .flex-nowrap > a, main .flex-nowrap > button { flex: 1 1 100%; white-space: normal; text-align: center; }
  main a.whitespace-nowrap, main button.whitespace-nowrap { white-space: normal; }

  /* Inventory cards: shorter photo and tighter text so more fit per scroll. */
  [data-grid] { gap: 18px; }
  [data-grid] > * > div:first-child { aspect-ratio: 16 / 10; }
  [data-grid] > * > div:last-child { padding: 14px 16px 16px; gap: 6px; }
  [data-grid] h3 { font-size: 1.4rem; line-height: 1.2; }
  [data-grid] .text-2xl { font-size: 1.4rem; }

  /* Filter chips: a little smaller, still easy to tap. */
  [role="tablist"] button { height: 2.75rem; padding-left: 1rem; padding-right: 1rem; }

  /* Coach page: name and price right under the photos, compact buy box. */
  [data-gallery] [data-prev], [data-gallery] [data-next] { width: 2.75rem; height: 2.75rem; }
  [data-thumbs] button { width: 5.5rem; height: 4rem; }
  main .rounded-\[var\(--radius-lg\)\].bg-surface.p-5 .font-display.text-4xl { font-size: 2.1rem; }

  /* Feature lists and hours read cleanly. */
  main ul.grid li { padding: 10px 14px; }

  /* Map is a sensible height on a phone. */
  main iframe { height: 15rem; }

  /* Footer columns tighten up. */
  footer > div { row-gap: 2rem; }
}

/* ---------- Tablets (640px to 1023px) ---------- */
@media (min-width: 640px) and (max-width: 1023px) {
  header nav[aria-label="Main"] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  header nav[aria-label="Main"] a { flex-shrink: 0; }
}

/* ---------- Big screens (1440px and up) ---------- */
@media (min-width: 1440px) {
  /* Use more of a wide monitor: four coaches per row. */
  .max-w-6xl { max-width: 84rem; }
  #inventory [data-grid], [data-soon-section] [data-grid] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Phones: the hero's own call/text buttons repeat the pinned bottom bar, so drop them there. */
@media (max-width: 639px) {
  main > section:first-child a[href^="tel:"], main > section:first-child a[href^="sms:"] { display: none; }
}