/*
 * entity_splide_widget — visual layer.
 *
 * The renderer (EntitySplideWidgetRenderer.kt) emits the standard Splide
 * markup, plus a thin wrapper for our own region wiring:
 *
 *   .entity-splide-widget                    ← root (aqcShell)
 *     .entity-splide-title                   ← optional heading
 *     .entity-splide-body                    ← content region
 *       section.splide.<nodeId>_splide       ← Splide root (aria-label set from `label` field)
 *         div.splide__track
 *           ul.splide__list
 *             li.splide__slide               ← one tile per bound row, holds the listitem widget
 *     .entity-splide-empty                   ← shown when boundRows is empty
 *
 * Splide's own stylesheet (`/vendor/splidejs/splide.min.css`) provides
 * the slider chrome (track, list, slides, arrows, pagination). Our
 * additions here are scoped to layout glue + the empty/skeleton states.
 */

.entity-splide-widget {
    display: block;
    box-sizing: border-box;
}

.entity-splide-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #0f172a;
    margin: 0 0 12px;
}

/* Transparent region wrapper — hook for design-panel overrides. */
.entity-splide-body {
    display: block;
}

/* Each .splide__slide is transparent so the listitem widget inside
   owns its appearance. min-width:0 stops flex children from blowing
   out the track when their content is wide (long titles, etc.). */
.entity-splide-widget .splide__slide {
    box-sizing: border-box;
    min-width: 0;
}

.entity-splide-widget .splide__slide > * {
    width: 100%;
    box-sizing: border-box;
}

/* ── Empty-state ──────────────────────────────────────────────────────── */

.entity-splide-empty {
    width: 100%;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}

/* ── Skeleton placeholders (design mode only) ─────────────────────────── */

.entity-splide-skeleton-row {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.entity-splide-skeleton {
    flex: 1 1 240px;
    min-height: 120px;
    padding: 12px;
    background: #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.entity-splide-skeleton .entity-splide-skeleton-line {
    height: 12px;
    width: 60%;
    background: linear-gradient(
        90deg,
        rgba(203, 213, 225, 0.5) 0%,
        rgba(226, 232, 240, 0.9) 50%,
        rgba(203, 213, 225, 0.5) 100%
    );
    background-size: 200% 100%;
    border-radius: 4px;
    animation: entity-splide-skeleton-shimmer 1.4s infinite ease-in-out;
}

@keyframes entity-splide-skeleton-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}