/**
 * FozDigital Shared Slider CSS
 *
 * Unified styling for slider dots and the sliding-thumb pager.
 * Block-specific dot positioning (e.g. absolute placement on video cards)
 * stays in each block's own style.css.
 */

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

.foz-slider-dots {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    isolation: isolate;
}

/* Background dots – small grey circles. Size is graded by --foz-dot-dist
   (set per element from JS), so the row reads as ▪ ● ⬤ ● ▪. */
.foz-dot {
    --foz-dot-base: 11px;
    width:  calc(var(--foz-dot-base) - var(--foz-dot-dist, 0) * 2px);
    height: calc(var(--foz-dot-base) - var(--foz-dot-dist, 0) * 2px);
    background: rgba(140, 140, 140, 0.55);
    border: 0;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.25s ease;
}

.foz-dot:hover {
    background: rgba(180, 180, 180, 0.85);
}

.foz-dot:focus-visible {
    outline: 2px solid var(--theme-palette-color-1, #d63a3a);
    outline-offset: 2px;
}

/* The sliding active indicator that overlays the dots row. */
.foz-dot-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 13px;
    height: 13px;
    margin-top: -6.5px;
    border-radius: 50%;
    background: var(--theme-palette-color-1, #d63a3a);
    transform: translateX(0);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .foz-dot-thumb { transition: none; }
}

/* ─── Carousel a11y focus outline (only when keyboard-focused) ───────────── */

[role="region"][aria-roledescription="carousel"]:focus-visible {
    outline: 2px solid var(--theme-palette-color-1, #d63a3a);
    outline-offset: 4px;
}

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

.foz-slider-empty {
    text-align: center;
    color: #ccc;
}