/**
 * EMYC Home – Hero slider + news collage horizontal infinite scroll
 * Keeps design consistent with EMYC branding (primary green, white cards, rounded).
 */

/* Hero main image: absolute fill so every aspect ratio covers the frame consistently */
#hero-main-display {
  isolation: isolate;
}

#hero-main-image,
#hero-main-image-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

#hero-main-image {
  object-fit: cover;
  object-position: center;
}

/* Preview card thumbnails: fixed box so images never stretch the flex layout */
.hero-preview-card__thumb {
  position: relative;
  width: 100%;
  height: 8rem;
  overflow: hidden;
  flex-shrink: 0;
}

.hero-preview-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.news-collage {
  overflow: hidden;
  width: 100%;
}

.news-collage-track {
  display: flex;
  width: 200%;
  gap: 1rem;
  padding: 0 0.5rem;
  animation: news-collage-scroll 40s linear infinite;
  will-change: transform;
}

/* One set = 4 cards; 8 cards total (duplicated). Each card 12.5% of track = 25% of viewport. */
.news-collage-track .hero-preview-card {
  flex: 0 0 12.5%;
  min-width: 0;
}

/* Active state: EMYC primary border and shadow */
.news-collage-track .hero-preview-card.active {
  border-color: #65a30d !important; /* primary-600 */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Pause animation on hover so users can click */
.news-collage:hover .news-collage-track {
  animation-play-state: paused;
}

/* Scroll by half the track (one full set of 4 cards) for seamless loop */
@keyframes news-collage-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive: show 2 cards on tablet, 1–2 on mobile; same seamless loop */
@media (max-width: 1024px) {
  .news-collage-track .hero-preview-card {
    flex: 0 0 25%;
  }

  .news-collage-track {
    width: 400%;
  }

  @keyframes news-collage-scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-25%);
    }
  }
}

@media (max-width: 640px) {
  .news-collage-track .hero-preview-card {
    flex: 0 0 50%;
  }

  .news-collage-track {
    width: 400%;
  }

  @keyframes news-collage-scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-25%);
    }
  }
}