/* RPA · Plates rail. A native horizontal scroller first; motion may pin it later (.is-pinned).
   Shared atoms (.rpa-plate, .rpa-eyebrow, .rpa-display, .rpa-figure, .rpa-link-arrow) are the theme's. */

.rpa-plates-rail {
  --_inset: 0px;
  --_rule: var(--rpa-c-rule, var(--rpa-rule));
  --_rule-strong: var(--rpa-c-rule-strong, var(--rpa-rule-strong));
  --_muted: var(--rpa-c-muted, var(--rpa-slate));
  --_accent: var(--rpa-c-accent, var(--rpa-petrol));
  width: 100%;
  min-width: 0;
}
/* Line the first plate up with the page grid, then run to the edge of the screen. */
.rpa-plates-rail--bleed {
  --_inset: max(var(--rpa-gutter), calc((100% - var(--rpa-shell)) / 2 + var(--rpa-gutter)));
}

.rpa-plates-rail__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--_inset);
  -webkit-overflow-scrolling: touch;
  padding-block-end: 1.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--_accent) transparent;
}
.rpa-plates-rail__viewport::-webkit-scrollbar { height: 9px; }
.rpa-plates-rail__viewport::-webkit-scrollbar-track {
  margin-inline: var(--_inset);
  background: linear-gradient(var(--_rule), var(--_rule)) center / 100% 1px no-repeat;
}
.rpa-plates-rail__viewport::-webkit-scrollbar-thumb {
  background: var(--_accent);
  background-clip: content-box;
  border-block: 3px solid transparent;
}
.rpa-plates-rail__viewport:focus-visible { outline-offset: -2px; }

.rpa-plates-rail__track {
  display: flex;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0 var(--_inset);
  border-block-start: 1px solid var(--_rule-strong);
}

.rpa-plates-rail__plate {
  flex: none;
  width: min(84vw, 25rem);
  scroll-snap-align: start;
  scroll-margin-top: calc(var(--rpa-header-h) + 2rem);
  padding-block-start: 1.5rem;
  padding-inline-end: clamp(1.5rem, 3vw, 3rem);
  margin-inline-end: clamp(1.5rem, 3vw, 3rem);
  border-inline-end: 1px solid var(--_rule);
}
.rpa-plates-rail__plate:last-child { margin-inline-end: 0; }

.rpa-plates-rail__inner {
  display: flex;
  flex-direction: column-reverse; /* image first on small screens; heading first in the source */
  gap: 1.75rem;
  height: 100%;
}
.rpa-plates-rail__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.rpa-plates-rail__index {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
}
.rpa-plates-rail__index .rpa-plates-rail__num {
  font-size: var(--rpa-step-4);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
}
.rpa-plates-rail__title {
  font-size: var(--rpa-step-3);
  max-width: 14ch;
  margin: 0 0 1.25rem;
}
.rpa-plates-rail__text {
  font-size: var(--rpa-step-0);
  line-height: var(--rpa-leading-body);
  max-width: 40ch;
  margin: 0 0 1.75rem;
  color: var(--_muted);
}
.rpa-plates-rail__body .rpa-plates-rail__link { margin-block-start: auto; }

/* 4:5 plate. Chained so the crop wins over Elementor's img reset. */
.rpa-plates-rail__media.rpa-plates-rail__media {
  aspect-ratio: 4 / 5;
  width: 100%;
  margin: 0;
}
.rpa-plates-rail .rpa-plates-rail__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* No image: a blank plate, drawn rather than missing. */
.rpa-plates-rail__media--empty {
  position: relative;
  display: grid;
  place-items: end start;
  border: 1px solid var(--_rule);
  border-radius: var(--rpa-radius);
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--_rule) calc(50% - 0.5px), var(--_rule) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    color-mix(in srgb, var(--rpa-c-text, var(--rpa-ink)) 3%, transparent);
  padding: 1.25rem;
}
.rpa-plates-rail__ghost {
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  letter-spacing: 0.14em;
  color: var(--_muted);
}

@media (min-width: 1024px) {
  /* The plate's picture follows the HEIGHT of the screen (it is what fills a pinned screen), held
     in check by the width: 58% of the viewport height, between 22 and 44rem tall, never wider than
     30vw. The plate grows with it so the text column keeps its measure. */
  .rpa-plates-rail {
    --_media-h: clamp(22rem, 58vh, 44rem);
    --_media-w: min(calc(var(--_media-h) * 0.8), 30vw);
  }
  .rpa-plates-rail__plate { width: min(78vw, calc(var(--_media-w) + 40rem)); padding-block-start: 2rem; }
  .rpa-plates-rail__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--_media-w);
    gap: clamp(2rem, 4vw, 5rem);
    align-items: stretch;
  }
  .rpa-plates-rail__index { margin-block-end: clamp(2rem, 6vh, 5rem); }
}

/* ---- jump links + hint */
.rpa-plates-rail__jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-inline: var(--_inset);
  margin-block-start: 0.75rem;
}
.rpa-plates-rail__jump-list {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The numbers carry their OWN class: a classless <a> inside an <li> is running text to the theme
   (links.css `main li a:not([class])` — indigo, underlined) and these are controls, not prose.
   Doubled root class = (0,2,0): also clear of Elementor's `.elementor a` whatever loads last.
   Rest: ruled box · hover/focus: tinted box, heavier rule · current: filled. */
.rpa-plates-rail .rpa-plates-rail__jump-link {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: 0.6rem;
  border: 1px solid var(--_rule-strong);
  border-radius: var(--rpa-radius);
  background: none;
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--rpa-c-text, var(--rpa-ink));
  text-decoration: none;
  transition: background-color var(--rpa-dur-1) var(--rpa-ease), border-color var(--rpa-dur-1) var(--rpa-ease), color var(--rpa-dur-1) var(--rpa-ease);
}
.rpa-plates-rail .rpa-plates-rail__jump-link:visited { color: var(--rpa-c-text, var(--rpa-ink)); }
.rpa-plates-rail .rpa-plates-rail__jump-link:hover,
.rpa-plates-rail .rpa-plates-rail__jump-link:focus-visible {
  border-color: var(--rpa-c-text, var(--rpa-ink));
  background-color: color-mix(in srgb, var(--rpa-c-text, var(--rpa-ink)) 10%, transparent);
  color: var(--rpa-c-text, var(--rpa-ink));
  text-decoration: none;
}
.rpa-plates-rail .rpa-plates-rail__jump-link[aria-current="true"] {
  border-color: var(--rpa-c-text, var(--rpa-ink));
  background-color: var(--rpa-c-text, var(--rpa-ink));
  color: var(--rpa-c-surface, var(--rpa-paper));
}
.rpa-plates-rail__hint { margin: 0; }
/* Touch screens read "Swipe", not "Scroll or drag". */
.rpa-plates-rail .rpa-hint-touch { display: none; }
@media (pointer: coarse) {
  .rpa-plates-rail .rpa-has-touch-hint .rpa-hint-fine { display: none; }
  .rpa-plates-rail .rpa-has-touch-hint .rpa-hint-touch { display: inline; }
}

/* A small label that only shows while the rail is actually STUCK: by then the section heading has
   scrolled away, and a held screen should still say what it shows. During the approach the
   heading is still on screen, so the label must not be (it read "Our services" twice).

   No script needed: the label keeps its place at the top of the pinned block, and the root clips
   exactly that strip. At rest the block sits at the root's top edge, so the label is inside the
   clipped strip; once position: sticky holds the block, it travels down inside the (tall) root,
   out of the strip, and the label wipes in over its own height of scrolling. It leaves the same
   way in reverse. Nothing moves: the space is reserved in both states. */
.rpa-plates-rail__pin-label { display: none; }
.rpa-plates-rail.is-pinned .rpa-plates-rail__pin-label {
  --_pin-label-h: calc(var(--rpa-step--1) * 1.4 + 1rem);
  display: block;
  box-sizing: border-box;
  height: var(--_pin-label-h);
  overflow: hidden;
  margin: 0;
  padding-inline: var(--_inset);
  padding-block-end: 1rem;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--_muted);
}
.rpa-plates-rail.is-pinned:has(.rpa-plates-rail__pin-label) {
  /* top strip only; generous on the other three sides so focus rings and the bleed are untouched */
  clip-path: inset(calc(var(--rpa-step--1) * 1.4 + 1rem) -100vw -4rem -100vw);
}

/* Motion lane pins the rail and drives the track itself. */
.rpa-plates-rail.is-pinned .rpa-plates-rail__viewport {
  overflow: visible;
  scroll-snap-type: none;
  padding-block-end: 0;
}
.rpa-plates-rail.is-pinned .rpa-plates-rail__jump { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .rpa-plates-rail__viewport { scroll-behavior: smooth; }
}