/* case-study-v2.css — interactive explorer variant of the case study
   template. Loads alongside case-study.css (nav, hero, progress rail,
   footer, tags, .case-callout stay from v1). This file styles a click-
   driven tab explorer: a sliding pill tab bar, animated panels, and the
   stat visualizations/recommendation cards that live inside them. */

.case2-explorer {
  padding: 8px 0 56px;
}

/* Short scene-setting line above the tab bar: matches the width of the
   hero lead paragraph above it, and is centered as its own block within
   the wider explorer container, rather than left-flush against it. */
.case2-context-line {
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 auto 24px;
  text-align: center;
}

/* --- Tab bar: sliding pill indicator --- */
/* A compact, centered island (like the context line above it) rather
   than a bar stretched edge-to-edge across the wider explorer container. */
.case2-tablist {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  background: var(--cream-dark);
  padding: 6px;
  border-radius: 18px;
  margin: 8px auto 36px;
}

.case2-tab-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: 0;
  border-radius: 13px;
  background: var(--accent-green);
  transition: left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease;
  z-index: 1;
}

.case2-tab {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: none;
  background: transparent;
  border-radius: 13px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.case2-tab:hover:not(.is-active) { color: var(--ink); transform: translateY(-1px); }

.case2-tab.is-active { color: var(--white); }

.case2-tab:nth-child(1) { --accent: var(--accent-green); }
.case2-tab:nth-child(2) { --accent: var(--green-mid); }
.case2-tab:nth-child(3) { --accent: var(--accent-green-dark); }
.case2-tab:nth-child(4) { --accent: var(--green); }
.case2-tab:nth-child(5) { --accent: var(--coral-dark); }

/* --- Panels --- */
.case2-panels {
  position: relative;
}

.case2-panel {
  display: none;
}

.case2-panel.is-active {
  display: block;
  animation: case2PanelIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes case2PanelIn {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.case2-panel:nth-of-type(1) { --accent: var(--accent-green); }
.case2-panel:nth-of-type(2) { --accent: var(--green-mid); }
.case2-panel:nth-of-type(3) { --accent: var(--accent-green-dark); }
.case2-panel:nth-of-type(4) { --accent: var(--green); }
.case2-panel:nth-of-type(5) { --accent: var(--coral-dark); }

.case2-panel-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 44px;
  align-items: center;
}

.case2-panel-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 10px;
}

.case2-panel-content h2 {
  font-size: 1.9rem;
  margin-bottom: 14px;
  line-height: 1.2;
}

.case2-panel-content > p {
  max-width: 54ch;
  margin-bottom: 14px;
}

.case2-panel-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 54ch;
}

.case2-panel-content ul li {
  position: relative;
  padding-left: 22px;
  font-size: 0.98rem;
  color: var(--ink-soft);
}

.case2-panel-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* Big hero visual per panel: icon badge + stat, in a soft card */
.case2-panel-visual {
  background: var(--cream);
  border-radius: 22px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.case2-panel:nth-of-type(even) .case2-panel-visual { background: var(--cream-dark); }

.case2-visual-icon {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--accent);
  background: var(--white);
  margin-bottom: 12px;
  animation: case2IconPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes case2IconPop {
  from { transform: scale(0.5) rotate(-14deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}

.case2-visual-icon svg {
  width: 42px;
  height: 42px;
  color: var(--accent);
}

/* Multiple stat blocks stacked inside one visual card (e.g. Debt Trap) */
.case2-visual-block {
  align-self: stretch;
  width: 100%;
}

.case2-visual-block + .case2-visual-block {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--cream-dark);
}

/* Big animated counter */
.case2-counter {
  font-family: 'Fraunces', serif;
  font-size: 3rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}

.case2-counter-label {
  font-size: 0.9rem;
  color: var(--ink-soft);
  max-width: 32ch;
  margin: 4px auto 0;
}

/* Single fill bar toward a target */
.case2-bar-track {
  position: relative;
  width: 100%;
  height: 14px;
  border-radius: 7px;
  background: var(--white);
  overflow: hidden;
  margin: 10px 0 8px;
}

.case2-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  border-radius: 7px;
  background: var(--accent);
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.case2-bar-caption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: left;
}

/* Split comparison bar (e.g. loans vs. grants) */
.case2-split-track {
  display: flex;
  width: 100%;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  margin: 10px 0 6px;
  background: var(--white);
}

.case2-split-seg {
  width: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
  overflow: hidden;
}

.case2-split-a { background: var(--accent-green-dark); }
.case2-split-b { background: var(--sage); color: var(--ink); }

.case2-split-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 600;
}

/* --- Recommendations panel: full-width card grid --- */
.case2-panel-full .case2-panel-grid {
  display: block;
}

.case2-panel-full .case2-panel-content > p {
  max-width: 62ch;
}

.case2-reco-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.case2-reco-card {
  background: var(--cream);
  border-radius: 16px;
  padding: 26px 22px;
  border-top: 4px solid var(--accent-green);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  animation: case2ReCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

@keyframes case2ReCardIn {
  to { opacity: 1; transform: none; }
}

.case2-reco-card:nth-child(1) { animation-delay: 0.05s; }
.case2-reco-card:nth-child(2) { animation-delay: 0.16s; border-top-color: var(--green-mid); }
.case2-reco-card:nth-child(3) { animation-delay: 0.27s; border-top-color: var(--accent-green-dark); }

.case2-reco-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 32px rgba(60, 74, 49, 0.14);
}

.case2-reco-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sage-light);
  margin-bottom: 14px;
}

.case2-reco-card:nth-child(2) .case2-reco-icon { background: rgba(72, 91, 56, 0.16); }
.case2-reco-card:nth-child(3) .case2-reco-icon { background: rgba(44, 94, 60, 0.14); }

.case2-reco-icon svg {
  width: 24px;
  height: 24px;
  color: var(--accent-green-dark);
}

.case2-reco-card h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--ink);
}

.case2-reco-card p {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* --- Prev/Next controls --- */
.case2-panel-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
}

.case2-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.case2-nav-btn:hover {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-2px);
}

/* v1 case-study content reused verbatim inside a tab panel (e.g. Holland
   Fellowship): case-study.js's scroll-triggered .reveal fade never fires
   for content that starts hidden (display:none) inside an inactive panel,
   so neutralize it here and let the panel's own entrance animation
   (case2PanelIn) be the only reveal effect. */
.case2-panel .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Responsive */
@media (max-width: 760px) {
  .case2-panel-grid { grid-template-columns: 1fr; }
  .case2-panel-visual { margin-top: 8px; }
  .case2-reco-list { grid-template-columns: 1fr; }
  .case2-tab-label { display: none; }
  .case2-tab { padding: 11px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .case2-panel,
  .case2-visual-icon,
  .case2-reco-card,
  .case2-bar-fill,
  .case2-split-a,
  .case2-split-b,
  .case2-tab-indicator,
  .case2-tab,
  .case2-nav-btn {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}