/* ==========================================================
   DELIOX SLIDER v2.1 — CSS
   All styles scoped under .dlx-section.
========================================================== */

/* Scoped box-sizing — only inside our widget */
.dlx-section,
.dlx-section *,
.dlx-section *::before,
.dlx-section *::after { box-sizing: border-box; }

/* ── Section ─────────────────────────────────────────── */
.dlx-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 60px 24px;
    font-family: inherit;
}
/* Vertical padding inside wrapper so the scaled active slide
   isn't clipped top/bottom. Wide horizontal clip lets the
   enlarged cascade active card breathe without page-overflow. */
.dlx-section .dlx-carousel-wrapper {
    padding-top: 28px;
    padding-bottom: 28px;
    clip-path: inset(-200px -40px);
}
/* Cascade mode keeps even more vertical headroom for stacking */
.dlx-section.layout-cascade .dlx-carousel-wrapper {
    padding-top: 48px;
    padding-bottom: 48px;
    clip-path: inset(-260px -60px);
}

/* ── Title ───────────────────────────────────────────── */
.dlx-section .dlx-title-wrap { text-align: center; margin-bottom: 36px; }
.dlx-section .dlx-title {
    display: inline-block; margin: 0;
    padding: 10px 24px;
    font-size: clamp(15px, 2.4vw, 26px);
    line-height: 1.3; color: #fff; letter-spacing: 0.3px;
}
.dlx-section .dlx-title.style-bordered  { border: 2px solid #fff; }
.dlx-section .dlx-title.style-plain     { padding: 6px 0; }
.dlx-section .dlx-title.style-underline { padding-bottom: 10px; position: relative; }
.dlx-section .dlx-title.style-underline::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 60%; height: 2px;
    background: #fff; border-radius: 2px;
}
.dlx-section .dlx-title.style-pill { border: 2px solid #fff; border-radius: 999px; padding: 8px 28px; }

/* ── Progress bar ────────────────────────────────────── */
.dlx-section .dlx-progress-track {
    width: 100%; height: 2px; background: rgba(255,255,255,.15);
    margin-bottom: 16px; border-radius: 2px; overflow: hidden;
}
.dlx-section .dlx-progress-fill {
    height: 100%; width: 0%; background: #fff;
    border-radius: 2px; transition: width .4s ease;
}

/* ── Carousel wrapper ────────────────────────────────── */
.dlx-section .dlx-carousel-wrapper {
    display: flex; align-items: center; gap: 8px;
    position: relative; max-width: 1000px; margin: 0 auto;
    width: 100%;
}

/* Accent lines */
.dlx-section .dlx-carousel-wrapper.has-lines::before,
.dlx-section .dlx-carousel-wrapper.has-lines::after {
    content: ''; position: absolute; left: -40px; right: -40px;
    height: var(--dlx-line-thick, 2px); background: currentColor;
    pointer-events: none; z-index: 5;
}
.dlx-section .dlx-carousel-wrapper.has-lines::before { top: calc(-1 * var(--dlx-line-thick, 2px) - 8px); }
.dlx-section .dlx-carousel-wrapper.has-lines::after  { bottom: calc(-1 * var(--dlx-line-thick, 2px) - 8px); }
.dlx-section .dlx-carousel-wrapper.lines-dashed::before,
.dlx-section .dlx-carousel-wrapper.lines-dashed::after { background: none; border-top: var(--dlx-line-thick,2px) dashed currentColor; height: 0; }
.dlx-section .dlx-carousel-wrapper.lines-dotted::before,
.dlx-section .dlx-carousel-wrapper.lines-dotted::after { background: none; border-top: var(--dlx-line-thick,2px) dotted currentColor; height: 0; }
.dlx-section .dlx-carousel-wrapper.lines-glow::before,
.dlx-section .dlx-carousel-wrapper.lines-glow::after   { box-shadow: 0 0 8px 2px currentColor, 0 0 24px 4px rgba(255,255,255,.18); }

/* Arrows overlay */
.dlx-section .dlx-carousel-wrapper.arrow-pos-overlay .dlx-btn {
    position: absolute; z-index: 30; top: 50%; transform: translateY(-50%);
}
.dlx-section .dlx-carousel-wrapper.arrow-pos-overlay .dlx-prev { left: 8px; }
.dlx-section .dlx-carousel-wrapper.arrow-pos-overlay .dlx-next { right: 8px; }

/* ── Track container ─────────────────────────────────── */
.dlx-section .dlx-track-container {
    /* overflow:visible so scaled active slide isn't clipped.
       The horizontal clip happens at .dlx-section. */
    overflow: visible;
    flex: 1 1 auto; min-width: 0;
    width: 100%;
    perspective: 1200px;
}
/* Hard floor: the cascade area can never collapse to zero height,
   even before (or without) JS setting the track height inline. */
.dlx-section.layout-cascade .dlx-track-container { min-height: 240px; }

/* ── Track ───────────────────────────────────────────── */
.dlx-section .dlx-track {
    display: flex; gap: 16px;
    will-change: transform;
}
.dlx-section.layout-cascade .dlx-track,
.dlx-section.layout-fade    .dlx-track { display: block; }

/* ── Slides ──────────────────────────────────────────── */
.dlx-section .dlx-slide {
    flex: 0 0 auto;
    position: relative; z-index: 1;
    cursor: pointer;
    transform-style: preserve-3d;
    isolation: isolate;
}
.dlx-section .dlx-slide a { text-decoration: none; display: block; height: 100%; }
.dlx-section .dlx-slide.active { z-index: 100 !important; }

/* ══════════════════════════════════════════════════════
   CASCADE SAFETY NET (v2.3.1)
   The cascade slide layout requires the JS to position every
   slide via transforms. If JS hasn't run yet (Elementor editor
   re-render, slow page load), all slides would otherwise stack
   at top:0,left:0 and be invisible.
   Before .dlx-initialized is added by the JS, we render the
   slides as a simple flex row so they're always visible.
══════════════════════════════════════════════════════ */
.dlx-section.layout-cascade:not(.dlx-initialized) .dlx-track {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    height: auto !important;
    overflow: visible;
    perspective: none;
}
.dlx-section.layout-cascade:not(.dlx-initialized) .dlx-slide {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 auto;
    width: 28% !important;
    max-width: 260px;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}
/* During the fallback, hide overflow slides so the row doesn't
   stretch the page horizontally when there are many posts */
.dlx-section.layout-cascade:not(.dlx-initialized) .dlx-slide:nth-child(n+6) {
    display: none;
}

/* Cascade + sizing-auto: enforce a fallback aspect ratio so the
   card has visible height even before images load (otherwise the
   slide collapses to zero height and nothing shows). */
.dlx-section.layout-cascade.sizing-auto .dlx-card,
.dlx-section.layout-cascade.sizing-auto .dlx-card-template {
    aspect-ratio: 3/4;
    min-height: 200px;
}

/* ── Cascade-specific tuning ─────────────────────────── */
.dlx-section.layout-cascade .dlx-track-container { perspective: 1400px; }
.dlx-section.layout-cascade .dlx-track { transform-style: preserve-3d; }
.dlx-section.layout-cascade .dlx-slide {
    position: absolute; top: 0; left: 0;
    transform-origin: center center;
    backface-visibility: hidden;
    /* Slight base shadow on every card so the layering reads better */
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.25));
}
.dlx-section.layout-cascade .dlx-slide.active {
    /* Active gets a stronger drop shadow to "lift" from the stack */
    filter: drop-shadow(0 22px 40px rgba(0,0,0,0.45));
}
/* The popup-trigger wrapper shouldn't take its own space when we
   set the slide to position:absolute — it's just a click region */
.dlx-section.layout-cascade .dlx-popup-trigger { width: 100%; height: 100%; display: block; }
.dlx-section.layout-fade    .dlx-slide { position: absolute; top: 0; left: 0; width: 100%; }
.dlx-section.layout-fade    .dlx-slide.active { position: relative; }

/* ── Card ────────────────────────────────────────────── */
/* .dlx-card: receives render transform (scale, rotateY, translateZ)
   .dlx-card-inner: receives tilt transform (rotateX/Y on hover) */
.dlx-section .dlx-card {
    position: relative;
    background: transparent;
    will-change: transform;
    transform-style: preserve-3d;
}
.dlx-section .dlx-card-inner {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.dlx-section .dlx-slide.active .dlx-card-inner:hover {
    transition: transform 0.08s linear;
}

/* Default sizing */
.dlx-section.sizing-ratio  .dlx-card { aspect-ratio: 3/4; }
.dlx-section.sizing-auto   .dlx-card { aspect-ratio: unset; }
.dlx-section.sizing-fill   .dlx-card { height: 100%; }

/* ── Card template — make it fill the slide track ───────
   When a saved Elementor template is used as the card, it
   renders inside .dlx-card-template > .dlx-card-inner > .dlx-card-clip.
   The .dlx-card-template element already inherits the sizing
   rules below (aspect-ratio / fixed height / fill) because it
   carries the .dlx-card class. We make the clip fill it and
   clip overflow so Elementor sections inside don't blow out
   the track layout. This fixes the "cards pile up" bug. */
.dlx-section .dlx-card-template { width: 100%; }
.dlx-section .dlx-card-template .dlx-card-clip {
    display: flex;
    flex-direction: column;
}
.dlx-section .dlx-card-template .dlx-card-clip > * {
    width: 100%;
}
/* Auto sizing: clip flows with template content height */
.dlx-section.sizing-auto .dlx-card-template .dlx-card-clip {
    position: relative; inset: unset;
    height: auto;
}

/* ── Clip ────────────────────────────────────────────── */
.dlx-section .dlx-card-clip {
    position: absolute; inset: 0;
    overflow: hidden;
    border-radius: 8px;
    /* No hardcoded background — controlled by Elementor 'card_bg' control */
    background: transparent;
}
.dlx-section.sizing-auto .dlx-card-clip {
    position: relative; inset: unset;
    height: auto;
}

/* ── Image ───────────────────────────────────────────── */
.dlx-section .dlx-card-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    user-select: none; pointer-events: none;
    transition: transform .6s ease;
    border-radius: inherit;
}
.dlx-section.sizing-auto .dlx-card-img { height: auto; object-fit: unset; }

/* ── Active slide effects ────────────────────────────── */

/* zoom_loop */
.dlx-section .dlx-slide.active.effect-zoom_loop .dlx-card-clip .dlx-card-img {
    animation: dlxZoom 8s ease-in-out infinite alternate;
}
@keyframes dlxZoom { from { transform: scale(1); } to { transform: scale(1.07); } }

/* shine */
.dlx-section .dlx-slide.active.effect-shine .dlx-card-clip::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.16) 45%, rgba(255,255,255,.07) 55%, transparent 75%);
    animation: dlxShine 3.5s ease-in-out infinite;
    pointer-events: none; z-index: 5;
}
@keyframes dlxShine {
    0%,100% { opacity: 0; transform: translateX(-120%); }
    40%,60% { opacity: 1; transform: translateX(120%); }
}

/* float */
.dlx-section .dlx-slide.active.effect-float {
    animation: dlxFloat 4s ease-in-out infinite;
}
@keyframes dlxFloat {
    0%,100% { transform: scale(var(--dlx-scale, 1.18)) translateY(0); }
    50%     { transform: scale(var(--dlx-scale, 1.18)) translateY(-7px); }
}

/* ── Overlay ─────────────────────────────────────────── */
.dlx-section .dlx-card-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    pointer-events: none; z-index: 2;
    padding: 40px 16px 18px;
}
.dlx-section .dlx-card-overlay.pos-center { justify-content: center; }
.dlx-section .dlx-card-overlay.pos-top    { justify-content: flex-start; }

/* Auto sizing: relative overlay below image */
.dlx-section.sizing-auto .dlx-card-clip .dlx-card-overlay {
    position: relative; inset: unset;
    margin-top: -56px;
    background: linear-gradient(to top, rgba(0,0,0,.72), transparent) !important;
    pointer-events: auto;
}

/* ── Text ────────────────────────────────────────────── */
.dlx-section .dlx-card-title {
    color: #fff; font-size: clamp(10px, 1.2vw, 14px);
    letter-spacing: 3px; text-transform: uppercase;
    font-weight: 600; margin: 0 0 5px; line-height: 1.3;
}
.dlx-section .dlx-card-subtitle {
    color: rgba(255,255,255,.82); font-size: clamp(8px, .9vw, 11px);
    letter-spacing: 2px; text-transform: uppercase; margin: 0; line-height: 1.3;
}

/* ── Arrow buttons — full reset over Elementor ───────── */
.dlx-section .dlx-btn,
.dlx-section .dlx-btn:focus,
.dlx-section .dlx-btn:focus-visible,
.dlx-section .dlx-btn:focus-within,
.dlx-section .dlx-btn:active,
.dlx-section .dlx-btn:hover {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}
.dlx-section .dlx-btn {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    background: transparent;
    border: none !important;
    color: #fff; font-size: 28px; line-height: 1;
    cursor: pointer; padding: 0;
    border-radius: 50%;
    opacity: .8; user-select: none;
    position: relative; z-index: 20;
    transition: opacity .2s, transform .2s, background .2s, color .2s;
    appearance: none; -webkit-appearance: none;
}
.dlx-section .dlx-btn:hover  { opacity: 1; transform: scale(1.12); }
.dlx-section .dlx-btn:active { transform: scale(.93); }
.dlx-section .dlx-btn:disabled { opacity: .18; cursor: default; transform: none !important; }

.dlx-section .dlx-arrows-external { display: flex; gap: 10px; margin-top: 20px; justify-content: center; }

/* ── Dots ────────────────────────────────────────────── */
.dlx-section .dlx-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.dlx-section .dlx-dot {
    display: flex; align-items: center; justify-content: center;
    padding: 0; border: none; cursor: pointer;
    background: rgba(255,255,255,.3); border-radius: 50%;
    width: 8px; height: 8px; font-size: 0; line-height: 1;
    transition: transform .25s, background .25s, width .25s;
}
.dlx-section .dlx-dot.active { background: #fff; transform: scale(1.4); }
.dlx-section .dots-line  .dlx-dot { width: 20px; height: 3px; border-radius: 2px; }
.dlx-section .dots-line  .dlx-dot.active { width: 32px; transform: none; }
.dlx-section .dots-number .dlx-dot { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); font-size: 10px; color: rgba(255,255,255,.6); background: transparent; }
.dlx-section .dots-number .dlx-dot.active { border-color: #fff; color: #fff; transform: scale(1.15); }

/* ── Counter ─────────────────────────────────────────── */
.dlx-section .dlx-counter { text-align: center; margin-top: 14px; color: rgba(255,255,255,.6); font-size: 12px; letter-spacing: 1px; }
.dlx-section .dlx-counter-current { color: #fff; font-weight: 600; }

/* ══════════════════════════════════════════════════════
   CTA BUTTON — solid, gradient, hover animations
══════════════════════════════════════════════════════ */
.dlx-section .dlx-cta-wrap { text-align: center; margin-top: 36px; }
.dlx-section .dlx-cta {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none; color: #fff;
    padding: 13px 32px; border-radius: 6px;
    font-size: 14px; font-weight: 500;
    border: 0 solid transparent;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease, color .25s ease, background-image .25s ease;
}
/* Gradient variant — uses CSS vars set inline via PHP */
.dlx-section .dlx-cta.is-gradient {
    background: var(--dlx-cta-grad, linear-gradient(135deg, #2196F3, #1565C0));
}
.dlx-section .dlx-cta.is-gradient:hover {
    background: var(--dlx-cta-grad-hover, linear-gradient(135deg, #1565C0, #0d47a1));
}

/* Hover animations (controlled by .cta-anim-* on .dlx-section) */
.dlx-section.cta-anim-lift  .dlx-cta:hover  { transform: translateY(-3px); box-shadow: 0 8px 24px var(--dlx-cta-shadow, rgba(33,150,243,0.35)); }
.dlx-section.cta-anim-scale .dlx-cta:hover  { transform: scale(1.06); }
.dlx-section.cta-anim-glow  .dlx-cta:hover  { box-shadow: 0 0 0 4px var(--dlx-cta-shadow, rgba(33,150,243,0.35)), 0 6px 20px var(--dlx-cta-shadow, rgba(33,150,243,0.35)); }
.dlx-section .dlx-cta:active { transform: translateY(0) scale(0.98); }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — keep touch targets ≥44px on phones
══════════════════════════════════════════════════════ */
@media (max-width: 900px) { .dlx-section .dlx-carousel-wrapper { gap: 4px; } }
@media (max-width: 640px) {
    .dlx-section { padding: 36px 12px; }
    .dlx-section .dlx-btn { width: 44px; height: 44px; font-size: 20px; }
    .dlx-section .dlx-card-title { letter-spacing: 1.5px; }
    .dlx-section .dlx-cta { padding: 11px 22px; font-size: 13px; }
}
@media (max-width: 420px) {
    .dlx-section { padding: 28px 8px; }
    /* iOS Human Interface Guidelines: minimum 44pt × 44pt touch target */
    .dlx-section .dlx-btn { width: 44px; height: 44px; font-size: 18px; }
    .dlx-section .dlx-cta { padding: 12px 20px; font-size: 13px; }
}

/* Accessibility */
.dlx-section:focus-within .dlx-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .dlx-section .dlx-slide,
    .dlx-section .dlx-track,
    .dlx-section .dlx-card-img,
    .dlx-section .dlx-slide.active.effect-zoom_loop .dlx-card-clip .dlx-card-img,
    .dlx-section .dlx-slide.active.effect-float,
    .dlx-section .dlx-cta {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* ══════════════════════════════════════════════════════
   CARD-TEXT VISIBILITY MODES
══════════════════════════════════════════════════════ */

.dlx-section.text-mode-hover .dlx-card-overlay {
    opacity: 0;
    transition: opacity .3s ease;
}
.dlx-section.text-mode-hover .dlx-slide:hover .dlx-card-overlay {
    opacity: 1;
}

.dlx-section.text-mode-active_only .dlx-card-overlay {
    opacity: 0;
    transition: opacity .4s ease;
}
.dlx-section.text-mode-active_only .dlx-slide.active .dlx-card-overlay {
    opacity: 1;
}

.dlx-section.text-mode-none .dlx-card-overlay {
    display: none !important;
}