/* =====================================================================
   enhance.css — CREATIVE Lab visual & UX refresh (loaded last; overrides)
   Refined version of the existing green / academic look.
   Author: site refresh. Safe to remove to fully revert.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --cl-ink: #1f2a24;
  --cl-body: #33403a;
  --cl-forest: #2f3d34;
  --cl-forest-2: #424d3e;
  --cl-sage: #95a38a;
  --cl-sage-soft: #c6cfbe;
  --cl-cream: #f5f3ec;
  --cl-cream-2: #eae9e5;
  --cl-accent: #2a597e;
  --cl-accent-2: #33729b;
  --cl-gold: #b98a2e;
  --cl-line: rgba(31, 42, 36, 0.12);
  --cl-shadow: 0 10px 30px rgba(31, 42, 36, 0.10);
  --cl-shadow-lg: 0 18px 48px rgba(31, 42, 36, 0.16);
  --cl-radius: 16px;
  --cl-serif: "Fraunces", "Playfair Display", Georgia, serif;
  --cl-sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cl-maxw: 1200px;
}

/* ---------- Base typography ---------- */
body {
  font-family: var(--cl-sans);
  color: var(--cl-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, .heading, .modal-title, .title-research h2 {
  font-family: var(--cl-serif) !important;
  color: var(--cl-ink);
  letter-spacing: -0.01em;
}
p, li, span, a, .text { font-family: var(--cl-sans); }
p { line-height: 1.7; }
a { color: var(--cl-accent); }
a:hover { color: var(--cl-accent-2); }

/* ---------- Navbar ---------- */
.navbar {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 2px 14px rgba(31, 42, 36, 0.08);
  padding: 10px 22px !important;
}
.navbar .nav-link, .navbar a.nav-link, .navbar .navbar-nav a {
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: var(--cl-forest) !important;
  position: relative;
  padding: 8px 14px !important;
}
.navbar .navbar-nav a::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--cl-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.navbar .navbar-nav a:hover::after { transform: scaleX(1); }

/* ---------- Hero (research + general) ---------- */
.title-research {
  position: relative;
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
}
.title-research::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,28,22,0.55) 0%, rgba(20,28,22,0.35) 45%, rgba(20,28,22,0.65) 100%);
}
.title-research .centered { position: relative; z-index: 2; padding: 0 6vw; }
.title-research h2 {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: clamp(2.4rem, 5vw, 4.2rem) !important;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45) !important;
}
.title-research .topic, .title-research h6 {
  color: #f3efe4 !important;
  font-size: clamp(0.95rem, 1.6vw, 1.25rem) !important;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
  max-width: 820px; margin: 14px auto 0;
}

/* ---------- THEME CARDS: fix overflow + responsive 3+2 grid ---------- */
.research_themes {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible;
  flex: 1 1 300px !important;
  min-width: 260px !important;
  max-width: 360px !important;
  background: #fff !important;
  border: 1px solid var(--cl-line);
  border-top: 4px solid var(--cl-sage);
  border-radius: var(--cl-radius) !important;
  box-shadow: var(--cl-shadow);
  padding: 30px 26px 34px !important;
  margin: 12px !important;
  transition: transform .25s ease, box-shadow .25s ease;
  align-self: stretch;
}
.research_themes:hover { transform: translateY(-6px); box-shadow: var(--cl-shadow-lg); }
.research_themes .heading {
  font-size: 1.28rem !important;
  line-height: 1.25 !important;
  color: var(--cl-ink) !important;
  margin-bottom: 12px !important;
  min-height: 0 !important;
}
.research_themes .text {
  font-size: 0.98rem !important;
  line-height: 1.6 !important;
  color: var(--cl-body) !important;
  padding: 0 !important;
  left: 0 !important; right: 0 !important;
}

/* ---------- Research project cards ---------- */
.research_card {
  border-radius: var(--cl-radius) !important;
  box-shadow: var(--cl-shadow);
  overflow: hidden;
  background: #fff;
  min-height: 0 !important;
  transition: transform .25s ease, box-shadow .25s ease;
  border: 1px solid var(--cl-line);
}
.research_card:hover { transform: translateY(-6px); box-shadow: var(--cl-shadow-lg); }
.research_card .img_block, .research_card #svg_img {
  width: 100% !important; height: 220px !important; object-fit: cover !important;
  display: block;
}
.research-content { padding: 22px 24px 24px !important; }
.research-content .heading {
  font-size: 1.5rem !important; line-height: 1.2 !important; margin-bottom: 10px !important;
}
.research-content .text { color: var(--cl-body) !important; }

/* Buttons */
.btn-outline-info, .btn-outline-primary {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  padding: 6px 16px !important;
}
.btn-outline-info { color: var(--cl-accent) !important; border-color: var(--cl-accent) !important; }
.btn-outline-info:hover { background: var(--cl-accent) !important; color: #fff !important; }
.btn-outline-primary { color: var(--cl-forest) !important; border-color: var(--cl-forest) !important; }
.btn-outline-primary:hover { background: var(--cl-forest) !important; color: #fff !important; }

/* Section headings like "Projects & Publications" */
#research_projects h2, .container-fluid > div > h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  position: relative; display: inline-block;
}

/* ---------- Student / People cards ---------- */
.student-card {
  border-radius: var(--cl-radius) !important;
  border: 1px solid var(--cl-line) !important;
  box-shadow: var(--cl-shadow);
  background: #fff;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.student-card:hover { transform: translateY(-6px); box-shadow: var(--cl-shadow-lg); }
.student-ribbon {
  font-family: var(--cl-sans) !important;
  font-weight: 700; letter-spacing: .06em; font-size: .72rem;
  border-radius: 999px; padding: 4px 12px;
}
.student-ribbon.is-phd { background: var(--cl-accent) !important; color:#fff !important; }
.student-ribbon.is-ms  { background: var(--cl-sage) !important; color:#1f2a24 !important; }
.student-ribbon.is-bs  { background: var(--cl-gold) !important; color:#fff !important; }

/* ---------- Footer ---------- */
.footer {
  background: var(--cl-forest) !important;
  color: #e9ede6 !important;
}
.footer a { color: #cdd6c8 !important; }
.footer a:hover { color: #fff !important; }

/* =====================================================================
   RESPONSIVE / MOBILE
   ===================================================================== */
@media (max-width: 992px) {
  .research_card { width: 100% !important; max-width: 520px; }
  .research_card .img_block, .research_card #svg_img { height: 200px !important; }
}
@media (max-width: 768px) {
  .navbar { padding: 8px 14px !important; }
  .navbar .navbar-collapse {
    background: #fff; border-radius: 12px; margin-top: 8px;
    padding: 8px 6px; box-shadow: var(--cl-shadow);
  }
  .title-research { min-height: 52vh; }
  .title-research h2 { font-size: clamp(2rem, 8vw, 2.8rem) !important; }
  .research_themes { max-width: 100% !important; min-width: 0 !important; margin: 8px 0 !important; }
  .research-content .heading { font-size: 1.3rem !important; }
  .modal-dialog { margin: 12px !important; }
  h2 { font-size: 1.7rem !important; }
}
@media (max-width: 480px) {
  .title-research h2 { font-size: 2rem !important; }
  .research_card .img_block, .research_card #svg_img { height: 170px !important; }
}

/* =====================================================================
   PEOPLE PAGE
   ===================================================================== */
.people-page { background: var(--cl-cream); }
.people-hero {
  background: linear-gradient(135deg, var(--cl-forest) 0%, var(--cl-forest-2) 55%, #55634f 100%);
  color: #fff; padding: 90px 6vw 70px; text-align: center;
}
.people-hero h1 {
  font-family: var(--cl-serif); color: #fff;
  font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 0 0 14px; font-weight: 700;
}
.people-hero p { color: #e6ece2; max-width: 760px; margin: 0 auto; font-size: 1.08rem; line-height: 1.7; }

/* PI feature card */
.pi-section { max-width: 1000px; margin: -40px auto 0; padding: 0 5vw; position: relative; z-index: 3; }
.pi-card {
  display: flex; gap: 28px; align-items: center;
  background: #fff; border: 1px solid var(--cl-line); border-radius: 20px;
  box-shadow: var(--cl-shadow-lg); padding: 30px 32px;
}
.pi-avatar {
  flex: 0 0 auto; width: 120px; height: 120px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cl-accent), var(--cl-forest));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--cl-serif); font-size: 2.6rem; font-weight: 700;
  box-shadow: var(--cl-shadow); overflow: hidden;
}
.pi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pi-info h2 { font-family: var(--cl-serif); margin: 0 0 4px; font-size: 1.7rem; color: var(--cl-ink); }
.pi-role { font-weight: 700; color: var(--cl-accent); margin: 0 0 2px; }
.pi-affil { color: var(--cl-body); margin: 0 0 10px; font-size: .95rem; }
.pi-bio { color: var(--cl-body); margin: 0 0 14px; line-height: 1.7; }
.pi-links a {
  display: inline-block; margin-right: 14px; font-weight: 600; font-size: .92rem;
  color: var(--cl-forest); text-decoration: none;
}
.pi-links a:hover { color: var(--cl-accent); }

/* Team grid */
.team-section { max-width: var(--cl-maxw); margin: 0 auto; padding: 60px 5vw 90px; }
.team-title {
  font-family: var(--cl-serif); text-align: center; font-size: clamp(1.8rem, 3vw, 2.3rem);
  color: var(--cl-ink); margin: 0 0 8px;
}
.team-subtitle { text-align: center; color: var(--cl-body); margin: 0 0 40px; }
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 26px;
}
.team-grid .student-card {
  display: flex; flex-direction: column; text-align: center;
  padding: 26px 22px 24px; position: relative;
}
.team-grid .student-ribbon { position: absolute; top: 14px; right: 14px; }
.student-photo {
  width: 110px; height: 110px; margin: 8px auto 16px; border-radius: 50%;
  overflow: hidden; background: var(--cl-cream-2);
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--cl-sage-soft);
}
.student-photo img { width: 100%; height: 100%; object-fit: cover; }
.student-name { font-family: var(--cl-serif); font-size: 1.2rem; color: var(--cl-ink); margin: 0 0 2px; }
.student-title { color: var(--cl-accent); font-weight: 600; font-size: .9rem; margin: 0 0 12px; }
.student-bio {
  color: var(--cl-body); font-size: .9rem; line-height: 1.55; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 640px) {
  .pi-card { flex-direction: column; text-align: center; }
  .people-hero { padding: 70px 6vw 60px; }
}