/* wp-content/themes/mosaic/assets/css/single-project.css */
/* ============================================================================
   Single project / case-study page (#MOS-117). Loaded only on `project`
   singulars (inc/enqueue.php). Composed from the design system — a calm,
   centred reading layout. The gradient hero is a placeholder until real
   imagery (MOS-124). Tokens from design-system.css.
   ============================================================================ */

.project {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-6) var(--space-9);
}

/* ----- Breadcrumb --------------------------------------------------------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.crumbs a {
  color: var(--ink-500);
  transition: color var(--dur) var(--ease);
}

.crumbs a:hover {
  color: var(--sage-600);
}

.crumbs-sep {
  color: var(--ink-300);
}

/* ----- Gradient hero (placeholder → real image at MOS-124) ---------------- */
.project-hero {
  position: relative;
  aspect-ratio: 16 / 8;
  margin: var(--space-5) 0 var(--space-6);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.project-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- Body --------------------------------------------------------------- */
.project-meta {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage-600);
}

.project-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink-900);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

.project-story {
  color: var(--ink-700);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.project-story p {
  margin: 0 0 1.2em;
}

.project-story p:last-child {
  margin-bottom: 0;
}

.project-cta {
  margin: var(--space-6) 0 0;
}

/* ----- Back to work ------------------------------------------------------- */
.project-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-7);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  color: var(--sage-600);
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}

.project-back:hover {
  gap: 12px;
  color: var(--sage-700);
}

.project-back svg {
  transform: rotate(180deg); /* arrow-right → points back (left) */
}

@media (prefers-reduced-motion: reduce) {
  .crumbs a,
  .project-back {
    transition: none;
  }
}