/*
  INDEX PAGE STYLES — index.css
  =============================
  Pairs with mtfl.css (shared nav, footer, variables, reset).
  Only used by index.html.

  DESIGN APPROACH:
    The carousel sits on a dark background as the hero.
    Below it, the page transitions to the warm cream background
    with research cards, news, and sponsors.

  LAYOUT (top to bottom):
    1. Hero block (carousel only, dark bg)
    2. Announcement bar
    3. Research highlights (3 cards on cream bg)
    4. Latest News (news cards)
    5. Sponsor bar (single row of logos, above footer)
*/


/* ==========================================================
   1. HERO BLOCK
   ==========================================================
   The carousel and the three research panels below it share
   a dark background wrapper, visually grouping them as one
   cohesive unit — inspired by Corning Museum of Glass.
   ========================================================== */
.hero-block {
  background: var(--clr-nav-bg);
}


/* --- CAROUSEL --- */
.carousel {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  height: clamp(420px, 55vw, 600px);
  overflow: hidden;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* Background images */
.slide-1 { background: url('../images/banner.jpg')  center top / cover no-repeat; }
.slide-2 { background: url('../images/banner2.jpg') center top / cover no-repeat; }
.slide-3 { background: url('../images/banner5.jpg') center top / cover no-repeat; }

/* Gradient overlay */
.carousel-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(17, 17, 17, 0.28) 0%,
    rgba(17, 17, 17, 0.50) 50%,
    rgba(17, 17, 17, 0.72) 100%
  );
  z-index: 1;
}

/* Content container */
.slide-content {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
}

.slide-content.align-right {
  justify-content: flex-end;
  text-align: right;
}

.slide-content.align-left {
  justify-content: flex-start;
  text-align: left;
}

.slide-inner {
  max-width: 540px;
  color: #fff;
}

/* Logo */
.slide-logo {
  width: min(320px, 50vw);
  margin-bottom: var(--space-sm);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.align-right .slide-logo { margin-left: auto; }
.align-left  .slide-logo { margin-right: auto; }

/* Accent rule */
.slide-rule {
  width: 36px;
  height: 2px;
  background: var(--clr-accent);
  border: none;
  border-radius: 2px;
  margin-bottom: var(--space-sm);
}

.align-right .slide-rule { margin-left: auto; margin-right: 0; }
.align-left  .slide-rule { margin-right: auto; margin-left: 0; }

/* Text */
.slide-text {
  font-size: clamp(0.88rem, 1.5vw, 1rem);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: var(--space-md);
}

/* CTA */
.slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--clr-accent);
  border: none;
  border-radius: 999px;
  transition: background 0.25s var(--ease), transform 0.2s var(--ease);
  letter-spacing: 0.01em;
}

.slide-cta:hover {
  background: var(--clr-accent-light);
  color: #fff;
  transform: translateY(-1px);
}

.slide-cta svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.2s var(--ease);
}

.slide-cta:hover svg { transform: translateX(2px); }

/* Text entrance */
.carousel-slide .slide-inner {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.25s, transform 0.5s ease 0.25s;
}

.carousel-slide.active .slide-inner {
  opacity: 1;
  transform: translateY(0);
}

/* Dots */
.carousel-dots {
  position: absolute;
  bottom: var(--space-sm);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.carousel-dot:hover { border-color: rgba(255, 255, 255, 0.8); }

.carousel-dot.active {
  background: #fff;
  border-color: #fff;
}

/* Progress bar */
.carousel-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--clr-accent);
  z-index: 3;
  width: 0%;
  animation: progressFill 6s linear infinite;
}

@keyframes progressFill {
  from { width: 0%; }
  to   { width: 100%; }
}


/* --- RESEARCH HIGHLIGHT CARDS ---
   Three cards on the cream background, separate from the hero.
   ============================================================ */
.highlights-section {
  padding-bottom: var(--space-xl);
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.highlight-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.highlight-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

.highlight-card .card-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--clr-tag-bg);
}

.highlight-card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease);
}

.highlight-card:hover .card-img img {
  transform: scale(1.04);
}

.highlight-card .card-body {
  padding: var(--space-md);
}

.highlight-card .card-body h3 {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--clr-text);
}

.highlight-card .card-body p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--clr-text-muted);
  margin-bottom: var(--space-sm);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--clr-accent);
  transition: gap 0.2s var(--ease);
}

.card-link:hover { gap: 0.5rem; color: var(--clr-accent-light); }

.card-link svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}


/* ==========================================================
   2. ANNOUNCEMENT BAR
   ========================================================== */
.announcement {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-left: 4px solid var(--clr-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-xl);
  display: flex;
  align-items: start;
  gap: var(--space-sm);
  font-size: 0.95rem;
  line-height: 1.65;
}

.announcement .ann-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  color: var(--clr-accent);
  margin-top: 0.15rem;
}

.announcement .ann-icon svg {
  width: 100%; height: 100%; fill: currentColor;
}

.announcement a {
  font-weight: 700;
  color: var(--clr-accent);
}


/* ==========================================================
   3. LATEST NEWS — news cards
   ========================================================== */
.news-section {
  padding-bottom: var(--space-xl);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.news-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.news-card .news-date {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--clr-accent);
  margin-bottom: 0.4rem;
}

.news-card .news-body {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--clr-text-muted);
}

.news-card .news-body a {
  color: var(--clr-text);
  border-bottom: 1px solid var(--clr-border);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.news-card .news-body a:hover {
  color: var(--clr-accent);
  border-bottom-color: var(--clr-accent);
}


/* ==========================================================
   4. SPONSOR BAR
   ========================================================== */
.sponsor-bar {
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  padding: var(--space-lg) 0;
}

.sponsor-bar-label {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: var(--space-md);
}

.sponsor-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-md), 3vw, var(--space-xl));
  flex-wrap: nowrap;
}

.sponsor-logos img {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  max-height: 200px;
  object-fit: contain;
  filter: grayscale(40%) opacity(0.7);
  transition: filter 0.3s var(--ease);
}

.sponsor-logos img:hover {
  filter: grayscale(0%) opacity(1);
}



/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 900px) {
  .news-grid {
    grid-template-columns: 1fr;
  }

  .sponsor-logos {
    flex-wrap: wrap;
    gap: var(--space-md);
  }
}

@media (max-width: 680px) {
  /* Carousel — taller on mobile */
  .carousel {
    height: clamp(320px, 70vw, 420px);
  }

  /* Research cards: compact horizontal layout on phone */
  .highlights-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .highlight-card {
    display: grid;
    grid-template-columns: 110px 1fr;
    border-radius: var(--radius);
  }

  .highlight-card .card-img {
    aspect-ratio: 1;
    border-radius: var(--radius) 0 0 var(--radius);
  }

  .highlight-card .card-body {
    padding: var(--space-sm);
  }

  .highlight-card .card-body p {
    display: none;
  }

  .highlight-card .card-body h3 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
  }

  /* Carousel slide adjustments */
  .slide-logo {
    width: min(200px, 50vw);
    margin-bottom: var(--space-xs);
  }

  .slide-text {
    font-size: 0.82rem;
    line-height: 1.65;
  }

  .slide-content {
    padding: 0 var(--space-md);
  }

  .slide-content.align-right,
  .slide-content.align-left {
    justify-content: center;
    text-align: center;
  }

  .align-right .slide-logo,
  .align-left  .slide-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .align-right .slide-rule,
  .align-left  .slide-rule {
    margin-left: auto;
    margin-right: auto;
  }

  .slide-inner { max-width: 100%; }

  /* Sponsors */
  .sponsor-logos {
    gap: var(--space-sm);
  }
}