/* Card rails (carousels): featured, similar and recently viewed homes.
   Markup: public/scheme/_rail.html; behaviour: js/scheme/rail.js. Without
   JavaScript a rail is a plain row that scrolls sideways with snap points. */
@layer components {
  .rail { position: relative; min-width: 0; }
  .rail[hidden] { display: none; }
  .rail__head { display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
  .rail__title { font-size: var(--fs-l); margin: 0 auto 0 0; }
  @media (min-width: 40em) { .rail__title { font-size: var(--fs-xl); } }
  .rail__all { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 1.5rem; }
  .rail__controls { display: flex; gap: var(--sp-2); }
  .rail__controls[hidden] { display: none; }
  .rail__btn {
    width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); cursor: pointer;
  }
  .rail__btn:hover { border-color: var(--ink); }
  .rail__btn:disabled { opacity: 0.4; cursor: default; }
  .rail__btn:focus-visible { border-radius: 50%; }

  /* Cards per view: about 1.15 on a phone, 2.2 on a tablet, 3.3 then 4.2 on
     a desktop; the peeking card shows there is more to the side. */
  .rail__track {
    --per-view: 1.15;
    --rail-gap: var(--sp-4);
    display: flex; gap: var(--rail-gap);
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding: 2px 2px var(--sp-3);
    margin: -2px -2px 0;
    border-radius: var(--radius-l);
  }
  .rail__slide {
    flex: 0 0 calc((100% - var(--rail-gap) * (var(--per-view) - 1)) / var(--per-view));
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
  }
  .rail__slide > * { flex: 1 1 auto; min-width: 0; }
  @media (min-width: 40em) { .rail__track { --per-view: 2.2; } }
  @media (min-width: 64em) { .rail__track { --per-view: 3.3; } }
  @media (min-width: 80em) { .rail__track { --per-view: 4.2; } }

  /* With the island: the arrows replace the scrollbar. */
  .rail[data-rail-ready] .rail__track { scrollbar-width: none; }
  .rail[data-rail-ready] .rail__track::-webkit-scrollbar { display: none; }

  /* The pause/play control (WCAG 2.2.2): out of sight until focused. */
  .rail__motion {
    position: absolute; top: 0; right: 0; z-index: 2;
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: 2.75rem; padding: 0.5rem 0.9rem;
    border: 1px solid var(--ink); border-radius: var(--radius);
    background: var(--ink); color: #fff; font-weight: 600; font-size: var(--fs-s);
  }
  .rail__motion::before { content: ""; width: 0.7rem; height: 0.8rem; border-inline: 3px solid currentColor; box-sizing: border-box; }
  .rail__motion[aria-pressed="false"]::before { border: 0; border-left: 0.7rem solid currentColor; border-block: 0.4rem solid transparent; height: 0; }
  /* Out of sight until it has keyboard focus, like the skip link: full size,
     so it stays a proper tap target when it shows. */
  .rail__motion:not(:focus):not(:focus-visible) { inset-inline-end: auto; inset-inline-start: -9999px; }
  .rail__motion[hidden] { display: none; }

  .rail--recent { margin-block: var(--sp-6); }
  .rail--recent.wrap { margin-block: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rail__track { scroll-behavior: auto; }
}

@layer page {
  /* Under a detail page: similar homes and recently viewed, full width. */
  .dev__more { padding-bottom: var(--sp-6); }
  .dev__more > .rail { margin-block: var(--sp-6) 0; }
  .search__featured { margin-block: var(--sp-4) var(--sp-5); }
}