/* ═══════════════════════════════════════════════
   Custom Hero Slider v3
   Two display modes:
   1. cover  — fixed px height, image cropped to fill
   2. auto   — padding-bottom % keeps full image visible
               at every screen width (Smart Slider style)
   ═══════════════════════════════════════════════ */

/* ── Base wrapper ── */
.csl-slider-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #111;
    user-select: none;
    -webkit-user-select: none;
    height: var(--csl-h, 550px);
    /* CLS fix: contain layout so slides don't affect surrounding content */
    contain: layout size;
    will-change: auto;
}
@media (max-width: 768px) {
    .csl-slider-wrap {
        height: var(--csl-mh, var(--csl-h, 500px));
    }
}

/* ── Auto mode: padding-bottom = (imgH/imgW)*100%
   This makes the slider box always match the image
   aspect ratio at any screen width — zero cropping.
   The ratio is injected server-side via PHP so there
   is no layout jump (same technique Smart Slider uses). ── */
.csl-slider-wrap.csl-mode-auto {
    height: 0 !important;
    padding-bottom: var(--csl-ratio, 41.67%);
}
/* No media-query override needed — padding-bottom % is
   always relative to element width, so it auto-scales. */

/* ── Track: always fills the wrapper ── */
.csl-track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ══════════════════════════════════════
   SLIDES
   ══════════════════════════════════════ */
.csl-slide {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--csl-anim, 700ms) ease;
}
.csl-slide.is-active  { opacity: 1; pointer-events: auto; z-index: 2; }
.csl-slide.is-leaving { opacity: 0; z-index: 1; }

/* Slide (push) transition */
.csl-slider-wrap[data-transition="slide"] .csl-slide {
    opacity: 1;
    transform: translateX(100%);
    transition: transform var(--csl-anim, 700ms) cubic-bezier(.77,0,.18,1);
}
.csl-slider-wrap[data-transition="slide"] .csl-slide.is-active             { transform: translateX(0); }
.csl-slider-wrap[data-transition="slide"] .csl-slide.is-leaving            { transform: translateX(-100%); }
.csl-slider-wrap[data-transition="slide"] .csl-slide.from-prev             { transform: translateX(-100%); }
.csl-slider-wrap[data-transition="slide"] .csl-slide.from-prev.is-active   { transform: translateX(0); }
.csl-slider-wrap[data-transition="slide"] .csl-slide.from-prev.is-leaving  { transform: translateX(100%); }

/* Zoom transition */
.csl-slider-wrap[data-transition="zoom"] .csl-slide {
    opacity: 0;
    transform: scale(1.06);
    transition: opacity var(--csl-anim,700ms) ease, transform var(--csl-anim,700ms) ease;
}
.csl-slider-wrap[data-transition="zoom"] .csl-slide.is-active  { opacity: 1; transform: scale(1); }
.csl-slider-wrap[data-transition="zoom"] .csl-slide.is-leaving { opacity: 0; transform: scale(0.96); }

/* ── Image ── */
.csl-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--csl-obj-pos, center center);
}
/* Auto mode: no crop — image fills box exactly */
.csl-slider-wrap.csl-mode-auto .csl-slide img {
    object-fit: fill;
}

/* ══════════════════════════════════════
   OVERLAY
   ══════════════════════════════════════ */
.csl-overlay {
    position: absolute;
    inset: 0;
    background: var(--csl-ov-color, transparent);
    opacity: var(--csl-ov-opacity, 0);
    pointer-events: none;
    z-index: 3;
}

/* ══════════════════════════════════════
   CAPTION
   ══════════════════════════════════════ */
.csl-caption {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    text-align: center;
    color: #fff;
    font-size: clamp(14px, 2.5vw, 28px);
    font-weight: 700;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
    padding: 0 16px;
    max-width: 800px;
    width: 100%;
    pointer-events: none;
}

/* ══════════════════════════════════════
   ARROWS
   ══════════════════════════════════════ */
.csl-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 46px;
    height: 46px;
    border: none;
    color: var(--csl-arr-color, #fff);
    background: var(--csl-arr-bg, rgba(0,0,0,0.35));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity .2s, transform .15s;
    outline: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.csl-arrow svg      { width: 20px; height: 20px; flex-shrink: 0; }
.csl-arrow:hover    { opacity: .8; }
.csl-arrow:active   { transform: translateY(-50%) scale(.92); }
.csl-prev           { left: 14px; }
.csl-next           { right: 14px; }
.csl-arr-round      { border-radius: 50%; }
.csl-arr-square     { border-radius: 4px; }
.csl-arr-minimal    { background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.csl-arr-minimal:hover { background: rgba(0,0,0,.2) !important; border-radius: 50%; }

/* ══════════════════════════════════════
   DOTS
   ══════════════════════════════════════ */
.csl-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 7px;
    align-items: center;
}
.csl-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--csl-dot-c, rgba(255,255,255,.8));
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s, border-color .2s;
    outline: none;
}
.csl-dot.is-active {
    background: var(--csl-dot-act, #fff);
    border-color: var(--csl-dot-act, #fff);
    transform: scale(1.25);
}
.csl-dot:hover:not(.is-active) { background: rgba(255,255,255,.35); }

/* ══════════════════════════════════════
   MOBILE TWEAKS
   (arrows & dots scale down; image ratio
    is already perfect via padding-bottom)
   ══════════════════════════════════════ */
@media (max-width: 600px) {
    .csl-arrow      { width: 32px; height: 32px; }
    .csl-arrow svg  { width: 14px; height: 14px; }
    .csl-prev       { left: 6px; }
    .csl-next       { right: 6px; }
    .csl-dots       { bottom: 8px; gap: 5px; }
    .csl-dot        { width: 7px; height: 7px; border-width: 1.5px; }
    .csl-caption    { bottom: 30px; }
}
/* ══════════════════════════════════════
   CLS FIXES
   ══════════════════════════════════════ */

/* Prevent slides from affecting document layout */
.csl-track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    contain: strict;
}

/* First slide visible immediately - no flash */
.csl-slide:first-child {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}
.csl-slide:first-child.is-leaving {
    opacity: 0;
    z-index: 1;
}

/* Prevent image causing CLS - explicit dimensions */
.csl-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--csl-obj-pos, center center);
    /* Prevent image load causing reflow */
    will-change: auto;
}
/* Hard fix for CLS — all slides are absolutely positioned
   so they should NEVER affect document layout flow */
.csl-slider-wrap,
.csl-track,
.csl-slide {
    /* Tell browser these won't affect outside layout */
    contain: layout;
}

/* Slide 2 CLS fix — prevent is-active class change causing reflow */
.csl-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
    /* No layout properties change — only opacity */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}