/* ==========================================================
   Strauss Lab — shared stylesheet
   MSU brand palette (brand.msu.edu/visual/color-palette):
     Spartan Green #18453B  text, headers, nav & footer background
     White         #FFFFFF  page background; text on green surfaces
     Kelly Green   #008208  links & interactive states on light surfaces
     Lime Green    #7BBD00  bold accent line & accents on dark green
     Sage Gray     #8C918D  neutral gray (logo swatch)
   ========================================================== */

/* Metropolis — self-hosted, SIL Open Font License (see fonts/OFL.txt).
   This is the typeface used across msu.edu. */
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/metropolis-400.woff2") format("woff2");
}
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/metropolis-500.woff2") format("woff2");
}
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/metropolis-600.woff2") format("woff2");
}
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/metropolis-700.woff2") format("woff2");
}
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/metropolis-800.woff2") format("woff2");
}

:root {
  --spartan: #18453B;       /* Spartan Green — text, headers, nav & footer bg */
  --bg: #FFFFFF;            /* White — page background */
  --on-dark: #FFFFFF;      /* White — text/icons on green surfaces */
  --accent: #008208;       /* Kelly Green — links & interactive on light bg */
  --accent-bright: #7BBD00; /* Lime Green — bold accent line & accents on dark green */
  --gray: #8C918D;         /* Sage Gray — neutral, harmonizes with Spartan green */
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--spartan);
  font-family: "Metropolis", "Trebuchet MS", sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
}

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  font-family: "Metropolis", "Trebuchet MS", sans-serif;
  color: var(--spartan);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.4rem; }

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* ---------- Layout ---------- */

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

main {
  padding: 2.5rem 0 4rem;
}

section + section {
  margin-top: 3rem;
}

/* ---------- Header / nav ---------- */

.site-header {
  background: var(--spartan);
}

.nav-inner {
  /* Share the content column's width and padding so the brand lines up with
     the page content instead of sitting hard left on wide monitors. */
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--on-dark);
  text-transform: uppercase;
  font-size: 1.5rem;
  text-decoration: none;
}

.brand:hover,
.brand:focus {
  text-decoration: none;
  color: var(--accent-bright);
}

/* Logo mark in the nav — white chip keeps the dark Spartan bar
   readable against the dark green nav background. */
.logo-mark {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: block;
  background: #fff;
  border-radius: 6px;
  padding: 3px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--on-dark);
  border-radius: 4px;
  color: var(--on-dark);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}

.nav-toggle:hover,
.nav-toggle:focus {
  border-color: var(--accent-bright);
  color: var(--accent-bright);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.4rem;
}

.site-nav a {
  color: var(--on-dark);
  font-size: 1.15rem;
}

.site-nav a:hover,
.site-nav a:focus {
  color: var(--accent-bright);
  text-decoration: none;
}

.site-nav a[aria-current="page"] {
  color: var(--accent-bright);
  border-bottom: 2px solid var(--accent-bright);
}

/* Wavy line divider below the nav, set against the green bar.
   External SVG (images/divider.svg) with palette colors baked in. */
.accent-line {
  height: 80px;
  background-color: var(--spartan);
  background-image: url("../images/divider.svg");
  background-repeat: no-repeat;
  /* Stretch to fit up to 1400px, then stop so the pattern never looks
     over-stretched on very wide screens. Centred, not left-aligned: the
     content column is centred, and a left-anchored band drifts away from it
     past ~1400px. The SVG's edge fades blend the ends into the green. */
  background-position: center;
  background-size: min(100%, 1400px) 100%;
}

/* ---------- Footer ---------- */

.site-footer {
  background-color: var(--spartan);
  /* Matching wavy line divider as a band across the top of the footer. */
  background-image: url("../images/footer_divider.svg");
  background-repeat: no-repeat;
  background-position: center top; /* centred to track the content column — see .accent-line */
  background-size: min(100%, 1400px) 80px;
  color: var(--on-dark);
  padding: 62px 0 1.5rem; /* < 80px band height, so content rises into the divider's lower transparent area */
  font-size: 0.95rem;
}

.footer-grid {
  display: flex;
  justify-content: flex-start;
  gap: 2rem 4rem;
  flex-wrap: wrap;
}

.footer-heading {
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.footer-address {
  font-style: normal; /* <address> defaults to italic */
  line-height: 1.5;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.footer-copyright {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.85rem;
}

.site-footer a {
  color: var(--on-dark);
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--accent-bright);
}

/* ---------- Placeholders ---------- */

.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed var(--accent);
  background: rgba(24, 69, 59, 0.05);
  color: var(--spartan);
  font-style: italic;
  padding: 1rem;
}

/* 16:9 for hero images / video embeds */
.placeholder--wide {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Square for headshots */
.placeholder--square {
  aspect-ratio: 1 / 1;
  width: 100%;
}

.placeholder--logo {
  width: 120px;
  height: 120px;
}

/* Bracketed text placeholders */
.ph-text {
  font-style: italic;
  opacity: 0.75;
}

/* ---------- Cards / grids ---------- */

.grid {
  display: grid;
  gap: 2rem;
}

.grid--people {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Four research themes: 2x2 at full width rather than 3-across-plus-orphan,
   which also keeps the card blurbs at a readable line length. */
.grid--themes {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Research theme photos. All four are 3:2, so honouring their native ratio
   keeps the grid uniform without cropping anything; object-fit is here to
   keep it uniform if a future photo comes in at a different ratio. Change
   aspect-ratio on this one rule to restyle all four cards at once. */
/* The theme photo is a second link to the same page as the card heading.
   Block so it doesn't pick up inline-level descender space under the image. */
.card__media-link {
  display: block;
}

.card__media {
  display: block;
  width: 100%;
  /* Required: the width/height attributes on the <img> land as presentational
     hints, so without this the height stays pinned at 640px and aspect-ratio
     below is ignored (it only sizes the box when height is auto). */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.card h3 {
  margin-top: 0.75rem;
}

/* Theme-card headings link to their theme page but stay green — amber is
   reserved for the "more" link below the blurb. */
.card h3 a {
  color: inherit;
  text-decoration: none;
}

.card h3 a:hover,
.card h3 a:focus {
  color: var(--accent);
}

.card__more {
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Question lists on research theme pages — a stack of bare headings reads
   too shouty in bold, so these sit as a quiet divided list instead. */
.questions h3 {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(24, 69, 59, 0.15);
}

.questions h3:first-of-type {
  padding-top: 0;
}

.questions h3:last-of-type {
  border-bottom: none;
}

/* ---------- People ---------- */

.people-group + .people-group {
  margin-top: 3rem;
}

/* Three across within each group. Fixed column count rather than auto-fill:
   the groups have 1-7 people, and auto-fill would give a two-person group two
   wide columns while a six-person group got three narrow ones, so the headshots
   would change size from section to section down the page. */
/* minmax(0, ...) rather than a bare 1fr: a bare 1fr will not shrink a track
   below its content's min-content width, and the placeholder boxes are wide
   enough to push the row past the viewport on a phone. */
.people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}

/* Name above the photo. The name comes first in the source too, so the reading
   order a screen reader follows matches what is on screen. */
.person {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.person__photo {
  width: 100%;
}

/* Real headshots come wrapped in <picture>, which carries the class above; the
   inner <img> has to fill the column and drop its height attribute so the
   1:1 crop from build-images.sh sets the height. */
.person__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.alumni-list {
  margin: 0;
  padding-left: 1.25rem;
}

.person__info h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
}

/* ---------- News ---------- */

/* A photo feed in masonry columns, newest first. Photos keep their native
   aspect ratio and pack against each other, so a tall portrait beside a short
   landscape leaves no gap.

   The columns are built by js/news-masonry.js, which puts each photo in the
   shortest column so the newest stays top-left. Deliberately NOT `columns: 2`:
   that fills one whole column before starting the next, which puts the
   second-newest photo below the newest and makes the feed look unsorted.

   Unstyled here on purpose — with no JS the figures stack in one column, which
   is taller but still in the right order. */
.news-photo {
  /* Overrides the <figure> default margin; the bottom margin is the gap
     between photos stacked in a column. */
  margin: 0 0 1.75rem;
}

/* Added by the script once it has built the columns. */
.news-gallery--columns {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.news-column {
  /* min-width lets a column shrink below the intrinsic width of its photos;
     without it the two columns overflow the container. */
  flex: 1 1 0;
  min-width: 0;
}

.news-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Several photos under a single caption. They stack at full width with a gap
   tight enough to read as one group rather than as separate items — the
   spacing between news items is 1.75rem, so this has to stay well under it. */
.news-photo--group picture {
  display: block;
}

.news-photo--group picture + picture {
  margin-top: 0.35rem;
}

.news-photo figcaption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

.news-caption-date {
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Publications ---------- */

.pub-list {
  margin: 0;
  padding-left: 1.25rem;
}

.pub-list li + li {
  margin-top: 0.9rem;
}

/* Journal cover sitting beside a related-publications list. Deliberately
   small — an accent next to the citations, not a figure in its own right. */
.pub-row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.pub-row__body {
  flex: 1 1 320px;
}

.pub-cover {
  flex: 0 0 150px;
  display: block;
}

.pub-cover img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.pub-item {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* Without this an <img> keeps its intrinsic width and spills out of the 280px
   column into the citation text beside it -- the grid track does not clip.
   Matches .pub-cover img and .news-photo img. The selector reaches through the
   <picture> and the optional <a> wrapper around it. */
.pub-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* Journal covers are photographed against white, so they need an edge to sit
   on; the data figures do not. */
.pub-item .pub-item__cover img {
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.pub-item + .pub-item {
  margin-top: 2.5rem;
}

.scholar-link {
  display: inline-block;
  border: 2px solid var(--accent);
  border-radius: 4px;
  padding: 0.5rem 1.25rem;
  font-size: 1.2rem;
}

.scholar-link:hover,
.scholar-link:focus {
  background: var(--accent);
  color: var(--on-dark);
  text-decoration: none;
}

/* ---------- Home ---------- */

/* The home hero uses the shared .intro-row pattern (see below) rather than
   classes of its own. It previously led with a large "STRAUSS LAB" wordmark,
   dropped because it duplicated the site header and took the horizontal space
   the featured photo needed to sit beside the text. */

/* White MSU wordmark, right side of the footer grid */
.footer-msu-logo {
  margin-left: auto;
  align-self: center;
  width: 240px;
  max-width: 100%;
  height: auto;
}

.home-logo {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  display: block;
}

/* Research section on the home page — the hero row above it carries the
   featured photo, so this heading marks the transition into research content. */
#research {
  scroll-margin-top: 1.5rem;
}

/* Big statement heading beside the lab name in the hero */
.statement-heading {
  font-size: 2.6rem;
  margin-top: 0;
}

/* ---------- Contact ---------- */

.contact-block {
  font-style: normal; /* address element default is italic */
}

/* ---------- Opportunities ---------- */

/* Recruitment-status callout — signature block at the top of the page.
   Uses the shared palette: kelly-green rule, faint green wash, lime dot. */
.status-banner {
  background: rgba(24, 69, 59, 0.05);
  border: 1px solid rgba(24, 69, 59, 0.15);
  border-left: 4px solid var(--accent);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 2.5rem;
}

.status-banner__tag {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.status-banner__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-bright);
  flex: 0 0 auto;
}

.status-banner p {
  margin: 0;
}

.jump-links {
  margin-top: 0.9rem;
  font-size: 1rem;
}

.jump-links a {
  margin-right: 1.25rem;
  white-space: nowrap;
}

/* Advisory asides and deadline metadata within opportunity sections */
.note {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--gray);
}

.deadline {
  font-size: 0.95rem;
  color: var(--accent);
}

/* Intro row — image sits to the left of the opening paragraph */
.intro-row {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.intro-row__figure {
  flex: 0 0 400px;
  width: 400px;
  /* Same 3:2 frame as the home-page theme cards. height:auto is load-bearing:
     without it the img's height attribute pins the box and aspect-ratio is
     ignored. See .card__media. */
  display: block;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Stacks the theme photo and any supporting figure into the left column.
   Owns the 400px width when present; .intro-row__figure then fills it. */
.intro-row__media {
  flex: 0 0 400px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-row__media .intro-row__figure {
  width: 100%;
}

/* Home hero only. The media column bleeds into the page's right margin so it
   can be much larger than the 400px the research pages use, while the text
   column keeps its place in the content grid and stays aligned with the nav
   brand (see .nav-inner). Media runs ~640px at a 1440 window and ~500px at
   1200, against 400px without the bleed.
   Two details worth keeping:
     min(0px, ...) so this never becomes a *positive* margin below 960px, where
     there is no margin left to bleed into.
     The 2rem gutter is deliberately wider than .container's 1.25rem padding:
     100vw counts the vertical scrollbar on browsers that reserve space for one,
     and the extra absorbs that rather than causing a horizontal scrollbar. */
.intro-row--bleed {
  margin-right: min(0px, calc(50% - 50vw + 2rem));
}

/* Text stops growing so the media takes all the bled width; 800px is the
   photo's own intrinsic size, past which it would only be upscaled. */
.intro-row--bleed .intro-row__body {
  flex: 0 1 488px;
}

.intro-row--bleed .intro-row__media {
  flex: 1 1 400px;
  max-width: 800px;
}

/* Below the container width there is nothing to bleed into, so fall back to the
   ordinary two-column row: same 400px media and same wrap behaviour as the
   research pages. */
@media (max-width: 960px) {
  .intro-row--bleed {
    margin-right: 0;
  }

  .intro-row--bleed .intro-row__media {
    max-width: 400px;
  }
}

.media-figure {
  margin: 0; /* <figure> default margin */
}

.media-figure img,
.media-figure video {
  display: block;
  width: 100%;
  height: auto;
}

/* Dark backdrop so the poster/first frame of a night clip doesn't sit on
   white while it loads. */
.media-figure video {
  background: #000;
}

.media-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.45;
}

.intro-row__body {
  flex: 1 1 320px;
}

.intro-row__body p {
  margin-top: 0;
}

/* ---------- Mobile ---------- */

@media (max-width: 700px) {
  .nav-toggle {
    display: block;
    margin-left: auto;
  }

  .site-nav {
    display: none;
    width: 100%;
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 0 0.75rem;
  }

  .site-nav li {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .site-nav a {
    display: block;
    padding: 0.65rem 0.25rem;
  }

  .site-nav a[aria-current="page"] {
    border-bottom: none;
  }

  .pub-item {
    grid-template-columns: 1fr;
  }

  /* One photo per row on mobile: two masonry columns at this width would make
     each photo too small to read. The script drops to a single column at the
     same breakpoint and puts the figures back in source order. */

  /* Two across rather than one: three would leave the headshots too small to
     read, but dropping to a single column is what made this page a long scroll
     in the first place. */
  .people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
  }

  .intro-row__figure {
    flex-basis: auto;
    width: 100%;
    max-width: 360px;
  }

  .intro-row__media {
    flex-basis: auto;
    width: 100%;
    max-width: 360px;
  }

  /* Repeated for the bleed variant: its own selectors are more specific than
     the rule above, so without this the home hero would keep the 400px cap
     here instead of dropping to 360px like every other page. */
  .intro-row--bleed .intro-row__media {
    flex-basis: auto;
    width: 100%;
    max-width: 360px;
  }

  .footer-msu-logo {
    margin: 0.5rem 0 0; /* full width row on mobile, aligned left with the rest */
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  .statement-heading { font-size: 2rem; }
}