/* ============================================================
   play-12.css — "Beyond the Match" (Bumble) case-study page
   Figures with image-slot placeholders, lists, flow lines.
   Uses semantic tokens so it adapts to the active vibe.
   ============================================================ */

/* image placeholders */
.cs-figure { margin: var(--s5) 0 0; }
.cs-figure image-slot {
  width: 100%; height: clamp(240px, 36vw, 440px); display: block;
  border-radius: 14px; border: 1px solid var(--line); background: var(--paper-2);
}
.cs-figure.tall image-slot { height: clamp(360px, 52vw, 600px); }
/* filled figures render the real artwork full-width at natural aspect */
.cs-figure-filled { margin: var(--s5) 0 0; }
.cs-figure-img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; border: 1px solid var(--line); background: var(--paper-2);
}
.cs-figure-cap {
  display: block; margin-top: 12px; font-size: 13px; letter-spacing: 0.01em;
  color: var(--ink-faint); text-align: center;
}
.cs-figure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .cs-figure-grid { grid-template-columns: 1fr; } }

/* bullet / numbered lists */
.cs-list { margin: var(--s3) 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.cs-list li { font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.cs-list li::marker { color: var(--ink-faint); }
.cs-list b { color: var(--ink); font-weight: 700; }

/* methods row in hero already handled by .cs-meta */

/* flow line (e.g. Add → Save → Share → Compare) */
.cs-flowline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: var(--s3); padding: 20px 22px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
}
.cs-flowline .step { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); }
.cs-flowline .sep { font-family: var(--mono); color: var(--tang-ink); font-size: 15px; }
.cs-flowline-label { display: block; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 10px; }

/* themed interview-quote block (subhead + quote) */
.cs-theme { margin-top: var(--s4); }
.cs-theme-h { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); }
.cs-theme-q {
  margin-top: 10px; padding: 16px 20px; border-left: 3px solid var(--tang); border-radius: 0 10px 10px 0;
  background: var(--card); font-size: 18px; line-height: 1.5; color: var(--ink); font-style: italic;
}

/* opportunity / concept numbered cards */
.cs-ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: var(--s4); }
.cs-op { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.cs-op-n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tang-ink); }
.cs-op-h { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; margin-top: 10px; color: var(--ink); }
.cs-op p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 820px) { .cs-ops { grid-template-columns: 1fr; } }

/* journey stages strip */
.cs-stages { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: var(--s4); }
.cs-stage { padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 100px; font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); background: var(--card); }
.cs-stages .arrow { font-family: var(--mono); color: var(--tang-ink); }