/* v50: centered research figures and scientific visualizations */

/* Keep research visuals centered within a consistent reading field. */
.page-project .project-visual,
.page-project .audit-accordion,
.page-project .cohort-flow,
.page-project .multiscale-flow,
.page-project .mapping-pipeline,
.page-project .ensemble-flow,
.page-project .project-stat-grid,
.page-project .project-figure-grid {
  width: min(1120px, calc(100% - 56px));
  margin-inline: auto;
}

/* Direct wide figures previously inherited margin: 0 from .project-figure,
   which overrode the centering supplied by .shell. */
.page-project figure.shell.project-figure,
.page-project figure.shell.project-figure-wide,
.page-project figure.shell.network-figure {
  width: min(1080px, calc(100% - 56px));
  margin-inline: auto;
}

.page-project figure.shell.project-figure-wide,
.page-project figure.shell.network-figure {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Figures inside split layouts stay centered in their own content column. */
.page-project .project-split-figure .project-figure {
  width: min(100%, 760px);
  margin-inline: auto;
  justify-self: center;
}

/* Two-up research plots remain balanced as a centered group. */
.page-project .project-figure-grid {
  gap: clamp(1rem, 2vw, 1.45rem);
}

.page-project .project-figure-grid .project-figure {
  width: 100%;
  margin-inline: auto;
}

/* Preserve plot quality and prevent any unintended crop or lateral offset. */
.page-project .project-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
  object-position: center center;
}

/* Keep captions visually tied to the centered figure. */
.page-project .project-figure figcaption {
  width: 100%;
  margin-inline: auto;
  padding: 1rem clamp(1rem, 2vw, 1.35rem) 1.2rem;
  border-top: 1px solid rgba(33, 113, 181, 0.10);
  text-align: left;
}

.page-project .figure-caption {
  width: min(920px, calc(100% - 56px));
  margin-inline: auto;
}

/* Add consistent breathing room around scientific graphics and diagrams. */
.page-project .project-figure-grid-top,
.page-project .project-visual,
.page-project .cohort-flow,
.page-project .multiscale-flow,
.page-project .mapping-pipeline,
.page-project .ensemble-flow,
.page-project .audit-accordion {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.page-project .project-figure,
.page-project .project-visual,
.page-project .audit-accordion {
  scroll-margin-top: 150px;
}

@media (max-width: 980px) {
  .page-project .project-visual,
  .page-project .audit-accordion,
  .page-project .cohort-flow,
  .page-project .multiscale-flow,
  .page-project .mapping-pipeline,
  .page-project .ensemble-flow,
  .page-project .project-stat-grid,
  .page-project .project-figure-grid,
  .page-project figure.shell.project-figure,
  .page-project figure.shell.project-figure-wide,
  .page-project figure.shell.network-figure,
  .page-project .figure-caption {
    width: min(100% - 40px, 1080px);
  }
}

@media (max-width: 760px) {
  .page-project .project-visual,
  .page-project .audit-accordion,
  .page-project .cohort-flow,
  .page-project .multiscale-flow,
  .page-project .mapping-pipeline,
  .page-project .ensemble-flow,
  .page-project .project-stat-grid,
  .page-project .project-figure-grid,
  .page-project figure.shell.project-figure,
  .page-project figure.shell.project-figure-wide,
  .page-project figure.shell.network-figure,
  .page-project .figure-caption {
    width: min(100% - 28px, 1080px);
  }

  .page-project .project-figure-grid.two-up {
    grid-template-columns: 1fr;
  }

  .page-project .project-figure figcaption {
    padding: .9rem .95rem 1.05rem;
  }
}