/**
 * Event hero photo carousel (single mm_event).
 *
 * Rendered by inc/event-meta.php in place of the hero's featured image when
 * an event has 2+ photos; rotated by assets/js/prog-hero-carousel.js, which
 * also builds the dot pager. Slide and dot class names are shared with the
 * program hero (same JS contract); every rule here is scoped under
 * .mm-event-hero__carousel so program.css and this file never collide.
 *
 * Loaded as a plain <link> outside WP Rocket's Remove Unused CSS
 * (inc/enqueue.php) because the dots only exist after JS runs.
 */

/* The figure keeps the hero photo's box (3:2, rounded, shadow from
   event.css); slides stack inside it and crossfade. */
.mm-event-hero__carousel {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.mm-event-hero__carousel .mm-prog-hero__carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.mm-event-hero__carousel .mm-prog-hero__carousel-slide.is-active {
    opacity: 1;
}

/* WP Rocket WebP rewrites <img class> into <picture class><img></picture>;
   push the cover sizing onto the inner <img> (same shim as program.css). */
.mm-event-hero__carousel picture.mm-prog-hero__carousel-slide {
    display: block;
}

.mm-event-hero__carousel picture.mm-prog-hero__carousel-slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    box-shadow: none;
}

/* Dot pager. */
.mm-event-hero__carousel .mm-prog-hero__dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
    padding: 7px 10px;
    border-radius: var(--mm-r-pill, 999px);
    background: color-mix(in srgb, var(--mm-teal-900) 30%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mm-event-hero__carousel .mm-prog-hero__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--mm-r-pill, 999px);
    background-color: color-mix(in srgb, var(--mm-white) 55%, transparent);
    cursor: pointer;
    transition: background-color 200ms ease, width 220ms ease;
}

.mm-event-hero__carousel .mm-prog-hero__dot:hover {
    background-color: color-mix(in srgb, var(--mm-white) 85%, transparent);
}

.mm-event-hero__carousel .mm-prog-hero__dot.is-active {
    width: 22px;
    background-color: var(--mm-white);
}

.mm-event-hero__carousel .mm-prog-hero__dot:focus-visible {
    outline: 2px solid var(--mm-white);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .mm-event-hero__carousel .mm-prog-hero__carousel-slide {
        transition: none;
    }
    .mm-event-hero__carousel .mm-prog-hero__dot {
        transition: background-color 200ms ease;
    }
}