/* ============================================================
   case-study.css - one stylesheet shared by all five case pages
   under /case-studies/ (dental-cobalt-chrome-prosthesis,
   bent-stainless-tube, weld-joint-automotive-part, watch-cases,
   custom-alloy-electrolyte). Layout values mirror the Figma
   "SPP - Case Study (Dental)" frame (node 593:2); the other four
   pages reuse the same template with [Placeholder] copy until the
   client delivers text. Only styles not covered by the shared
   classes (tokens.css/base.css/components.css) live here.
   Prefixed "cs-" to avoid collisions.
   Page map: breadcrumb > hero > full-width media > overview with
   specs sidebar > 3 story blocks > prev/next nav > CTA band.
   How to add a case study: copy an existing case folder, update the
   copy and specs, then re-link the prev/next chain (see the Next
   case navigation note below); no CSS changes needed.
   ============================================================ */

/* ============================================================
   Breadcrumb
   ============================================================ */
.cs-breadcrumb {
  padding-top: var(--space-7); /* 28px, sits just under the header */
}
.cs-breadcrumb__row {
  display: flex;
  align-items: center;
  gap: var(--space-3); /* 12px */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
}
.cs-breadcrumb__link {
  color: var(--accent);
  transition: color 150ms ease;
}
.cs-breadcrumb__link:hover {
  color: var(--accent-hover);
}
.cs-breadcrumb__sep {
  color: var(--text-muted);
}
.cs-breadcrumb__current {
  color: var(--text-secondary);
}

/* ============================================================
   Hero
   ============================================================ */
.cs-hero {
  padding-top: var(--space-10); /* 48px */
  padding-bottom: var(--space-14); /* 64px */
}
.cs-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* 20px */
  align-items: flex-start;
}
/* Uppercase eyebrow row, e.g. "CASE STUDY · MEDICAL · COBALT-CHROME".
   Set in Inter (--font-body); it was mono before IBM Plex Mono was
   removed sitewide. The dots are separate .cs-hero__eyebrow-dot spans. */
.cs-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
}
.cs-hero__eyebrow-item {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cs-hero__eyebrow-item--accent {
  color: var(--accent);
}
.cs-hero__eyebrow-dot {
  color: var(--text-muted);
}
.cs-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 54px;
  line-height: 1.1;
  letter-spacing: -1.4px;
  color: var(--text-primary);
  max-width: 820px;
}
.cs-hero__intro {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 820px;
}

/* ============================================================
   Hero media (full-width placeholder)
   The .img-placeholder slot with an IMG/... (replace) label; swap it
   for a real <img> in each case page once photography arrives.
   ============================================================ */
.cs-hero-media {
  padding-bottom: var(--space-18); /* 80px */
}
.cs-hero-media__img {
  height: 560px;
  width: 100%;
  border-radius: var(--radius-2xl);
}
/* Real photo fills the 560px slot; the placeholder box keeps the same size.
   border-radius clips the raster since the img carries the same class. */
img.cs-hero-media__img {
  display: block;
  object-fit: cover;
}

/* ============================================================
   "In preparation" notice
   Shown on case pages whose full write-up is not ready yet, in place of the
   Overview / Specifications / Story sections. Remove this block once every
   case page has real content.
   ============================================================ */
.cs-inprep {
  padding-block: var(--space-18); /* 80px */
}
.cs-inprep__inner {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5); /* 20px */
}
.cs-inprep__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}
.cs-inprep__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ============================================================
   Overview (copy + specs sidebar)
   ============================================================ */
.cs-overview {
  padding-block: var(--space-18); /* 80px */
}
.cs-overview__row {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-18); /* 80px */
  align-items: start;
}
.cs-overview__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.cs-overview__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}
.cs-overview__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Specs sidebar card: the light card (--bg-surface) in the right
   column of the overview grid; it stacks under the copy below 1024px.
   How to edit: each fact is a .cs-spec (uppercase label + value) in
   the page HTML; rows separate themselves via the border-top rule
   below, so just add or remove .cs-spec blocks. */
.cs-specs {
  background: var(--bg-surface);
  border-radius: var(--radius-2xl);
  padding: var(--space-7); /* 28px */
  display: flex;
  flex-direction: column;
}
.cs-specs__list {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-2); /* 8px */
}
.cs-spec {
  display: flex;
  flex-direction: column;
  gap: var(--space-1); /* 4px */
  padding-block: var(--space-4); /* 16px */
}
.cs-spec + .cs-spec {
  border-top: 1px solid var(--border);
}
.cs-spec__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cs-spec__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--text-primary);
}

/* ============================================================
   Story (three alternating blocks)
   ============================================================ */
.cs-story {
  background: var(--bg-surface);
}
.cs-story__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16); /* 72px */
}
.cs-story-block {
  display: grid;
  grid-template-columns: 1fr 520px; /* text | media */
  gap: var(--space-16); /* 72px */
  align-items: center;
}
.cs-story-block--reverse {
  grid-template-columns: 520px 1fr; /* media | text */
}
.cs-story-block--reverse .cs-story-block__media {
  order: -1;
}
.cs-story-block__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
/* Kicker row. Kickers read "The challenge" / "The process" /
   "The result" with NO 01/02/03 numbering: the numbers existed once
   and were deliberately removed (commit c002e11), do not re-add a
   number span here or in the HTML. */
.cs-story-block__top {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--accent);
}
.cs-story-block__kicker {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cs-story-block__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}
.cs-story-block__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.cs-story-block__media .img-placeholder {
  height: 400px;
  width: 100%;
  border-radius: var(--radius-2xl);
}

/* ============================================================
   Next case navigation (prev left, next right)
   The five case pages form a wrap-around chain via hard-coded
   relative hrefs in each page's HTML:
   dental-cobalt-chrome-prosthesis > bent-stainless-tube >
   weld-joint-automotive-part > watch-cases > custom-alloy-electrolyte
   > back to dental. Adding or removing a case means re-linking BOTH
   neighbours so the loop stays closed.
   ============================================================ */
.cs-nextcase {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cs-nextcase__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-14); /* 64px */
}
.cs-nextcase__link {
  display: flex;
  flex-direction: column;
  gap: 6px; /* Figma gap between kicker and title */
}
.cs-nextcase__link--next {
  align-items: flex-end;
  text-align: right;
}
.cs-nextcase__kicker {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cs-nextcase__link--next .cs-nextcase__kicker {
  color: var(--accent);
}
.cs-nextcase__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--text-primary);
  transition: color 150ms ease;
}
.cs-nextcase__link:hover .cs-nextcase__title {
  color: var(--accent);
}

/* ============================================================
   CTA band
   ============================================================ */
.cs-cta {
  background: var(--bg-page);
  text-align: center;
}
.cs-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7); /* 28px */
}
.cs-cta__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--text-primary);
  max-width: 820px;
}
.cs-cta__intro {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 724px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .cs-hero__title {
    font-size: clamp(34px, 7vw, 54px);
    letter-spacing: -1px;
  }
  .cs-overview__row {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .cs-story-block,
  .cs-story-block--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-9);
  }
  .cs-story-block--reverse .cs-story-block__media {
    order: 0;
  }
  .cs-hero-media__img {
    height: clamp(280px, 42vw, 560px);
  }
}

@media (max-width: 768px) {
  .cs-nextcase__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
  }
  .cs-nextcase__link--next {
    align-items: flex-start;
    text-align: left;
  }
  .cs-cta__title {
    font-size: clamp(28px, 8vw, 40px);
  }
  .cs-story-block__title {
    font-size: 26px;
  }
  .cs-overview__title {
    font-size: 28px;
  }
}