/* ============================================================
   case-study.css
   Page-specific components for Case Study pages ONLY.
   Everything reusable already lives in style.css: container,
   section-pad, eyebrow, btn, nav, footer, dashboard-kpis/kpi-card,
   bar-list/bar-track/bar-fill, reason-card/reasons-grid, dash-card.
   This file adds only what does not exist yet: the case hero,
   the execution timeline, content highlight cards, and the
   simplified final CTA block.

   Built to be reused as a template: future case study pages should
   import this same file and reuse these same classes rather than
   creating new ones.
   ============================================================ */

/* ------------------------------------------------------------
   ALT BACKGROUND UTILITY
   Same visual rhythm technique used on the homepage (e.g.
   Companies / Why Brands): alternates section background to
   break up long scroll without introducing new colors.
   ------------------------------------------------------------ */
.alt-bg {
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

/* ------------------------------------------------------------
   BACK LINK (breadcrumb)
   ------------------------------------------------------------ */
.case-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2.4rem;
  transition: color var(--dur-fast) ease;
}

.case-back-link:hover { color: var(--blue-bright); }

.case-back-link svg {
  width: 13px;
  height: 13px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.case-back-link:hover svg { transform: translateX(-2px); }

/* ------------------------------------------------------------
   CASE HERO
   ------------------------------------------------------------ */
.case-hero {
  position: relative;
  padding: calc(var(--nav-height) + 3rem) 0 4rem;
  overflow: hidden;
}

.case-hero-content {
  position: relative;
  z-index: 1;
}

.case-hero-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.8rem;
}

.case-hero-logo {
  height: 32px;
  width: auto;
}

.case-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.1;
  color: var(--white);
  max-width: 780px;
  margin-bottom: 1.4rem;
}

.case-hero-summary {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 620px;
  line-height: 1.65;
  margin-bottom: 2.2rem;
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.case-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.45rem 0.9rem;
}

.case-meta-item svg {
  width: 12px;
  height: 12px;
  color: var(--blue-bright);
}

/* ------------------------------------------------------------
   PROSE BLOCKS (Overview / Objective / Strategy)
   ------------------------------------------------------------ */
.case-prose {
  max-width: 720px;
}

.case-prose p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
}

.case-prose p + p {
  margin-top: 1.1rem;
}

.case-prose strong {
  color: var(--white);
  font-weight: 600;
}

/* ------------------------------------------------------------
   EXECUTION TIMELINE
   ------------------------------------------------------------ */
.case-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 760px;
}

.case-timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--border);
}

.case-timeline-item {
  position: relative;
  padding-left: 2.75rem;
}

.case-timeline-dot {
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--blue-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-timeline-dot::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}

.case-timeline-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-bottom: 0.6rem;
}

.case-timeline-week {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--white);
}

.case-timeline-metric {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--blue-bright);
}

.case-timeline-item p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 620px;
}

/* ------------------------------------------------------------
   CONTENT HIGHLIGHTS
   ------------------------------------------------------------ */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.highlight-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

.highlight-card:hover {
  border-color: var(--blue-dim);
  transform: translateY(-3px);
}

/* Screenshot area for a highlight card. Pulled out to the card's
   edges via negative margins (the card itself uses uniform
   padding, not a header/body split like .case-card), so the image
   sits flush at the top without restructuring the component. */
.highlight-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-bright);
}

.highlight-caption {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--white);
  line-height: 1.4;
  flex: 1;
}

.highlight-stats {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.7rem;
  column-gap: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border-soft);
}

.highlight-stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.highlight-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
}

.highlight-stat-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
  margin-top: 0.3rem;
}

.highlight-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--blue-bright);
  transition: color var(--dur-fast) ease;
}

.highlight-link:hover { color: var(--white); }

.highlight-link svg {
  width: 12px;
  height: 12px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.highlight-link:hover svg { transform: translate(2px, -2px); }

/* ------------------------------------------------------------
   RESULTS: weekly views bar chart card
   Reuses .dash-card / .bar-list / .bar-track / .bar-fill as-is;
   only the intro spacing above the KPI strip is page-specific.
   ------------------------------------------------------------ */
.case-results-intro {
  margin-bottom: 2rem;
}

.case-weekly-card {
  margin-top: 1.25rem;
}

/* ------------------------------------------------------------
   FINAL CTA
   ------------------------------------------------------------ */
.case-final-cta {
  text-align: center;
}

.case-final-cta .eyebrow {
  justify-content: center;
  margin-bottom: 1.2rem;
}

.case-final-cta h2 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: 1.1rem;
}

.case-final-cta p {
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto 2rem;
}

.case-final-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   OPTIONAL MODIFIERS
   For case studies with less granular source data than PagFinance
   (e.g. no weekly breakdown): reuse the same components with fewer
   items instead of inventing data. These modifiers just keep the
   grid visually balanced when a page has 3 KPIs instead of 5, or a
   single Featured Content highlight instead of three.
   ------------------------------------------------------------ */
.dashboard-kpis.kpis-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 620px;
}

.highlight-grid.single {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

.highlight-grid.pair {
  grid-template-columns: repeat(2, minmax(0, 340px));
  justify-content: center;
}

.highlight-grid.quad {
  grid-template-columns: repeat(2, 1fr);
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .highlight-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .highlight-grid { grid-template-columns: 1fr; }
  .highlight-grid.pair { grid-template-columns: 1fr; }
  .highlight-grid.quad { grid-template-columns: 1fr; }
  .case-timeline-header { flex-direction: column; align-items: flex-start; }
  .dashboard-kpis.kpis-3 { grid-template-columns: repeat(2, 1fr); max-width: none; }
}

@media (max-width: 480px) {
  .case-meta { gap: 0.5rem; }
  .highlight-stats { gap: 1rem; }
  .dashboard-kpis.kpis-3 { grid-template-columns: 1fr 1fr; }
}