/* ============================================
   PROJECT.HTML — PAGE-SPECIFIC STYLES
   Filter Tabs, Case Study Cards
   Requires: css/style.css (loaded first)
============================================ */

/* ── FILTER TABS ── */
.filter-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.filter-tab {
  padding: 10px 20px; border-radius: 100px;
  border: 1px solid var(--border); background: var(--white);
  font-size: 14px; font-weight: 600; color: var(--muted);
  cursor: pointer; transition: .2s;
}
.filter-tab:hover { border-color: var(--brand); color: var(--brand); }
.filter-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── CASE STUDY CARDS ── */
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; margin-top: 40px; }
.case-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px;
  transition: transform .25s, box-shadow .25s;
}
.case-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(10,71,194,0.1); }
.case-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-light); color: var(--brand);
  font-size: 12px; font-weight: 700; padding: 5px 12px;
  border-radius: 100px; margin-bottom: 16px;
}
.case-card h3 { font-size: 19px; font-weight: 700; color: var(--dark); margin-bottom: 10px; }
.case-card > p { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 20px; }
.case-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.case-metric { background: var(--white); border-radius: var(--radius); padding: 14px 8px; text-align: center; }
.case-metric strong { display: block; font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 800; color: var(--brand); }
.case-metric span { font-size: 11px; color: var(--muted); }
.case-quote { font-size: 13px; font-style: italic; color: var(--text); border-left: 3px solid var(--brand); padding-left: 14px; }

/* ── RESPONSIVE (page-specific) ── */
@media (max-width: 600px) {
  .case-metrics { grid-template-columns: repeat(3, 1fr); }
}