/* ==========================================================================
   Section: Customer story carousel (#stories)
   A scroll-snap rail of four merchant stories. Each card pairs a large
   pull-quote with a CSS/SVG "portrait tile" — an abstract mark for the craft,
   not a photo placeholder. Prev / next / dot bar drives the same native
   scroller that a thumb already swipes.
   Every selector is scoped under .s-stories.
   ========================================================================== */

.s-stories {
  --peek: 0px;                       /* how much of the next card shows */
  --slide-gap: var(--grid-gap);
  --card-radius: var(--radius-xl);
  --tile-a: var(--brand);
  --tile-b: var(--accent);
  overflow: clip;                    /* orbs stay inside the band */
}

/* ---- Decorative light ---------------------------------------------------- */

.s-stories__orb {
  --orb-size: 34rem;
  --orb-opacity: 0.24;
  --orb-blur: 76px;
}

.s-stories__orb--a {
  inset-block-start: -12rem;
  inset-inline-start: -14rem;
}

.s-stories__orb--b {
  --orb-size: 28rem;
  --orb-opacity: 0.18;
  inset-block-end: -10rem;
  inset-inline-end: -12rem;
}

/* ---- Head ---------------------------------------------------------------- */

.s-stories__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 46rem;
  margin-block-end: var(--space-9);
}

.s-stories__title {
  font-size: var(--step-6);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.s-stories__lede { max-width: var(--measure); }

/* ---- Viewport / rail ------------------------------------------------------ */
/* The scroller bleeds out to both screen edges, then pads itself back so
   slide 1 still lines up with the headline above it. At mobile widths the
   bleed resolves to exactly one gutter. */

.s-stories__viewport {
  /* An absolute length, not calc(50vw - 50%): scroll-padding resolves
     percentages against the scrollport, so the snap line would drift. */
  --bleed: max(var(--gutter), calc((100vw - var(--container)) / 2));
  margin-inline: calc(var(--bleed) * -1);
  padding-inline: var(--bleed);
  padding-block: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--bleed);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.s-stories__viewport::-webkit-scrollbar { display: none; }

.s-stories__viewport:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
  border-radius: var(--card-radius);
}

.s-stories__track {
  display: flex;
  align-items: stretch;
  gap: var(--slide-gap);
}

/* Trailing slack so the last card can still snap to the start line. The bleed
   is in there because Chrome leaves a scroll container's end padding out of
   scrollWidth; extra slack is harmless under mandatory snapping. */
.s-stories__track::after {
  content: "";
  flex: 0 0 calc(var(--peek) + var(--bleed));
}

.s-stories__slide {
  flex: 0 0 calc(100% - var(--peek));
  display: flex;
  scroll-snap-align: start;
  /* deliberately no scroll-snap-stop: Chrome halts a programmatic smooth
     scroll at the first "always" stop, which kills the prev/next buttons */
}

/* Only dim neighbours once JS is actually driving the rail. */
.s-stories__carousel.is-ready .s-stories__slide {
  opacity: 0.5;
  transition: opacity var(--dur-4) var(--ease-out-quart);
}

.s-stories__carousel.is-ready .s-stories__slide.is-active { opacity: 1; }

/* ---- Card ---------------------------------------------------------------- */

.s-stories__card {
  display: grid;
  gap: var(--space-6);
  width: 100%;
  padding: var(--space-5);
  border-radius: var(--card-radius);
  background-color: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md);
}

.s-stories__card > * { max-width: none; }

/* ---- Portrait substitute -------------------------------------------------- */

.s-stories__art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: clip;
  border-radius: var(--radius-lg);
  background-image:
    radial-gradient(120% 92% at 16% 10%, color-mix(in oklab, var(--tile-a) 30%, transparent), transparent 62%),
    radial-gradient(110% 100% at 88% 94%, color-mix(in oklab, var(--tile-b) 26%, transparent), transparent 60%),
    linear-gradient(158deg,
      color-mix(in oklab, var(--surface-sunken) 88%, var(--tile-a)),
      var(--surface-sunken));
  box-shadow: inset 0 0 0 1px var(--border);
}

/* Slow glaze sweep behind the mark. */
.s-stories__wash {
  position: absolute;
  inset: -25%;
  background-image: conic-gradient(from 200deg,
    transparent 0deg,
    color-mix(in oklab, var(--tile-b) 42%, transparent) 66deg,
    transparent 148deg,
    color-mix(in oklab, var(--tile-a) 38%, transparent) 250deg,
    transparent 336deg);
  opacity: 0.45;
  filter: blur(22px);
  pointer-events: none;
}

.s-stories__tile {
  position: relative;
  width: 64%;
  max-width: 14rem;
  aspect-ratio: 1;
  color: color-mix(in oklab, var(--tile-a) 74%, var(--ink));
}

/* Per-story palette — tokens only. */
.s-stories__slide:nth-child(1) { --tile-a: var(--brand);      --tile-b: var(--accent); }
.s-stories__slide:nth-child(2) { --tile-a: var(--accent);     --tile-b: var(--brand); }
.s-stories__slide:nth-child(3) { --tile-a: var(--accent-alt); --tile-b: var(--brand-soft); }
.s-stories__slide:nth-child(4) { --tile-a: var(--brand-soft); --tile-b: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .s-stories__wash { animation: kw-stories-wash 34s linear infinite; }
}

@keyframes kw-stories-wash {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

/* ---- Quote ---------------------------------------------------------------- */

.s-stories__quote {
  align-self: start;
  margin: 0;
}

.s-stories__quote p {
  max-width: 22ch;
  color: var(--ink);
  font-size: var(--step-4);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: pretty;
}

/* ---- Attribution ---------------------------------------------------------- */

.s-stories__by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-7);
  padding-block-start: var(--space-5);
  box-shadow: inset 0 1px 0 0 var(--border);
}

.s-stories__who {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.s-stories__avatar {
  --avatar-size: 3.25rem;
  background-image: linear-gradient(148deg,
    color-mix(in oklab, var(--tile-a) 40%, var(--surface-sunken)),
    color-mix(in oklab, var(--tile-b) 32%, var(--surface-sunken)));
}

.s-stories__ident {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.s-stories__name {
  font-size: var(--step-1);
  font-weight: var(--weight-semi);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

.s-stories__biz {
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
}

.s-stories__metric .stat__value {
  font-size: var(--step-4);
  color: var(--brand);
}

.s-stories__metric .stat__label { max-width: 20ch; }

.s-stories__note {
  flex: 1 0 100%;
  color: var(--ink-muted);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ---- Control bar ---------------------------------------------------------- */

.s-stories__bar {
  display: none;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-7);
}

.s-stories__carousel.is-ready .s-stories__bar { display: flex; }

.s-stories__dots {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-end: auto;
}

.s-stories__dot {
  display: grid;
  place-items: center;
  width: var(--space-9);
  height: 2.75rem;
  border-radius: var(--radius-pill);
}

.s-stories__dot::after {
  content: "";
  width: 55%;
  height: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--ink-subtle);
  transition:
    width var(--dur-3) var(--ease-out-expo),
    height var(--dur-2) var(--ease-standard),
    background-color var(--dur-2) var(--ease-standard);
}

.s-stories__dot:hover::after { background-color: var(--ink-muted); }
.s-stories__dot:active::after { background-color: var(--ink); }

.s-stories__dot[aria-current="true"]::after {
  width: 100%;
  height: 5px;
  background-color: var(--brand);
}

.s-stories__count {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
}

.s-stories__nav svg { width: 0.9em; height: 0.9em; }

/* ==== Breakpoints ========================================================== */

/* 768 — the card goes two-up and the next card starts to peek. */
@media (width >= 48rem) {
  .s-stories {
    --peek: var(--space-10);
  }

  .s-stories__head { margin-block-end: var(--space-10); }

  .s-stories__card {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: 1fr auto;
    gap: var(--space-7);
    padding: var(--space-6);
  }

  .s-stories__art {
    grid-row: 1 / span 2;
    aspect-ratio: auto;
    min-height: 17rem;
  }

  .s-stories__quote p { font-size: var(--step-5); }

  .s-stories__metric {
    margin-inline-start: auto;
    text-align: end;
  }

  .s-stories__metric .stat__value { justify-content: flex-end; }
  .s-stories__metric .stat__label { margin-inline-start: auto; }
}

/* 1024 — roomier padding, wider peek, quote at full display weight. */
@media (width >= 64rem) {
  .s-stories {
    --peek: var(--space-11);
  }

  .s-stories__card {
    gap: var(--space-9);
    padding: var(--space-7);
  }

  .s-stories__art { min-height: 21rem; }

  .s-stories__quote p {
    max-width: 20ch;
    font-size: var(--step-6);
    letter-spacing: var(--tracking-tighter);
  }
}

/* 1440 — the rail stops growing; give the art more of the card. */
@media (width >= 90rem) {
  .s-stories__card {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    padding: var(--space-8);
  }

  .s-stories__art { min-height: 24rem; }
  .s-stories__tile { max-width: 17rem; }
}

/* ---- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .s-stories__wash { animation: none; }

  .s-stories__carousel.is-ready .s-stories__slide {
    opacity: 1;
    transition: none;
  }

  .s-stories__dot::after { transition: none; }
}