/* ==========================================================================
   Portfolio / case study page layout helpers.
   Values come from assets/css/tokens.css.
   ========================================================================== */

.case-study-hero {
  max-width: var(--container-wide);
}

.case-study-hero__title {
  font-size: var(--text-h1);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
}

@media (min-width: 1024px) {
  .case-study-hero__title {
    font-size: var(--text-h2);
  }
}

.case-study-hero__standfirst {
  max-width: var(--container-prose);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-ink-80);
  margin-bottom: var(--space-5);
}

.case-study-hero .stat-row {
  margin-top: var(--space-6);
}

.portfolio-footer-link {
  margin-top: var(--space-6);
}

.portfolio-footer-link a {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.portfolio-footer-link a:hover {
  color: var(--color-ink);
}

.case-artifact-follow {
  margin-top: var(--space-7);
}

/* Breadcrumb for case study pages */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--text-caption);
  color: var(--color-ink-60);
}

.breadcrumb a {
  color: var(--color-ink-60);
  transition: color var(--motion-fast) var(--easing-standard);
}

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

.breadcrumb__sep {
  color: var(--color-gray);
}

@media (prefers-reduced-motion: reduce) {
  .breadcrumb a {
    transition: none;
  }
}