/* ============ COMPONENT: practice rail (services rotator) ===========
   Four photo cards visible at once (image-slot drops) under a compact
   centred label band; navigated by big pulsing arrows that sit in the
   empty page margins on either side. Verdict language: white paper,
   ink labels, a single red tick, mono counter. Auto-rotates every 5s.
   Uses: --color-*, --sp-*, --hairline, --font-*, --shadow-*
   JS: jmw-services-rail.js (arrows, counter, keyboard, auto-rotate)
   ================================================================== */

.svc-gallery { background: var(--color-paper); overflow: hidden; }
.svc-gallery .section-head { margin-bottom: var(--sp-5); align-items: flex-end; }

/* ---------- the rail ---------- */
.svc-rail {
  display: flex; gap: var(--sp-3);
  margin: 0 var(--svc-margin);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 0 var(--sp-4);
  scrollbar-width: none; outline: none;
}
.svc-rail::-webkit-scrollbar { display: none; }
.svc-rail:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }

/* ---------- exactly four cards across the content area (like the live site) ---------- */
.svc-slide {
  position: relative; margin: 0;
  flex: 0 0 calc((100% - 3 * var(--sp-3)) / 4);
  scroll-snap-align: start;
  display: block; text-decoration: none; color: inherit;
}
.svc-frame {
  position: relative; overflow: hidden; border-radius: 9px;
  border: var(--hairline) solid color-mix(in srgb, var(--color-ink) 14%, transparent);
  background: var(--color-paper-deep);
  box-shadow: var(--shadow-1, 0 6px 18px rgba(20,16,12,0.10));
  transition: transform var(--motion-dur, 0.4s) var(--ease-out, ease), box-shadow var(--motion-dur, 0.4s) var(--ease-out, ease);
}
.svc-frame image-slot { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; }

/* dark label band — small, pinned to the very bottom so it never covers the face */
.svc-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 14px 13px; text-align: center;
  background: linear-gradient(to top, rgba(12,9,7,0.95) 0%, rgba(12,9,7,0.74) 52%, rgba(12,9,7,0) 100%);
  color: #FFFFFF;
}
.svc-label::before {
  content: ""; width: 22px; height: var(--rule-strong, 3px); flex: none;
  background: var(--color-primary);
}
.svc-label b {
  font-family: var(--font-body, "Archivo", sans-serif); font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1.25;
}

/* ---------- big obvious arrows sitting in the empty page margins (never over a card) ---------- */
.svc-railwrap { position: relative; --svc-margin: clamp(74px, 8vw, 140px); }
.svc-arrow {
  position: absolute; top: 46%; transform: translateY(-50%); z-index: 5;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: none; color: #FFFFFF; background: var(--color-ink);
  box-shadow: 0 10px 26px rgba(20,14,10,0.32);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.svc-arrow svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.svc-arrow::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.svc-arrow:hover { background: var(--color-primary); transform: translateY(-50%) scale(1.08); box-shadow: var(--shadow-crimson, 0 14px 40px rgba(155,15,29,0.32)); }
.svc-arrow:active { transform: translateY(-50%) scale(0.95); }
.svc-arrow:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.svc-prev.svc-arrow { left: calc((var(--svc-margin) - 60px) / 2); }
.svc-next.svc-arrow { right: calc((var(--svc-margin) - 60px) / 2); }

@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .svc-arrow::after { animation: svc-pulse 2.2s cubic-bezier(.4,0,.2,1) infinite; }
  html:not(.motion-off) .svc-next.svc-arrow::after { animation-delay: 1.1s; }
  html:not(.motion-off) .svc-arrow:hover::after { animation: none; }
}
@keyframes svc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.5); }
  70%  { box-shadow: 0 0 0 18px rgba(var(--color-primary-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0); }
}

/* tiny category eyebrow above the card */
.svc-cat {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--color-muted);
  margin: 12px 2px 0; display: flex; justify-content: space-between;
}
.svc-cat .arr { color: var(--color-primary); opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.2s; }

/* hover / focus: lift the card, reveal the arrow */
.svc-slide:hover .svc-frame,
.svc-slide:focus-visible .svc-frame { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.svc-slide:hover .svc-cat .arr,
.svc-slide:focus-visible .svc-cat .arr { opacity: 1; transform: translateX(0); }
.svc-slide:focus-visible { outline: none; }
.svc-slide:focus-visible .svc-frame { outline: 2px solid var(--color-primary); outline-offset: 3px; }

@media (max-width: 1024px) {
  .svc-railwrap { --svc-margin: clamp(72px, 7vw, 104px); }
}

@media (max-width: 720px) {
  .svc-gallery .section-head { align-items: flex-start; }
  .svc-rail { margin: 0 14px; }
  .svc-slide { flex-basis: 76vw; }
  .svc-arrow { width: 48px; height: 48px; }
  .svc-arrow svg { width: 20px; height: 20px; }
  .svc-prev.svc-arrow { left: 2px; }
  .svc-next.svc-arrow { right: 2px; }
}