/**
 * @file
 * Carousel slide.
 */

.carousel-slide {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.carousel-slide__image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.carousel-slide__caption-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  text-align: left;
}

.carousel-slide__caption {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1rem;
  margin-left: auto;
  color: var(--imtm-color-black);
  background-color: rgba(238, 238, 238, 0.9);
}

.carousel-slide__title {
  margin-bottom: 2rem;
  font-size: 1.075rem;
  font-weight: 700;
  color: var(--imtm-color-black);
}

.carousel-slide__text {
  font-size: 1rem;
}

.carousel-slide__link a {
  position: absolute;
  bottom: 18px;
  z-index: 100;
  font-weight: 700;
  color: rgb(240, 49, 39);
}

.carousel-slide__control {
  position: absolute;
  bottom: 0;
  z-index: 99;
  width: 25px;
  height: 25px;
  padding: 0;
  cursor: pointer;
  background: #000 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3e%3cpath d='M14.5 7.5 9.5 12.5l5 5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") no-repeat center;
  border: 0;
}

.carousel-slide__control--prev {
  right: 1.75rem;
}

.carousel-slide__control--next {
  right: 0;
  transform: rotateY(180deg);
}

@media (min-width: 576px) {
  .carousel-slide,
  .carousel-slide__image img {
    height: 400px;
  }

  .carousel-slide__caption-wrapper {
    padding: 0 0.75rem;
  }

  .carousel-slide__caption {
    padding: 1.5rem;
  }
}

@media (min-width: 992px) {
  .carousel-slide__caption {
    width: 32%;
  }
}

/* Slow zoom of the visible slide. It starts while the slide is sliding in
   (--next/--prev keep the same animation when the slide becomes --active, so
   it does not restart) and runs at a constant speed on its own GPU layer. */
@media (prefers-reduced-motion: no-preference) {
  .carousel__slide--active .carousel-slide__image img,
  .carousel__slide--next .carousel-slide__image img,
  .carousel__slide--prev .carousel-slide__image img {
    animation: carousel-slide-zoom 8s linear both;
    transform-origin: 50% 50%;
    will-change: transform;
    backface-visibility: hidden;
  }
}

/* Firefox redraws the slowly scaled image with whole-pixel steps (visible
   jumps even with the 3D transform below), so the slow zoom is left out
   there; Chromium browsers keep it. */
@supports (-moz-appearance: none) {
  .carousel__slide .carousel-slide__image img {
    animation: none;
    transform: none;
  }
}

@keyframes carousel-slide-zoom {
  /* 3D scale + a tiny rotation stop browsers from snapping the very slow
     movement to whole pixels (visible as small jumps, mainly Firefox/Safari). */
  from {
    transform: scale3d(1, 1, 1) rotate(0.01deg);
  }

  to {
    transform: scale3d(1.06, 1.06, 1) rotate(0.01deg);
  }
}

/* Very wide screens: the banner keeps its native size (1920 × 400) in the
   centre and fades into a blurred, darkened copy of itself at the sides. */
@media (min-width: 1921px) {
  .carousel-slide {
    background-color: var(--imtm-color-darkblue);
  }

  .carousel-slide::before {
    position: absolute;
    inset: -40px;
    content: "";
    background: var(--carousel-slide-backdrop) center / cover no-repeat;
    filter: blur(28px) brightness(0.85) saturate(1.1);
  }

  .carousel-slide__image {
    position: relative;
    width: 1920px;
    margin: 0 auto;
  }

  .carousel-slide__image img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
}

/* Phones: the caption sits under the image instead of covering it; the text
   is clamped to three lines, the link and the arrows share the bottom row. */
@media (max-width: 575.98px) {
  .carousel-slide {
    height: auto;
  }

  .carousel-slide__image img {
    height: 190px;
  }

  .carousel-slide__caption-wrapper {
    position: static;
  }

  .carousel-slide__caption {
    height: auto;
    padding: 1rem 1rem 1.25rem;
    background-color: var(--imtm-color-surface-light);
  }

  .carousel-slide__title {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
  }

  .carousel-slide__text {
    display: -webkit-box;
    margin-bottom: 0.75rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .carousel-slide__link {
    display: block;
    min-height: 25px;
    padding-right: 4rem;
  }

  .carousel-slide__link a {
    position: static;
  }

  .carousel-slide__control {
    bottom: 1.25rem;
  }

  .carousel-slide__control--prev {
    right: 2.75rem;
  }

  .carousel-slide__control--next {
    right: 1rem;
  }
}