/* ── Case Studies (/case-studies) ─────────────────────── */

/* Trade + city eyebrow sitting alongside the card icon. Mirrors the
   .hiw-step-head visual rhythm without stepping on a numbered step. */
.cs-trade-chip {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(217, 119, 6, 0.08);
  padding: 0.3rem 0.625rem;
  border-radius: 2px;
}

/* Inside-the-card before/after strip. Two side-by-side blocks: a muted
   grey-toned "Before" and an amber "After". Reuses existing tokens so it
   stays on-theme with theme.css + product.css. */
.cs-before-after {
  display: flex;
  gap: 0.625rem;
  margin: 0.875rem 0 1rem;
}
.cs-ba-block {
  flex: 1;
  padding: 0.625rem 0.75rem;
  border-radius: 2px;
  font-size: 0.8125rem;
  line-height: 1.5;
  font-weight: 300;
}
.cs-ba-block.cs-before {
  background: var(--surface-2);
  color: var(--cream);
}
.cs-ba-block.cs-after {
  background: var(--amber);
  color: var(--bg);
}
.cs-ba-block strong {
  font-weight: 600;
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  opacity: 0.85;
}

/* Bulleted list of the Boltkit deliverables used in each story. Same
   pattern as `.hiw-step-list` — amber dot, no bullet, indented copy. */
.cs-deliverables {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.875rem 0 1.25rem;
  padding-left: 0;
}
.cs-deliverables li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.8125rem;
  color: var(--cream);
  font-weight: 300;
  line-height: 1.55;
  opacity: 0.78;
}
.cs-deliverables li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
}

/* The single-line outcome/metric. Italic + cream tone matches the
   `.cmp-card-tag` underline pattern used on /compare. */
.cs-metric {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--cream);
  opacity: 0.7;
  font-weight: 400;
  margin: 0.875rem 0 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* Mobile: keep before/after blocks side-by-side but tighten padding so
   the comparison fits in one phone-screen width. */
@media (max-width: 640px) {
  .pp-include-card {
    padding: 1.5rem;
  }
  .cs-before-after {
    flex-direction: column;
    gap: 0.5rem;
  }
  .cs-ba-block {
    padding: 0.5rem 0.625rem;
  }
}

/* Card CTA stack — primary product buy button on top, soft alt-link
   to the matching SWFL vertical underneath. Matches the existing
   /compare card rhythm (`.cmp-card-cta`) without inheriting its
   full-width single-button rule. */
.cs-card-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  margin-top: 1rem;
}
.cs-card-cta .pp-buy-btn { width: 100%; justify-content: center; }
.cs-card-cta-secondary {
  text-align: center;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
}

/* Soft sibling-link row under the grid — keeps the original 2.5rem
   breathing room now that the inline style moved into a class so
   theming stays in the stylesheet. */
.cs-sibling-links {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Final CTA band actions row — primary "See pricing" + secondary
   "Complete Bundle" buttons side-by-side. The navy-fill secondary
   variant lets the second action feel distinct without leaving the
   Boltkit button family. */
.cs-cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}
.pp-buy-btn-secondary {
  background: var(--navy);
  color: var(--white);
}
.pp-buy-btn-secondary:hover {
  background: #243f6b;
  color: var(--white);
}