/* =============================================================
   262 STUDIOS — Rail section
   -------------------------------------------------------------
   The horizontal card rail that replaces the old numbered card
   grid on "What we run", "What's included" and "What a shoot day
   produces". Signed off 27 Aug 2026 (option D1).

   Kept in its own file for the same reason theme.css is: so
   main.css stays a byte-for-byte diff against the approved
   prototype. If the rail is ever folded back into the design
   system proper, move these rules into main.css and delete this
   file — do not maintain two copies.

   COLOUR
   Every colour below comes from four variables set on .railsec.
   The section adapts to whichever background it is placed on:

     .railsec              white page  → black tiles
     .railsec.on-bone      bone page   → black tiles
     .railsec.on-dark      dark page   → raised charcoal tiles
                                          with a hairline edge,
                                          because a black tile on
                                          a black section has no
                                          edge to read against.

   To retheme one page, override the four variables on that
   page's section — nothing else in this file hardcodes a colour.
   ============================================================= */

.railsec {
  --rail-tile: var(--ink);
  --rail-tile-hi: #15191a;
  --rail-tile-edge: transparent;
  --rail-accent: var(--teal);
}

.railsec.on-dark {
  --rail-tile: var(--ink-soft);
  --rail-tile-hi: #1e2426;
  --rail-tile-edge: var(--ink-line);
}

/* ---------- The rail ---------- */

/* Bleeds to the edge of .wrap so the first card lines up with the
   headline above it and the last one runs off the edge, which is
   what tells you it scrolls. */
.rail {
  display: flex;
  gap: clamp(12px, 1.5vw, 18px);
  margin: clamp(30px, 4vw, 46px) calc(var(--gutter) * -1) 0;
  padding: 2px var(--gutter) 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

/* ---------- The card ---------- */

.rcard {
  flex: 0 0 clamp(272px, 27vw, 336px);
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 312px;
  padding: clamp(20px, 2vw, 26px);
  border-radius: var(--r-lg);
  background: var(--rail-tile);
  border: 1px solid var(--rail-tile-edge);
  color: rgba(255, 255, 255, 0.62);
  overflow: hidden;
  transition: background 0.4s ease;
}

.rcard:hover,
.rcard:focus-within {
  background: var(--rail-tile-hi);
}

/* Faint plotted grid. The one piece of texture in the section —
   it is what stops four identical black rectangles reading as
   empty space. Do not raise the opacity. */
.rcard__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px);
  background-size: 34px 34px;
}

.rcard__no {
  position: relative;
  font-family: var(--label);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.rcard h3 {
  position: relative;
  margin: clamp(38px, 5vw, 54px) 0 0;
  color: #fff;
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  line-height: 1.05;
  letter-spacing: -0.032em;
}

.rcard p {
  position: relative;
  margin: 13px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
}

.rcard p strong {
  color: #fff;
  font-weight: 500;
}

/* Hover rule. The only place colour appears in the section, and it
   appears in response to the reader rather than as decoration. */
.rcard__bar {
  position: relative;
  margin-top: auto;
  padding-top: 22px;
}

.rcard__bar i {
  display: block;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.rcard__bar i b {
  display: block;
  height: 100%;
  width: 0;
  background: var(--rail-accent);
  transition: width 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rcard:hover .rcard__bar i b,
.rcard:focus-within .rcard__bar i b {
  width: 100%;
}

/* ---------- Controls ---------- */

.rail__nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

.rail__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  color: inherit;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.rail__btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.rail__btn[disabled] {
  opacity: 0.28;
  pointer-events: none;
}

.on-dark .rail__btn {
  border-color: var(--ink-line);
}

.on-dark .rail__btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.rail__prog {
  margin-left: 6px;
  font-family: var(--label);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.on-dark .rail__prog {
  color: rgba(255, 255, 255, 0.5);
}

/* Dots replace the arrows on touch widths — a thumb beats a 42px
   target at that size. */
.rail__dots {
  display: none;
  gap: 7px;
  margin-top: 20px;
}

.rail__dots b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(10, 11, 11, 0.18);
  transition: width 0.25s ease, background 0.25s ease;
}

.on-dark .rail__dots b {
  background: rgba(255, 255, 255, 0.22);
}

.rail__dots b.is-on {
  width: 20px;
  border-radius: var(--r-pill);
  background: var(--rail-accent);
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
  .rcard {
    flex-basis: calc(100% - 46px);
    min-height: 0;
  }

  .rail__nav {
    display: none;
  }

  .rail__dots {
    display: flex;
  }
}

/* No hover on a touch device, so the rule fills on whichever card
   is currently in view instead. Class is set by rail.js. */
@media (hover: none) {
  .rcard.is-inview {
    background: var(--rail-tile-hi);
  }

  .rcard.is-inview .rcard__bar i b {
    width: 100%;
  }
}

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

  .rcard,
  .rcard__bar i b,
  .rail__btn,
  .rail__dots b {
    transition: none;
  }
}