/* =========================================
   BASIC RESET
========================================= */

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

/* =========================================
   RIO PEARLFISH COLOR THEME
========================================= */

:root {
  --rio-deep: #2f2415;
  --rio-body: #8c6a3b;
  --rio-gold: #f0b35a;
  --rio-gold-dark: #c58d39;
  --rio-teal: #2fbac4;
  --rio-teal-dark: #1f7c86;

  --bg: #f6f3ec;
  --panel: #ffffff;

  --text-dark: #18120b;
  --text-muted: #4b5563;

  --brand-dark: var(--rio-deep);
  --brand: var(--rio-body);

  --accent: var(--rio-teal);
  --accent-warm: var(--rio-gold);
}

/* =========================================
   BODY
========================================= */

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--bg);
}

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

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

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

.site-header {
  background: var(--brand-dark);
  color: #f9fafb;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 3px solid var(--accent);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.5rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.site-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.logo-main {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  line-height: 1.1;
}

.logo-sub {
  font-size: 0.8rem;
  opacity: 0.82;
  line-height: 1.1;
}

.nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.nav a {
  color: #e5e7eb;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
}

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

/* =========================================
   HERO VIDEO
========================================= */

.hero-video {
  position: relative;
  overflow: hidden;
  min-height: 72vh;
  display: flex;
  align-items: center;
}

.hero-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -2;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.56)),
    radial-gradient(circle at 25% 30%, rgba(47, 186, 196, 0.14), transparent 35%),
    radial-gradient(circle at 75% 70%, rgba(240, 179, 90, 0.10), transparent 32%);
  z-index: -1;
}

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

.hero-flex {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.hero-logo-panel {
  flex-shrink: 0;
  padding: 1rem 1.15rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(47, 186, 196, 0.08);
}

.hero-logo {
  display: block;
  width: 230px;
  height: auto;
  object-fit: contain;
}

.hero-text {
  max-width: 560px;
}

.hero-text h1 {
  font-size: clamp(2.2rem, 3vw + 1rem, 3.2rem);
  line-height: 1.08;
  margin-bottom: 1rem;
  color: #ffffff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.85);
}

.hero-subtitle {
  font-size: 1.08rem;
  max-width: 38rem;
  margin-bottom: 1.5rem;
  color: #e8edf0;
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.85);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* =========================================
   BUTTONS
========================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.35rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn.primary {
  background: var(--brand);
  color: #fff;
}

.btn.primary:hover {
  background: var(--brand-dark);
}

.btn.secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
  border-color: rgba(47, 186, 196, 0.5);
}

.btn.secondary:hover {
  background: rgba(47, 186, 196, 0.12);
}

/* =========================================
   SECTIONS
========================================= */

.section {
  padding: 3.5rem 0;
}

.section-alt {
  background: #ece4d7;
}

.section h2 {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
}

.section-intro {
  max-width: 40rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

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

.card-grid {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}

.card {
  background: var(--panel);
  border-radius: 1rem;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 4px 10px rgba(47, 36, 21, 0.14);
}

.card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}

.card p {
  color: #4b5563;
  font-size: 0.95rem;
}

.card .tagline {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-style: italic;
  color: #6b7280;
}

/* =========================================
   PEOPLE
========================================= */

.people-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.person-card h3 {
  margin-bottom: 0.2rem;
}

.person-role {
  font-size: 0.9rem;
  color: #6b7280;
  margin-bottom: 0.6rem;
}

.person-contact a {
  font-size: 0.9rem;
}


/* =========================================
   PEOPLE SLIDESHOW
========================================= */

.person-card-with-slideshow {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.person-copy {
  display: flex;
  flex-direction: column;
}

.person-slideshow {
  margin-top: 0.25rem;
  border: 1px solid rgba(47, 36, 21, 0.08);
  box-shadow: none;
}

.person-slideshow .slideshow-frame {
  height: 300px;
  min-height: 240px;
  background:
    radial-gradient(circle at 25% 20%, rgba(47, 186, 196, 0.10), transparent 35%),
    radial-gradient(circle at 80% 75%, rgba(240, 179, 90, 0.12), transparent 35%),
    #f1eadf;
}

.person-slideshow .slideshow-frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transform: translate(-50%, -50%);
}

.person-slideshow .slideshow-caption {
  min-height: auto;
}

@media (min-width: 768px) {
  .people-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .person-card-with-slideshow {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1.05fr);
    align-items: center;
  }

  .person-slideshow .slideshow-frame {
    height: 340px;
  }
}

/* =========================================
   PUBLICATIONS
========================================= */

.pub-list {
  display: grid;
  gap: 1rem;
}

.pub-item {
  background: var(--panel);
  border-radius: 0.75rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--accent);
}

.pub-year {
  font-weight: 600;
  font-size: 0.9rem;
  color: #4b5563;
  margin-bottom: 0.2rem;
}

.pub-citation {
  font-size: 0.95rem;
  color: var(--text-dark);
}

.pub-citation a {
  color: var(--accent);
}

/* =========================================
   GALLERIES
========================================= */

.gallery-grid {
  display: grid;
  gap: 1.5rem;
}

.gallery-item {
  background: var(--panel);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(47, 36, 21, 0.16);
  display: flex;
  flex-direction: column;
}

.gallery-item img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.gallery-item figcaption {
  padding: 0.9rem 1rem 1rem;
}

.gallery-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.gallery-text {
  font-size: 0.9rem;
  color: #4b5563;
}


/* =========================================
   LABORATORY MODEL CARDS
   Uses contained images/slideshows so mixed photo sizes do not crop, stretch, or overlap.
========================================= */

#models .laboratory-model-grid {
  align-items: stretch;
}

#models .laboratory-model-card {
  height: 100%;
}

#models .laboratory-model-card > img,
#models .laboratory-model-slideshow {
  width: 100%;
  height: 240px;
  min-height: 220px;
  background:
    radial-gradient(circle at 25% 20%, rgba(47, 186, 196, 0.10), transparent 35%),
    radial-gradient(circle at 80% 75%, rgba(240, 179, 90, 0.12), transparent 35%),
    #f1eadf;
}

#models .laboratory-model-card > img {
  object-fit: contain;
  display: block;
}

#models .laboratory-model-slideshow img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

#models .laboratory-model-card figcaption {
  flex: 1;
}

@media (min-width: 768px) {
  #models .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #models .laboratory-model-card > img,
  #models .laboratory-model-slideshow {
    height: 260px;
  }
}

@media (min-width: 1000px) {
  #models .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #models .laboratory-model-card > img,
  #models .laboratory-model-slideshow {
    height: 240px;
  }
}

/* =========================================
   SLIDESHOWS
========================================= */

.slideshow-grid {
  display: grid;
  gap: 1.5rem;
}

.slideshow-card {
  background: var(--panel);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(47, 36, 21, 0.16);
}

.research-card-with-slideshow {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.research-card-with-slideshow .tagline {
  margin-bottom: 1rem;
}

.research-slideshow {
  margin-top: 0;
  border: 1px solid rgba(47, 36, 21, 0.08);
  box-shadow: none;
  flex: 0 0 auto;
}

.slideshow-frame {
  position: relative;
  width: 100%;
  height: 340px;
  min-height: 260px;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 20%, rgba(47, 186, 196, 0.10), transparent 35%),
    radial-gradient(circle at 80% 75%, rgba(240, 179, 90, 0.12), transparent 35%),
    #f1eadf;
}

.research-slideshow .slideshow-frame {
  height: 270px;
  min-height: 230px;
}

.slideshow-frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.9s ease;
}

.slideshow-frame img.is-active {
  opacity: 1;
}

.slideshow-caption {
  padding: 0.95rem 1rem 1.1rem;
}

.slideshow-caption h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.slideshow-caption p {
  font-size: 0.9rem;
  color: #4b5563;
}


#research .card-grid {
  align-items: stretch;
}

#research .card {
  min-height: 100%;
}

.research-copy {
  display: flex;
  flex-direction: column;
}

.research-copy h3 {
  margin-bottom: 0.6rem;
}

.research-copy .tagline {
  margin-top: 0.65rem;
}

.slideshow-caption {
  min-height: 5.6rem;
}

@media (min-width: 768px) {
  .research-card-with-slideshow {
    display: grid;
    grid-template-rows: 18.5rem auto;
    gap: 1rem;
  }

  .research-copy {
    min-height: 18.5rem;
  }

  .research-copy .tagline {
    margin-top: auto;
  }

  .research-slideshow {
    align-self: start;
    width: 100%;
  }

  .research-slideshow .slideshow-frame {
    height: 290px;
  }
}

@media (min-width: 1000px) {
  .research-card-with-slideshow {
    grid-template-rows: 19.25rem auto;
  }

  .research-copy {
    min-height: 19.25rem;
  }
}

/* =========================================
   FACILITY
========================================= */

.facility-card-with-slideshow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  overflow: hidden;
}

.facility-copy {
  min-width: 0;
}

.facility-copy h3 {
  margin-bottom: 0.6rem;
}

.facility-copy p + p {
  margin-top: 0.75rem;
}

.facility-slideshow {
  width: 100%;
  margin: 0;
  border: 1px solid rgba(47, 36, 21, 0.08);
  box-shadow: none;
}

.facility-slideshow .slideshow-frame {
  height: 330px;
  min-height: 280px;
  background:
    radial-gradient(circle at 25% 20%, rgba(47, 186, 196, 0.10), transparent 35%),
    radial-gradient(circle at 80% 75%, rgba(240, 179, 90, 0.12), transparent 35%),
    #f1eadf;
}

.facility-slideshow .slideshow-frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
  .facility-card-with-slideshow {
    grid-template-columns: minmax(0, 0.85fr) minmax(340px, 1.15fr);
    align-items: center;
  }

  .facility-slideshow .slideshow-frame {
    height: 360px;
  }
}

@media (max-width: 767px) {
  .facility-slideshow .slideshow-frame {
    height: 280px;
  }
}

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

.site-footer {
  background: var(--brand-dark);
  color: #e5e7eb;
  padding: 2.5rem 0 1.2rem;
  margin-top: 2rem;
}

.footer-grid {
  display: grid;
  gap: 1.5rem;
}

.footer-grid h3 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.footer-grid p,
.footer-links li {
  font-size: 0.9rem;
  color: #d1d5db;
}

.footer-links {
  list-style: none;
}

.footer-links a {
  color: #e5e7eb;
  text-decoration: none;
}

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

.footer-bottom {
  text-align: center;
  font-size: 0.8rem;
  color: #9ca3af;
  margin-top: 1.5rem;
}

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

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #research .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .slideshow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .facility-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .nav-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .nav {
    gap: 0.75rem;
  }

  .hero-flex {
    gap: 1.5rem;
  }

  .hero-logo {
    width: 190px;
  }
}

@media (max-width: 768px) {
  .site-logo {
    width: 32px;
    height: 32px;
  }

  .hero-video {
    min-height: 64vh;
  }

  .hero-flex {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  .hero-logo-panel {
    padding: 0.8rem 0.9rem;
  }

  .hero-logo {
    width: 150px;
  }

  .hero-text {
    max-width: 100%;
  }

  .hero-text h1 {
    font-size: clamp(1.9rem, 4vw + 1rem, 2.6rem);
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-actions {
    justify-content: center;
  }

  .slideshow-frame,
  .facility-slideshow .slideshow-frame {
    height: 260px;
  }
}


@media (max-width: 768px) {
  .slideshow-frame,
  .facility-slideshow .slideshow-frame {
    height: 260px;
  }
}


/* =========================================
   PEOPLE CARD FIX
   Keeps the people card/slideshow from overlapping and preserves image aspect ratios.
========================================= */

#people .people-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 920px;
  margin: 0 auto;
}

#people .person-card-with-slideshow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  overflow: hidden;
}

#people .person-copy,
#people .person-slideshow {
  min-width: 0;
}

#people .person-slideshow {
  width: 100%;
  margin: 0;
}

#people .person-slideshow .slideshow-frame {
  position: relative;
  width: 100%;
  height: 320px;
  min-height: 260px;
  overflow: hidden;
}

#people .person-slideshow .slideshow-frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
  #people .people-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #people .person-card-with-slideshow {
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    align-items: center;
  }

  #people .person-slideshow .slideshow-frame {
    height: 360px;
  }
}

@media (max-width: 767px) {
  #people .person-slideshow .slideshow-frame {
    height: 280px;
  }
}


/* =========================================
   PEOPLE SECTION UPDATE
   Multi-person slideshow cards without overlap
========================================= */

#people .people-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  max-width: none;
  margin: 0;
}

#people .person-card-with-slideshow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  min-height: 100%;
  overflow: hidden;
}

#people .person-copy,
#people .person-slideshow {
  min-width: 0;
}

#people .person-copy {
  display: flex;
  flex-direction: column;
}

#people .person-contact {
  margin-top: auto;
  padding-top: 0.4rem;
}

#people .person-slideshow {
  width: 100%;
  margin: 0;
  border: 1px solid rgba(47, 36, 21, 0.08);
  box-shadow: none;
}

#people .person-slideshow .slideshow-frame {
  position: relative;
  width: 100%;
  height: 320px;
  min-height: 250px;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 20%, rgba(47, 186, 196, 0.10), transparent 35%),
    radial-gradient(circle at 80% 75%, rgba(240, 179, 90, 0.12), transparent 35%),
    #f1eadf;
}

#people .person-slideshow .slideshow-frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

#people .person-slideshow .slideshow-caption {
  min-height: auto;
}

@media (min-width: 900px) {
  #people .people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #people .person-slideshow .slideshow-frame {
    height: 280px;
    min-height: 220px;
  }
}


/* =========================================
   PEOPLE PHOTO CARD CLEANUP
   Removes duplicate caption spacing after people slideshow captions were removed.
========================================= */

#people .person-slideshow {
  overflow: hidden;
}

#people .person-slideshow .slideshow-frame {
  border-radius: 1rem;
}


/* =========================================
   FACILITY PHOTO CARD CLEANUP
   Keeps image-only facility slideshow clean after redundant caption removal.
========================================= */

.facility-slideshow {
  overflow: hidden;
}

.facility-slideshow .slideshow-frame {
  border-radius: 0.9rem;
}


/* =========================================
   RESOURCES / KILLI-KITS
========================================= */

.resources-grid {
  align-items: stretch;
}

.resource-card-with-image {
  display: grid;
  gap: 1rem;
  overflow: hidden;
}

.resource-copy {
  min-width: 0;
}

.resource-image-card {
  margin: 0;
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid rgba(47, 36, 21, 0.08);
  background:
    radial-gradient(circle at 25% 20%, rgba(47, 186, 196, 0.10), transparent 35%),
    radial-gradient(circle at 80% 75%, rgba(240, 179, 90, 0.12), transparent 35%),
    #f1eadf;
}

.resource-image-frame {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
}

.resource-image-frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transform: translate(-50%, -50%);
}

@media (min-width: 900px) {
  .resources-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .resource-card-with-image {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr);
    align-items: center;
  }

  .resource-image-frame {
    height: 300px;
  }
}

@media (max-width: 767px) {
  .resource-image-frame {
    height: 230px;
  }
}


/* =========================================
   RESEARCH INTRO WIDTH
   Allows the short research intro to sit on one line on desktop-sized screens.
========================================= */

#research .section-intro {
  max-width: 56rem;
}

@media (max-width: 900px) {
  #research .section-intro {
    max-width: 40rem;
  }
}


/* =========================================
   DATA & CODE RESOURCE CARD IMAGE
========================================= */

.data-code-card .resource-image-frame {
  height: 230px;
}

@media (min-width: 900px) {
  .data-code-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .data-code-card .resource-image-frame {
    height: 220px;
  }
}


/* =========================================
   RESOURCE IMAGE SLIDESHOWS
========================================= */

.resource-slideshow-frame {
  position: relative;
}

.resource-slideshow-frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.9s ease;
}

.resource-slideshow-frame img.is-active {
  opacity: 1;
}

/* Keep this short intro on one line on normal desktop widths. */
@media (min-width: 1100px) {
  #research .section-intro {
    max-width: none;
    white-space: nowrap;
  }
}


/* =========================================
   FACILITY + RESOURCES ALIGNMENT TWEAKS
   Reduces extra top whitespace and aligns resource card headings.
========================================= */

.facility-card {
  align-items: center;
}

.facility-copy {
  align-self: center;
}

.facility-slideshow {
  align-self: center;
}

.facility-slideshow .slideshow-frame {
  height: 340px;
}

@media (min-width: 900px) {
  .facility-card {
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  }
}

.resources-grid {
  align-items: stretch;
}

.resources-grid > .card,
.resources-grid .resource-card-with-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.resources-grid .resource-card-with-image {
  display: grid;
  align-items: start;
  align-content: start;
}

.resources-grid .resource-copy h3,
.resources-grid > .card > h3 {
  margin-top: 0;
}

@media (min-width: 900px) {
  .resources-grid .resource-card-with-image {
    align-items: start;
  }

  .resources-grid .resource-image-card {
    align-self: start;
    margin-top: 0;
  }
}


/* =========================================
   FACILITY IMAGE POSITION FIX
   Anchors facility photos to the top of the frame so portrait/tall images
   do not leave a large blank band above the visible content.
========================================= */

.facility-slideshow .slideshow-frame img {
  top: 0;
  transform: translateX(-50%);
  max-height: none;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center top;
}

.facility-slideshow .slideshow-frame {
  display: block;
}


/* =========================================
   FACILITY SLIDESHOW FINAL COMPACT FIX
   The previous top-anchor fix still left empty bands because the frame
   itself was too tall for several facility photos. This keeps photos
   uncropped but makes the frame more compact and centers the card cleanly.
========================================= */

.facility-card {
  align-items: center;
}

.facility-slideshow {
  align-self: center;
  width: 100%;
}

.facility-slideshow .slideshow-frame {
  height: 260px;
  min-height: 220px;
  background:
    radial-gradient(circle at 25% 20%, rgba(47, 186, 196, 0.10), transparent 35%),
    radial-gradient(circle at 80% 75%, rgba(240, 179, 90, 0.12), transparent 35%),
    #f1eadf;
}

.facility-slideshow .slideshow-frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center center;
  transform: translate(-50%, -50%);
}

@media (min-width: 900px) {
  .facility-card {
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  }

  .facility-slideshow .slideshow-frame {
    height: 280px;
    min-height: 240px;
  }
}

@media (max-width: 767px) {
  .facility-slideshow .slideshow-frame {
    height: 240px;
    min-height: 210px;
  }
}


/* =========================================
   KILLI-KITS RESOURCE CARD ALIGNMENT
   Centers the Killi-Kits image beside the text and reduces empty vertical space.
========================================= */

@media (min-width: 900px) {
  .resources-grid .resource-card-with-image:not(.data-code-card) {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.9fr);
    align-items: center;
    align-content: center;
  }

  .resources-grid .resource-card-with-image:not(.data-code-card) .resource-copy {
    align-self: center;
  }

  .resources-grid .resource-card-with-image:not(.data-code-card) .resource-image-card {
    align-self: center;
    margin: 0;
  }

  .resources-grid .resource-card-with-image:not(.data-code-card) .resource-image-frame {
    height: 240px;
  }
}

.resources-grid .resource-card-with-image:not(.data-code-card) .resource-image-frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center center;
}


/* =========================================
   RESOURCE CARD TITLE ALIGNMENT
   Keeps Killi-Kits heading level with Data & Bioinformatics heading.
========================================= */

@media (min-width: 900px) {
  .resources-grid .resource-card-with-image:not(.data-code-card) {
    align-items: start;
    align-content: start;
  }

  .resources-grid .resource-card-with-image:not(.data-code-card) .resource-copy {
    align-self: start;
  }

  .resources-grid .resource-card-with-image:not(.data-code-card) .resource-image-card {
    align-self: center;
  }
}




/* =========================================
   JOIN INTRO WIDTH
   Matches the intro text width to the card area below it.
========================================= */

#join .section-intro {
  max-width: 100%;
  white-space: normal;
}


/* =========================================
   PEOPLE ROLE STACK
   Keeps multi-line roles compact in people cards.
========================================= */

.person-role + .person-role {
  margin-top: -0.35rem;
}


/* =========================================
   LAB ALUMNI
   Smaller thumbnail cards for former lab members.
========================================= */

.alumni-block {
  margin-top: 2rem;
}

.alumni-heading {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.alumni-grid {
  display: grid;
  gap: 1rem;
}

.alumni-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  background: var(--panel);
  border-radius: 1rem;
  padding: 0.85rem;
  box-shadow: 0 4px 10px rgba(47, 36, 21, 0.12);
  overflow: hidden;
}

.alumni-card img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  object-position: center center;
  border-radius: 0.75rem;
  background:
    radial-gradient(circle at 25% 20%, rgba(47, 186, 196, 0.10), transparent 35%),
    radial-gradient(circle at 80% 75%, rgba(240, 179, 90, 0.12), transparent 35%),
    #f1eadf;
  border: 1px solid rgba(47, 36, 21, 0.08);
}

.alumni-copy {
  min-width: 0;
}

.alumni-copy h4 {
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.alumni-copy p {
  color: #4b5563;
  font-size: 0.88rem;
  line-height: 1.4;
}

@media (min-width: 800px) {
  .alumni-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .alumni-card {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .alumni-card img {
    width: 80px;
    height: 80px;
  }
}