/* Follow-up refinements to the flat site redesign. */

:root {
  --flat-content-max: 1100px;
  --flat-profile-width: 240px;
  --flat-column-gap: 48px;
  --flat-mobile-edge: 22px;
}

/* Keep navigation and page content on the same centered visual axis. */
.top-nav-inner {
  max-width: var(--flat-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Homepage: centered fixed reading width modeled on the supplied reference. */
.home-flat-shell {
  width: calc(100% - (2 * var(--flat-mobile-edge))) !important;
  max-width: var(--flat-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  grid-template-columns: var(--flat-profile-width) minmax(0, 1fr) !important;
  gap: var(--flat-column-gap) !important;
}

.home-flat-main {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.home-flat-main > p,
.home-flat-main > ul,
.home-flat-main > ol,
.home-flat-main > h1,
.home-flat-main > h2,
.home-flat-main > h3,
.home-research-list {
  max-width: 100% !important;
}

/* Standard pages use the same centered width as the homepage/reference. */
.site-shell.page-shell,
.page-shell {
  width: calc(100% - (2 * var(--flat-mobile-edge))) !important;
  max-width: var(--flat-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-content-card,
.research-page,
.research-grid-page,
.tools-page,
.publications {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Homepage research-interest bands. */
.home-research-list {
  gap: 18px !important;
}

.home-research-item {
  grid-template-columns: 215px minmax(0, 1fr) !important;
  gap: 24px !important;
  min-height: 145px !important;
  padding: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.home-research-image-wrap {
  padding: 7px !important;
}

.home-research-image {
  min-height: 0 !important;
  max-height: 118px !important;
}

.home-research-copy {
  min-width: 0 !important;
  padding: 8px 18px 8px 0 !important;
}

.home-research-copy h3 {
  margin-bottom: 8px !important;
  font-size: 1.42rem !important;
}

.home-research-copy p {
  line-height: 1.55 !important;
  overflow-wrap: anywhere;
}

/* Research page: approved flat full-width bands inside centered site column. */
.research-grid {
  width: 100% !important;
  grid-template-columns: 1fr !important;
  gap: 22px !important;
}

.research-grid-card {
  width: 100% !important;
  background: #e5edf1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.research-grid-card-body {
  display: grid !important;
  grid-template-columns: 245px minmax(0, 1fr) !important;
  column-gap: 30px !important;
  row-gap: 8px !important;
  padding: 18px !important;
  box-sizing: border-box !important;
}

.research-grid-card-body > .research-grid-image {
  grid-column: 1 !important;
  grid-row: 1 / span 8 !important;
  margin: 0 !important;
  padding: 8px !important;
  align-self: start !important;
  background: #f7f9fa !important;
  border: 0 !important;
}

.research-grid-image img {
  width: 100% !important;
  height: auto !important;
  max-height: 210px !important;
  object-fit: contain !important;
}

.research-grid-card-body > h2,
.research-grid-card-body > .research-grid-section,
.research-grid-card-body > .research-publications-link {
  grid-column: 2 !important;
  min-width: 0 !important;
}

.page-content-card .research-grid-card h2 {
  margin: 2px 0 8px !important;
  font-size: 1.55rem !important;
}

.research-grid-section {
  margin-top: 8px !important;
}

.research-grid-section h3 {
  margin-bottom: 4px !important;
}

.research-publications-link {
  margin-top: 10px !important;
  padding-top: 10px !important;
}

@media (max-width: 1180px) {
  .top-nav-inner {
    width: calc(100% - 44px) !important;
  }

  .home-flat-shell,
  .site-shell.page-shell,
  .page-shell {
    width: calc(100% - 44px) !important;
  }
}

@media (max-width: 900px) {
  .home-flat-shell {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
}

@media (max-width: 700px) {
  .top-nav-inner,
  .home-flat-shell,
  .site-shell.page-shell,
  .page-shell {
    width: calc(100% - 32px) !important;
  }

  .home-research-item,
  .research-grid-card-body {
    grid-template-columns: 1fr !important;
  }

  .home-research-image {
    max-height: 180px !important;
  }

  .home-research-copy {
    padding: 6px 8px 8px !important;
  }

  .research-grid-card-body > h2,
  .research-grid-card-body > .research-grid-section,
  .research-grid-card-body > .research-publications-link,
  .research-grid-card-body > .research-grid-image {
    grid-column: 1 !important;
  }

  .research-grid-card-body > .research-grid-image {
    grid-row: auto !important;
  }
}