/**
 * DJ Refresh — Latest Updates carousel.
 * Figma: slides 636x380 with 28px gutters, ~2.2 visible. Copy sits bottom-left over a
 * bottom-up dark scrim. Round prev/next in the heading row, red dots beneath.
 *
 * Layout comes from UIkit's slider; this file only styles the slide chrome.
 */

.djr-updates {
  --djr-updates-slide-h: 380px;

  /* Figma: a soft vertical gradient, not a flat fill. */
  background: linear-gradient(180deg, #fefefe 0%, #f2f2f2 100%);
}

/* UIkit hides the "previous" control until the slider has moved. The design shows both
   arrows from the start, and the slider is set to loop, so the control is never a dead end. */
.djr-updates__nav .uk-invisible {
  visibility: visible !important;
}

.djr-updates__nav {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}

/* This section's heading sits 30px above the slides, not the 36px used elsewhere. */
.djr-updates .djr-section__head {
  margin-bottom: 30px;
}

/* ---------- Slides ---------- */

/* Figma: 636px slides on a 664px pitch (28px gutter) across the 1440px content width, so
   each item is 664/1440 = 46.111% and the slide inside it lands on 636px.
   The extra class is needed: UIkit's `.uk-slider-items:not(.uk-grid) { margin: 0 }` is a
   two-class selector, so a bare `.djr-updates__items` loses and the first slide ends up
   indented by the gutter. */
.djr-updates .djr-updates__items {
  margin-left: -28px;
}

.djr-updates__item {
  width: 46.111%;
  padding-left: 28px;
}

.djr-updates__slide {
  position: relative;
  display: block;
  height: var(--djr-updates-slide-h);
  border-radius: 16px;
  overflow: hidden;
  /* background-color (not the `background` shorthand) so the .djr-skeleton shimmer gradient
     layered on this element isn't reset away. */
  background-color: var(--djr-ink);
}

.djr-updates__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.djr-updates__slide:hover .djr-updates__image {
  transform: scale(1.04);
}

/* Bottom 220px of the slide, per the comp — transparent to 78% black. */
.djr-updates__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 100%);
}

/* Play button — only on video campaigns (djr-updates__slide--video). Centered, scales on hover. */
.djr-updates__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.92);
  color: var(--djr-ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.djr-updates__play svg {
  width: 26px;
  height: 26px;
  margin-left: 3px; /* optically centre the triangle */
}
.djr-updates__slide--video:hover .djr-updates__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--djr-red);
  color: #fff;
}

/* Campaign date, top-left. */
.djr-updates__date {
  position: absolute;
  top: 32px;
  left: 32px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.djr-updates__copy {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--djr-white);
}

.djr-updates__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.djr-updates__headline {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ---------- Dots ---------- */

/* Figma: 40px below the slides. The spacing sits on the WRAPPER because UIkit's own
   .uk-dotnav margin beats ours on the <ul> itself (its sheet is on a CDN, so it can't be
   patched) — spacing the parent sidesteps the fight entirely. */
.djr-updates__dots-wrap {
  padding-top: 40px;
}

.djr-updates__dots {
  display: flex;
  justify-content: center;
}

.djr-updates__dots > * > * {
  width: 18px;
  height: 8px;
  border-radius: var(--djr-radius-pill);
  background: #d6d6d6;
  border: 0;
  transition: background-color 0.2s ease, width 0.2s ease;
}

.djr-updates__dots > .uk-active > * {
  width: 28px;
  background: var(--djr-red);
}

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

@media (max-width: 960px) {
  .djr-updates {
    --djr-updates-slide-h: 280px;
  }

  .djr-updates__item {
    width: 80%;
  }

  .djr-updates__headline {
    font-size: 18px;
  }
}