/* ============================================
   Case Study Pages — Shared Styles
   ============================================ */

/* Breadcrumb */
.breadcrumb {
  padding: calc(var(--nav-height) + var(--space-6)) 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.breadcrumb a {
  color: var(--color-text-light);
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb__sep {
  margin: 0 var(--space-2);
}

/* Case hero */
.case-hero {
  padding-top: var(--space-4);
  padding-bottom: var(--space-12);
}

.case-hero__tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  background: var(--color-primary-50);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.case-hero h1 {
  margin-bottom: var(--space-4);
}

.case-hero__subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-mid);
  max-width: 720px;
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.case-hero__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--color-primary);
}

/* Full-width screenshot */
.case-screenshot {
  margin: var(--space-8) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-50));
  min-height: 300px;
}

.case-screenshot img {
  width: 100%;
  display: block;
}

/* Challenge section */
.case-challenge {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin: var(--space-12) 0;
}

.case-challenge h2 {
  margin-bottom: var(--space-6);
}

.case-challenge__list {
  display: grid;
  gap: var(--space-3);
}

.case-challenge__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text-mid);
  line-height: var(--leading-normal);
}

.case-challenge__item::before {
  content: '\2022';
  color: var(--color-accent);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.3;
  flex-shrink: 0;
}

/* Solution sections */
.case-solution {
  padding: var(--space-16) 0;
}

.case-solution:nth-child(even) {
  background: var(--color-bg-alt);
}

.case-solution h2 {
  margin-bottom: var(--space-3);
}

.case-solution p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.case-solution .split__image {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-bg-alt));
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Results section */
.case-results {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  margin: var(--space-12) 0;
}

.case-results h2 {
  color: #fff;
  margin-bottom: var(--space-4);
}

.case-results p {
  color: var(--color-text-on-dark-mid);
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
}

.case-results__list {
  display: grid;
  gap: var(--space-3);
}

.case-results__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text-on-dark-mid);
}

.case-results__item::before {
  content: '\2713';
  color: var(--color-success);
  font-weight: 700;
  flex-shrink: 0;
}

/* Tech stack in case study */
.case-tech {
  padding: var(--space-8) 0;
}

.case-tech h3 {
  margin-bottom: var(--space-4);
}

/* Quality / Engineering section */
.case-quality {
  background: var(--color-primary-50);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin: var(--space-8) 0;
}

.case-quality h2 {
  margin-bottom: var(--space-3);
}

.case-quality__list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.case-quality__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-mid);
}

.case-quality__item::before {
  content: '\2713';
  color: var(--color-primary);
  font-weight: 700;
}

/* Case CTA */
.case-cta {
  text-align: center;
  padding: var(--space-12) 0;
}