/* =============================================
   WHY US PAGE (why-us.php) — "Miért mi?"
   Reference: .work/stories.mp4
   Full-height stage over a looping video layer.
   Infinite carousel: three cards visible at a time — left ·
   CENTER · right — however many stories are published. Two far
   slots (far-left / far-right) sit beyond the stage edges at
   opacity 0, so a step reads as a conveyor belt: every card
   slides one slot in the same direction, the exiting card fades
   out offscreen and the entering one fades in from the opposite
   edge (assets/js/why-us-carousel.js). Any card past the third
   waits in .is-pos-offstage until its turn comes.
   Only the centered card carries the full story — it types in
   word by word; the side cards show the authored excerpt.

   Card sizes are FIXED here, in CSS. They used to be measured per
   story in JS (and the stage grown to the longest one) so that no
   card ever had to scroll; the result was a panel that changed
   size with every step and, on the longest story, a stage taller
   than the viewport. A story that outruns its box now scrolls
   inside it instead.
   ============================================= */

/* The band above the stage is this padding: it separates the video block
   from the banner over it. Blush — the sand tone of the newsletter band at
   the foot of the page. No band below: the stage runs straight on. */
.stories-page {
  background-color: var(--color-parchment);
  padding-top: clamp(20px, 3.5vh, 44px);
}

/* The stage runs straight into the newsletter panel — the white band
   above is already the separation. */
.stories-page + .newsletter-section {
  padding-top: 0;
}

/* ---- Stage ---- */
.stories-stage {
  position: relative;
  /* The second term keeps the stage at least as tall as the 16:9 clip is at
     this width (media layer bleeds 64px each side), so cover always crops
     the SIDES and the top and bottom of the frame stay whole. */
  min-height: max(clamp(560px, 82vh, 800px), calc((100vw + 128px) * 9 / 16 - 128px));
  overflow: hidden;
  /* shown only until the first video frame paints */
  background-color: var(--color-bark);
  /* distance from stage center to a side card's center — wide enough that
     the grown center card never touches the flanking previews */
  --stories-shift: min(36vw, 500px);
}

/* Background video — cover-fits the stage, no bare canvas anywhere.
   The clip carries ~50–60px of dead margin on every edge, so the layer
   bleeds past the stage by that much and the stage's overflow clips it. */
.stories-stage__media {
  position: absolute;
  inset: -64px;
  z-index: 0;
}

/* Anchored to the top: the stage is far taller than the clip's own ratio,
   so cover has to crop somewhere. Cropping the sides is fine, cutting the
   top of the frame is not — that is where the clip's subject sits. */
.stories-stage__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ---- Carousel ---- */
.stories-carousel {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Base card = the muted clay SIDE skin (sampled #d7c2b3); the center
   slot overrides it. All cards share one anchor point, so the slot
   classes only change transform/width/skin and every move animates.

   Both axes are explicit lengths on purpose, and nothing overrides them:
   the card widens over 1.4s while the full story is already in the DOM, so
   with an auto height the box would shoot up (long text in a still-narrow
   card) and collapse as the width caught up. Every centre card is the same
   size whatever it holds; a story taller than the box scrolls inside it. */
.stories-card {
  position: absolute;
  left: 50%;
  bottom: clamp(40px, 7vh, 72px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(24vw, 300px);
  height: clamp(210px, 28vh, 270px);
  padding: clamp(24px, 2.6vw, 38px);
  background-color: color-mix(in oklch, var(--color-clay) 45%, var(--color-parchment));
  border: 1px solid transparent;
  cursor: pointer;
  opacity: 1;
  transform: translateX(-50%);
  transition:
    transform 1.4s var(--ease-spring),
    width 1.4s var(--ease-spring),
    height 1.4s var(--ease-spring),
    background-color 1.4s var(--ease-spring),
    border-color 1.4s var(--ease-spring),
    opacity 1.4s var(--ease-spring);
}

/* ---- Slots ---- */
.stories-card.is-pos-left {
  transform: translateX(calc(-50% - var(--stories-shift)));
}

.stories-card.is-pos-right {
  transform: translateX(calc(-50% + var(--stories-shift)));
}

/* Narrower and shorter than it was (46vw / 62vh): the panel was covering
   most of the clip behind it, and the page needs the video to stay the
   subject. Translucent for the same reason — the backdrop blur is what
   keeps the copy legible over whatever frame is playing under it. */
.stories-card.is-pos-center {
  z-index: 3;
  width: min(38vw, 520px);
  height: min(52vh, 460px);
  background-color: color-mix(in oklch, var(--color-white) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-color: color-mix(in oklch, var(--color-caramel) 50%, transparent);
  cursor: default;
  transform: translateX(-50%);
}

/* Pointing at a side card is enough to bring it in (why-us-carousel.js
   rotates on hover intent); this is the feedback that says so before the
   move starts. Hover only — on touch the swipe and tap still drive it. */
@media (hover: hover) and (pointer: fine) {
  .stories-card.is-pos-left:hover,
  .stories-card.is-pos-right:hover {
    background-color: color-mix(in oklch, var(--color-clay) 28%, var(--color-parchment));
    border-color: color-mix(in oklch, var(--color-caramel) 50%, transparent);
  }
  .stories-card.is-pos-left:hover {
    transform: translateX(calc(-50% - var(--stories-shift) * 0.92)) scale(1.05);
  }
  .stories-card.is-pos-right:hover {
    transform: translateX(calc(-50% + var(--stories-shift) * 0.92)) scale(1.05);
  }
}

/* Offscreen entry/exit slots — invisible extensions of the belt */
.stories-card.is-pos-far-left,
.stories-card.is-pos-far-right {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

/* The queue: every card beyond the visible three waits here, parked on the
   right-hand far slot with no transition, so it can be teleported onto the
   belt the moment its turn comes without a stray slide across the stage. */
.stories-card.is-pos-offstage {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: none;
  transform: translateX(calc(-50% + var(--stories-shift) * 1.55));
}

.stories-card.is-pos-far-left {
  transform: translateX(calc(-50% - var(--stories-shift) * 1.55));
}

.stories-card.is-pos-far-right {
  transform: translateX(calc(-50% + var(--stories-shift) * 1.55));
}

/* During the silent clone→real swap after a step (why-us-carousel.js) */
.stories-card.is-teleport {
  transition: none;
}

/* ---- Card content (side skin by default, center overrides) ---- */
.stories-card__quote {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* The centre card is a fixed box, so a long story scrolls here rather than
   growing the panel. Side cards keep overflow: hidden — their excerpt is
   a teaser, not something to read in place. */
.stories-card.is-pos-center .stories-card__quote {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--color-clay) 60%, transparent) transparent;
  padding-right: 10px;
  margin-right: -10px;
}

.stories-card__text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: 1.7;
  color: color-mix(in oklch, var(--color-terracotta) 80%, var(--color-charcoal));
  text-align: justify;
  hyphens: manual;
  margin: 0;
  transition: font-size 1.4s var(--ease-spring), color 1.4s var(--ease-spring);
}

.stories-card__attribution {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: clamp(16px, 2.4vh, 26px);
}

.stories-card__rule {
  display: block;
  width: 2rem;
  height: 1px;
  background-color: color-mix(in oklch, var(--color-terracotta) 55%, transparent);
}

.stories-card__name {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  opacity: 0.65;
}

.stories-card.is-pos-center .stories-card__text {
  font-size: var(--fs-body-sm);
  line-height: 1.8;
  color: var(--color-charcoal);
}

.stories-card.is-pos-center .stories-card__attribution {
  display: flex;
}

/* ---- Mobile / touch: center card leads, sides peek at the edges ----
   Deliberately smaller than a phone-sized version of the desktop panel:
   at 76vw x 56vh the card covered the whole clip and the screen read as
   a wall of text. The tighter line-height is the same brief — it buys
   back lines inside a box that now has fewer of them. */
@media (max-width: 880px) {
  .stories-stage {
    min-height: clamp(440px, 72vh, 600px);
    --stories-shift: 74vw;
  }

  .stories-card {
    width: 60vw;
    height: clamp(150px, 19vh, 200px);
    bottom: clamp(32px, 6vh, 56px);
  }

  .stories-card.is-pos-center {
    width: min(68vw, 360px);
    height: min(42vh, 340px);
  }

  .stories-card__text,
  .stories-card.is-pos-center .stories-card__text {
    line-height: 1.5;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .stories-card,
  .stories-card__text {
    transition: none;
  }
}