/* ============================================================
   VividCharts — Case study (reusable template)
   Built on shared tokens (styles.css). Example fill: Nestlé CWM.
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.crumb { border-bottom: 1px solid var(--line); }
.crumb .wrap { display: flex; align-items: center; gap: 10px; padding-top: 18px; padding-bottom: 18px; font-size: 13px; font-weight: 500; color: var(--ink-3); flex-wrap: wrap; }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--brand-strong); }
.crumb .sep { color: var(--line-strong); }
.crumb .cur { color: var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.cs-hero { padding: 60px 0 40px; }
.cs-hero .wrap { max-width: 920px; }
.cs-hero .eyebrow { margin-bottom: 18px; }
.cs-hero .eyebrow .tag { color: var(--ink-2); }
.cs-date { font-size: 13px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.cs-hero h1 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.04; margin-top: 14px; max-width: 20ch; letter-spacing: -0.015em; }
.cs-sub { font-size: clamp(18px, 1.7vw, 22px); color: var(--ink-2); line-height: 1.5; margin-top: 22px; max-width: 60ch; }

.cs-hero-figure { margin: 36px 0 0; }
.cs-hero-img {
  display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
  border: 1px solid var(--line); box-shadow: var(--shadow-md); background: var(--light-cream);
}
.cs-hero-cap { display: block; margin-top: 10px; font-size: 12px; color: var(--ink-3); }

/* ============================================================
   RESULTS stat band
   ============================================================ */
.cs-results { background: var(--dark-ash); color: var(--white); padding: 56px 0; }
.cs-results .lead { font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--light-turq); }
.cs-results-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cs-stat { padding: 0 26px; border-left: 1px solid rgba(255,255,255,.14); }
.cs-stat:first-child { border-left: 0; padding-left: 0; }
.cs-stat .n { font-size: clamp(34px, 4vw, 50px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.cs-stat .n small { font-size: .5em; color: var(--brand); margin-left: 2px; }
.cs-stat .l { margin-top: 14px; font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.45; max-width: 22ch; }

/* ============================================================
   BODY — article + sticky sidebar
   ============================================================ */
.cs-body { padding: 80px 0 96px; }
.cs-body-grid { display: grid; grid-template-columns: 1fr 340px; gap: 72px; align-items: start; }

/* article */
.cs-article > .cs-block + .cs-block { margin-top: 48px; }
.cs-block h2 { font-size: clamp(24px, 2.6vw, 34px); }
.cs-block h2 .num { color: var(--brand-strong); margin-right: 12px; font-variant-numeric: tabular-nums; }
.cs-block p { font-size: 18px; color: var(--ink-2); line-height: 1.62; margin-top: 18px; max-width: 62ch; }
.cs-block p + p { margin-top: 16px; }

/* Markdown-rendered article body (case study .md content).
   Bodies render <h2>/<p>/<ul> directly under .cs-article — no .cs-block wrapper —
   so mirror the .cs-block design here and auto-number the section headings.
   "## The challenge" → a styled "01 The challenge" heading via CSS counters. */
.cs-article { counter-reset: cs-section; }
.cs-article > h2 { font-size: clamp(24px, 2.6vw, 34px); counter-increment: cs-section; margin-top: 48px; }
.cs-article > h2:first-child { margin-top: 0; }
.cs-article > h2::before {
  content: counter(cs-section, decimal-leading-zero);
  color: var(--brand-strong); margin-right: 12px; font-variant-numeric: tabular-nums;
}
.cs-article p { font-size: 18px; color: var(--ink-2); line-height: 1.62; margin-top: 18px; max-width: 62ch; }
.cs-article ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 62ch; }
.cs-article ul li { position: relative; padding-left: 30px; font-size: 16.5px; color: var(--ink-2); line-height: 1.5; }
.cs-article ul li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--brand-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13l4 4L19 7' stroke='%23349DA1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 13px; background-repeat: no-repeat; background-position: center;
}
.cs-article blockquote {
  margin: 40px 0 0; padding: 28px 32px; background: var(--light-cream); border-radius: var(--r-sm);
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
}

.cs-list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 62ch; }
.cs-list li { position: relative; padding-left: 30px; font-size: 16.5px; color: var(--ink-2); line-height: 1.5; }
.cs-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--brand-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13l4 4L19 7' stroke='%23349DA1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 13px; background-repeat: no-repeat; background-position: center;
}

/* pain points use a different marker */
.cs-list.pains li::before {
  background: #FBE9E7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23C03C31' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* pull quote */
.cs-quote {
  margin: 48px 0; padding: 36px 40px;
  background: var(--light-cream); border-radius: var(--r-sm);
  position: relative;
}
.cs-quote .mark { font-size: 56px; line-height: .6; color: var(--brand); font-weight: 700; }
.cs-quote blockquote { margin: 8px 0 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.35; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.cs-quote figcaption { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.cs-quote .qava { width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: var(--brand-fg); display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; }
.cs-quote .qmeta b { display: block; font-size: 15px; color: var(--ink); }
.cs-quote .qmeta span { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }

/* ---------- Sidebar ---------- */
.cs-aside { position: sticky; top: 96px; display: grid; gap: 20px; }
.cs-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); padding: 26px; }
.cs-card h3 { font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }

.cs-snap dl { margin: 8px 0 0; }
.cs-snap dt { font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); margin-top: 18px; }
.cs-snap dd { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: var(--ink); }

.cs-dl-card p { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 14px 0 18px; }
.cs-dl-card .btn { width: 100%; justify-content: center; }

.cs-share { display: flex; align-items: center; gap: 10px; }
.cs-share .lbl { font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); margin-right: 2px; }
.cs-share a {
  width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-2);
  transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.cs-share a:hover { border-color: var(--brand); color: var(--brand-strong); background: var(--brand-tint); }

/* ============================================================
   RELATED case studies
   ============================================================ */
.cs-related { background: var(--light-cream); padding: 88px 0; }
.cs-related .eyebrow { margin-bottom: 28px; }
.cs-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cs-rel-card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-sm);
  padding: 26px; transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.cs-rel-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cs-rel-tag { font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-strong); }
.cs-rel-card h3 { font-size: 19px; line-height: 1.25; margin-top: 14px; }
.cs-rel-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; margin-top: 12px; flex: 1; }
.cs-rel-card .more { margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--brand-strong); display: inline-flex; align-items: center; gap: 6px; }
.cs-rel-card:hover .more svg { transform: translateX(3px); }
.cs-rel-card .more svg { transition: transform .16s var(--ease); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .cs-body-grid { grid-template-columns: 1fr; gap: 48px; }
  .cs-aside { position: static; grid-template-columns: 1fr 1fr; }
  .cs-share-card { grid-column: 1 / -1; }
  .cs-results-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 8px; }
  .cs-stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .cs-rel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cs-aside { grid-template-columns: 1fr; }
  .cs-results-grid { grid-template-columns: 1fr; }
  .cs-stat { border-left: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: 24px; }
  .cs-stat:first-child { border-top: 0; padding-top: 0; }
  .cs-quote { padding: 28px 24px; }
}