/* Mobile layout — add in <head> AFTER the other CSS files:
   <link rel="stylesheet" href="/mobile.css">                     */

@media (max-width: 700px) {

  /* Long card lists become horizontal swipe rows (rooms, tours, reviews, room photos, gallery) */
  #rooms .grid,
  #tours .tour-grid,
  #stories .reviews,
  .room-showcase .room-showcase-grid,
  #gallery .gallery-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -16px;
    padding: 4px 16px 12px;
    scroll-padding-inline: 16px;
    grid-template-columns: none !important;
  }
  #rooms .grid::-webkit-scrollbar,
  #tours .tour-grid::-webkit-scrollbar,
  #stories .reviews::-webkit-scrollbar,
  .room-showcase .room-showcase-grid::-webkit-scrollbar,
  #gallery .gallery-grid::-webkit-scrollbar { display: none; }

  #rooms .grid > *,
  #tours .tour-grid > *,
  #stories .reviews > * {
    flex: 0 0 82% !important;
    max-width: 82% !important;
    scroll-snap-align: start;
  }
  .room-showcase .room-showcase-grid > * {
    flex: 0 0 70% !important;
    max-width: 70% !important;
    scroll-snap-align: start;
  }
  #gallery .gallery-grid > * {
    flex: 0 0 62% !important;
    max-width: 62% !important;
    scroll-snap-align: start;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  #gallery .gallery-grid img { aspect-ratio: 4 / 5; object-fit: cover; height: auto; width: 100%; }

  /* End spacing so the last card isn't stuck to the screen edge */
  #rooms .grid::after, #tours .tour-grid::after, #stories .reviews::after,
  .room-showcase .room-showcase-grid::after, #gallery .gallery-grid::after {
    content: ""; flex: 0 0 4px;
  }

  /* Readable minimum text sizes */
  small, .party-image-note, .party-eyebrow, .eyebrow { font-size: 12px !important; }

  /* Comfortable spacing between sections */
  section { scroll-margin-top: 70px; }
}