/* PORTAL WEB AC LOCAL v0.5.0
   Afinació premium del carrusel: vores més netes i transició més elegant. */

.media-carousel {
  --carousel-edge-fade: clamp(34px, 5vw, 68px);
}

.media-viewport {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.14) 3%,
    rgba(0, 0, 0, 0.56) 6%,
    rgba(0, 0, 0, 0.92) 9%,
    #000 11%,
    #000 89%,
    rgba(0, 0, 0, 0.92) 91%,
    rgba(0, 0, 0, 0.56) 94%,
    rgba(0, 0, 0, 0.14) 97%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.14) 3%,
    rgba(0, 0, 0, 0.56) 6%,
    rgba(0, 0, 0, 0.92) 9%,
    #000 11%,
    #000 89%,
    rgba(0, 0, 0, 0.92) 91%,
    rgba(0, 0, 0, 0.56) 94%,
    rgba(0, 0, 0, 0.14) 97%,
    transparent 100%
  ) !important;
}

.media-viewport::before,
.media-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--carousel-edge-fade);
  pointer-events: none;
  z-index: 3;
}

.media-viewport::before {
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(244, 248, 251, 0.96) 16%,
    rgba(244, 248, 251, 0.78) 42%,
    rgba(244, 248, 251, 0.34) 72%,
    rgba(244, 248, 251, 0) 100%
  );
}

.media-viewport::after {
  right: 0;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(244, 248, 251, 0.96) 16%,
    rgba(244, 248, 251, 0.78) 42%,
    rgba(244, 248, 251, 0.34) 72%,
    rgba(244, 248, 251, 0) 100%
  );
}

@media (max-width: 900px) {
  .media-carousel {
    --carousel-edge-fade: 42px;
  }

  .media-viewport {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.16) 4%,
      rgba(0, 0, 0, 0.62) 8%,
      #000 12%,
      #000 88%,
      rgba(0, 0, 0, 0.62) 92%,
      rgba(0, 0, 0, 0.16) 96%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.16) 4%,
      rgba(0, 0, 0, 0.62) 8%,
      #000 12%,
      #000 88%,
      rgba(0, 0, 0, 0.62) 92%,
      rgba(0, 0, 0, 0.16) 96%,
      transparent 100%
    ) !important;
  }
}