/**
 * DJ Refresh — customer reels.
 * Figma: five 210x372 vertical cards (roughly 9:16), 30px gutters, centred, 12px radius.
 * Two CTAs centred beneath.
 *
 * Shares the .djr-scroller block with New Arrivals so the row scrolls on narrow screens.
 */

.djr-reels {
  --djr-reel-w: 210px;

  /* Figma: soft vertical gradient, same as the updates band. */
  background: linear-gradient(180deg, #fefefe 0%, #f2f2f2 100%);
  /* Figma gives this section a slightly deeper base than the standard 72px. */
  padding-bottom: 80px;
}

.djr-reels__scroller {
  --djr-scroller-gap: 30px;
}

.djr-reels__track {
  /* Centred while it fits; scrolls once it doesn't. */
  justify-content: center;
}

.djr-reels__item {
  flex: 0 0 var(--djr-reel-w);
  scroll-snap-align: center;
}

.djr-reels__card {
  position: relative;
  display: block;
  aspect-ratio: 210 / 372;
  border-radius: 12px;
  overflow: hidden;
  /* background-color, not shorthand — keeps the .djr-skeleton shimmer gradient intact. */
  background-color: var(--djr-dark-alt);
}

/* The silent preview clip. The poster shows until js/djr-reels.js attaches the source, so
   there is never an empty black box. */
.djr-reels__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--djr-dark-alt);
  transition: transform 0.4s ease;
  /* Round the video to match the card. A transformed child (the hover scale below) escapes an
     ancestor's border-radius + overflow:hidden clip in Chrome, squaring off the card's top
     corners on hover — self-rounding the video keeps the corners round. */
  border-radius: inherit;
}

.djr-reels__card:hover .djr-reels__video,
.djr-reels__card:focus-visible .djr-reels__video {
  transform: scale(1.05);
}

/* ---------- Overlay ---------- */

.djr-reels__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.75) 100%);
}

.djr-reels__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  border-radius: 50%;
  background: var(--djr-red);
  color: var(--djr-white);
  transition: transform 0.2s ease;
}

/* Nudged right so the triangle looks optically centred in the circle. */
.djr-reels__play-icon {
  display: block;
  margin-left: 2px;
}

.djr-reels__card:hover .djr-reels__play {
  transform: translate(-50%, -50%) scale(1.1);
}

.djr-reels__handle {
  position: absolute;
  left: 16px;
  bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  color: #ebebeb;
}

/* ---------- Actions ---------- */

.djr-reels__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .djr-reels {
    --djr-reel-w: 180px;
  }

  .djr-reels__track {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .djr-reels__actions {
    flex-direction: column;
    align-items: stretch;
  }
}