/**
 * Bootstrap Slider Plugin – Frontend CSS
 * z-index layers: bg → overlay(1) → caption(10) → nav group(30)
 */

/* ─── Carousel wrapper ─────────────────────────────────── */
.bsp-carousel-wrap { position: relative; overflow: hidden; }

/* ─── Slide item ───────────────────────────────────────── */
.bsp-carousel-item { position: relative; overflow: hidden; }
.bsp-carousel-item[style*="background-image"] {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* ─── Transitions ──────────────────────────────────────── */
.carousel-item              { transition: transform 0.6s ease-in-out; }
.carousel-fade .carousel-item { transition: opacity 0.6s ease-in-out; }

/* ─── Overlay ──────────────────────────────────────────── */
.bsp-slide-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1; pointer-events: none;
}

/* ─── Caption ──────────────────────────────────────────── */
.bsp-slide-caption {
    /* position/z-index/box-sizing come from inline style (PHP).             */
    /* width + max-width live here so CSS class overrides (e.g. .container)  */
    /* can win — inline styles cannot be beaten by class rules otherwise.     */
    width: 80%;
    max-width: 900px;
    padding: 1.5rem 2rem;
}

/*
 * When a layout class like .container (or .container-*) is applied, let it
 * govern the width. The PHP inline style no longer sets width/max-width, so
 * the specificity battle is gone and these rules take full effect.
 *
 * .container in Bootstrap 5 uses max-width breakpoints up to 1320px (xxl)
 * and adds its own horizontal padding — we just need to reset our defaults.
 */
.bsp-slide-caption.container,
.bsp-slide-caption[class*="container-"] {
    width: 100%;
    /* max-width is intentionally NOT set here — Bootstrap's .container rules  */
    /* define it per breakpoint (up to 1320px on xxl). Any override here would */
    /* fight those rules and win due to specificity ordering.                   */
    padding-left: 0;   /* .container handles its own horizontal gutters        */
    padding-right: 0;
    /* Reset the left:50%+translateX(-50%) centering used by our position grid */
    left: 0;
    right: 0;
    transform: none;
    margin-left: auto;
    margin-right: auto;
}
.bsp-slide-caption > * + *  { margin-top: 0.75rem; }
.bsp-slide-caption h1,
.bsp-slide-caption h2,
.bsp-slide-caption h3,
.bsp-slide-caption h4       { color: inherit; margin-bottom: 0.4rem; line-height: 1.2; }
.bsp-slide-caption p        { margin-bottom: 0.5rem; }
.bsp-slide-caption a.btn,
.bsp-slide-caption .wp-block-button__link {
    display: inline-block;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.bsp-slide-caption a.btn:hover,
.bsp-slide-caption .wp-block-button__link:hover { opacity: 0.9; transform: translateY(-1px); }
.bsp-slide-caption .wp-block-buttons,
.bsp-slide-caption .wp-block-paragraph { margin-top: 0; margin-bottom: 0; }

/* ─── Hide Bootstrap native nav (we use custom elements) ─ */
.bsp-carousel-wrap .carousel-control-prev,
.bsp-carousel-wrap .carousel-control-next,
.bsp-carousel-wrap .carousel-indicators { display: none !important; }


/* ═══════════════════════════════════════════════════════
   SHARED NAV GROUP (when controls + indicators share position)
   ═══════════════════════════════════════════════════════ */
.bsp-nav-group {
    position: absolute;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}


/* ═══════════════════════════════════════════════════════
   CONTROLS
   ═══════════════════════════════════════════════════════ */
.bsp-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Base button – colours & shape come from inline styles (set by PHP) */
.bsp-control {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
    transition: opacity 0.2s ease, transform 0.15s ease;
    opacity: 0.85;
}
.bsp-control:focus-visible { outline: 3px solid rgba(255,255,255,0.7); outline-offset: 2px; }
.bsp-control:hover         { opacity: 1; transform: scale(1.08); }

/* Minimal style tweak */
.bsp-controls--minimal .bsp-control {
    opacity: 0.8;
    font-weight: 300;
}
.bsp-controls--minimal .bsp-control:hover {
    backdrop-filter: brightness(1.3);
}


/* ═══════════════════════════════════════════════════════
   INDICATORS
   ═══════════════════════════════════════════════════════ */
.bsp-indicators {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.bsp-indicator {
    padding: 0; border: none; cursor: pointer;
    background-color: transparent;
    transition: opacity 0.2s ease, transform 0.2s ease,
                background-color 0.2s ease, width 0.2s ease;
}
.bsp-indicator:focus-visible { outline: 2px solid rgba(255,255,255,0.8); outline-offset: 2px; }

/* ── dots ── */
.bsp-indicators--dots .bsp-indicator {
    width: 10px; height: 10px;
    border-radius: 50%;
    /* background-color set inline via PHP + synced by JS */
}
.bsp-indicators--dots .bsp-indicator.active { transform: scale(1.3); }
.bsp-indicators--dots .bsp-indicator:hover:not(.active) { opacity: 0.85; transform: scale(1.1); }

/* ── bars ── */
/*   Horizontal: width varies (22/32px), height = 4px
     Vertical:   height varies (22/32px), width  = 4px
     All dimensions are set inline by PHP and synced by JS.         */
.bsp-indicators--bars .bsp-indicator {
    border-radius: 2px;
    /* width, height, and background-color fully managed inline */
}
.bsp-indicators--bars .bsp-indicator:hover:not(.active) { opacity: 0.85; }

/* ── numbers ── */
.bsp-indicators--numbers .bsp-indicator {
    width: 26px; height: 26px;
    border-radius: 50%;
    font-size: 0.7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,0.3);
    /* background-color + color set inline + synced by JS */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.bsp-indicators--numbers .bsp-indicator.active { border-color: currentColor; }


/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .bsp-slide-caption:not(.container):not([class*="container-"]) { width: 90%; }
    .bsp-slide-caption { padding: 1rem 1.25rem; }
    .bsp-slide-caption h1 { font-size: 1.4rem; }
    .bsp-slide-caption h2 { font-size: 1.2rem; }
    .bsp-slide-caption p  { font-size: 0.875rem; }
    .bsp-control  { width: 36px !important; height: 36px !important; }
}
@media (max-width: 575.98px) {
    .bsp-slide-caption:not(.container):not([class*="container-"]) { width: 95%; }
    .bsp-slide-caption { padding: 0.75rem 1rem; }
    .bsp-control  { width: 32px !important; height: 32px !important; }
}

/* ─── Slide title ───────────────────────────────────────── */
.bsp-slide-title {
    /* color is set inline per-slide */
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    word-break: break-word;
}

/* ─── Slide content block ───────────────────────────────── */
.bsp-slide-content {
    /* color is set inline per-slide */
}
.bsp-slide-content p:last-child { margin-bottom: 0; }
.bsp-slide-content a.btn,
.bsp-slide-content .wp-block-button__link {
    display: inline-block;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.bsp-slide-content a.btn:hover,
.bsp-slide-content .wp-block-button__link:hover { opacity: 0.9; transform: translateY(-1px); }
.bsp-slide-content .wp-block-buttons,
.bsp-slide-content .wp-block-paragraph { margin-top: 0; margin-bottom: 0; }

/* ─── Video background ──────────────────────────────────── */
.bsp-slide-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}
/* Ensure overlay and caption sit above the video */
.bsp-slide-overlay { z-index: 1; }
.bsp-slide-caption  { z-index: 10; }

/* ─── Responsive title ──────────────────────────────────── */
@media (max-width: 575.98px) {
    .bsp-slide-title { font-size: 1.25rem !important; }
}