/* ==========================================================================
   Manifesto carousel
   
   Prerequisite Asset Injectors:
   -- CSS: Manifesto Cards
   -- JS: Manifesto Card Carousel
   
   Incompatible with FE25 Platform Carousel
   ========================================================================== */

/* Viewport: positioning context for the buttons, clips the track */
.manifesto-carousel .carousel-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Track: horizontal scroll-snap row */
.manifesto-carousel .carousel-viewport .carousel-track {
  --manifesto-fade: 48px;   /* width of the edge fade */
  --manifesto-gap: 16px;
  --manifesto-pad: calc(0.5rem + 12px);    /* keep in sync with scroll-padding below, previously 16px */
  --manifesto-l: 1;         /* 1 = no left fade,  0 = fade (set by JS classes) */
  --manifesto-r: 1;         /* 1 = no right fade, 0 = fade (set by JS classes) */

  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;     /* equal card heights */
  gap: var(--manifesto-gap);
  padding: 8px var(--manifesto-pad);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--manifesto-pad);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;    /* Firefox */

  /* Fade the cards themselves, so no background colour matching is needed */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, var(--manifesto-l)) 0,
    #000 var(--manifesto-fade),
    #000 calc(100% - var(--manifesto-fade)),
    rgba(0, 0, 0, var(--manifesto-r)) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, var(--manifesto-l)) 0,
    #000 var(--manifesto-fade),
    #000 calc(100% - var(--manifesto-fade)),
    rgba(0, 0, 0, var(--manifesto-r)) 100%
  );
}

.manifesto-carousel .carousel-viewport .carousel-track::-webkit-scrollbar {
  display: none;
}

/* JS toggles these based on scroll position */
.manifesto-carousel .carousel-viewport.can-scroll-left .carousel-track {
  --manifesto-l: 0;
}
.manifesto-carousel .carousel-viewport.can-scroll-right .carousel-track {
  --manifesto-r: 0;
}

/* Cards: ~78% of the screen on phones (so the next card peeks in),
   capped at 340px on larger screens (so desktop shows as many as fit) */
.manifesto-carousel .carousel-viewport .carousel-track > .card {
  flex: 0 0 clamp(260px, 78vw, 340px);
  scroll-snap-align: start;
}

/* Prev / next buttons (created by JS). Hidden on small screens: swipe instead */
.manifesto-carousel .manifesto-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #007236;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  transition: opacity 0.3s ease-in-out, background 0.2s ease-in-out;
}

.manifesto-carousel .manifesto-carousel-btn.prev { left: 10px; }
.manifesto-carousel .manifesto-carousel-btn.next { right: 10px; }

.manifesto-carousel .manifesto-carousel-btn:hover,
.manifesto-carousel .manifesto-carousel-btn:focus-visible {
  background: #ddd;
}

.manifesto-carousel .manifesto-carousel-btn[disabled] {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
  .manifesto-carousel .manifesto-carousel-btn {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto-carousel .manifesto-carousel-btn {
    transition: none;
  }
}

@media (min-width: 992px) {
  .manifesto-carousel .carousel-viewport .carousel-track {
    --manifesto-pad: calc(2rem +12px);
  }
}
@media (min-width: 1200px) {
  .manifesto-carousel .carousel-viewport .carousel-track {
    --manifesto-pad: calc(6rem + 12px);
  }
}

/* end manifesto carousel */