/* =========================
   Overrides (clean + centered + responsive)
   ========================= */

/* 1) CONTAINER: keep site nicely wide + symmetric padding */
.container {
  width: 100%;
  max-width: 1200px;
  padding-left: 24px;
  padding-right: 24px;
  margin-left: auto;
  margin-right: auto;
}

/* 2) SECTION SPACING + ALIGNMENT (stop template centering) */
#about, #publication, #people, #joinus, #news, #contact {
  padding-top: 72px;
  padding-bottom: 72px;
  text-align: left;
}

/* Keep section headings centered (optional aesthetic) */
#about h1, #publication h1, #people h1, #joinus h1, #news h1, #contact h1 {
  text-align: center;
  margin: 0 0 28px 0;
  font-weight: 700;
}

/* Subtle background bands for some sections */
#publication, #joinus, #contact {
  background: #f6f7fb;
}

/* 3) IMPORTANT: Stop Bootstrap grid offsets/gutters from “nudging” sections */
#about .row, #publication .row, #people .row, #joinus .row, #news .row, #contact .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#about [class*="col-"],
#publication [class*="col-"],
#people [class*="col-"],
#joinus [class*="col-"],
#news [class*="col-"],
#contact [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 4) CARD SURFACES: centered on the full page */
.about-info,
.publication-info,
.people-info,
.joinus-info,
.news-info,
.contact-info {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);

  max-width: 1180px;
  margin: 0 auto !important;     /* center the entire box */
  text-align: left;
  box-sizing: border-box;
}

/* 5) TYPOGRAPHY */
p {
  line-height: 1.7;
  letter-spacing: 0;
  color: rgba(0,0,0,0.78);
  margin: 0 0 12px 0;
}

/* Center the text column within cards (without center-aligning text) */
.about-info p,
.publication-info p,
.people-info p,
.joinus-info p,
.news-info p,
.contact-info p {
  max-width: 95ch;
  margin-left: auto;
  margin-right: auto;
}

/* Links */
a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* 6) PUBLICATIONS + NEWS: hover row polish */
.publication-info p,
.news-info p {
  padding: 10px 12px;
  border-radius: 10px;
  transition: transform 120ms ease, background 120ms ease;
}

.publication-info p:hover,
.news-info p:hover {
  background: rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

/* 7) PEOPLE: photo polish + stable float layout on desktop */
.people-info img {
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}

/* This is the key: keep each person starting on a new line.
   (Target headshots if you want to avoid affecting other left-aligned images.) */
#people img[align="left"][width="150"][height="200"] {
  float: left;
  margin: 0 20px 6px 0;  /* reduce vertical spacing */
  clear: both;
}

/* If you have any right-aligned images in People and want consistency */
#people img[align="right"] {
  float: right;
  margin: 0 0 6px 20px;
  clear: both;
}

/* 8) VIDEO SAFETY: ensure only hero video is fixed */
video {
  position: static;
  height: auto;
}

#home video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
}


/* 9) RESPONSIVE: stack headshots + keep everything visually centered */
@media (max-width: 992px) {

  /* Make card padding a bit tighter on smaller screens */
  .about-info,
  .publication-info,
  .people-info,
  .joinus-info,
  .news-info,
  .contact-info {
    padding: 22px;
  }

  /* Stack people photos so the text doesn’t wrap weirdly on MacBook/smaller widths */
  #people img[align="left"][width="150"][height="200"],
  #people img[align="right"] {
    float: none !important;
    display: block;
    margin: 0 auto 10px auto !important;
    clear: both;
  }

  /* Make text column use more of the card width on smaller screens */
  .about-info p,
  .publication-info p,
  .people-info p,
  .joinus-info p,
  .news-info p,
  .contact-info p {
    max-width: 100%;
  }
}

/* =========================
   Contact section layout
   ========================= */

#contact .contact-info {
  max-width: 1100px;
  margin: 0 auto;
}

/* Layout: map + text */
#contact .contact-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  margin-top: 24px;

  flex-direction: row;
  flex-wrap: nowrap;          /* ✅ NEW: prevents desktop wrapping/stacking */
  width: 100%;                /* ✅ NEW: stable sizing inside the card */
  box-sizing: border-box;     /* ✅ NEW: consistent width calculations */
}

/* Map sizing */
#contact .contact-map {
  width: 360px;          /* controls map size */
  max-width: 100%;
}

#contact .contact-map iframe {
  width: 100%;
  height: 260px;
  border: 0;
  border-radius: 12px;
}

/* Text block */
#contact .contact-text {
  max-width: 420px;
  text-align: left;
}

#contact .contact-text p {
  margin-bottom: 8px;
  line-height: 1.6;
}

/* Small screens: stack nicely */
@media (max-width: 768px) {
  #contact .contact-layout {
    flex-direction: column;
    flex-wrap: wrap;          /* ✅ NEW: makes stacking explicit */
    align-items: center;
    text-align: center;
  }

  #contact .contact-text {
    text-align: center;
  }
}

/* =========================
   THEME / COLORS
   ========================= */
:root {
  --accent-blue: #2f6fed;
  --accent-blue-soft: #eaf0ff;
  --accent-blue-muted: #5c78c9;
}

/* =========================
   COSMETIC POLISH
   ========================= */
.about-info,
.publication-info,
.people-info,
.joinus-info,
.news-info,
.contact-info {
  border-top: 4px solid var(--accent-blue);
  transition: box-shadow 160ms ease, transform 160ms ease;
}

/* ...rest of the cosmetic rules */