/* Shared project layout. Authoring guide: ../projects/LAYOUT.md. */
/* Layout tokens live with this component so cached global tokens cannot break it. */
.case-layout-page {
  --case-content-width: 768px;
  --case-column-gap: 24px;
  --case-column-small: 3fr;
  --case-column-large: 7fr;
  --case-section-gap: 80px;
  --case-media-gap: 32px;
  --case-block-gap: 20px;
  --case-text-gap: var(--case-block-gap);
  --case-heading-body-gap: 12px;
  --case-detail-gap: 6px;
  --case-label-gap: 20px;
  --case-media-radius: 8px;
  --case-portrait-width: 320px;
}
.case-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--case-content-width)) minmax(0, 1fr);
  gap: var(--case-column-gap);
  align-items: start;
  width: 100%;
  max-width: none;
  padding: var(--case-section-gap) var(--project-edge) var(--case-section-gap);
}
.case-layout .case-sidebar {
  grid-column: 1;
  position: sticky;
  top: var(--case-column-gap);
  max-height: calc(100dvh - 2 * var(--case-column-gap));
  overflow-y: auto;
  min-width: 0;
}
.case-back {
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking);
  display: inline-block;
  margin-bottom: var(--case-media-gap);
  color: var(--grey-300);
  text-decoration: none;
  font-size: var(--body-2-size);
  line-height: var(--body-2-line);
}
.case-layout .case-progress {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  background: transparent;
}
.case-layout .case-progress-item {
  display: block;
  text-decoration: none;
  overflow-wrap: anywhere;
  font-weight: var(--weight-medium);
  color: var(--grey-300);
  transition: color .2s var(--ease);
}
.case-layout .case-progress-item[aria-current="location"],
.case-layout .case-progress-item:hover,
.case-back:hover { color: var(--text); }
.case-layout .case-content { grid-column: 2; min-width: 0; width: 100%; max-width: var(--case-content-width); text-align: left; }
.case-layout .case-head { padding: 0; margin-bottom: 0; }
.case-layout .case-title { max-width: none; }
.case-layout .case-name-area { margin: 24px 0 0; }
.case-layout .case-name { max-width: 100%; object-fit: contain; object-position: left; }
.case-layout .case-cover { display: block; width: 100%; height: auto; border-radius: var(--case-media-radius); }
.case-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--case-column-gap); margin-top: 0; }
.case-layout .case-block:last-child { border-bottom: 0; }
.case-layout .case-step {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--case-block-gap);
  padding: 0;
  margin-top: 0;
  scroll-margin-top: var(--case-column-gap);
}
.case-inline-media { display: grid; gap: var(--case-column-gap); margin-top: 0; }
.case-inline-media img, .case-inline-media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--case-media-radius);
}
.case-inline-media video { aspect-ratio: 16 / 9; object-fit: contain; background: var(--grey-900); }
.case-layout video.case-cover { aspect-ratio: 16 / 9; object-fit: contain; background: var(--grey-900); }
.case-intro, .case-layout .case-preview { scroll-margin-top: var(--case-column-gap); }
.case-detail-block { display: flex; flex-direction: column; gap: var(--case-detail-gap); margin-top: 0; }
.case-inline-media--portrait img { max-width: var(--case-portrait-width); }
.case-detail-title {
  font-size: var(--body-1-size);
  line-height: var(--body-1-line);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 12px;
}
.case-layout .subtext-highlight { font-size: var(--body-2-size); line-height: var(--body-2-line); }
.case-note p { font-size: var(--title-3-size); line-height: var(--title-3-line); color: var(--text-dim); }
.case-layout .case-preview { margin-top: 0; padding: var(--case-media-gap); overflow: hidden; border-radius: var(--case-media-radius); }
.case-layout .case-preview-bg { width: 100%; height: 100%; object-fit: cover; }
/* Avoid clipping the reading column when the side rails no longer fit. */
@media (max-width: 1100px) {
  .case-layout { grid-template-columns: minmax(0, var(--case-content-width)); justify-content: center; padding-left: var(--gutter-sm); padding-right: var(--gutter-sm); }
  .case-layout .case-sidebar { display: none; }
  .case-layout .case-content { grid-column: 1; }
}
@media (min-width: 601px) and (max-width: 800px) {
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .case-facts { grid-template-columns: 1fr; }
  .case-layout .overview-outcome-num { font-size: var(--title-2-size); line-height: var(--title-2-line); }
  .case-layout .tw-matrix-row { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .case-layout .case-progress-item { transition: none; }
}

/* Each stack owns the space between its immediate children. Nested components
   retain their own internal layout; no project IDs or per-section offsets. */
.case-layout .case-content,
.case-layout .case-sections,
.case-layout .case-intro,
.case-layout .case-section-heading,
.case-layout .case-section-body,
.case-layout .case-subsection {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.case-layout .case-content,
.case-layout .case-sections { gap: var(--case-section-gap); }
.case-layout .case-intro,
.case-layout .case-subsection { gap: var(--case-text-gap); }
.case-layout .case-section-heading,
.case-layout .case-section-body { gap: var(--case-text-gap); }

/* Reset outer margins only where a stack now owns that spacing. */
.case-layout .case-step > *,
.case-layout .case-section-heading > *,
.case-layout .case-section-body > *,
.case-layout .case-subsection > *,
.case-layout .case-detail-block > * { margin-block: 0; }

.case-layout .subtext-row { gap: var(--case-media-gap); }
.case-layout .case-heading-body {
  display: flex;
  flex-direction: column;
  gap: var(--case-heading-body-gap);
  min-width: 0;
}
.case-layout .case-heading-body > * { margin-block: 0; }

/* Weighted columns are independent of the equal-width outcome text row. */
.case-layout .case-columns--weighted {
  display: grid;
  grid-template-columns: minmax(0, var(--case-column-small)) minmax(0, var(--case-column-large));
  gap: var(--case-column-gap);
  align-items: start;
}
.case-layout .case-columns--weighted > * { min-width: 0; }
.case-layout .case-columns--equal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.case-layout .case-inline-media--natural-height {
  grid-template-columns: var(--case-image-columns, minmax(0, 1fr));
  align-items: start;
}
.case-layout .case-inline-media--equal-height { align-items: stretch; }
.case-layout .case-inline-media--equal-height > img {
  height: 100%;
  object-fit: cover;
}
@media (max-width: 600px) {
  .case-layout .case-columns--equal { grid-template-columns: minmax(0, 1fr); }
  .case-layout .case-columns--weighted { grid-template-columns: minmax(0, 1fr); }
  .case-layout .case-inline-media--equal-height > img { height: auto; }
}