/* ============================================================
   Story layout shared by service detail pages (Dr.Alaseo, Dr.Arrange).
   Each page mirrors its promo film: the problem patients/staff feel →
   what the product replaces → feature scenes → payoff → the film.
   Builds on detail.css.
   ============================================================ */
.story-hero .detail-hero-grid { grid-template-columns: minmax(0, 430px) minmax(0, 560px); }
.story-hero h1 em { color: var(--ds-blue); font-style: normal; }
/* Keep the highlighted phrase on one line where the column can hold it. */
@media (min-width: 641px) { .story-hero h1 em { white-space: nowrap; } }
.story-hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 40px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--ds-line);
  list-style: none;
}
.story-hero-facts b { display: block; color: var(--ds-ink); font-size: var(--detail-body-1); line-height: var(--detail-line-body-1); font-weight: var(--type-weight-bold); }
.story-hero-facts span { display: block; margin-top: 2px; color: var(--ds-muted); font-size: var(--detail-label); line-height: var(--detail-line-label); }

.story-browser {
  overflow: hidden;
  border: 1px solid #e3e8ee;
  border-radius: 18px;
  background: var(--ds-white);
  box-shadow: var(--ds-shadow-card);
}
.story-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid #edf0f3;
  background: var(--ds-surface-soft);
}
.story-browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d5dae0; }
.story-browser__bar span { margin-left: 10px; color: var(--ds-muted); font-size: 12px; line-height: 18px; }
.story-browser img { width: 100%; height: auto; }
.story-caption { margin-top: 12px; color: var(--ds-muted); font-size: var(--detail-caption); line-height: var(--detail-line-caption); }

/* The question patients ask */
.story-problem { padding: var(--detail-section-space) 0; }
.story-problem-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 56px;
}
.story-photo { margin: 0; overflow: hidden; border-radius: var(--ds-radius-card); background: var(--ds-surface); }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
.story-chat {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid #e6e9ed;
  border-radius: var(--ds-radius-card);
  background: var(--ds-white);
}
.story-chat > small { color: var(--ds-muted); font-size: var(--detail-caption); line-height: var(--detail-line-caption); font-weight: var(--type-weight-semibold); }
.story-chat__q {
  align-self: flex-end;
  max-width: 88%;
  margin: 18px 0 20px;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
  color: var(--ds-white);
  background: var(--ds-blue);
  font-size: var(--detail-body-2);
  line-height: var(--detail-line-body-2);
  font-weight: var(--type-weight-semibold);
}
.story-chat ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: ala; }
.story-chat li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--ds-surface-soft);
  counter-increment: ala;
}
.story-chat li::before { content: counter(ala); color: var(--ds-muted); font-weight: var(--type-weight-bold); }
.story-chat li b { display: block; color: var(--ds-ink); font-size: var(--detail-body-2); line-height: var(--detail-line-body-2); }
.story-chat li span { display: block; color: var(--ds-muted); font-size: var(--detail-label); line-height: var(--detail-line-label); }
.story-chat__miss {
  margin: auto 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  color: #b42318;
  background: #fdecec;
  font-size: var(--detail-body-2);
  line-height: var(--detail-line-body-2);
  font-weight: var(--type-weight-bold);
}
.story-chat ol + .story-chat__miss { margin-top: 16px; }
.story-problem-note {
  margin: 24px 0 0;
  color: var(--ds-body);
  font-size: var(--detail-body-1);
  line-height: var(--detail-line-body-1);
  font-weight: var(--type-weight-medium);
}

/* Feature scenes taken from the film */
.story-feature .detail-feature-grid { grid-template-columns: minmax(0, 400px) minmax(0, 590px); }
.story-feature.detail-feature--reverse .detail-feature-grid { grid-template-columns: minmax(0, 590px) minmax(0, 400px); }
.story-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid #e6e9ed;
  border-radius: 20px;
  background: #f6f8fb;
}
.story-shot img { width: 100%; height: auto; }
.story-compare { display: grid; gap: 12px; margin: 0; }
.story-compare > div { position: relative; }
.story-compare b {
  position: absolute;
  z-index: 1;
  left: 16px;
  top: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--ds-white);
  background: var(--ds-ink);
  font-size: var(--detail-caption);
  line-height: var(--detail-line-caption);
  font-weight: var(--type-weight-bold);
}
.story-compare > div:first-child b { background: var(--ds-danger); }
.story-compare .story-shot img { padding-top: 28px; }
.story-note {
  margin: 24px 0 0;
  color: var(--ds-muted);
  font-size: var(--detail-label);
  line-height: var(--detail-line-label);
}

.story-handoff { padding: var(--detail-section-space-compact) 0 0; }
.story-handoff .detail-section-heading h2 em { color: var(--ds-blue); font-style: normal; }

/* Payoff */
.story-payoff { padding: var(--detail-section-space) 0; background: var(--ds-surface-soft); }
.story-payoff-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.story-payoff-grid .story-shot { background: #f6f8fb; }
.story-payoff-grid .story-photo { aspect-ratio: 4 / 3; }

/* Film */
.story-film { padding: var(--detail-section-space-compact) 0; background: var(--ds-ink); }
.story-film .detail-kicker { color: #8ebcff; }
.story-film .detail-section-heading h2 { color: var(--ds-white); }
.story-film .detail-section-heading > p:not(.detail-kicker) { color: #c8d0da; }
.story-film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-top: 48px;
  border-radius: 20px;
  background: #0d1218;
}

.story-contact > img { object-position: 70% 30%; }

@media (max-width: 1040px) {
  .story-hero .detail-hero-grid,
  .story-feature .detail-feature-grid,
  .story-feature.detail-feature--reverse .detail-feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .story-problem-grid,
  .story-payoff-grid { grid-template-columns: 1fr; }
  .story-photo { aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  .story-hero-facts { gap: 12px; margin-top: 32px; }
  .story-hero-facts b { font-size: var(--detail-body-2); line-height: var(--detail-line-body-2); }
  .story-hero-facts span { font-size: var(--detail-caption); line-height: var(--detail-line-caption); }
  .story-problem-grid,
  .story-payoff-grid { margin-top: 40px; }
  .story-chat { padding: 22px 18px; }
  .story-film video { margin-top: 32px; border-radius: 14px; }
}

/* Stacked showcase: copy row on top, film scene full width below. */
.story-step { padding: var(--detail-section-space-compact) 0; background: var(--ds-white); }
.story-step--soft { background: var(--ds-surface-soft); }
.story-handoff + .story-step { padding-top: 64px; }
.story-step__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px clamp(40px, 6vw, 88px);
  align-items: start;
}
.story-step__head h2 {
  margin: 0;
  font-size: var(--detail-h2);
  line-height: var(--detail-line-h2);
  letter-spacing: var(--type-tracking-heading);
  font-weight: var(--type-weight-bold);
  text-wrap: balance;
}
.story-step__head .detail-kicker,
.story-step__head .detail-feature-number { margin-bottom: 16px; }
.story-step__copy > p:not(.story-note) {
  margin: 0;
  color: var(--ds-body);
  font-size: var(--detail-body-1);
  line-height: var(--detail-line-body-1);
  font-weight: var(--type-weight-medium);
}
.story-step__copy .story-note { margin-top: 16px; }
.story-step__copy .detail-proof-list { margin-top: 28px; }
.story-step__media { margin: 48px 0 0; }
.story-step--soft .story-shot { background: var(--ds-white); }
.story-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.story-pair > figure { margin: 0; }
.story-pair .story-photo img { height: 100%; }
.story-compare.story-pair { align-items: start; }
.story-compare figure { position: relative; }
.story-compare figure > b { position: static; display: inline-block; margin: 0 0 10px; }
.story-compare .story-shot img { padding-top: 0; }
.story-payoff--white { background: var(--ds-white); }

@media (max-width: 900px) {
  .story-step__head { grid-template-columns: 1fr; align-items: start; }
  .story-pair { grid-template-columns: 1fr; }
  .story-step__media { margin-top: 36px; }
}