/* ============================================================
   Triple Slider Plugin v2 — triple-slider.css
   ============================================================ */

/* ── CSS custom properties ────────────────────────────────── */
.ts-wrap {
    --ts-bg:            #ffffff;
    --ts-accent:        #0077cc;
    --ts-title-color:   #111111;
    --ts-author-color:  #777777;
    --ts-dot-color:     rgba(0,0,0,.20);
    --ts-dot-active:    #0077cc;
    --ts-card-height:   380px;
    --ts-card-width:    520px;
    --ts-card-radius:   14px;
    --ts-title-size:    26px;
    --ts-author-size:   14px;
    --ts-tag-size:      11px;
    --ts-title-font:    'Syne', sans-serif;
    --ts-tag-font:      'Syne', sans-serif;
    --ts-author-font:   'DM Sans', sans-serif;

    /* Arrow defaults */
    --ts-arrow-size:    38px;
    --ts-arrow-bg:      #ffffff;
    --ts-arrow-color:   #e11d48;
    --ts-arrow-border:  #e11d48;
    --ts-arrow-bg-hover:    #e11d48;
    --ts-arrow-color-hover: #ffffff;
    --ts-arrow-radius:  50%;

    position: relative;
    width: 100%;

    /*
     * overflow-x: hidden here (NOT on .ts-slider-outer) so that
     * arrow buttons inside .ts-slider-outer are never clipped
     * while side-card strips are still clipped at the wrap edge.
     */
    overflow-x: hidden;

    background: var(--ts-bg);
    padding: 24px 0 32px;
    font-family: 'DM Sans', sans-serif;
    box-sizing: border-box;
}
.ts-wrap *, .ts-wrap *::before, .ts-wrap *::after { box-sizing: border-box; }

/* ── Slider outer ─────────────────────────────────────────── */
/* overflow: visible — arrows inside are never clipped */
.ts-slider-outer {
    position: relative;
    width: 100%;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Inner: card-size stage with 3D perspective ──────────── */
.ts-slider-inner {
    position: relative;
    width:  var(--ts-card-width);
    height: var(--ts-card-height);
    flex-shrink: 0;
    perspective: 1200px;
    perspective-origin: 50% 50%;
}

/* ── Track ───────────────────────────────────────────────── */
.ts-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* ── Individual slide ────────────────────────────────────── */
.ts-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--ts-card-radius);
    overflow: hidden;
    will-change: transform, opacity, filter;
    transform-origin: center center;
    transform-style: preserve-3d;
}

/* No-JS static state fallback */
.ts-slide[data-state="center"] {
    transform: translateX(0) scale(1) rotateY(0deg);
    opacity: 1; z-index: 3;
    filter: brightness(1);
    box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.10);
    pointer-events: auto; cursor: pointer;
}
.ts-slide[data-state="left"] {
    transform: translateX(-308px) scale(0.86) rotateY(8deg);
    opacity: 0.7; z-index: 2;
    filter: brightness(0.62) saturate(0.75);
    pointer-events: auto; cursor: pointer;
}
.ts-slide[data-state="right"] {
    transform: translateX(308px) scale(0.86) rotateY(-8deg);
    opacity: 0.7; z-index: 2;
    filter: brightness(0.62) saturate(0.75);
    pointer-events: auto; cursor: pointer;
}
.ts-slide[data-state="far-left"] {
    transform: translateX(-520px) scale(0.68) rotateY(15deg);
    opacity: 0; z-index: 1; pointer-events: none;
}
.ts-slide[data-state="far-right"] {
    transform: translateX(520px) scale(0.68) rotateY(-15deg);
    opacity: 0; z-index: 1; pointer-events: none;
}

/* ── Image wrapper ───────────────────────────────────────── */
.ts-img-wrap {
    width: 100%; height: 100%;
    background: #e0e0e0;
    overflow: hidden;
    border-radius: var(--ts-card-radius);
}
.ts-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none; user-select: none;
    will-change: transform;
}

.ts-no-img {
    display: flex; align-items: center; justify-content: center;
    background: #e8e8e8;
}
.ts-no-img span {
    font-family: var(--ts-title-font);
    font-size: 4rem; font-weight: 800;
    color: #bbb; text-transform: uppercase;
}

/* ── Dots inside card ────────────────────────────────────── */
.ts-dots-inner {
    position: absolute;
    bottom: 14px; left: 0; right: 0;
    display: flex; justify-content: center; align-items: center;
    gap: 6px; z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.ts-slide[data-state="center"] .ts-dots-inner { opacity: 1; }

.ts-dot-pip {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ts-dot-color);
    border: none; padding: 0; flex-shrink: 0;
    cursor: pointer; pointer-events: auto;
    transition: background 0.3s ease, width 0.35s ease, border-radius 0.35s ease;
}
.ts-dot-pip.active {
    background: var(--ts-dot-active);
    width: 20px; border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════
   ARROW BUTTONS — full reset + custom styling
   ══════════════════════════════════════════════════════════ */
.ts-wrap .ts-arrow,
.ts-wrap button.ts-arrow {
    /* Position: absolute inside .ts-slider-outer */
    position: absolute !important;
    top: 50% !important;
    margin-top: calc(var(--ts-arrow-size) * -0.5) !important;
    z-index: 30 !important;

    /* Size */
    width:  var(--ts-arrow-size) !important;
    height: var(--ts-arrow-size) !important;

    /* ── Normal state: white bg + red border + red icon ── */
    background:       var(--ts-arrow-bg)     !important;
    background-color: var(--ts-arrow-bg)     !important;
    background-image: none                   !important;
    border: 2px solid var(--ts-arrow-border) !important;
    border-radius: var(--ts-arrow-radius)    !important;
    color: var(--ts-arrow-color)             !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.12)  !important;

    /* Full browser/theme button reset */
    -webkit-appearance: none !important;
    appearance: none         !important;
    padding:    0  !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
    font-size:  0  !important;
    line-height: 1 !important;
    outline:  none !important;
    cursor: pointer !important;
    opacity: 1       !important;
    visibility: visible !important;
    text-decoration: none !important;
    text-transform: none !important;

    /* Center icon */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;

    transition: background-color 0.25s ease, color 0.25s ease,
                box-shadow 0.25s ease !important;
}

/* ── Hover state: red bg + white icon ─────────────────────── */
.ts-wrap .ts-arrow:hover,
.ts-wrap button.ts-arrow:hover {
    background:       var(--ts-arrow-bg-hover)    !important;
    background-color: var(--ts-arrow-bg-hover)    !important;
    background-image: none                        !important;
    color: var(--ts-arrow-color-hover)            !important;
    border-color: var(--ts-arrow-bg-hover)        !important;
    box-shadow: 0 4px 24px rgba(225,29,72,.35)    !important;
}

/* ── SVG icon ─────────────────────────────────────────────── */
.ts-wrap .ts-arrow svg {
    width:  calc(var(--ts-arrow-size) * 0.44) !important;
    height: calc(var(--ts-arrow-size) * 0.44) !important;
    display: block   !important;
    flex-shrink: 0   !important;
    fill: none       !important;
    overflow: visible !important;
    pointer-events: none !important;
}
/* Target SVG stroked children directly */
.ts-wrap .ts-arrow svg polyline,
.ts-wrap .ts-arrow svg path,
.ts-wrap .ts-arrow svg line,
.ts-wrap .ts-arrow svg circle {
    stroke: var(--ts-arrow-color) !important;
    stroke-width: 2.5 !important;
    fill: none !important;
    transition: stroke 0.25s ease !important;
}
.ts-wrap .ts-arrow:hover svg polyline,
.ts-wrap .ts-arrow:hover svg path,
.ts-wrap .ts-arrow:hover svg line,
.ts-wrap .ts-arrow:hover svg circle {
    stroke: var(--ts-arrow-color-hover) !important;
}

/* ── Font Awesome / Elementor icons ──────────────────────── */
.ts-wrap .ts-arrow i,
.ts-wrap .ts-arrow [class*="fa-"],
.ts-wrap .ts-arrow [class*="eicon-"] {
    font-size: calc(var(--ts-arrow-size) * 0.40) !important;
    line-height: 1 !important;
    color: var(--ts-arrow-color) !important;
    pointer-events: none !important;
    transition: color 0.25s ease !important;
}
.ts-wrap .ts-arrow:hover i,
.ts-wrap .ts-arrow:hover [class*="fa-"],
.ts-wrap .ts-arrow:hover [class*="eicon-"] {
    color: var(--ts-arrow-color-hover) !important;
}

/* ── Flip span (prev icon) ───────────────────────────────── */
.ts-wrap .ts-arrow .ts-arrow-flip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: rotate(180deg) !important;
    pointer-events: none !important;
}

/* ── Horizontal positions ────────────────────────────────── */
.ts-wrap .ts-arrow.ts-prev {
    left: calc(50% - var(--ts-card-width) / 2 - var(--ts-arrow-size) / 2 - 6px) !important;
}
.ts-wrap .ts-arrow.ts-next {
    right: calc(50% - var(--ts-card-width) / 2 - var(--ts-arrow-size) / 2 - 6px) !important;
}

/* ── Content below ───────────────────────────────────────── */
.ts-content-below {
    padding: 20px 0 0;
    max-width: var(--ts-card-width);
    margin: 0 auto;
    text-align: left;
}

.ts-below-tag {
    font-family: var(--ts-tag-font);
    font-size: var(--ts-tag-size);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ts-accent);
    margin: 0 0 8px;
    will-change: transform, opacity;
}

.ts-below-link { text-decoration: none; display: block; }

.ts-below-title {
    font-family: var(--ts-title-font);
    font-size: var(--ts-title-size);
    font-weight: 700;
    line-height: 1.25;
    color: var(--ts-title-color);
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    will-change: transform, opacity;
    transition: color 0.2s;
}
.ts-below-link:hover .ts-below-title { color: var(--ts-accent); }

.ts-below-author {
    font-family: var(--ts-author-font);
    font-size: var(--ts-author-size);
    color: var(--ts-author-color);
    margin: 0;
    will-change: transform, opacity;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 700px) {
    .ts-wrap {
        --ts-card-width:  90vw;
        --ts-card-height: calc(90vw * 9 / 16);
        --ts-title-size:  1.2rem;
        --ts-arrow-size:  32px;
    }
    .ts-wrap .ts-arrow.ts-prev { left: 4px !important; }
    .ts-wrap .ts-arrow.ts-next { right: 4px !important; }
}

.ts-no-posts { text-align: center; color: #999; padding: 2rem; }