/*
 * Common base styles for all case-study pages.
 * Loaded before per-case CSS so case-specific files can override.
 */

/* Case page layout tokens */
:root {
  --case-section-py: 4rem;
  --case-section-bg: #f9fafb;
  --case-section-gray-bg: #f3f4f6;
  --case-title-color: #111827;
}

/* Generic section wrapper used by many case pages */
.case-section {
  padding: var(--case-section-py) 0;
  background: var(--case-section-bg);
  color: #1f2937;
}

.case-section--gray {
  background: var(--case-section-gray-bg);
}

.case-section__title {
  color: var(--case-title-color);
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 700;
}

/* Generic tab pattern */
.case-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.case-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius, 8px);
  cursor: pointer;
  border: none;
  background: var(--case-section-gray-bg);
  color: #374151;
  transition: all 0.2s;
  font-weight: 500;
}

.case-tab:hover {
  background: #e5e7eb;
}

.case-tab--active {
  background: var(--color-primary, #2563eb);
  color: #ffffff;
}

/* Demo panel helpers */
.case-demo-panel {
  background: #ffffff;
  border-radius: var(--radius-lg, 16px);
  padding: 1.5rem;
  box-shadow: var(--shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.case-demo-panel__title {
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Metric cards */
.case-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.case-metric {
  background: #ffffff;
  border-radius: var(--radius-lg, 16px);
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.case-metric__value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary, #2563eb);
}

.case-metric__label {
  font-size: 0.9rem;
  color: #6b7280;
  margin-top: 0.5rem;
}

/* Pulse badge for live demos */
@keyframes case-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

.case-live-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: case-pulse 2s infinite;
}