/* ── Masked Slider Module ───────────────────────────────────────────────── */

.msm-wrapper {
    position: relative;
    overflow: hidden; /* clip the mask so it never bleeds */
    line-height: 0;   /* kill phantom whitespace */
    z-index: 2;       /* paint above .entry::after stitch overlay (z-index:1) */
}

/* In clip mode the wrapper is just a flex row for alignment — no overflow clipping needed here */
.msm-mode-clip {
    overflow: visible;
}

/* Clip-shape container. Width/aspect-ratio/mask are set per-instance via wp_footer
   (see masked-slider-module.php + frontend.php). 580px/1:1 are last-resort fallbacks. */
.msm-clip-shape {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    width: 580px;
    aspect-ratio: 1 / 1;
}

/* ── Slider ─────────────────────────────────────────────────────────────── */

.msm-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.msm-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.msm-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 700ms ease;
    transition-duration: var(--msm-transition, 700ms);
    will-change: opacity;
    pointer-events: none;
}

.msm-slide.msm-active {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
}

.msm-slide img,
.msm-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

.msm-slide img {
    object-position: center center;
}

/* ── Arrows ─────────────────────────────────────────────────────────────── */

.msm-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, .4);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    padding: 0;
    transition: background .2s ease;
    line-height: 1;
}

.msm-arrow:hover {
    background: rgba(0, 0, 0, .65);
}

.msm-arrow svg {
    width: 20px;
    height: 20px;
    display: block;
}

.msm-prev { left: 16px; }
.msm-next { right: 16px; }

/* ── Dots ───────────────────────────────────────────────────────────────── */

.msm-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
    line-height: 1;
}

.msm-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .8);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.msm-dot.msm-active,
.msm-dot:hover {
    background: #fff;
}

/* ── SVG edge mask — applied as CSS mask-image on the slider itself ─────── */
/* (No overlay element needed; the mask is built as a data URI in frontend.php) */

/* ── PNG border overlay ─────────────────────────────────────────────────── */

.msm-border-overlay {
    position: absolute;
    display: block;
    pointer-events: none; /* never intercept slider clicks */
    object-fit: contain;  /* respect the PNG's own proportions */
    max-width: none;      /* override any theme max-width rules */
    z-index: 10;          /* above slider content and mask layers */
}

.msm-no-slides {
    padding: 2rem;
    text-align: center;
    background: #f5f5f5;
    color: #999;
    font-style: italic;
    line-height: 1.5;
}