/* All six V2 project details share this spacing contract. Project themes
   change colors, never the rhythm of images, captions, prose or page endings.
   The eight-column shell still owns the sidebar and outside page padding. */
.introduction[hidden],
#project-grid[hidden],
#case-study[hidden] { display: none; }

.case-study {
  --case-space-media: 12px;
  --case-space-caption: 12px;
  --case-space-paragraph: 16px;
  --case-space-column: 20px;
  --case-space-inset: 20px;
  --case-space-details: 24px;
  --case-space-section: 40px;
  --case-space-page-end: 100px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--case-space-inset) var(--case-space-column);
  /* This is the TOTAL trailing whitespace, including the shell's padding,
     not an extra inset stacked on top of the desktop/mobile page margin. */
  padding-bottom: calc(var(--case-space-page-end) - var(--page-padding));
  font: normal 400 14px/normal var(--font-sans);
  overflow-wrap: break-word;
}

.case-study h2,
.case-study h3,
.case-label {
  margin: 0;
  font: normal 400 20px/24px "Instrument Serif", "Noto Sans SC", serif;
  letter-spacing: -0.01em;
}

/* Figma 899-15885: a large title on the left, summary and role on the right.
   Keep 20px inside both divider lines; height hugs the current text, including
   the subsequent user-requested 14px sans-serif typography. */
#case-title {
  outline: none;
  font-size: 48px;
  line-height: 48px;
  letter-spacing: -0.02em;
}
.case-role-label, .case-label { color: var(--muted); }

.case-masthead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  padding: var(--case-space-inset) 0;
  border-block: 1px solid var(--line);
}

.case-details {
  display: grid;
  gap: var(--case-space-details);
  min-width: 0;
  font: normal 400 14px/normal var(--font-sans);
}
.case-summary, .case-role { margin: 0; }
.case-role-label { display: block; }

.case-body { grid-column: 1 / -1; display: grid; gap: var(--case-space-section); min-width: 0; }
.case-chapter { display: grid; gap: var(--case-space-caption); min-width: 0; }
.case-chapter-media { display: grid; gap: var(--case-space-media); min-width: 0; }
/* Preserve Studio 8's artwork ending inset without a separate closing divider. */
.case-study[data-project-theme="studio-8"] .case-body {
  padding-bottom: var(--case-space-inset);
}
.case-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--case-space-column);
  align-items: start;
  min-width: 0;
}
.case-copy-heading { min-width: 0; }
/* Chapter labels and titles use 22px leading; masthead and prose stay unchanged. */
.case-copy-heading > .case-label,
.case-copy-heading > h3 {
  line-height: 22px;
}
.case-prose { grid-column: 2; min-width: 0; margin: 0; }
.case-prose > p { margin: 0; }
/* Entry overlays are inserted between paragraphs. General siblings keep the
   same spacing before, during and after the line-by-line entrance. Hidden
   accessibility headings must not create space above the first paragraph. */
.case-prose > :is(p, h3, h4):not(.sr-only) ~ :is(p, h3, h4):not(.sr-only) {
  margin-top: var(--case-space-paragraph);
}
.case-prose strong { font-weight: inherit; }
.case-prose strong.case-emphasis { font-weight: 500; }
.case-prose > .case-prose-subtitle {
  margin: 0;
  font: inherit;
  font-weight: 500;
}
/* News keeps caption headings in the right-hand prose column. */
.case-prose > h3:not(.sr-only) {
  font: inherit;
  font-weight: 500;
  letter-spacing: inherit;
}

.case-media {
  position: relative;
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* Same inside stroke as the homepage; it never changes image dimensions. */
.case-media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 4%);
  pointer-events: none;
}

/* Keep the artwork frame, but let the opaque control rows cover its left/right
   strokes. Redraw only their outer horizontal edge, without changing size. */
.case-tabs-controls,
.case-flipper-controls { position: relative; z-index: 1; }
.case-tabs-controls::after,
.case-flipper-controls::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 4%);
  pointer-events: none;
}
.case-tabs-controls::after,
.case-flipper--controls-top > .case-flipper-controls::after {
  box-shadow: inset 0 1px 0 rgb(0 0 0 / 4%);
}

.case-hero img { width: 100%; height: 100%; object-fit: contain; }
.case-video video { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Actual exports retain their intrinsic ratio; never crop design-system text. */
.case-image { aspect-ratio: auto; }
.case-image img { width: 100%; height: auto; }
.case-media-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--case-space-media);
}
.case-media-pair .case-media { grid-column: auto; }
.case-media--square { aspect-ratio: 1; }
.case-media--landscape { aspect-ratio: 4 / 3; }

.case-placeholder-panels { display: flex; width: 100%; height: 100%; }
.case-placeholder-panel {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
.case-pending { font-size: inherit; }
.case-tone--blue { background: #eef6fb; }
.case-tone--light { background: #f5f6f7; }
.case-tone--dark { background: #20252b; color: #c4ccd3; }
.case-tone--navy { background: #0d244b; color: #c2cfe4; }

.case-metrics { grid-column: 1 / -1; border-block: 1px solid var(--line); padding: var(--case-space-inset) 0; }
.case-metrics dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--case-space-column); margin: 0; }
.case-metrics dl > div { display: flex; flex-direction: column; min-width: 0; }
.case-metrics dt { order: 1; margin-top: 0; font-size: 14px; color: inherit; }
.case-metrics dd { margin: 0; font: normal 400 48px/1 "Instrument Serif", "Noto Sans SC", serif; }
/* Trend icons reuse the flipper stroke and enter together with their number.
   The shaft aligns to the visible numeral bounds, not the full 48px line box. */
.case-metric-change { display: flex; align-items: center; gap: 8px; }
.case-metric-change > span { flex: none; }
.case-metric-change > svg {
  display: block;
  width: 24px;
  height: 48px;
  flex: none;
  color: inherit;
}
.case-metrics--inline { margin-top: var(--case-space-section); padding: 0; border: 0; }
.case-metrics--inline dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The OfficePLUS frame leaves the first quarter empty, then shows 3 metrics. */
.case-metrics--offset dl > div:first-child { grid-column: 2; }

@media (max-width: 760px) {
  .is-case-study .work-nav { margin-top: 0; }
  .case-study { --case-space-page-end: 40px; grid-template-columns: minmax(0, 1fr); }
  .case-masthead { grid-template-columns: minmax(0, 1fr); gap: var(--case-space-column); }
  .case-copy { grid-template-columns: minmax(0, 1fr); row-gap: var(--case-space-column); }
  .case-prose { grid-column: 1; }
  .case-metrics dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-metrics--offset dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-metrics--offset dl > div:first-child { grid-column: auto; }
}

@media (max-width: 480px) {
  .case-media-pair { grid-template-columns: minmax(0, 1fr); }
  .case-placeholder-panel { padding: 12px; }
  .case-metric-change { gap: 4px; }
}