/* Purpose: Scroll-snap carousel used by the video showcase. */

.videos__carousel { position: relative; }

.videos__track {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: var(--space-2) var(--space-6);
  scrollbar-width: none;
}
.videos__track::-webkit-scrollbar { display: none; }

.video-card { flex: 0 0 82%; margin: 0; scroll-snap-align: center; }

@media (min-width: 768px)  { .video-card { flex-basis: 46%; } }
@media (min-width: 1025px) { .video-card { flex-basis: 30.5%; } }

.video-card__player {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background-color: var(--color-black);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.video-card:hover .video-card__player { border-color: rgba(255,145,75,0.45); transform: translateY(-6px); }

.video-card__caption { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }

.carousel__controls { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }

.carousel__btn {
  width: 52px; height: 52px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-md);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-spring);
}
.carousel__btn:hover { background: var(--gradient-gold-soft); border-color: transparent; color: var(--color-ink); transform: scale(1.08); }
.carousel__btn[disabled] { opacity: 0.25; cursor: not-allowed; transform: none; }