/* Phone swipe rails (inspired by the Android page's .m-rail): on phones a long card grid
   becomes one swipeable row — one card at a time with the next peeking in — and
   js/sections/90-rails.js adds previous / next buttons around position dots.
   Used on Marketplace (.market__grid) and Why Choose LandBitt (.why__grid).
   Loaded after the section stylesheets so it can replace their phone grids. */

.m-rail__nav { display: none; }

@media (max-width: 720px) {
  .m-rail {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .m-rail::-webkit-scrollbar { display: none; }
  .m-rail > * {
    flex: 0 0 84%;
    min-width: 0;
    scroll-snap-align: start;
  }
  .m-rail.market__grid { align-items: stretch; }
  /* cards in a rail are revealed with the rail, not one by one as they slide in sideways */
  .js .m-rail > [data-rv] { opacity: 1; transform: none; }

  .m-rail__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;
  }
  .m-rail__btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    transition: opacity .3s var(--ease), border-color var(--t-hover) var(--ease);
  }
  .m-rail__btn:disabled { opacity: .35; cursor: default; }
  .m-rail__dots { display: flex; align-items: center; gap: 6px; }
  .m-rail__dots i {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: var(--line);
    transition: width .45s var(--ease), background-color .3s;
  }
  .m-rail__dots i.is-on { width: 22px; background: var(--accent-deep); }
}