/*
 * assets/css/style.css
 * Custom styles for the public-facing site (index.php).
 */

/* ── Fade-in hero animation ─────────────────────────────────────────── */
.fade-in {
  animation: fadeIn 1.5s ease-in;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Video slider ────────────────────────────────────────────────────── */
#video-track {
  /* gap handled by gap-4 Tailwind; override per-slide width via JS */
  will-change: transform;
}

/* Ensure slides are equal width in the flex row */
.video-slide {
  min-width: 0; /* flex shrink guard */
}

/* Responsive: 1 visible on mobile, 2 on md, 3 on lg */
@media (min-width: 768px) {
  .video-slide {
    width: calc(50% - 8px);
  }
}
@media (min-width: 1024px) {
  .video-slide {
    width: calc(33.333% - 11px);
  }
}

/* Thumbnail hover cursor */
.video-thumbnail-wrap {
  cursor: pointer;
}

/* line-clamp polyfill for older Safari */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}