/* =========================
   Home banner background
========================= */

.home-banner{
  padding: 48px 0 0;
  background-image: url("images/home-banner.jpg");
}

/* Home hero: extra bottom margin and subtle inset shadow */
.home-hero-card{
  margin-bottom: 72px;
  box-shadow:
    0 18px 50px rgba(15,23,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.15);
  background:
    radial-gradient(900px 380px at 20% 30%, rgba(200,16,46,0.10), transparent 55%),
    radial-gradient(900px 420px at 80% 40%, rgba(59,130,246,0.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* =========================
   Lab Introduction Section
========================= */
.lab-intro-section{
  background: #ffffff;
  padding: 64px 0 0;
}

.lab-intro-card{
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  border-left: 4px solid #c8102e;
  border-radius: 0 14px 14px 0;
  padding: 36px 40px;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 4px 12px rgba(15,23,42,0.03);
  display: flex;
  align-items: center;
  gap: 36px;
}

.lab-intro-logo{
  flex-shrink: 0;
}

.lab-intro-logo-img{
  display: block;
  width: 240px;
  height: auto;
  object-fit: contain;
}

.lab-intro-body{
  flex: 1;
}

.lab-intro-card p{
  font-size: 19px;
  line-height: 1.75;
  color: #374151;
  margin: 0;
}

@media (max-width: 680px){
  .lab-intro-card{
    flex-direction: column;
    align-items: center;
    padding: 28px 24px;
    gap: 20px;
  }
  .lab-intro-logo-img{
    width: 180px;
  }
}

/* =========================
   Research Focus Section
========================= */
.research-section{
  background: #f8fafc;
  padding: 64px 0 64px;
}

.research-section-header{
  margin-bottom: 48px;
}

.research-section-header h2{
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
  color: #0f172a;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
}

.research-section-header p{
  font-size: 17px;
  color: #64748b;
  margin: 0;
  max-width: 56ch;
}

/* =========================
   Research Card Grid
========================= */
.research-card-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* Center the last two cards when there's an odd count (5 cards) */
.research-card-grid .research-card-v2:nth-child(4){
  grid-column: 1 / 2;
}

.research-card-grid .research-card-v2:nth-child(5){
  grid-column: 2 / 3;
}

@media (max-width: 1000px){
  .research-card-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
  .research-card-grid .research-card-v2:nth-child(4),
  .research-card-grid .research-card-v2:nth-child(5){
    grid-column: auto;
  }
}

@media (max-width: 620px){
  .research-card-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================
   Individual Research Card
========================= */
.research-card-v2{
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.05),
    0 4px 12px rgba(15,23,42,0.03);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.research-card-v2:hover{
  transform: translateY(-4px);
  box-shadow:
    0 4px 8px rgba(15,23,42,0.06),
    0 16px 40px rgba(15,23,42,0.08);
}

@media (prefers-reduced-motion: reduce){
  .research-card-v2{
    transition: none;
  }
  .research-card-v2:hover{
    transform: none;
  }
}

/* Color-coded top accent stripe */
.research-card-v2 .card-accent{
  height: 4px;
  width: 100%;
}

.card-accent--genomics{
  background: linear-gradient(90deg, #fca5a5, #fecaca);
}

.card-accent--protein{
  background: linear-gradient(90deg, #93c5fd, #bfdbfe);
}

.card-accent--biomedicine{
  background: linear-gradient(90deg, #fcd34d, #fde68a);
}

.card-accent--coreml{
  background: linear-gradient(90deg, #6ee7b7, #a7f3d0);
}

.card-accent--knowledge{
  background: linear-gradient(90deg, #c4b5fd, #ddd6fe);
}

/* Card image area (spans top of card) */
.research-card-img{
  width: 100%;
  height: 160px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.research-card-body{
  padding: 32px 30px 34px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.research-card-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image background tints (pastel) */
.img-bg--genomics{
  background: linear-gradient(135deg, #fff1f2, #fecdd3);
}
.img-bg--protein{
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
}
.img-bg--biomedicine{
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
}
.img-bg--coreml{
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
}
.img-bg--knowledge{
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
}

/* Card text */
.research-card-v2 h3{
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px 0;
  letter-spacing: -0.01em;
}

.research-card-v2 p{
  font-size: 15px;
  line-height: 1.6;
  color: #4b5563;
  margin: 0 0 18px 0;
  flex: 1;
}

/* Card link */
.card-link{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  text-decoration: none;
  transition: color 0.2s ease;
}

.card-link:hover{
  color: #c8102e;
}

.card-link-arrow{
  display: inline-block;
  transition: transform 0.2s ease;
}

.card-link:hover .card-link-arrow{
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce){
  .card-link-arrow{
    transition: none;
  }
}

@media (max-width: 600px){
  .research-card-body{
    padding: 24px 20px 28px;
  }
}

/* =========================
   News & Events Section
========================= */
.news-events-section{
  background: #ffffff;
  padding: 64px 0 64px;
}

.news-events-header{
  margin-bottom: 40px;
}

.news-events-header h2{
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
}

.news-events-header p{
  font-size: 17px;
  color: #64748b;
  margin: 0;
  max-width: 56ch;
}

/* Carousel Container */
.news-carousel{
  position: relative;
  padding-bottom: 54px;
}

.news-carousel-track{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.05),
    0 4px 16px rgba(15,23,42,0.04);
  height: 440px;
}

/* Individual Slide — crossfade */
.news-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.6s;
  height: 100%;
  z-index: 0;
}

.news-slide.active{
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s;
  z-index: 2;
}

.news-slide-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}

/* Text Side */
.news-slide-text{
  padding: 36px 40px 36px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.news-tag{
  display: inline-block;
  width: fit-content;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c8102e;
  background: rgba(200,16,46,0.07);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.news-slide-text h3{
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px 0;
  letter-spacing: -0.015em;
  line-height: 1.25;
  flex-shrink: 0;
}

.news-date{
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 14px 0;
  flex-shrink: 0;
}

.news-desc{
  font-size: 15px;
  line-height: 1.65;
  color: #4b5563;
  margin: 0 0 22px 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-right: 6px;
}

/* Subtle scrollbar styling for the desc area */
.news-desc::-webkit-scrollbar{
  width: 4px;
}
.news-desc::-webkit-scrollbar-track{
  background: transparent;
}
.news-desc::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,0.12);
  border-radius: 4px;
}

.news-cta{
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.news-cta .card-link-arrow{
  transition: transform 0.2s ease;
}

.news-cta:hover .card-link-arrow{
  transform: translateX(3px);
}

/* Image Side */
.news-slide-image{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.news-slide-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* SBHD banner: OG image with landscape aspect ratio */
.news-slide-image--sbhd{
  background: linear-gradient(135deg, #0a1628 0%, #132040 50%, #1a2a50 100%);
}

.news-slide-image--sbhd img{
  object-fit: cover;
  object-position: center;
}

/* ICLR 2026: conference banner */
.news-slide-image--iclr{
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.news-slide-image--iclr img{
  object-fit: cover;
  object-position: center;
}

/* SC4RC: banner image on dark green background, fit horizontally */
.news-slide-image--sc4rc{
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0c2415 0%, #143d23 50%, #1a4a2c 100%);
}

.news-slide-image--sc4rc img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

.news-img-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.08) 0%,
    transparent 30%
  );
  pointer-events: none;
}

/* eGoT / ISMB 2026: dark background matching the architecture diagram */
.news-slide-image--egot{
  background: #314c5d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-slide-image--egot img{
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* NDL placeholder: logo centered on soft gradient */
.news-slide-image--ndl{
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 50%, rgba(200,16,46,0.06) 0%, transparent 50%),
    radial-gradient(circle at 70% 40%, rgba(59,130,246,0.05) 0%, transparent 50%),
    linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 40px;
}

.news-slide-image--ndl img{
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 60%;
  object-fit: contain;
}

/* Placeholder slide image */
.news-slide-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-pattern{
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 50%, rgba(200,16,46,0.06) 0%, transparent 50%),
    radial-gradient(circle at 70% 40%, rgba(59,130,246,0.05) 0%, transparent 50%),
    linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Arrow Navigation */
.news-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 3px rgba(15,23,42,0.06),
    0 4px 12px rgba(15,23,42,0.04);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.3s ease;
}

.news-arrow:hover{
  background: #ffffff;
  color: #c8102e;
  box-shadow:
    0 2px 6px rgba(15,23,42,0.08),
    0 8px 20px rgba(15,23,42,0.06);
  transform: translateY(-50%) scale(1.06);
}

.news-arrow:active{
  transform: translateY(-50%) scale(0.96);
}

.news-arrow--prev{
  left: -20px;
}

.news-arrow--next{
  right: -20px;
}

@media (prefers-reduced-motion: reduce){
  .news-arrow{
    transition: none;
  }
}

@media (max-width: 900px){
  .news-arrow--prev{ left: -14px; }
  .news-arrow--next{ right: -14px; }
  .news-arrow{
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 620px){
  .news-arrow{
    display: none;
  }
}

/* Playback + Dots — same row, independently centered */
.news-playback{
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 6px;
  height: 30px;
  align-items: center;
  z-index: 2;
}

.news-playback-btn{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow:
    0 1px 3px rgba(15,23,42,0.06),
    0 4px 12px rgba(15,23,42,0.04);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.news-playback-btn.active{
  border-color: #c8102e;
  color: #c8102e;
}

.news-playback-btn:hover{
  background: #ffffff;
  color: #c8102e;
  box-shadow:
    0 2px 6px rgba(15,23,42,0.08),
    0 8px 20px rgba(15,23,42,0.06);
  transform: scale(1.06);
}

.news-playback-btn:active{
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce){
  .news-playback-btn{
    transition: none;
  }
}

/* Dot Navigation — centered under full carousel, same line as playback */
.news-dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 30px;
  pointer-events: none;
}

.news-dot{
  pointer-events: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #d1d5db;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}

.news-dot:hover{
  background: #9ca3af;
  transform: scale(1.15);
}

.news-dot.active{
  background: #c8102e;
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce){
  .news-slide{
    transition: none;
  }
  .news-dot{
    transition: none;
  }
}

/* Responsive: stack on mobile */
@media (max-width: 760px){
  .news-carousel-track{
    height: 480px;
  }

  .news-slide-inner{
    grid-template-columns: 1fr;
  }

  .news-slide-image{
    height: 200px;
    order: -1;
    flex-shrink: 0;
  }

  .news-slide-text{
    padding: 24px 26px 28px;
    flex: 1;
  }
}

@media (max-width: 480px){
  .news-events-section{
    padding: 56px 0 64px;
  }

  .news-carousel-track{
    height: 500px;
  }

  .news-slide-image{
    height: 170px;
  }

  .news-slide-text{
    padding: 22px 20px 24px;
  }
}