/* Mobile-only risk-card carousel. Desktop/tablet layout is intentionally untouched. */
@media (max-width: 680px) {
  /*
    The mobile carousel is a true clipped stage: cards are stacked on top of
    each other rather than laid out in one long horizontal row. This guarantees
    that no resting neighbour can leak in from either side, while the active
    and next/previous card can still animate through the stage during a slide.
  */
  .risk-section .sx-risk-slider {
    position: relative;
    width: min(calc(100vw - 36px), 372px);
    max-width: 372px;
    height: 500px;
    margin-inline: auto;
    overflow: hidden !important;
    border-radius: 22px;
    isolation: isolate;
    contain: layout paint;
    clip-path: inset(0 round 22px);
  }

  .risk-section .sx-risk-slider > .risk-grid {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    perspective: none !important;
    touch-action: pan-y pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
    transform: none !important;
    transition: none !important;
  }

  /* Every card occupies exactly the same stage and is hidden unless JS marks
     it as the active or transitioning slide. No neighbouring card can sit
     beside the viewport at rest. */
  .risk-section .sx-risk-slider > .risk-grid > .risk-card {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
    margin: 0 !important;
    padding: 19px !important;
    box-sizing: border-box !important;
    border-radius: 22px !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(0, 0, 0) !important;
    transition: border-color .45s ease, box-shadow .45s ease !important;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .risk-section .sx-risk-slider > .risk-grid > .risk-card.sx-risk-slide-visible {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .risk-section .sx-risk-slider > .risk-grid > .risk-card.sx-risk-slide-active {
    pointer-events: auto !important;
    z-index: 2 !important;
  }

  .risk-section .sx-risk-slider > .risk-grid > .risk-card.sx-risk-slide-moving {
    z-index: 3 !important;
  }

  .risk-section .sx-risk-slider .risk-card__body {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Artwork stays intentionally large while remaining contained in the card. */
  .risk-section .sx-risk-slider .risk-card__visual,
  .risk-section .sx-risk-slider .risk-card--low .risk-card__visual,
  .risk-section .sx-risk-slider .risk-card--medium .risk-card__visual,
  .risk-section .sx-risk-slider .risk-card--high .risk-card__visual,
  .risk-section .sx-risk-slider .risk-card--integrators .risk-card__visual {
    flex: 0 0 206px !important;
    width: 100% !important;
    height: 206px !important;
    min-height: 206px !important;
    margin: -2px 0 8px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .risk-section .sx-risk-slider .risk-card__visual img {
    width: auto !important;
    max-width: 98% !important;
    height: auto !important;
    max-height: 202px !important;
    object-fit: contain !important;
  }

  .risk-section .sx-risk-slider .risk-card--integrators .risk-card__visual img,
  .risk-section .sx-risk-slider .risk-card--low .risk-card__visual img {
    max-width: 104% !important;
    max-height: 210px !important;
  }

  /* Keep text clear of the arrow hit areas without pushing it too far inward. */
  .risk-section .sx-risk-slider .risk-card__intro {
    min-height: 42px !important;
    margin: 0 0 10px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  .risk-section .sx-risk-slider .risk-card ul {
    margin: auto 0 0 !important;
    padding-left: 18px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
  }

  .risk-section .sx-risk-slider .risk-card li {
    box-sizing: border-box !important;
    min-height: 39px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 12px !important;
    line-height: 1.38 !important;
  }

  /* Reference-style controls. They are part of the stage, not separate slides. */
  .risk-section .sx-risk-slider__arrow {
    position: absolute;
    z-index: 20;
    top: 50%;
    width: 38px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(248, 248, 249, .96);
    display: grid;
    place-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    opacity: .94;
    filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .9));
  }

  .risk-section .sx-risk-slider__arrow::before {
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
  }

  .risk-section .sx-risk-slider__arrow--prev {
    left: 0;
    transform: translateY(-50%);
  }

  .risk-section .sx-risk-slider__arrow--prev::before {
    transform: rotate(-135deg);
  }

  .risk-section .sx-risk-slider__arrow--next {
    right: 0;
    transform: translateY(-50%);
  }

  .risk-section .sx-risk-slider__arrow--next::before {
    transform: rotate(45deg);
  }

  .risk-section .sx-risk-slider__arrow--prev:active,
  .risk-section .sx-risk-slider__arrow--next:active {
    opacity: .58;
  }

  @media (max-width: 390px) {
    .risk-section .sx-risk-slider {
      width: min(calc(100vw - 30px), 354px);
      height: 488px;
    }

    .risk-section .sx-risk-slider > .risk-grid,
    .risk-section .sx-risk-slider > .risk-grid > .risk-card {
      height: 488px !important;
      min-height: 488px !important;
      max-height: 488px !important;
    }

    .risk-section .sx-risk-slider > .risk-grid > .risk-card {
      padding: 17px !important;
    }

    .risk-section .sx-risk-slider .risk-card__visual,
    .risk-section .sx-risk-slider .risk-card--low .risk-card__visual,
    .risk-section .sx-risk-slider .risk-card--medium .risk-card__visual,
    .risk-section .sx-risk-slider .risk-card--high .risk-card__visual,
    .risk-section .sx-risk-slider .risk-card--integrators .risk-card__visual {
      flex-basis: 196px !important;
      height: 196px !important;
      min-height: 196px !important;
    }

    .risk-section .sx-risk-slider .risk-card__visual img {
      max-height: 192px !important;
    }

    .risk-section .sx-risk-slider .risk-card--integrators .risk-card__visual img,
    .risk-section .sx-risk-slider .risk-card--low .risk-card__visual img {
      max-height: 200px !important;
    }

    .risk-section .sx-risk-slider .risk-card li {
      min-height: 38px !important;
      font-size: 11.7px !important;
    }
  }
}