/* =========================================================
   Case Studies — Growth Wizards brand system
   Mirrors scale-101/assets/scale101.css so both resource
   libraries share one visual language (cards, pills, filters,
   breadcrumbs, article shell). Shared chrome (reset, fonts,
   colors, header/nav, footer, buttons, hero shell) still comes
   from the site's own /styles.css, loaded first on every page.
   Case-study-specific components (ba-grid, wid-grid,
   results-stats, risk-line) already live in /styles.css.
   ========================================================= */

/* ---------- Tag pills (shared look with Scale 101) ---------- */
.pill {
  display: inline-block;
  border: 1.5px solid currentColor;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
}
.pill--cyan { color: var(--cyan); }
.pill--green { color: var(--green); }
.pill--purple { color: var(--purple); }
.pill--pink { color: var(--pink); }

/* ---------- Hero additions ---------- */
.hero h1 { max-width: 20ch; }
.hero .accent { color: var(--green); }
.hero p.lede { font-size: 1.15rem; max-width: 62ch; color: #E4E4E4; }

/* ---------- NDA / anonymity notice (byline-card look) ---------- */
.byline-card {
  border: 1px solid rgba(255,255,255,0.14);
  border-left: 3px solid var(--green);
  padding: 24px 28px;
  margin-top: 36px;
  max-width: 78ch;
  background: rgba(255,255,255,0.02);
}
.byline-card p { margin: 0; color: #DADADA; font-size: 0.98rem; }
.byline-card p + p { margin-top: 10px; }
.byline-card strong { color: var(--text); }

/* ---------- Category filters ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 40px 0 8px;
}
.filter-btn {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 9px 16px;
  cursor: pointer;
  border-radius: 999px;
}
.filter-btn[aria-pressed="true"], .filter-btn:hover {
  border-color: var(--green); color: var(--green);
}

/* ---------- Article grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column; gap: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 22px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--cyan); text-decoration: none; transform: translateY(-2px); }
.card[data-cat] { display: none; }
.card.is-visible { display: flex; }

.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card-format {
  font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 700;
}
.card h3 {
  color: var(--text); font-family: 'Bebas Neue', sans-serif;
  text-transform: none; letter-spacing: 0.01em;
  font-size: 1.32rem; margin: 0; line-height: 1.15;
}
.card p { font-size: 0.92rem; color: #C9C9C9; margin: 0; max-width: none; }
.card-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.78rem; color: var(--text-faint);
}
.card-tags { display: flex; gap: 6px; }

/* ---------- Article page shell ---------- */
.article-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px; justify-content: center;
}
.article-meta .format { color: var(--text-faint); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.article-tags { display: flex; gap: 8px; justify-content: center; margin: 14px 0 0; }
.article-cta {
  margin-top: 56px; padding: 28px; border: 1px dashed rgba(18,247,97,0.5);
  max-width: 68ch; margin-left: auto; margin-right: auto; text-align: center;
}
.article-cta p { margin: 0; }
.breadcrumb { font-size: 0.85rem; color: var(--text-faint); margin-bottom: 22px; text-align: center; }
.breadcrumb a { color: var(--text-faint); }
.breadcrumb a:hover { color: var(--green); }