/* =============================
   GLOBAL + THEME
   ============================= */

:root {
  --bg: #05060a;
  --bg-alt: #0b0d16;
  --bg-card: #111421;
  --border-subtle: #1b2033;
  --text-main: #f5f7ff;
  --text-muted: #a0a4ba;
  --accent: #FFEB3B;               /* #00ffc8; */
  --accent-soft: rgba(0, 255, 200, 0.08);
  --accent-strong: #FFEB3B;     /*  #11e0a9; */
  --accent-bright: #FFEB3B;      /* #00ffc8; */
  --danger: #ff4e6a;

  --max-width: 1120px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.55);
  --shadow-subtle: 0 8px 24px rgba(0, 0, 0, 0.35);

  --transition-fast: 180ms ease-out;
  --transition-med: 220ms ease-out;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #12162a 0, #05060a 47%, #020308 100%);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* globally justify paragraphs & main body text */
p,
.hero-subtitle,
.section-subtitle,
.research-body,
.person-info-meta,
.pub-journal,
.pub-authors {
  text-align: justify;
}

/* =============================
   LAYOUT
   ============================= */

.page-shell {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* =============================
   NAVBAR
   ============================= */

header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px) saturate(160%);
  background: rgba(5, 6, 10, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #1c1903);
  box-shadow: 0 0 18px rgba(255, 255, 0, 0.2);
}

.nav-title-main {
  font-size: 1.68rem;
  font-weight: 700;
  color: #FFEB3B;
}

.nav-title-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-links a:hover {
  color: var(--accent);
}

.nav-links .active {
  color: var(--accent);
  font-weight: 600;
}

/* =============================
   HERO (with rotating image box)
   ============================= */

.hero {
   /* height: 200px; */
  padding: 40px 0 36px; /* same top space as sections */
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 28px;
  align-items: stretch;
}

.hero-kicker {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1.4px;
  color: var(--accent);
  margin-bottom: 12px;
}

.hero-title {
  font-size: 2.7rem;
  line-height: 1.22;
  margin-bottom: 16px;
  font-weight: 700;
}

.hero-title .accent {
  color: var(--accent);
}

.hero-subtitle {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 760px;
  margin-bottom: 20px;
  text-align: justify;
}

.hero-caption {
   text-align: justify;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.hero-overview {
  font-size: 0.96rem;
  color: var(--text-muted);
}

/* Buttons */

.btn-primary {
  background: var(--accent);
  color: #000;
  padding: 12px 22px;
  border-radius: var(--radius-lg);
  border: none;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--accent-strong);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 12px 22px;
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.btn-ghost:hover {
  background: var(--accent-soft);
}

/* Rotating image box */

.hero-rotator {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-subtle);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-rotator-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 500px;
  background: #ffffff;
  border: 2px solid #2f3550;
}

/* Two stacked images that cross-fade via opacity */
.hero-rotator-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.hero-rotator-image--visible {
  opacity: 1;
  z-index: 2;
}

.hero-rotator-image--hidden {
  opacity: 0;
  z-index: 1;
}

.hero-rotator-caption {
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* =============================
   SECTION HEADERS
   ============================= */

.section {
  padding: 40px 0 70px; /* same top offset as hero */
}

.section-header {
  margin-bottom: 30px;
}

.section-kicker {
  text-transform: uppercase;
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 1.6px;
  margin-bottom: 6px;
}

.section-title {
  font-size: 1.9rem;
  margin-bottom: 10px;
  font-weight: 700;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 700px;
}

/* =============================
   OVERVIEW CARD
   ============================= */

.overview-card {
  background: var(--bg-card);
  padding: 28px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-subtle);
  border: 1px solid var(--border-subtle);
  font-size: 1.05rem;
  color: var(--text-muted);
}

/* =============================
   RESEARCH PAGE
   ============================= */

.thrust-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.thrust-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr);
  gap: 28px;
  align-items: stretch;
}

.research-card {
  background: var(--bg-card);
  padding: 26px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-subtle);
  border: 1px solid var(--border-subtle);
}
/* === Research page tweaks === */

/* Vertically center content in thrust rows that request it */
.thrust-row.thrust-row-center {
  align-items: center;
}

/* Alternate card style for better visual contrast */
.research-card.alt {
  background: #1f2540;              /* a bit lighter/brighter than var(--bg-card) */
  border-color: var(--accent-soft); /* soft teal border tint */
}

/* Add spacing between paragraphs inside research cards */
.research-card p + p {
  margin-top: 0.7rem;
}

.research-tagline {
  color: var(--accent);
  font-size: 0.82rem;
  letter-spacing: 1.1px;
  margin-bottom: 6px;
}

.research-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 14px;
}

.research-body {
  color: var(--text-muted);
  line-height: 1.5;
}
.thrust-image {
  background: #0d111b;
  border-radius: var(--radius-xl);
  border: 2px #2c3248;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* ============================================
   PEOPLE PAGE — UNIFIED LAYOUT + 300×300 IMAGES
   ============================================ */

.person {
  display: flex;
  gap: 22px;
  margin-bottom: 32px;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.person-photo {
  flex: 0 0 250px;      /* <— THIS is the key fix */
  width: 250px;
  height: 250px;
  background: #0d111b;
  border-radius: 16px;
  border: 2px #30364e;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Text blocks */
.person-info-name {
  font-size: 1.35rem;
  font-weight: 600;
}

.person-info-role {
  color: var(--accent);
  font-size: 1rem;
  margin-bottom: 8px;
}

.person-info-meta {
  color: var(--text-muted);
  line-height: 1.45;
}

/* Group Photo Block */
.group-photo-frame {
  width: 100%;
  height: 480px;          /* Large and clean */
  border-radius: var(--radius-xl);
  border: 2px #2b3044;
  background: #0c1019;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.group-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.group-photo-caption {
  margin-top: 10px;
  font-size: 1rem;
  color: var(--text-muted);
}

/* Lists of names (UGs, Alumni, Visitors) */
.people-list {
  margin: 0;
  padding-left: 20px;
}

.people-list li {
  margin-bottom: 4px;
  color: var(--text-muted);
}

/* =============================
   FACILITIES
   ============================= */

.facility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}

.facility-card {
  background: var(--bg-card);
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  text-align: center;
  color: var(--text-muted);
}

.facility-image {
  width: 300px;
  height: 300px;
  background: #0d111b;
  border-radius: var(--radius-lg);
  border: 2px #30364e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

/* =============================
   PUBLICATIONS / NEWS / LINKS
   ============================= */

.pub-year {
  font-size: 1.3rem;
  margin: 28px 0 12px;
  font-weight: 600;
}

.pub-entry {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  padding: 18px;
  margin-bottom: 18px;
}
.pub-entry b:first-of-type {
   color: var(--accent-bright) !important;
}

.pub-title {
  font-weight: 700;
  margin-bottom: 6px;
  color: #FFEB3B;  /* #00ffc8; */
}

/* Two-column grid for Links page */
.links-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px; /* row, column gap */
}

/* Make link cards fill column nicely */
.links-grid .pub-entry {
  margin-bottom: 0; /* grid gap handles spacing */
}

/* =============================
   FOOTER
   ============================= */

footer {
  margin-top: auto;
  padding: 26px 0;
  text-align: center;
  color: #FFEB3B; /*  var(--text-muted); */
  font-size: 0.9rem;
}

/* =============================
   RESPONSIVE
   ============================= */

@media (max-width: 900px) {

  /* --- 1. HERO SECTION FIX (HOME) --- */
  .hero {
    height: auto !important;      /* allow it to grow */
    padding: 30px 0 30px;
    text-align: center;
  }

  .hero-grid {
    grid-template-columns: 1fr;   /* stack text + image */
    gap: 24px;
  }

  .hero-rotator {
    max-width: 420px;
    margin-top: 24px;
  }

  .hero-rotator-frame {
    height: auto !important;
    aspect-ratio: 4 / 3;          /* responsive shape */
    max-height: 360px;            /* optional safety */
  }

  .hero-rotator-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- 2. NAVIGATION FIX --- */
  .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .nav-links {
    flex-wrap: wrap;              /* allow multiple rows */
    gap: 12px 16px;
  }

  .nav-links a {
    padding: 6px 0;
  }

  /* --- 3. GENERAL IMAGE RESPONSIVENESS --- */
  img {
    max-width: 100%;
    height: auto;
  }

  /* --- 4. BIG IMAGES ELSEWHERE --- */
  .person-photo,
  .facility-image,
  .group-photo-frame {
    max-width: 100%;
    height: auto !important;
  }

  /* --- 5. RESEARCH PAGE: stack rows --- */
  .thrust-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .thrust-image {
    max-width: 420px;
    margin: 0 auto;
  }

  /* --- 6. PEOPLE PAGE: photo on top, text below --- */
  .person {
    flex-direction: column;       /* stack vertically */
    align-items: flex-start;
  }

  .person-photo {
    width: 180px;
    height: 180px;
    margin-bottom: 12px;
  }

  /* --- 7. PUBS PAGE: figure on top, text below --- */

  /* Override inline display:flex on the inner wrapper */
  .pub-entry > div {
    display: block !important;
  }

  /* Make the image block full-width and centered on mobile */
  .pub-entry > div > div:first-child {
    max-width: 100% !important;
    flex: none !important;
    margin: 0 auto 12px;
  }

 .links-grid {
    grid-template-columns: 1fr; /* single column on small screens */
  }
}