/* ---------------------- General Body ---------------------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  color: #111;
  background: #ffffff;
  overflow-x: hidden;
  box-sizing: border-box;
}

body {
  padding-top: 220px;  /* space for fixed navbar */
}

/* ---------------------- Container ---------------------- */
.container {
  display: flex;
  flex-direction: column;
}

/* ---------------------- TOP NAVIGATION BAR ---------------------- */
.nav {
  position: fixed;
  top: 0;
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  padding: 20px 0;
  z-index: 1000;

  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;           /* removes any border */
  box-shadow: none;
}

.nav img {
  width: auto;           
  height: 120px;         
  max-width: 90%;        
  margin-bottom: 10px;
}

.nav p {
  margin: 0 0 20px 0;
  text-align: center;
  font-size: 0.95em;
  color: #555;
}

/* Navigation list */
.nav ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  margin: 0 18px;
}

.nav a {
  text-decoration: none;
  color: #0057b8;
  font-weight: 500;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav:hover a {
  opacity: 0.5;
}

.nav a:hover {
  opacity: 1;
  transform: scale(1.12);
}

.nav a.active {
  font-weight: 700;
  opacity: 1;
}

/* ---------------------- BOTTOM FOOTER ---------------------- */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  background: transparent;
  border-top: none;
  width: 100%;
  height: 220px;              /* controls image size */

  display: flex;
  align-items: center;        /* vertical centering */
  padding-left: 20px;

  z-index: 1000;
  box-sizing: border-box;
}

.footer img {
  height: 100%;   /* makes image proportionally bigger */
  width: auto;
  max-width: none; 
}

/* ---------------------- MAIN CONTENT (GLOBAL) ---------------------- */
main.content {
  display: block;               /* normal flow */
  margin: 0 auto;               /* horizontal centering */
  max-width: 900px;             /* keeps lines readable */
  padding: 40px 20px 40px 40px;
  box-sizing: border-box;       /* include padding in width */
  color: #111;                  /* dark text for readability */
  line-height: 1.3;             /* improves readability */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* clean journal style */
}

/* Optional: style headings consistently */
main.content h1, main.content h2, main.content h3 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 600;
}

/* Optional: paragraphs spacing */
main.content p {
  margin-bottom: 1em;
  text-align: left; /* align text to the top left */
}

.about-inner {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.3;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.about-inner h2 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin-bottom: 25px;
  color: #111;
  letter-spacing: 0.5px;
}

.about-inner p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.3;
  color: #333;
  margin-bottom: 20px;
}

.about-inner p strong {
  color: #0057b8; /* subtle highlight */
}
/* Limit width of all child blocks */
.content > * {
  max-width: 900px;
  width: 100%;
}

/* Headings */
.content h1,
.content h2 {
  margin-top: 0;
}

/* ---------------------- ABOUT PAGE ---------------------- */
.content.about {
  display: flex;
  align-items: center;
  justify-content: center; /* vertical centering */
  min-height: calc(100vh - 160px); /* full viewport minus navbar */
  padding: 200px 20px 40px 100px;
  flex-direction: column;
}

.about-inner {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.3;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.about-inner h2 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin-bottom: 25px;
  color: #111;
  letter-spacing: 0.5px;
}

.about-inner p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: #333;
  margin-bottom: 20px;
}

.about-inner p strong {
  color: #0057b8; /* subtle highlight */
}

/* ---------------------- PROFILE ---------------------- */
.profile {
  display: flex;
  flex-direction: row;
  margin: 0 auto 2.5rem auto;
  max-width: 900px;
  padding: 40px 20px;
  gap: 2rem;
  align-items: flex-start;   /* THIS is the key change */
}

.profile img {
  width: 170px;
  height: 170px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.profile div {
  max-width: 650px;
}


/* ---------------------- TEAM MEMBER (SMALL ENTRY) ---------------------- */

.member-entry {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 30px;
  max-width: 800px;
}

.member-entry img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 6px;
  align-items: flex-start;
}

.member-entry h3 {
  margin-top: 0;
  margin-bottom: 4px;
}

.section-spacing {
  margin-top: 60px;
}

/* ---------------------- MOBILE RESPONSIVENESS ---------------------- */
@media (max-width: 768px) {
  .nav {
    position: relative;
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
  }

  .content {
    padding: 20px;
    align-items: stretch;
  }

  .content > * {
    max-width: 100%;
  }

  .profile {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .profile img {
    margin-bottom: 1rem;
  }

  .about {
    min-height: auto;
    padding: 40px 15px;
  }
}

/* PEOPLE GRID LAYOUT */

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  max-width: 800px;
  margin: 0 auto;
  padding: 200px 20px 80px 20px;
  padding-bottom: 120px;
}

main.content,
.people-grid,
.people-wrapper {
  padding-bottom: 240px; /* must be ≥ footer height (220px) */
}
.person-card {
  text-align: center;
  padding: 10px 10px 20px 10px;
}

.person-card img {
  width: 160px;
  height: 160px;
  object-fit: cover;     /* crops instead of stretching */
  object-position: center;
  border-radius: 8px;
  display: block;
  margin: 0 auto 15px auto;
}

.person-card h3 {
  margin: 6px 0 4px 0;
  font-size: 1.05rem;
}

.person-card .role {
  font-weight: 600;
  color: #0057b8;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.person-card p {
  font-size: 0.92rem;
  line-height: 1.4;
  margin-bottom: 6px;
}

.people-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px 100px 20px;
}

.pi-card img {
  width: 180px;
  height: 180px;
  border-radius: 8px;
}

.person-card .summary {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #333;
}

/* ---------------------- PEOPLE STRUCTURE ---------------------- */

.people-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px 100px 20px;
}

/* PI centered alone */
.pi-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  justify-content: center;
  margin-bottom: 40px;
}

/* Postdoc grid */
.postdoc-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
}