/* ==========================================================================
   WEBSITE COMPONENT STYLES (Nano Lab Academic Format)
   ========================================================================== */

/* Navbar Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color);
  transition: all var(--transition-normal);
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
}

.logo-icon-box {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.25rem;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.brand-info {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.brand-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Nav Menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
  position: relative;
  padding: 0.4rem 0;
  transition: color var(--transition-fast);
}

.nav-link:hover, .nav-link.active {
  color: var(--accent-primary);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2.5px;
  background: var(--accent-primary);
  border-radius: 2px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all var(--transition-fast);
}

.icon-btn:hover {
  background: var(--border-color);
  color: var(--text-primary);
}

/* Hero Section */
.hero-section {
  position: relative;
  /* Fill the viewport below the 80px sticky header (+1px border) so the
     hero is all that's visible above the fold on a full-screen load. */
  min-height: calc(100vh - 81px);
  min-height: calc(100svh - 81px);
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
}

.hero-background-graphic {
  display: none;
}

.hero-grid {
  display: block;
  width: 100%;
}

.hero-container {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 850px;
  margin: 0 auto;
}

.hero-title {
  font-family: 'Poppins', var(--font-heading), sans-serif;
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: initial;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
}

.hero-description {
  font-family: 'Poppins', var(--font-body), sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.4;
  margin-bottom: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.hero-cta-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.hero-stats-row {
  display: flex;
  gap: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-color);
  width: 100%;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--accent-primary);
  line-height: 1;
}

.stat-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 0.25rem;
}

.hero-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

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

.hero-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.hero-image-card {
  display: none;
}

.hero-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem;
  background: linear-gradient(0deg, rgba(15, 23, 42, 0.9) 0%, transparent 100%);
  color: #ffffff;
  font-size: 0.85rem;
}

/* Square figure left, blurb right, sized so a ~110-word blurb fills the same
   height as the 380px figure. The pair is centred rather than stretched to the
   full container, which is what keeps both columns full instead of leaving a
   wide, thin block of text. */
.research-split {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 560px);
  gap: 2rem;
  align-items: center;
  justify-content: center;
  max-width: 972px;
  margin: 0 auto 2.5rem;
}

.research-split > * {
  min-width: 0;
}

/* The frame hugs the image, so a square figure leaves no dead space and is
   never cropped. */
.research-banner {
  margin: 0;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md, 0 8px 30px rgba(0, 0, 0, 0.12));
}

.research-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.research-banner-caption {
  padding: 0.85rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--bg-secondary);
  text-align: center;
}

/* Section Wrapper */
.section-padding {
  padding: 5rem 0;
}

.section-padding-sm {
  padding: 3rem 0;
}

.section-bg-alt {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

/* Right card: the intro blurb, vertically centred beside the figure. */
.research-intro {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-secondary);
}

.research-intro p {
  margin: 0 0 1em;
}

.research-intro p:last-child {
  margin-bottom: 0;
}

/* Narrow windows: stack, and keep the square figure from filling the width. */
@media (max-width: 900px) {
  .research-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .research-banner {
    max-width: 380px;
    margin-inline: auto;
  }

  .research-intro {
    font-size: 1.05rem;
  }
}

/* Match the width of the figure/blurb pair above so the section's edges line up. */
#research-grid {
  max-width: 972px;
  margin: 0 auto;
}

/* Research Cards */
.research-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.research-card:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
}

.research-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-primary);
}

/* No fixed height: the figure keeps its own aspect ratio, so nothing is
   cropped as the card narrows. */
.research-img-wrapper {
  position: relative;
  overflow: hidden;
}

.research-img-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--transition-slow);
}

.research-card:hover .research-img-wrapper img {
  transform: scale(1.06);
}

.research-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.research-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Title with a clickable arrow beside it (replaces the old Read Details button) */
.research-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.research-title {
  font-size: 1.35rem;
  margin: 0;
}

/* Affordance only — the whole card is the click target. */
.research-arrow {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--accent-primary);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  transition: all var(--transition-normal);
}

.research-card:hover .research-arrow,
.research-card:focus-visible .research-arrow {
  color: var(--bg-primary);
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: translateX(3px);
}

.research-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  flex-grow: 1;
}


/* Team Section */
.team-filter-bar {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid var(--border-color);
  transition: all var(--transition-fast);
}

.filter-btn:hover, .filter-btn.active {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
}

.team-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-primary);
}

.team-avatar-wrapper {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.25rem;
  border: 3px solid var(--accent-light);
  box-shadow: var(--shadow-sm);
}

.team-avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-name {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}

.team-role {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: 0.75rem;
}

.team-bio {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.team-socials {
  display: flex;
  gap: 0.75rem;
  margin-top: auto;
}

.team-social-link {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
}

.team-social-link:hover {
  background: var(--accent-primary);
  color: #ffffff;
}

/* Publications Section */
.pub-controls {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.search-input {
  flex-grow: 1;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition-fast);
}

.search-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* Scientific grouping subheaders in the publications list */
.pub-group-heading {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 2.5rem 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-color);
}

.pub-group-heading:first-child {
  margin-top: 0;
}

/* CV / Scholar links under the Publications section title */
.pub-external-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.pub-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.pub-card:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-md);
}

/* Optional publication figure + short blurb.
   `order: 2` moves the figure to the right of the text without touching the
   markup, so the text still comes first for screen readers. */
.pub-thumb {
  flex-shrink: 0;
  order: 2;
  /* The card is align-items: flex-start; centre just the figure against the text. */
  align-self: center;
}

.pub-thumb img {
  display: block;
  width: 390px;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.pub-content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
}

.pub-blurb {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .pub-thumb img {
    width: 300px;
  }
}

@media (max-width: 640px) {
  .pub-card {
    flex-direction: column;
  }
  .pub-thumb img {
    width: 100%;
    max-height: 320px;
  }
}

.pub-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pub-year {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-primary);
  font-size: 0.9rem;
}

.pub-journal {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.pub-title {
  font-size: 1.15rem;
  color: var(--text-primary);
  line-height: 1.4;
}

.pub-authors {
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.pub-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.pub-author-highlight {
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--accent-primary);
}


/* News List */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.news-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-primary);
}

.news-date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-primary);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.news-title {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}

.news-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Contact & Funding */
/* Single column while the lab-location card is commented out; restore
   `1fr 1fr` when it comes back. Full container width, matching the
   publication cards above it. */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

/* Banner image under the "Join the Lab!" title */
.contact-banner {
  margin: 0 0 2.5rem;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

.contact-banner img {
  display: block;
  width: 100%;
  height: auto;
  /* Slim 5.5:1 letterbox — ~217px tall at the 1192px max container width,
     chosen to sit level with the join card below it (~210px of content).
     Using a ratio rather than a pixel height means the crop is the same
     proportion at every window width instead of biting harder as it narrows.
     Source images should be 5.5:1 (e.g. 2400x436) to avoid any crop at all. */
  aspect-ratio: 5.5 / 1;
  object-fit: cover;
  object-position: center;
}

.contact-banner-caption {
  padding: 0.85rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--bg-secondary);
  text-align: center;
}

/* Card hugs its content; the two columns are centred against each other. */
.join-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Join card: instructions on the left, headshot + email button on the right */
.join-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.join-body > * {
  min-width: 0;
}

#join-text {
  font-size: 1.15rem;
}

#join-text p {
  margin: 0 0 0.9em;
}

#join-text p:last-child {
  margin-bottom: 0;
}

.join-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Sits inside the email button, left of the label */
.join-headshot {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  /* Light ring: the button behind it is a solid accent gradient. */
  border: 2px solid rgba(255, 255, 255, 0.65);
}

/* The label is a full sentence, so let it wrap and match the body text size
   of the instructions beside it. */
.join-btn {
  white-space: normal;
  text-align: left;
  justify-content: flex-start;
  font-size: 1rem;
  line-height: 1.7;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
}

@media (max-width: 900px) {
  .join-body {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.contact-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: 2.25rem;
  box-shadow: var(--shadow-md);
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.contact-info-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-light);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.funding-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  margin-top: 1.5rem;
}

.funding-badge {
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Footer */
.site-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 3.5rem 0 2rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2.5rem;
}

/* No top border/padding while the footer columns above are commented out. */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Byline stacked above the copyright, both left-aligned. */
.footer-identity {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.footer-byline {
  color: var(--text-secondary);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .hero-grid, .contact-grid {
    grid-template-columns: 1fr;
  }
  .hero-title {
    font-size: 2.5rem;
  }
  .nav-menu {
    display: none; /* Mobile menu toggled via script */
  }
  .news-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   RESEARCH DETAIL MODAL
   ========================================================================== */
.research-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.research-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.research-modal-card {
  position: relative;
  width: 600px;
  max-width: 90vw;
  height: auto;
  max-height: 85vh;
  z-index: 1001;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95);
  transition: transform var(--transition-normal);
}

.research-modal-backdrop.open .research-modal-card {
  transform: scale(1);
}

.research-modal-header {
  padding: 1.25rem 1.5rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.research-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.research-modal-close-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.research-modal-close-btn:hover {
  color: var(--text-primary);
}

.research-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
}

.research-modal-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
}

.research-modal-footer {
  padding: 1.25rem 1.5rem;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}