/* ============================================================
   CASE STUDIES — case-studies.css
   Shared stylesheet for page-case-study-listing.php and
   single-casestudies.php.

   Depends on global theme styles already defined site-wide:
   :root custom properties, .wrap, .section-white, .section-cream,
   .section-dark, .top-block, .hero, .breadcrumb, .hero-h1, .hero-sub,
   .accent, .eyebrow, .statbar, .statbar-inner, .statbar-item,
   .stat-label-top, .stat-num, .stat-label-bottom, .btn-primary,
   .btn-secondary, .btn-dark, .btn-outline-light, .section-head,
   .callout-lime, .checklist, .post-card-img, .img-ar-16-9, .ph,
   .filter-bar, .filter-btn, .page-link

   Only classes NOT already present in the existing theme stylesheet
   are defined below.
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   0b. SHARED — richtext narrative helper (ACF wysiwyg output)
   ───────────────────────────────────────────────────────── */
.csd-narrative p {
  font-size: 17px;
  color: var(--ink);
  line-height: 1.75;
  margin-bottom: 20px;
}
.csd-narrative p:last-child {
  margin-bottom: 32px;
}
.csd-narrative-sm p {
  font-size: 16px;
}

/* ============================================================
   1. LISTING PAGE (csl-)
   ============================================================ */
.csl-hero-inner { max-width: 680px; }
.csl-hero-h1 { margin-bottom: 16px; }
.csl-hero-sub { margin-bottom: 0; max-width: 580px; }

.csl-feed-intro { font-size: 15px; color: var(--ink); margin-bottom: 24px; max-width: 720px; }
.csl-feed { display: flex; flex-direction: column; gap: 28px; }
.csl-feed-empty { font-size: 15px; color: var(--ink); padding: 40px 0; }

.csl-card { background: #fff; border: 1px solid var(--line-light); border-radius: 16px; overflow: hidden; }
.csl-card-head {
  background: #f5f4f0;
  border-bottom: 1px solid var(--line-light);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.csl-card-name { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.csl-card-tags { font-size: 14px; color: var(--ink); }
.csl-card-stat { text-align: right; flex-shrink: 0; }
.csl-card-stat-value { font-size: 26px; font-weight: 800; color: #1414c8; letter-spacing: -0.03em; line-height: 1; }
.csl-card-stat-label { font-size: 14px; color: var(--ink); margin-top: 2px; }

.csl-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 768px) { .csl-card-body { grid-template-columns: 1fr; } }
.csl-card-col { padding: 24px 28px; }
.csl-card-col:empty {
  padding: 0 !important;
}
.csl-card-col:first-child { border-right: 1px solid var(--line-light); }
@media (max-width: 768px) { .csl-card-col:first-child { border-right: none; border-bottom: 1px solid var(--line-light); } }
.csl-card-img { margin-bottom: 20px; }
.csl-card-excerpt { color: var(--ink); line-height: 1.7; margin-bottom: 16px; }

.csl-card-checklist-label { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.06em; }
.csl-card-checklist { border-top: 1px solid var(--line-light); }
.csl-card-checklist-item { display: flex; gap: 12px; color: var(--soft); padding: 7px 0; border-bottom: 1px solid var(--line-light); }
.csl-check { color: #3dffb0; font-weight: 700; flex-shrink: 0; }

.csl-card-quote { background: #f5f4f0; border-radius: 10px; padding: 18px 20px; margin-top: 20px; }
.csl-card-quote-mark { font-size: 28px; color: rgba(6, 6, 26, 0.3); line-height: 1;  }
.csl-card-quote blockquote { font-size: 14px; font-style: italic; color: var(--soft); line-height: 1.65; margin-bottom: 8px; }
.csl-card-quote cite { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink); }

.csl-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.csl-pagination span,
.csl-pagination a { display: inline-flex; }

.csl-support-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line-light);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 56px;
}
@media (max-width: 768px) { .csl-support-cta { grid-template-columns: 1fr; } }
.csl-support-cta-left { padding: 36px 40px; border-right: 1px solid var(--line-light); }
@media (max-width: 768px) { .csl-support-cta-left { border-right: none; border-bottom: 1px solid var(--line-light); } }
.csl-support-cta-heading { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin-bottom: 12px; }
.csl-support-cta-text { font-size: 15px; color: var(--ink); line-height: 1.7; margin-bottom: 24px; }
.csl-support-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.csl-support-cta-right { padding: 36px 40px; background: #f5f4f0; }
.csl-platforms-label { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 20px; }
.csl-platforms-list { display: flex; flex-direction: column; gap: 10px; }
.csl-platform-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease-in-out 0s;
  box-shadow: 0px 3px 10px rgba(61, 255, 176, 0);
  gap: 10px;
}
.csl-platform-link:hover {
  transform: scale(1.01);
  box-shadow: 0px 3px 10px rgba(61, 255, 176, 0.15);
}
.csl-platform-arrow { color: #1414c8; font-size: 13px; }

/* Related / mini cards (used in "More Case Studies" on the single template) */
.csl-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
@media (max-width: 768px) { .csl-related-grid { grid-template-columns: 1fr; } }
.csl-related-viewall { text-align: center; }

.csl-mini-card { background: #fff; border: 1px solid var(--line-light); border-radius: 16px; overflow: hidden; }
.csl-mini-card-head {
  background: #f5f4f0;
  border-bottom: 1px solid var(--line-light);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.csl-mini-card-name { font-size: 14px; font-weight: 800; color: var(--ink); }
.csl-mini-card-tags { font-size: 14px; color: var(--ink); margin-top: 2px; min-height: 45px; }
.csl-mini-card-stat { text-align: right; width: 100px; }
.csl-mini-card-stat-value { font-size: 18px; font-weight: 800; color: #1414c8; letter-spacing: -0.03em; }
.csl-mini-card-stat-label { font-size: 10px; color: var(--ink); }
.csl-mini-card-body { padding: 18px 20px; }
.csl-mini-card-excerpt { font-size: 13.5px; color: var(--ink); line-height: 1.65; margin-bottom: 16px; }
.csl-mini-card-btn { font-size: 12px; padding: 9px 18px; }

/* ============================================================
   2. DETAIL PAGE (csd-)
   ============================================================ */
.csd-overview-grid { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: start; }
@media (max-width: 900px) { .csd-overview-grid { grid-template-columns: 1fr; } }
.csd-overview-side { display: flex; flex-direction: column; gap: 16px; }
.csd-situation-heading { margin-bottom: 20px; }

.csd-pullquote { background: #f5f4f0; border-left: 4px solid #3dffb0; border-radius: 0 12px 12px 0; padding: 24px 28px; }
.csd-pullquote-mark { font-size: 32px; color: rgba(6, 6, 26, 0.12); line-height: 1; margin-bottom: 6px; }
.csd-pullquote-text { font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.6; margin-bottom: 16px; }
.csd-pullquote-author { display: flex; align-items: center; gap: 12px; }
.csd-pullquote-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: #1414c8;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff; flex-shrink: 0;
}
.csd-pullquote-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.csd-pullquote-role { font-size: 12px; color: var(--ink); margin-top: 2px; }

.csd-client-card-head { background: #f5f4f0; border-bottom: 1px solid var(--line-light); padding: 20px 24px; }
.csd-client-card-label { font-size: 14px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.csd-client-card-img { aspect-ratio: 16/9; border-radius: 8px; margin-bottom: 16px; }
.csd-client-card-name { font-size: 17px; font-weight: 800; color: var(--ink); }
.csd-client-card-subtitle { font-size: 13px; color: var(--ink); margin-top: 3px; }
.csd-client-card-rows { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.csd-client-card-row { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line-light); }
.csd-client-card-row:last-child { border-bottom: none; padding-bottom: 0; }
.csd-client-card-row-label { font-size: 13px; color: var(--ink); }
.csd-client-card-row-value { font-size: 13px; font-weight: 700; color: var(--ink); }
.csd-client-card-row-value.csd-highlight { color: #1414c8; }

.csd-dark-box {
  background: #06061a;
  border-radius: 14px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.csd-dark-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #1414c8, #3dffb0);
}
.csd-dark-box-label { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
.csd-dark-box-list { display: flex; flex-direction: column; gap: 8px; }
.csd-dark-box-item { display: flex; gap: 10px; font-size: 13.5px; color: rgba(255, 255, 255, 0.8); }

.csd-timeline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .csd-timeline-grid { grid-template-columns: 1fr; } }
.csd-timeline-col { display: flex; flex-direction: column; gap: 0; }
.csd-outcome-col { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }
@media (max-width: 900px) { .csd-outcome-col { position: static; } }

.csd-stat-grid { display: grid; grid-template-columns: 1fr 1fr; }
.csd-stat-grid .stat-highlight { border-bottom: 1px solid var(--line-light); }
.csd-stat-grid .stat-highlight:nth-child(odd) { border-right: 1px solid var(--line-light); }
/* .csd-stat-grid .stat-highlight:nth-last-child(-n+2) { border-bottom: none; } */
.csd-outcome-note { padding: 20px 24px; font-size: 13px; color: var(--ink); line-height: 1.6; }

.csd-stakes-box { background: #f5f4f0; border-radius: 14px; padding: 24px; }
.csd-stakes-heading { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.csd-stakes-list { display: flex; flex-direction: column; gap: 10px; }
.csd-stakes-list-positive { border-top: 1px solid var(--line-light); margin-top: 16px; padding-top: 16px; }
.csd-stakes-item { display: flex; gap: 10px; font-size: 14px; color: var(--soft); }
.csd-cross { color: #ef4444; font-weight: 700; flex-shrink: 0; }
.csd-tick { color: #059669; font-weight: 700; flex-shrink: 0; }

.csd-dark-box-cta-heading { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.csd-dark-box-cta-text { font-size: 13px; color: rgba(255, 255, 255, 0.8); line-height: 1.6; margin-bottom: 18px; }


.csd-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .csd-detail-grid { grid-template-columns: 1fr; } }
.csd-detail-heading { margin-bottom: 20px; }

.csd-retainer-card { overflow: hidden; }
.csd-retainer-label { background: #f5f4f0; border-bottom: 1px solid var(--line-light); padding: 16px 20px; font-size: 13px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; }
.csd-retainer-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.csd-retainer-item { display: flex; gap: 12px; font-size: 14px; color: var(--soft); padding-bottom: 10px; border-bottom: 1px solid var(--line-light); }
.csd-retainer-item:last-child { border-bottom: none; padding-bottom: 0; }
.csd-retainer-footer {
  background: #f5f4f0; border-top: 1px solid var(--line-light); padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--ink);
}

/* ─────────────────────────────────────────────────────────
   3. TIMELINE PRIMITIVES (tl-*) & stat highlight
   Page-specific to the detail template's timeline; not part of
   the shared global stylesheet.
   ───────────────────────────────────────────────────────── */
.tl-item { display: grid; grid-template-columns: 28px 1fr; gap: 0 20px; margin-bottom: 0; }
.tl-left { display: flex; flex-direction: column; align-items: center; }
.tl-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tl-dot-red { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
.tl-dot-amber { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
.tl-dot-blue { background: #3b82f6; box-shadow: 0 0 0 4px rgba(59, 130, 246, .15); }
.tl-dot-green { background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
.tl-dot-parrot-green { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .15);}
.tl-connector { flex: 1; width: 2px; background: var(--line-light); margin: 4px 0; min-height: 20px; }
.tl-right { padding-bottom: 32px; }
.tl-badge { display: inline-block; font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 50px; margin-bottom: 8px; }
.tl-badge-red { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.tl-badge-amber { background: rgba(245, 158, 11, 0.1); color: #b45309; }
.tl-badge-blue { background: rgba(59, 130, 246, .1); color: #1d4ed8; }
.tl-badge-parrot-green { background: rgba(34, 197, 94, .12); color: #15803d; }
.tl-badge-green { background: rgba(34, 197, 94, .12); color: #15803d; }
.tl-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; line-height: 1.3; }
.tl-desc { font-size: 14px; color: var(--ink); line-height: 1.68; }

.stat-highlight { text-align: center; padding: 28px 20px; }
.stat-highlight .num { font-size: 48px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #1414c8; }
.stat-highlight .label { font-size: 13px; color: var(--ink); margin-top: 6px; line-height: 1.4; }

.case-study-link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.case-study-link span.icon-cs {
  font-size: 20px;
  padding-left: 6px;
  position: relative;
  top: 2px;
  transition: all 0.3s ease-in-out 0s;
}
.case-study-link:hover {
  color: #1414c8;
}
.case-study-link:hover span.icon-cs {
  padding-left: 10px;
}
.callout-lime.csd-callout {
  background: #f5f4f0;
  border: 0;
  border-radius: 14px;
}
.cta-band.css-cta .wrap {
  max-width: 1200px;
}
.csl-platform-link .case-study-link {
  min-width: 80px;
  color: #1414c8;
}
.csl-platform-link .case-study-link span.icon-cs {
  top: 1px;
}
@media (max-width: 991px) {
  .csl-support-cta-right,
  .csl-support-cta-left {
    padding: 20px;
  }
  .csl-card-head,
  .csl-card-col {
    padding: 15px 20px;
  }
  .csl-platform-link {
    padding: 6px 10px;
  }
  .csl-support-cta {
    margin-top: 30px;
  }
  .csd-client-card-img {
    aspect-ratio: auto;
  }
}
.csd-light-box {
  background: #f5f4f0;
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 28px;
}

.csd-light-box-label {
  font-size: 13px;
  font-weight: 700;
  color: #14142b;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}

.csd-light-box-item {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: #374151;
}

.csd-light-box-item .csl-check {
  color: #ef4444;
  font-weight: 700;
  flex-shrink: 0;
}

.csd-light-box-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}