/* Correll Laboratory — site-specific styles.
 *
 * The University of Notre Dame Web Theme (NDT4) supplies the design system:
 * colours, type, grid, header, footer, buttons, cards. This file only adds the
 * few patterns the theme has no component for (a dense publication list, the
 * alumni roster, art credits) and always builds them from theme custom
 * properties so light/dark mode and the brand palette stay intact.
 * Documentation: https://webtheme.nd.edu
 */

/* --- hero ---------------------------------------------------------------- */

/* A second image layered over the page header's own, so the hero can cross-fade
   between lab photographs. It sits below the theme's gradient (z-index 1) and is
   only ever created by app.js, so the markup and the LCP image stay untouched. */
.page-image .hero-layer {
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  transition: opacity 1.2s ease;
  width: 100%;
  z-index: 0;
}

.page-image .hero-layer.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .page-image .hero-layer {
    transition: none;
  }
}

/* --- publications ------------------------------------------------------- */

/* Muted text and neutral tiles have to be stated for both colour schemes. The
   theme's palette variables (--gray, --gray-extra-extra-light) are fixed values,
   not scheme-aware ones; the theme itself writes light-dark() for anything that has
   to follow prefers-color-scheme — see .caption/figcaption and .card-label in
   ndt.css. #555 on the dark page background (#091b34) measures 2.3:1. */


.pub-search {
  max-width: 34rem;
}

.pub-status:empty {
  display: none;
}

.pub-count {
  color: light-dark(var(--gray), var(--sky-blue-dark));
  font-family: var(--font-default);
  font-size: 1rem;
  font-weight: 400;
}

.pub-list > li + li {
  margin-block-start: 1.5rem;
}

/* Paper figures and diagrams are wildly different shapes, so show them whole on
   a neutral tile rather than cropping them to fill the card image area. */
.card--pub .card-image,
.card--figure .card-image {
  align-items: center;
  aspect-ratio: 4 / 3;
  background: light-dark(var(--gray-extra-extra-light), var(--brand-blue));
  display: flex;
  justify-content: center;
}

.card--pub .card-image img,
.card--figure .card-image img {
  height: 100%;
  object-fit: contain;
}

.card--figure .card-image {
  aspect-ratio: 3 / 2;
}

.card--pub .card-meta b {
  font-weight: 600;
}

.pub-more {
  font-style: italic;
}

.pub-year[hidden] {
  display: none;
}

/* Cards whose paper has no figure still need to reserve the space, so the grid rows
   and the horizontal list stay aligned — but an empty tinted block beside a paper
   with no figure reads as a broken image rather than as nothing, and in dark mode it
   was a pale rectangle on a dark page. It holds its size and shows no fill. */
.card-image--empty span {
  display: block;
  height: 100%;
}

/* Matching the selector above it, so "no fill" actually wins over the tile. */
.card--pub .card-image--empty,
.card--figure .card-image--empty {
  background: none;
}

.card--pub .card-image--empty {
  aspect-ratio: 4 / 3;
}

/* 22 years of anchors do not fit on one line: let them wrap rather than clip. */
.nav-anchor ul {
  flex-wrap: wrap;
}

/* --- people -------------------------------------------------------------- */

.alumni-list {
  columns: 18rem auto;
  column-gap: 2.5rem;
}

.alumni-list > li {
  break-inside: avoid;
  margin-block-end: 0.75rem;
}

.alumni-role {
  color: light-dark(var(--gray), var(--sky-blue-dark));
  display: block;
  font-size: 0.875rem;
}

/* --- art ----------------------------------------------------------------- */

.art-work .image,
.art-work .video--wrapper {
  margin-block: 1.5rem;
  max-width: 45rem;
}

.art-refs {
  color: light-dark(var(--gray), var(--sky-blue-dark));
  font-size: 0.875rem;
}