/* Adapted from React Bits "ScrollStack" – https://reactbits.dev – Copyright (c) 2026 David Haz.
   MIT + Commons Clause (see react-bits/LICENSE.md). Ported to vanilla JS for Amergin Commerce; not for redistribution as a component. */

/* Scroll stack: process steps as cards that pin and stack while the page scrolls.
   Without the --active class (no JS, narrow screens, reduced motion) it is an ordinary list of cards.
   Theme it by setting any of these on the component or an ancestor; each falls back to the
   Amergin site token, then to the brand value:
     --rb-scroll-stack-surface   card background            (#ffffff)
     --rb-scroll-stack-ink       titles                     (--petrol #102a33)
     --rb-scroll-stack-muted     body text, "/ 04"          (--stone #56656b)
     --rb-scroll-stack-accent    step number, focus ring    (--copper #894b1f)
     --rb-scroll-stack-line      hairline border            (--line #d2dada)
     --rb-scroll-stack-veil      tint on cards further back (--petrol #102a33)
     --rb-scroll-stack-radius    corner radius              (4px)
     --rb-scroll-stack-shadow    card shadow                (very soft)
     --rb-scroll-stack-gap       gap between cards in the plain list
     --rb-scroll-stack-font      font family                (inherit)
   The --rb-scroll-stack-pin-* and -count / -i properties are written by scroll-stack.js. */

.rb-scroll-stack {
  position: relative;
  font-family: var(--rb-scroll-stack-font, inherit);
  color: var(--rb-scroll-stack-ink, var(--petrol, #102a33));
}

.rb-scroll-stack__list {
  display: flex;
  flex-direction: column;
  gap: var(--rb-scroll-stack-gap, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rb-scroll-stack__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  overflow: hidden;
  background: var(--rb-scroll-stack-surface, var(--white, #ffffff));
  border: 1px solid var(--rb-scroll-stack-line, var(--line, #d2dada));
  border-radius: var(--rb-scroll-stack-radius, 4px);
  box-shadow: var(--rb-scroll-stack-shadow, 0 1px 2px rgba(16, 42, 51, 0.04), 0 -6px 18px -14px rgba(16, 42, 51, 0.18));
}

.rb-scroll-stack__media {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--rb-scroll-stack-line, var(--line, #d2dada));
}
.rb-scroll-stack__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.rb-scroll-stack__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  padding: 24px 24px 28px;
}

.rb-scroll-stack__index {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin: 0 0 4px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rb-scroll-stack__num {
  font-size: 2.75rem;
  font-weight: 300;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--rb-scroll-stack-accent, var(--copper, #894b1f));
}
.rb-scroll-stack__total {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--rb-scroll-stack-muted, var(--stone, #56656b));
}

.rb-scroll-stack__title {
  margin: 0;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 2.4rem);
  font-weight: 620;
  font-stretch: 112%;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--rb-scroll-stack-ink, var(--petrol, #102a33));
}
.rb-scroll-stack__text {
  margin: 0;
  max-width: 32rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--rb-scroll-stack-muted, var(--stone, #56656b));
}

/* Anything interactive a card may hold keeps a visible focus ring */
.rb-scroll-stack__card a:focus-visible,
.rb-scroll-stack__card button:focus-visible {
  outline: 2px solid var(--rb-scroll-stack-accent, var(--copper, #894b1f));
  outline-offset: 3px;
}

/* Created by the script: the tint that pushes covered cards back */
.rb-scroll-stack__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--rb-scroll-stack-veil, var(--petrol, #102a33));
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* ---------- Two columns: photo on one side, number, title and text on the other ---------- */
@media (min-width: 900px) {
  .rb-scroll-stack__list { gap: var(--rb-scroll-stack-gap, 24px); }
  .rb-scroll-stack__card {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: clamp(20rem, 32vw, 26rem);
  }
  .rb-scroll-stack__media { aspect-ratio: auto; }
  .rb-scroll-stack__body {
    grid-template-rows: 1fr auto auto;
    align-content: stretch;
    gap: 16px;
    padding: clamp(32px, 3.6vw, 56px);
  }
  .rb-scroll-stack__index { align-self: start; margin: 0; }
  .rb-scroll-stack__num { font-size: clamp(3.5rem, 1.6rem + 3.4vw, 6rem); }
  .rb-scroll-stack__total { font-size: 1rem; }
}

/* ---------- Pinned stack (the script adds --active only on wide screens without reduced motion) ---------- */
.rb-scroll-stack--active .rb-scroll-stack__list {
  gap: var(--rb-scroll-stack-pin-gap, 96px);
}
/* Room the finished stack stays pinned before it scrolls away (inside the list, so sticky honours it) */
.rb-scroll-stack--active .rb-scroll-stack__list::after {
  content: "";
  display: block;
  flex: none;
  height: var(--rb-scroll-stack-pin-hold, 0px);
}
.rb-scroll-stack--active .rb-scroll-stack__card {
  position: sticky;
  top: calc(var(--rb-scroll-stack-pin-top, 112px) + var(--rb-scroll-stack-i, 0) * var(--rb-scroll-stack-pin-offset, 20px));
  flex: none;
  /* Every card fits the screen below its pin line, with the stacked edges above it */
  height: min(
    var(--rb-scroll-stack-card-max, 36rem),
    calc(100vh - var(--rb-scroll-stack-pin-top, 112px) - (var(--rb-scroll-stack-count, 4) - 1) * var(--rb-scroll-stack-pin-offset, 20px) - 32px)
  );
  min-height: 0;
  transform-origin: 50% 0;
  will-change: transform;
  backface-visibility: hidden;
}

@media print {
  .rb-scroll-stack--active .rb-scroll-stack__card { position: relative; top: auto; height: auto; margin-bottom: 0 !important; transform: none !important; filter: none !important; }
  .rb-scroll-stack--active .rb-scroll-stack__list::after { display: none; }
  .rb-scroll-stack__veil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-scroll-stack--active .rb-scroll-stack__card { position: relative; top: auto; transform: none !important; filter: none !important; }
  .rb-scroll-stack__veil { display: none; }
}