/* Decorative icons; the dates, content and layout stay editable in Elementor. */
body .sbm-upcoming-card {
  --sbm-upcoming-date-width: 3.5rem;
  overflow: hidden;
  isolation: isolate;
}
/* A clipped watermark repeats the type icon behind the readable content. */
body .sbm-upcoming-card::after {
  content: "";
  position: absolute;
  inset-inline-end: -2.75rem;
  inset-block-end: -3rem;
  inline-size: 10rem;
  block-size: 10rem;
  z-index: -1;
  transform: rotate(-18deg);
  background-color: #f0f0f0;
  -webkit-mask: url("icon-rugby-ball.svg") center / contain no-repeat;
  mask: url("icon-rugby-ball.svg") center / contain no-repeat;
  pointer-events: none;
}
body .sbm-upcoming-event::after {
  -webkit-mask-image: url("icon-calendar-event.svg");
  mask-image: url("icon-calendar-event.svg");
}
body .sbm-upcoming-type::before {
  content: "";
  display: block;
  flex: 0 0 var(--sbm-upcoming-date-width);
  inline-size: var(--sbm-upcoming-date-width);
  block-size: 2.25rem;
  background-color: var(--sbm-orange, #ff6600);
  -webkit-mask: url("icon-rugby-ball.svg") center / 2.25rem 2.25rem no-repeat;
  mask: url("icon-rugby-ball.svg") center / 2.25rem 2.25rem no-repeat;
}
body .sbm-upcoming-event .sbm-upcoming-type::before {
  -webkit-mask-image: url("icon-calendar-event.svg");
  mask-image: url("icon-calendar-event.svg");
}
body .sbm-upcoming-time::before,
body .sbm-upcoming-location::before {
  content: "";
  display: block;
  flex: 0 0 1.125rem;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-block-start: 0.0625rem;
  background-color: var(--sbm-orange, #ff6600);
  -webkit-mask: url("icon-clock.svg") center / contain no-repeat;
  mask: url("icon-clock.svg") center / contain no-repeat;
}
body .sbm-upcoming-location::before {
  -webkit-mask-image: url("icon-map-pin.svg");
  mask-image: url("icon-map-pin.svg");
}
body .sbm-upcoming-dots { display: none; }
@media (max-width: 1199px) {
  body .sbm-upcoming-card { --sbm-upcoming-date-width: 3rem; }
  body .sbm-upcoming-card::after {
    inline-size: 9rem;
    block-size: 9rem;
    inset-inline-end: -2.25rem;
    inset-block-end: -2.5rem;
  }
}
@media (max-width: 767px) {
  body .sbm-upcoming-card { --sbm-upcoming-date-width: 4rem; }
  body .sbm-upcoming-card::after { inline-size: 10rem; block-size: 10rem; }
  /* Native touch scrolling: one full card per snap, without changing the desktop grid. */
  body .elementor .sbm-upcoming-slider {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body .elementor .sbm-upcoming-slider::-webkit-scrollbar { display: none; }
  body .elementor .sbm-upcoming-slider > .sbm-upcoming-slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  body .sbm-upcoming-slider:focus-visible {
    outline: 2px solid var(--sbm-orange, #ff6600);
    outline-offset: 3px;
  }
  body .sbm-upcoming-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .5rem;
  }
  body .sbm-upcoming-dots[hidden] { display: none; }
  body .sbm-upcoming-dots button {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  body .sbm-upcoming-dots button::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c5c5c5;
    transition: background-color .2s, transform .2s;
  }
  body .sbm-upcoming-dots button[aria-current="true"]::before {
    background: var(--sbm-orange, #ff6600);
    transform: scale(1.25);
  }
  body .sbm-upcoming-dots button:is(:hover, :focus, :active) {
    background: transparent;
    border: 0;
    color: inherit;
    box-shadow: none;
  }
  body .sbm-upcoming-dots button:hover::before { background: #e65c00; }
  body .sbm-upcoming-dots button:focus-visible {
    outline: 2px solid var(--sbm-orange, #ff6600);
    outline-offset: -5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body .sbm-upcoming-dots button::before { transition: none; }
}