/* ------------------------------------------------------------------------
   NACSShow.CurvedImageSliderWidget styles
   Scoped to .curved-image-slider so they cannot leak into other widgets.
   ------------------------------------------------------------------------ */

.curved-image-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: transparent;
    /* `height` is set inline by the Razor view from the widget property */
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.curved-image-slider .curved-image-slider__canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    outline: none;
}

/* Empty-state placeholder shown when the editor hasn't picked any images. */
.curved-image-slider .curved-image-slider__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.95rem;
    background-color: #f5f5f5;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
}

/* The Three.js canvas should respect the parent stacking context and
   never trap pointer events from the surrounding page sections. */
.curved-image-slider canvas {
    pointer-events: none;
}

@media (max-width: 768px) {
    .curved-image-slider {
        /* Allow the inline height to win, but provide a sensible floor
           in case an editor leaves the field blank on a small screen. */
        min-height: 240px;
    }
}