/* ==========================================================================
   Rail container

   Family:
     .rail

  API (inline styles):
    --cols              Base visible count (default: 1.33)
    --cols-md           Override at 40rem+
    --cols-lg           Override at 64rem+
    --cols-xl           Override at 90rem+
    --rows              Base row count (default: 1)
    --rows-md           Override at 40rem+
    --rows-lg           Override at 64rem+
    --rows-xl           Override at 90rem+
    --row               Optional child grid row
    --row-md            Optional child grid row at 40rem+
    --row-lg            Optional child grid row at 64rem+
    --row-xl            Optional child grid row at 90rem+

  Runtime contexts (from container API):
    --c                 Resolved visible-count for current breakpoint
    --r                 Resolved row count for current breakpoint
    --pi                Inline padding context
    --gap               Spacing rhythm context

   Family modifiers:
      .rail--rows-2
        Backward-compatible alias for --rows: 2.

   Example markup:
    <div class="rail" style="--cols: 1.33; --cols-xl: 4;">
       <div class="rail__viewport">...</div>
     </div>
    <div class="rail gap-0" style="--cols: 2.33;">
       <div class="rail__viewport">...</div>
     </div>
    <div class="rail mw-full" style="--cols: 1.33; --cols-lg: 3.33; --rows-lg: 2;">
        <div class="rail__viewport">...</div>
      </div>
   ========================================================================== */

.rail {
  --peek: 0.33;
  --c: var(--c-overflow, var(--cols, 1.33));
  --r: var(--rows, 1);
  position: relative;
  width: 100%;
  min-width: 0;
}

.rail__viewport {
  display: grid;
  grid-auto-flow: column dense;
  grid-auto-columns: calc((100% - (var(--c) - 1) * var(--gap)) / var(--c));
  grid-template-rows: repeat(var(--r), minmax(0, 1fr));
  align-items: start;
  justify-content: safe center;
  gap: var(--gap);
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rail__viewport > * {
  min-width: 0;
  grid-row: var(--row, auto);
  scroll-snap-align: start;
}

.rail__viewport::-webkit-scrollbar {
  display: none;
}

/* --- Two-row ------------------------------------------------------------ */

.rail--rows-2 {
  --rows: 2;
}

/* --- Breakpoints -------------------------------------------------------- */

@media (min-width: 40rem) {
  .rail {
    --c: var(--c-overflow, var(--cols-md, var(--cols, 1.33)));
    --r: var(--rows-md, var(--rows, 1));
  }

  .rail__viewport > * {
    grid-row: var(--row-md, var(--row, auto));
  }
}

@media (min-width: 64rem) {
  .rail {
    --c: var(--c-overflow, var(--cols-lg, var(--cols-md, var(--cols, 1.33))));
    --r: var(--rows-lg, var(--rows-md, var(--rows, 1)));
  }

  .rail__viewport > * {
    grid-row: var(--row-lg, var(--row-md, var(--row, auto)));
  }
}

@media (min-width: 90rem) {
  .rail {
    --c: var(--c-overflow, var(--cols-xl, var(--cols-lg, var(--cols-md, var(--cols, 1.33)))));
    --r: var(--rows-xl, var(--rows-lg, var(--rows-md, var(--rows, 1))));
  }

  .rail__viewport > * {
    grid-row: var(--row-xl, var(--row-lg, var(--row-md, var(--row, auto))));
  }
}

/* --- Overflow affordance: prev/next overlay arrows -------------------- */

.rail__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--s-40);
  block-size: var(--s-40);
  padding: 0;
  background: var(--wp--preset--color--off-white);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--warm-brown) 18%, transparent);
  border-radius: 9999rem;
  color: var(--wp--preset--color--warm-brown);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.rail__arrow:hover {
  background: var(--wp--preset--color--warm-brown);
  color: var(--wp--preset--color--off-white);
}

.rail__arrow:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wp--preset--color--warm-brown) 35%, transparent);
}

.rail__arrow.prev {
  left: 2em;
}

.rail__arrow.prev svg {
  transform: scaleX(-1);
}

.rail__arrow.next {
  right: 2em;
}

.rail__arrow svg {
  inline-size: var(--s-20);
  block-size: var(--s-20);
}

.rail.is-overflowing .rail__arrow {
  display: flex;
}

.rail.is-overflowing.is-scrolled-start .rail__arrow.prev,
.rail.is-overflowing.is-scrolled-end .rail__arrow.next {
  display: none;
}

@media (hover: none) {
  .rail__arrow {
    display: none !important;
  }
}