/* Kohlisys — Case studies archive + single */

/* Archive */
.cs-hero {
  padding: 96px 0 56px;
}
.cs-hero h1 { font-family: var(--font-display); font-size: clamp(56px, 5.8vw, 92px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 600; max-width: 16ch; }
.cs-hero .accent { color: var(--accent-coral); font-style: italic; font-weight: 500; }
.cs-filters {
  margin-top: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
  gap: 24px;
  flex-wrap: wrap;
}
.filter-group { display: flex; gap: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; flex-wrap: wrap; }
.filter-group a { color: var(--ink-500); padding: 4px 0; }
.filter-group a.active { color: var(--ink-900); border-bottom: 2px solid var(--accent-coral); }
.cs-count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); }

.featured {
  padding: 96px 0;
  border-bottom: 1px solid var(--ink-200);
}
.featured-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.featured .photo { aspect-ratio: 4/5; }
.featured-content .case-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.featured-content h2 { font-size: clamp(36px, 3.6vw, 56px); line-height: 1.05; letter-spacing: -0.03em; margin-top: 20px; max-width: 22ch; }
.featured-content .body { font-size: 17px; color: var(--ink-600); margin-top: 24px; max-width: 52ch; }
.featured-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  border-top: 1px solid var(--ink-200);
  padding-top: 32px;
}
.featured-stats .s { font-family: var(--font-display); font-size: 40px; font-weight: 500; letter-spacing: -0.025em; line-height: 1; }
.featured-stats small { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-top: 8px; max-width: 22ch; line-height: 1.4; }

.cs-grid-section { padding: 96px 0; }
.cs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.cs-card {
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}
.cs-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.cs-card .photo { aspect-ratio: 16/9; border-radius: 0; border: 0; border-bottom: 1px solid var(--ink-200); display: block; }
.cs-card .body {
  padding: 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cs-card .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.cs-card h3 { font-size: 24px; letter-spacing: -0.015em; margin-bottom: 12px; max-width: 22ch; }
.cs-card .desc { color: var(--ink-600); font-size: 15px; flex: 1; }
.cs-card .stats {
  display: flex;
  gap: 32px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-100);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-700);
  letter-spacing: 0.04em;
}
.cs-card .stats strong { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); display: block; margin-bottom: 2px; }

.cs-card.dark { background: var(--ink-900); color: var(--paper); border-color: var(--ink-800); }
.cs-card.dark .photo { border-color: var(--ink-700); }
.cs-card.dark h3 { color: var(--paper); }
.cs-card.dark .desc { color: var(--ink-300); }
.cs-card.dark .stats { border-color: rgba(255,255,255,0.1); color: var(--ink-300); }
.cs-card.dark .stats strong { color: var(--paper); }

.pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  color: var(--ink-700);
}
.pagination .page-numbers.current { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }

/* Single case study */
.case-single .back-link {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-500);
}
.case-single .back-link:hover { color: var(--accent-coral); }
.case-single-hero { padding: 64px 0 48px; }
.case-single-hero h1 { max-width: 22ch; }
.case-single-photo { padding-bottom: 64px; }
.case-single-photo .photo { border-radius: var(--r-lg); }
.case-single-stats { padding: 48px 0; border-top: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); background: var(--paper-2); }
.case-single-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.case-single-stats .s { font-family: var(--font-display); font-size: 56px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.case-single-stats small { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-top: 12px; }
.case-single-body { padding: 96px 0; }
.case-body-prose { max-width: 64ch; margin: 0 auto; font-size: 18px; line-height: 1.7; color: var(--ink-800); }
.case-body-prose h2 { font-size: 32px; margin: 48px 0 16px; }
.case-body-prose h3 { font-size: 24px; margin: 36px 0 12px; }
.case-body-prose p { margin: 0 0 20px; }
.case-body-prose a { color: var(--accent-coral); text-decoration: underline; }

.case-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px;
  margin: 48px 0 0;
  border-top: 1px solid var(--ink-200);
  padding-top: 32px;
}
.case-meta-grid dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); margin: 0 0 8px; }
.case-meta-grid dd { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0; }

@media (max-width: 720px) {
  .cs-hero { padding: 48px 0 32px; }
  .cs-hero h1 { font-size: clamp(36px, 9vw, 56px); }
  .cs-filters {
    margin-top: 24px;
    flex-direction: column;
    align-items: flex-start;
  }
  .filter-group { gap: 16px; }

  .featured { padding: 48px 0; }
  .featured-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .featured-content h2 { font-size: 26px; margin-top: 12px; }
  .featured-content .body { font-size: 16px; margin-top: 16px; }
  .featured-stats {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 28px;
    padding-top: 24px;
  }
  .featured-stats .s { font-size: 28px; }

  .cs-grid-section { padding: 56px 0; }
  .cs-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .cs-card .body { padding: 24px; }
  .cs-card .stats { gap: 24px; flex-wrap: wrap; }

  .case-single-hero { padding: 32px 0 24px; }
  .case-single-photo { padding-bottom: 40px; }
  .case-single-stats { padding: 32px 0; }
  .case-single-stats-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .case-single-stats .s { font-size: 36px; }

  .case-single-body { padding: 56px 0; }
  .case-body-prose { font-size: 17px; line-height: 1.65; }
  .case-body-prose h2 { font-size: 24px; margin: 32px 0 12px; }
  .case-body-prose h3 { font-size: 20px; margin: 24px 0 10px; }
}