/* ============================================================
   CUSTOM INFINITE IMAGE TICKER / SLIDER
   ============================================================ */

/*
 * .cs-outer fixes the flex-item width-collapse issue.
 * When an Elementor container uses flex-direction:row, the shortcode
 * widget (flex item) has no explicit width. Adding overflow:hidden to
 * .cs-wrapper (which is a child) collapses the flex item to 0 width.
 * .cs-outer is display:block with width:100% which gives the flex item
 * real content to size against, allowing .cs-wrapper to clip correctly.
 */
.cs-outer {
    display: block;
    width:   100%;
}

/* Make the shortcode widget fill its flex container */
.elementor-widget-shortcode:has(.cs-wrapper) {
    flex:      1 1 0%;
    min-width: 0;
    width:     100%;
}
.elementor-widget-shortcode:has(.cs-wrapper) .elementor-widget-container {
    width: 100%;
}

.cs-wrapper {
    overflow:     hidden;
    width:        100%;
    position:     relative;
    touch-action: pan-y; /* allow vertical page scroll; block horizontal hijack */
    /* Soft fade on edges */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 5%,
        #000 95%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 5%,
        #000 95%,
        transparent 100%
    );
}

@keyframes cs-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.cs-track {
    display:         flex;
    align-items:     center;
    width:           max-content;
    animation:       cs-scroll 30s linear infinite;
    will-change:     transform;
}

.cs-wrapper.cs-hoverable:hover .cs-track,
.cs-wrapper.cs-hoverable.cs-paused .cs-track {
    animation-play-state: paused;
}

/* Reverse direction: scroll right instead of left */
.cs-wrapper.cs-reverse .cs-track {
    animation-direction: reverse;
}

/* ── Slide ── */
.cs-slide {
    flex-shrink: 0;
    padding:     0 10px;
}

/* Higher specificity (.cs-wrapper .cs-slide img = 0,2,1) overrides
   Elementor's global reset (.elementor img = 0,1,1) which sets
   height:auto and max-width:100%, collapsing portrait images. */
.cs-wrapper .cs-slide img {
    display:       block;
    height:        160px;
    width:         auto;
    max-width:     none;
    border-radius: 8px;
    object-fit:    cover;
    transition:    transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow:    0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Only apply hover scale on devices with a real pointer (not touch screens) */
@media (hover: hover) {
    .cs-wrapper .cs-slide img:hover {
        transform:  scale(1.04);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .cs-wrapper .cs-slide img { height: 120px; }
    .cs-slide                 { padding: 0 7px; }
}

@media (max-width: 480px) {
    .cs-wrapper .cs-slide img { height: 90px; border-radius: 6px; }
    .cs-slide                 { padding: 0 5px; }
}