/* ============================================================
   StayJC — mobile-fixes.css
   Loaded LAST on every page so its rules win cascade ties.
   This file addresses the original problem:
     "Listing pages are not well aligned — content is spilling
      outside of the screen on mobile."

   The root causes that this file fixes:
     1. Wide elements (galleries, grids, tables, code blocks) with
        no max-width or overflow handling.
     2. Long unbroken strings (URLs, hashes) that force horizontal
        scroll. We use overflow-wrap and word-break.
     3. Fixed-px paddings (48px) that don't shrink on narrow phones.
     4. Lightbox arrows positioned OUTSIDE the viewport with
        negative left/right values.
     5. Sticky booking widgets that take fixed widths in the grid.
     6. Images and iframes without max-width: 100%.
   ============================================================ */

/* ---------- GLOBAL GUARDS (apply everywhere) ---------- */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Any media element must be contained */
img, video, iframe, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* Prevent long words/URLs from forcing horizontal scroll */
p, li, h1, h2, h3, h4, h5, h6, a, span, div {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Tables: wrap in horizontal scroll container or shrink */
table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Pre/code blocks should scroll, not overflow */
pre, code {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: normal;
  white-space: pre;
}

/* ============================================================
   MOBILE BREAKPOINT — under 980px (matches listing page breakpoint)
   ============================================================ */
@media (max-width: 980px) {

  /* ----- LISTING PAGE FIXES ----- */

  /* Main two-column layout collapses to single column */
  .listing-wrap {
    grid-template-columns: 1fr !important;
    padding: 24px 16px 60px !important;
    gap: 32px;
  }
  /* CSS Grid items default to `min-width: auto` (= min-content), so a `1fr`
     track will expand past the container whenever any descendant has a
     wide min-content size. Explicitly setting `min-width: 0` on the grid
     children lets the track honor the viewport width.
     Without this, on a 390px phone the track was computing to ~679px and
     all of .listing-left's content clipped off the right edge of the page. */
  .listing-wrap > * { min-width: 0; }

  /* Hero gallery: was 3-column grid with mixed row heights.
     Stack into a vertical scroll-snapping carousel on phones. */
  .gallery {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    padding: 16px !important;
    gap: 4px;
  }
  .gal-main, .gal-sm {
    grid-row: auto !important;
    grid-column: auto !important;
    height: 240px;
  }

  /* Breadcrumb shouldn't have huge desktop padding */
  .breadcrumb { padding: 88px 16px 0 !important; }

  /* Spec grid was 4 columns - drop to 2 on mobile */
  .specs-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Feature block was 2-column, stack on mobile */
  .feature-block {
    grid-template-columns: 1fr !important;
    padding: 20px 18px !important;
  }

  /* Bed grid: 3 columns → 1 */
  .bed-grid { grid-template-columns: 1fr !important; }

  /* Amenities / reviews / ratings: 2 columns → 1
     (Each listing uses either .review-cards or .reviews-grid for the same
     review list; both need the single-column collapse.) */
  .amenities-grid,
  .reviews-grid,
  .review-cards,
  .ratings-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Airbnb-style rating breakdown: 7-column grid blows past the viewport on
     phones (was overflowing on iPhone 15/16). Restack as: full-width "Overall
     rating" bars on top, then 2 × 3 grid of category cards below — readable
     without horizontal scroll on any phone width. */
  .rating-summary {
    grid-template-columns: repeat(2, 1fr) !important;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: 8px 0 !important;
  }
  .rating-overall {
    grid-column: 1 / -1;          /* span both columns */
    border-right: none !important;
    border-bottom: 1px solid var(--hairline);
    padding: 20px 16px !important;
  }
  .rating-cat {
    padding: 18px 12px !important;
  }
  /* On mobile the right-edge divider lands on every even card, which then sits
     on the column edge — hide those, keep the inner divider between the pair */
  .rating-cat:nth-child(2n+1) { border-right: 1px solid var(--hairline); }
  .rating-cat:nth-child(2n)   { border-right: none !important; }
  /* And the bottom row shouldn't have a hairline below the page edge */
  .rating-cat:nth-last-child(-n+2) { border-bottom: none; }

  /* Booking widget: sticky → static so it doesn't fight the layout */
  .booking-widget {
    position: static !important;
    width: 100% !important;
  }
  /* Hospitable's iframe is inline-styled to height: 900px so the desktop
     calendar fits without internal scroll. On mobile the actual content
     (calendar + guests + button + "select dates" text) is only ~520px
     tall — the remaining 380px renders as empty cream inside the iframe.
     Override to a height that fits the content with a small breathing
     margin and no large dead zone. */
  #booking-iframe {
    height: 580px !important;
  }

  /* Listing title: shrink on small screens */
  .listing-title {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.15;
  }
  .listing-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .listing-actions { width: 100%; flex-wrap: wrap; }

  /* Meta row: allow wrap, smaller text */
  .meta {
    font-size: 12px !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }

  /* Location box: don't be huge on mobile */
  /* Location box / map: let height grow with content on mobile (the 280px
     fixed height was chopping the iframe off). Iframe stays at a comfortable
     280px on phones, so the section is map height + chips + label. */
  .location-box { height: auto !important; }
  .map-container,
  .map-section,
  .location-map { height: 280px !important; }
  .map-container iframe,
  .map-section iframe,
  .location-map iframe,
  .location-box iframe { min-height: 280px !important; }
  .location-box > div:has(iframe) { height: 280px !important; }

  /* ----- LIGHTBOX FIXES (was the worst offender) ----- */

  /* Lightbox padding was 48px → too much on phones */
  .lightbox { padding: 16px !important; }

  /* Prev/next buttons were positioned with negative left/right —
     they fell off the viewport. Bring them INSIDE. */
  .lb-prev { left: 8px !important; }
  .lb-next { right: 8px !important; }
  .lb-nav {
    width: 38px !important;
    height: 38px !important;
    background: rgba(0,0,0,.5) !important;
  }
  .lb-close {
    top: -36px !important;
    right: 8px !important;
    color: #fff !important;
  }
  .lb-counter { bottom: -28px !important; font-size: 11px !important; }
  .lb-thumb { width: 48px !important; height: 32px !important; }

  /* ----- HOMEPAGE FIXES ----- */

  .properties-grid,
  .neighborhoods-grid,
  .why-grid,
  .blog-grid,
  .resources-row {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .hero {
    padding: 100px 20px 60px !important;
    min-height: auto !important;
  }
  .hero-stats {
    gap: 16px !important;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .hero-stats > div { flex: 1 1 40%; min-width: 120px; }

  .banner {
    padding: 14px 20px !important;
    flex-direction: column;
    text-align: center;
    gap: 4px;
  }

  /* ----- BLOG POST FIXES ----- */

  .blog-post-body,
  .blog-content,
  article {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .blog-post-body img,
  .blog-content img,
  article img { width: 100%; border-radius: 4px; }

  /* ----- RESOURCES / AFFILIATE PAGE ----- */

  .resource-grid,
  .affiliate-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   EXTRA-SMALL PHONES — under 480px
   Tighter spacing, smaller touch targets, single-column everything.
   ============================================================ */
@media (max-width: 480px) {
  section,
  .contact-cta {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .listing-wrap { padding: 16px 12px 48px !important; }
  .gallery { padding: 12px !important; }
  .gal-main, .gal-sm { height: 200px; }

  .contact-cta-title,
  .sec-title { font-size: clamp(26px, 7vw, 32px); }

  .site-footer { padding: 32px 16px; }
  .footer-bottom { padding: 14px 16px; }

  /* Buttons in tight spaces */
  .btn-primary,
  .btn-secondary,
  .btn-accent { padding: 12px 24px; font-size: 11px; }

  /* Listing title gets smaller */
  .listing-title { font-size: 26px !important; }
}