/**
 * RackTrack — Upcoming Events carousel (front end) styles.
 * @since 1.36.0
 */

.rt-uev {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    text-align: center;
}
.rt-uev *,
.rt-uev *::before,
.rt-uev *::after { box-sizing: border-box; }

/* When a section background color is set, give the content some breathing room. */
.rt-uev-has-bg {
    padding: 24px 16px;
}

/* Edge-to-edge mode: the widget's own box is flattened by a scoped <style> the
   widget prints (targeting its .page-builder-widget wrapper). Here we remove the
   section's own side padding so the graphics run flush to the container edges.
   The header (logo/title) keeps a little vertical breathing room. */
.rt-uev-edge {
    padding: 0;
}
.rt-uev-edge.rt-uev-has-bg {
    padding: 20px 0; /* keep top/bottom room for the logo/title; no side gap */
}
.rt-uev-edge .rt-uev-logo-wrap,
.rt-uev-edge .rt-uev-title {
    padding-left: 16px;
    padding-right: 16px;
}

/* ---- Section header ---- */
.rt-uev-logo-wrap {
    text-align: center;
    margin: 0 0 12px;
}
.rt-uev-logo {
    display: inline-block;
    height: auto;
    width: auto;
    max-width: 100%;
}
.rt-uev-title {
    text-align: center;
    margin: 0 0 16px;
    line-height: 1.2;
}

/* ---- Carousel ---- */
.rt-uev-carousel {
    position: relative;
    width: 100%;
}

/* Optional inner side padding on the GRAPHICS only (widget setting). The gap is
   filled by the section background color, framing the slideshow. Applied to the
   carousel wrapper so the header (logo/title) is unaffected. */
.rt-uev-has-sidepad .rt-uev-carousel {
    padding-left: var(--rt-uev-side-pad, 0px);
    padding-right: var(--rt-uev-side-pad, 0px);
}
/* Keep it proportionate on narrow screens (~60% of the desktop value). */
@media (max-width: 782px) {
    .rt-uev-has-sidepad .rt-uev-carousel {
        padding-left: calc(var(--rt-uev-side-pad, 0px) * 0.6);
        padding-right: calc(var(--rt-uev-side-pad, 0px) * 0.6);
    }
}

/* Optional rounded corners on the graphics (widget setting). Applied to the
   frame, which already clips its slides via overflow:hidden. */
.rt-uev-has-radius .rt-uev-frame {
    border-radius: var(--rt-uev-radius, 0px);
}
.rt-uev-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Height is set by JS to match the current slide's natural height; this
       transition animates the section growing/shrinking between slides. */
    transition: height 0.4s ease;
}
.rt-uev-track {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease;
    will-change: transform;
    align-items: flex-start;
}
.rt-uev-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    display: block;
    line-height: 0; /* kill inline-image whitespace so height == image height */
}
.rt-uev-link {
    display: block;
    width: 100%;
    text-decoration: none;
    line-height: 0;
}
/* Each graphic fills the full container width; its height follows its own
   aspect ratio (never cropped, never letterboxed). */
.rt-uev-img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-user-drag: none;
    user-select: none;
}

/* Optional caption pinned to the bottom of the slide. */
.rt-uev-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
}
.rt-uev-slide .rt-uev-caption { line-height: 1.3; }

/* ---- Arrows ---- */
.rt-uev-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}
.rt-uev-prev { left: 12px; }
.rt-uev-next { right: 12px; }
.rt-uev-carousel:hover .rt-uev-arrow { opacity: 1; }
.rt-uev-arrow:hover { background: rgba(0, 0, 0, 0.7); }
.rt-uev-arrow:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }

/* ---- Dots ---- */
.rt-uev-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    flex-wrap: wrap;
}
.rt-uev-dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #c3c4c7;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.rt-uev-dot:hover { background: #8a8d91; }
.rt-uev-dot.is-active {
    background: #2271b1;
    transform: scale(1.25);
}

/* ---- Mobile / touch ---- */
@media (max-width: 782px) {
    /* Arrows always visible + tappable (no hover on touch). */
    .rt-uev-arrow {
        opacity: 1;
        width: 38px;
        height: 38px;
        font-size: 17px;
    }
    .rt-uev-prev { left: 6px; }
    .rt-uev-next { right: 6px; }
    .rt-uev-caption { font-size: 12px; padding: 6px 10px; }
}

/* Respect reduced-motion: no slide animation (JS also skips autoplay). */
@media (prefers-reduced-motion: reduce) {
    .rt-uev-track { transition: none; }
}