/* ============================================================
   Case Studies page — page-specific styles
   (full-detail .case-card layout: reuses the homepage's shared
   .case-card component from css/style.css, extended here with a
   responsive multi-item grid, an industry/timeline meta row,
   bullet-point challenge/strategy lists, a 4-up metrics grid and
   metric sub-labels — since this page carries the FULL case study
   data set instead of the homepage's condensed 3-metric teaser)
   ============================================================ */

/* ─── Responsive grid wrapper for the full case study list ───── */
.case-studies-full-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}
.case-studies-full-grid .case-card { min-width: 0; }

/* ─── Client meta row: industry (left) + timeline badge (right) ─ */
.case-meta-row {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 24px;
}
.case-industry { font-size: 0.75rem; font-weight: 600; color: var(--accent-color); }
.case-timeline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 600; color: var(--gray-400);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 4px 12px; border-radius: 999px;
}
.case-timeline svg { width: 12px; height: 12px; }

/* ─── Challenge / Strategy bullet lists inside .case-detail-row ─ */
.case-detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.case-detail-list li {
  position: relative; padding-left: 14px;
  font-size: 0.875rem; line-height: 1.6; color: var(--gray-400);
}
.case-detail-list li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-color);
}

/* ─── Results Achieved label above the metrics grid ───────────── */
.case-metrics-heading {
  position: relative; z-index: 1;
  font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--gray-500);
  margin-bottom: 12px;
}

/* ─── 4-up metrics grid (this page's cards carry 4 metrics vs.
       the homepage teaser's 3) + metric sub-label ────────────── */
.case-metrics-4 { grid-template-columns: repeat(2,1fr); }
@media (min-width: 640px) { .case-metrics-4 { grid-template-columns: repeat(4,1fr); } }
.metric-sub { display: block; font-size: 0.625rem; color: rgba(255,255,255,0.35); margin-top: 2px; }