/* Moodly: the tested flow as a carousel on tablets and phones (below 992px).
   On desktop the original wide image is shown and this carousel is hidden.
   All sizes are in rem or % so they follow the reader's text size and the screen width. */

.flow-carousel {
  display: none;
}

@media (max-width: 61.9375em) {
  /* the wide image is replaced by the carousel */
  .flow-card .flow-card__img {
    display: none;
  }

  .flow-card {
    min-width: 0;
    max-width: 100%;
  }

  .flow-carousel {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0 auto 0.5rem;
    /* the strip scrolls inside the carousel: its total width must not widen the page */
    contain: inline-size;
    /* the phone in the middle is never taller than the app-flow video at the top of the page
       (about 36rem) or 75% of the window, so the whole phone fits on screen.
       Screen = 70% of the carousel, and the picture is 440 x 890: width = height x 0.4944 / 0.70 */
    max-width: min(100%, calc(min(36.1875rem, 75vh) * 0.7063));
  }
}


.flow-carousel__stage {
  position: relative;
}

/* the scrolling strip: swiping works with scroll-snap alone, the script only adds extras */
.flow-carousel__track {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: flex;
  gap: 3%;
  padding: 0.5rem 15%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.flow-carousel__track::-webkit-scrollbar {
  display: none;
}

.flow-carousel__slide {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.flow-carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 440 / 890;
}

.flow-carousel__caption {
  min-height: 3rem;
  margin: 0.75rem 0 0;
  font-family: Poppins, sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4;
  color: #333;
  text-align: center;
  transition: opacity 0.25s ease;
}

/* with the script on: side screens are smaller and faded, and only the active caption shows */
.flow-carousel.is-enhanced .flow-carousel__slide {
  transform: scale(0.9);
  opacity: 0.45;
  cursor: pointer;
}

.flow-carousel.is-enhanced .flow-carousel__slide.is-active {
  transform: none;
  opacity: 1;
  cursor: auto;
}

.flow-carousel.is-enhanced .flow-carousel__slide:not(.is-active) .flow-carousel__caption {
  opacity: 0;
}

/* round white arrows on top of the peeking screens */
.flow-carousel__arrow {
  position: absolute;
  top: calc((100% - 3.75rem) / 2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}

.flow-carousel__arrow--prev { left: 0; }
.flow-carousel__arrow--next { right: 0; }

.flow-carousel__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow-carousel__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* without the script there is nothing to click, so the arrows stay hidden */
.flow-carousel:not(.is-enhanced) .flow-carousel__arrow,
.flow-carousel:not(.is-enhanced) .flow-carousel__dots {
  display: none;
}

@media (max-width: 47.9375em) {
  .flow-carousel__arrow {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* pill-shaped dots: the active one is wider and uses the Moodly blue */
.flow-carousel__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.flow-carousel__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.flow-carousel__dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #7d8bb5;
  transition: width 0.25s ease, background-color 0.25s ease;
}

.flow-carousel__dot[aria-current="true"]::before {
  width: 1.5rem;
  background: #3f5a9e;
}

@media (forced-colors: active) {
  .flow-carousel__arrow,
  .flow-carousel__dot::before {
    border: 1px solid ButtonText;
  }
  .flow-carousel__dot[aria-current="true"]::before {
    background: Highlight;
  }
}

/* phones: the card gives the carousel its full width, so the centred screen can be as big as possible */
@media (max-width: 47.9375em) {
  .flow-card {
    padding-left: 0;
    padding-right: 0;
  }

  .flow-card .caption-small {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* The pulsing emotion wheel: sized from the width of its card, so it looks the same in every browser.
   The picture has empty bands above and below the circle (677 x 836, circle about 675 x 672):
   the ratio below crops them away, so the box is exactly the circle. */
.feel-row__visual .wheel-pulse {
  box-sizing: border-box;
  width: 52%;
  max-width: 52%;
  height: auto;
  max-height: none;
  padding: 0;
  aspect-ratio: 677 / 676;
  object-fit: cover;
}

@media (max-width: 47.9375em) {
  .feel-row__visual .wheel-pulse {
    width: 62%;
    max-width: 62%;
  }
}