/* ─── Mimbar Digital — Public Slider CSS ─────────────────────────────────── */

.mimbar-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #111;
    aspect-ratio: 16 / 9;
    user-select: none;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) {
    .mimbar-slider::before {
        content: '';
        display: block;
        padding-top: 56.25%; /* 16:9 */
    }
    .mimbar-slider .mimbar-slider-track {
        position: absolute;
        inset: 0;
    }
}

/* Track */
.mimbar-slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mimbar-slider[data-transition="fade"] .mimbar-slider-track {
    display: block;
    position: relative;
}

/* Slides */
.mimbar-slide {
    position: relative;
    min-width: 100%;
    height: 100%;
    overflow: hidden;
}

.mimbar-slider[data-transition="fade"] .mimbar-slide {
    position: absolute;
    inset: 0;
    min-width: unset;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.mimbar-slider[data-transition="fade"] .mimbar-slide.is-active {
    opacity: 1;
    position: relative;
}

.mimbar-slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay */
.mimbar-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.70) 0%,
        rgba(0,0,0,0.20) 40%,
        transparent 70%
    );
    pointer-events: none;
}

/* When a custom caption background is set, the full-height overlay gradient is
   removed entirely — the color is painted on the caption element itself (which
   only occupies the bottom), so the image above stays fully visible. */
.mimbar-slider.mimbar-has-custom-caption .mimbar-slide-overlay {
    background: none;
}

/* Caption */
.mimbar-slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 24px 24px;
    color: var(--mimbar-title-color, #fff);
}

.mimbar-slide-title {
    font-size: clamp(16px, 2.5vw, 24px);
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.2;
    letter-spacing: -0.3px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    color: var(--mimbar-title-color, #fff);
}

.mimbar-slide-desc {
    font-size: clamp(13px, 1.5vw, 15px);
    margin: 0 0 8px;
    opacity: 0.85;
    line-height: 1.4;
    color: var(--mimbar-desc-color, inherit);
}

.mimbar-slide-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    opacity: 0.70;
    margin: 0;
    color: var(--mimbar-desc-color, inherit);
}

.mimbar-slide-dates svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Custom caption background: painted on the caption block itself so it hugs the
   text content at the bottom. A bottom-to-top gradient keeps the bottom fully
   solid and softly fades the very top edge into the image. Because the caption
   box height equals its text height, this never covers the image above it. */
.mimbar-slider.mimbar-has-custom-caption .mimbar-slide-caption {
    background-image: linear-gradient(
        to top,
        var(--mimbar-caption-bg) 0%,
        var(--mimbar-caption-bg) 100%
    );
}

/* Arrows */
.mimbar-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: background 0.2s, opacity 0.2s, transform 0.2s;
    opacity: 0;
    z-index: 10;
}

.mimbar-slider-arrow svg { width: 18px; height: 18px; }

.mimbar-slider:hover .mimbar-slider-arrow { opacity: 1; }
.mimbar-slider-arrow:hover { background: rgba(255,255,255,0.28); }

.mimbar-arrow-prev { left: 14px; }
.mimbar-arrow-next { right: 14px; }

.mimbar-arrow-prev:hover { transform: translateY(-50%) translateX(-2px); }
.mimbar-arrow-next:hover { transform: translateY(-50%) translateX(2px); }

/* Dots */
.mimbar-slider-dots {
    position: absolute;
    bottom: 16px;
    right: 20px;
    display: flex;
    gap: 6px;
    z-index: 10;
}

.mimbar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s, width 0.25s;
}

.mimbar-dot.is-active {
    background: #fff;
    width: 20px;
    border-radius: 999px;
}

/* Responsive */
@media (max-width: 480px) {
    .mimbar-slider-arrow { width: 32px; height: 32px; opacity: 1; }
    .mimbar-slider-arrow svg { width: 14px; height: 14px; }
}

/* ── Mobile: show the slider image only ─────────────────────────────────────
   On small screens the slider image is short, so the caption (title, description
   and dates) overlapped it. On mobile we hide the caption entirely and show just
   the image. The image-related overlay is hidden too since there is no text over
   it. Desktop is unaffected — the caption still appears there. */
@media (max-width: 768px) {
    .mimbar-slide-caption,
    .mimbar-slide-overlay {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 5 — additions
══════════════════════════════════════════════════════════════════════════ */

/* ── Track grab/grabbing cursors (slide mode) ────────────────────────── */
.mimbar-slider[data-transition="slide"] .mimbar-slider-track {
    cursor: grab;
    will-change: transform;
}
.mimbar-slider[data-transition="slide"] .mimbar-slider-track:active {
    cursor: grabbing;
}

/* Disable native drag/select so dragging feels right */
.mimbar-slide,
.mimbar-slide-image,
.mimbar-slide-caption {
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Dot autoplay progress indicator ─────────────────────────────────── */
.mimbar-dot {
    position: relative;
    overflow: hidden;
}
.mimbar-dot-progress {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.55);
    border-radius: inherit;
    transform-origin: left center;
    transform: scaleX(0);
    pointer-events: none;
}
@keyframes mimbar-dot-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Active dot's progress fills its full pill width */
.mimbar-dot.is-active .mimbar-dot-progress {
    background: rgba(255,255,255,0.85);
}

/* ── Screen-reader only utility ──────────────────────────────────────── */
.mimbar-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Slider focus outline (keyboard) ─────────────────────────────────── */
.mimbar-slider:focus-visible {
    outline: 3px solid var(--md-blue, #007AFF);
    outline-offset: 2px;
}

/* Hide outline when not via keyboard */
.mimbar-slider:focus:not(:focus-visible) {
    outline: none;
}

/* ── Arrow buttons — better focus + hover ───────────────────────────── */
.mimbar-slider-arrow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    opacity: 1;
}

/* Always-visible arrows on touch devices */
@media (hover: none) {
    .mimbar-slider-arrow { opacity: 0.9; }
}

/* ── Loading skeleton (before image loads) ───────────────────────────── */
.mimbar-slide-image:not([src]),
.mimbar-slide-image[src=""] {
    background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
    background-size: 200% 100%;
    animation: mimbar-skeleton 1.4s ease-in-out infinite;
}
@keyframes mimbar-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mimbar-slider-track,
    .mimbar-slider[data-transition="fade"] .mimbar-slide,
    .mimbar-dot,
    .mimbar-dot-progress {
        transition: none !important;
        animation: none !important;
    }
    .mimbar-dot-progress { display: none; }
}

/* ── Subtle shadow for depth ─────────────────────────────────────────── */
.mimbar-slider {
    box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
}

/* ── Caption refinement — better typography on small screens ─────────── */
@media (max-width: 640px) {
    .mimbar-slide-title {
        font-size: 15px;
        line-height: 1.25;
    }
    .mimbar-slide-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 12px;
    }
    .mimbar-slide-dates {
        font-size: 11px;
    }
}

/* ── Hide caption when image alone is intended (no title) ───────────── */
.mimbar-slide:not(:has(.mimbar-slide-title)) .mimbar-slide-overlay,
.mimbar-slide:not(:has(.mimbar-slide-title)) .mimbar-slide-caption {
    display: none;
}

/* ── Pause indicator (subtle, when hovered/focused) ─────────────────── */
.mimbar-slider {
    position: relative;
}
.mimbar-slider::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M5 4h3v12H5zM12 4h3v12h-3z'/%3E%3C/svg%3E") no-repeat center;
    background-size: 12px;
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    z-index: 11;
}
.mimbar-slider:hover::after,
.mimbar-slider:focus-within::after {
    opacity: 1;
    transform: scale(1);
}

/* On mobile, no pause icon (no hover) */
@media (hover: none) {
    .mimbar-slider::after { display: none; }
}