/* ==========================================================================
   Korjin — <korjin-stories> shoppable customer-video rail
   ========================================================================== */

.stories {
  background: var(--ground-sunken);
}

.stories__head {
  max-width: 620px;
  margin-bottom: var(--sp-7);
}

.stories__head .title-xl {
  margin-block: var(--sp-3) var(--sp-4);
}

/* ---- the rail (filled state) --------------------------------------------- */

.stories__rail {
  list-style: none;
  padding: 0 0 var(--sp-3);
  margin: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.story {
  scroll-snap-align: start;
}

.story__tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--band-dark);
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.story__tile:hover,
.story__tile:focus-visible {
  border-color: var(--accent-surface);
}

.story__tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sample watermark — non-negotiable while the tiles are placeholders. */
.story__sample {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: 0.3125rem 0.625rem;
  background: var(--korjin-black);
  color: var(--gold-line);
  font-size: var(--label-xs);
  letter-spacing: 0.2em;
}

.story__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.story__play::before {
  content: "▶";
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding-left: 3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--korjin-black) 55%, transparent);
  color: var(--korjin-cream);
  font-size: 0.75rem;
  transition: transform var(--dur-fast) var(--ease-out);
}

.story__tile:hover .story__play::before {
  transform: scale(1.08);
}

.story__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  text-align: left;
  color: var(--korjin-cream);
  background: linear-gradient(to top, rgb(0 0 0 / 72%), transparent);
}

.story__day {
  font-size: var(--label-xs);
  color: var(--gold-line);
}

.story__tag {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--label-xs);
  color: var(--ink-muted);
}

.story__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-surface);
  flex: none;
}

.stories__note {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  max-width: 60ch;
}

/* ---- the invitation (launch state) --------------------------------------- */

.stories__invite {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}

.stories__promise {
  font-family: var(--font-display);
  font-size: var(--step-2);
  margin-bottom: var(--sp-5);
}

.stories__promises {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 54ch;
}

.stories__promises li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: 1.6;
}

.stories__invite-cta {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}

/* The 30-day course — what the first films will follow.
   This column used to be four dashed "Reserved" slots. They were honest, but
   they read as an unfinished section rather than as deliberate anticipation,
   which worked against the invitation the copy beside them is making. Real
   packaging photography says the same thing without a placeholder: the
   product exists, the stories don't yet. */
.stories__course {
  align-self: center;
  min-width: 0;
}

.stories__course-head {
  margin-bottom: var(--sp-5);
}

.stories__phases {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* minmax(0, …), not 1fr: a plain 1fr track floors at its column's
     min-content, which lets a long word push the whole grid — and the invite
     column containing it — past the viewport on a phone. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  min-width: 0;
}

.phase-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-1);
  min-width: 0;
}

/* Typographic variant — the course arc no longer has three distinct boxes to
   photograph, so the numeral carries the rhythm the packshot used to. */
.phase-card--type {
  gap: var(--sp-2);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.phase-card__numeral {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--gold-line);
}

.phase-card__box {
  width: 100%;
  height: auto;
  margin-bottom: var(--sp-3);
}

.phase-card__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--leading-snug);
}

.phase-card__days {
  font-size: var(--label-xs);
  color: var(--ink-faint);
}

/* ---- demo toggle (prototype-only, matches the PDP's) --------------------- */

.stories__demo {
  display: block;
  margin: var(--sp-7) auto 0;
  color: var(--ink-faint);
  font-size: var(--label-xs);
  border: 1px dashed var(--rule-strong);
  padding: var(--sp-2) var(--sp-3);
}

.stories__demo:hover {
  color: var(--ink-muted);
}

/* ---- fullscreen player --------------------------------------------------- */

.stories__player {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
}

.stories__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

korjin-stories.is-playing .stories__scrim {
  opacity: 1;
}

.stories__stage {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(940px, 92vw);
  height: min(620px, 86vh);
  display: grid;
  grid-template-columns: auto 320px;
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

korjin-stories.is-playing .stories__stage {
  opacity: 1;
  transform: none;
}

.stories__x {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1;
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  color: var(--ink);
}

.stories__x:hover {
  background: var(--ground-sunken);
}

.stories__video {
  position: relative;
  background: var(--band-dark);
  overflow: hidden;
}

.stories__video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stories__sample-lg {
  top: var(--sp-4);
  left: var(--sp-4);
}

.stories__buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border-left: 1px solid var(--rule);
  overflow-y: auto;
}

.stories__buy img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  background: var(--ground-sunken);
  padding: 5px;
}

.stories__price {
  font-family: var(--font-display);
  font-size: var(--step-3);
}

.stories__buy .btn--primary {
  width: 100%;
  margin-top: var(--sp-2);
}

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 860px) {
  .stories__invite {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }

  .stories__rail {
    grid-auto-columns: minmax(180px, 78vw);
  }

  /* A phone leaves ~96px per phase card at the default gap, and "Days 11–20"
     at 0.24em tracking needs ~102 — it wrapped to two lines under two of the
     three cards. Buying the width back from the gutter keeps the brand's
     label tracking intact, which overriding letter-spacing here would not. */
  @media (max-width: 560px) {
    .stories__phases {
      gap: var(--sp-2);
    }
  }

  .stories__stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    height: min(88vh, 760px);
  }

  .stories__buy {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding: var(--sp-5);
  }

  .stories__buy img {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stories__scrim,
  .stories__stage,
  .story__play::before {
    transition: none;
  }
}