/*
 * Shared case-study grid.
 *
 * Breakpoint changes belong here. Individual case-study source files only
 * choose semantic content cells by using project-lead, topic-title--2,
 * topic-title--3, and topic-copy. This keeps each page free to use a
 * different editorial rhythm while the responsive grid remains consistent.
 */
.project {
  --project-row-padding: var(--site-section-gap);
  --project-column-gap: var(--site-column-gap);
  display: grid;
  grid-template-columns: repeat(var(--site-grid-columns), minmax(0, 1fr));
  column-gap: var(--project-column-gap);
  row-gap: var(--project-row-padding);
  align-items: start;
  width: 100%;
  margin-inline: auto;
  padding: var(--site-page-top) var(--site-page-gutter) var(--site-page-bottom);
}

.project-gallery { display: grid; grid-template-columns: subgrid; column-gap: var(--project-column-gap); }
.project-identity, .project-lead, .project-gallery, .topic-title, .topic-copy, .project-media { min-width: 0; }
.project-identity, .project-lead, .project-gallery, .topic-title, .topic-copy { grid-column: 1 / -1; }
h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, h3 { font-size: 1em; font-weight: 400; line-height: 1.5; }
.project-meta { display: grid; gap: 0; color: var(--project-muted); }
.project-meta dt, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.project-meta dd { margin: 0; }
.project-lead, .topic-copy { color: var(--project-muted); }

/* Media primitives remain shared, while gallery-specific classes stay with content. */
.project-media { grid-column: 1 / -1; display: grid; gap: var(--project-column-gap); justify-items: center; padding: 64px; background: var(--project-placeholder); }
.project-media--plain { padding: 0; background: transparent; }
.project-media--atlas-masonry { grid-template-columns: repeat(var(--gallery-columns, 2), minmax(0, 1fr)); column-gap: var(--gallery-column-gap, var(--project-column-gap)); row-gap: var(--gallery-row-gap, 0); justify-items: stretch; align-items: start; }
.project-media--atlas-masonry .gallery-column { display: grid; gap: var(--gallery-item-gap, 24px); min-width: 0; align-content: start; }
.project-media--atlas-masonry .project-figure, .project-media--atlas-masonry .project-image { width: 100%; max-width: none; }
.project-media--atlas-masonry .project-image { display: block; height: auto; }
.project-media--positioned-grid { --gallery-columns: 1; --gallery-column-gap: 0px; --gallery-row-gap: 32px; grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr)); column-gap: var(--gallery-column-gap); row-gap: var(--gallery-row-gap); justify-items: stretch; align-items: start; padding: 0; background: transparent; }
.project-media--positioned-grid .gallery-item, .project-media--positioned-grid .project-image { width: 100%; max-width: none; }
.project-media--positioned-grid .project-image { display: block; height: auto; }
.project-media--atlas-component-docs .gallery-item:nth-child(2), .project-media--atlas-tools .gallery-item { box-sizing: border-box; border: 1px solid #efefef; }
.project-hero { width: 100%; margin: 0; }
.project-hero img, .project-image { display: block; width: auto; max-width: 100%; height: auto; }
.project-hero img { width: 100%; }
.project-figure { width: auto; max-width: 100%; margin: 0; }
.placeholder { display: grid; place-items: center; min-height: 8rem; margin: 0; color: var(--project-ink); background: var(--project-placeholder); text-align: center; }
.placeholder--wide { aspect-ratio: 16 / 9; }

/* Page-specific placement and breakpoints are generated from
 * src/case-studies/layouts/*.mjs into public/css/case-study-layouts.css. */