/* ═══════════════════════════════════════════════════
   Spanish ELEco – Reviews Scroll
   Columns rendered server-side (PHP).
   CSS handles layout + animations only.
   ═══════════════════════════════════════════════════ */

.eleco-rs-wrap {
    display: flex !important;
    flex-direction: row !important;
    width: 100%;
    height: 620px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    gap: 14px;
    padding: 14px;
}

/* Fade masks on wrapper (top / bottom) */
.eleco-rs-wrap::before,
.eleco-rs-wrap::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 100px;
    z-index: 5;
    pointer-events: none;
}
.eleco-rs-wrap::before { top: 0; }
.eleco-rs-wrap::after  { bottom: 0; }

/* Column tracks */
.eleco-rs-wrap .eleco-rs-track {
    flex: 1 1 0 !important;
    min-width: 0;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
}

/* Animated strip — col 1 UP, col 2 DOWN */
.eleco-rs-wrap .eleco-rs-strip {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
    will-change: transform;
    flex-shrink: 0;
}

.eleco-rs-wrap .eleco-rs-track:nth-child(1) .eleco-rs-strip {
    animation: elecoUp 38s linear infinite;
}
.eleco-rs-wrap .eleco-rs-track:nth-child(2) .eleco-rs-strip {
    animation: elecoDown 44s linear infinite;
}

@keyframes elecoUp   { from { transform: translateY(0);    } to { transform: translateY(-50%); } }
@keyframes elecoDown { from { transform: translateY(-50%); } to { transform: translateY(0);    } }

/* Cards */
.eleco-rs-wrap .eleco-rs-card {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
}

.eleco-rs-wrap .eleco-rs-quote {
    display: block;
    font-size: 52px;
    line-height: 0.7;
    margin-bottom: 8px;
    opacity: 0.65;
    font-family: Georgia, serif;
}

.eleco-rs-wrap .eleco-rs-card-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 11px;
    margin-bottom: 10px;
}

.eleco-rs-wrap .eleco-rs-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    box-sizing: border-box;
}
.eleco-rs-wrap .eleco-rs-avatar.is-initials {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}
.eleco-rs-wrap .eleco-rs-avatar.is-photo {
    display: block;
    object-fit: cover;
    object-position: center top;
}

.eleco-rs-wrap .eleco-rs-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}
.eleco-rs-wrap .eleco-rs-role {
    font-size: 11px;
    margin: 2px 0 0;
}

.eleco-rs-wrap .eleco-rs-card-stars {
    display: flex !important;
    gap: 2px;
    font-size: 12px;
    margin-bottom: 9px;
    color: #d4a038;
}

.eleco-rs-wrap .eleco-rs-card-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
}

/* ── Mobile: horizontal ── */
@media (max-width: 768px) {
    .eleco-rs-wrap {
        flex-direction: column !important;
        height: auto !important;
        min-height: 380px;
        padding: 14px;
    }

    /* Switch fades to left/right */
    .eleco-rs-wrap::before,
    .eleco-rs-wrap::after {
        top: 0 !important; bottom: 0 !important;
        height: 100% !important;
        width: 60px; left: auto; right: auto;
    }
    .eleco-rs-wrap::before { left: 0; }
    .eleco-rs-wrap::after  { right: 0; }

    .eleco-rs-wrap .eleco-rs-track {
        flex: 0 0 160px !important;
        flex-direction: row !important;
        overflow: hidden;
    }
    .eleco-rs-wrap .eleco-rs-strip {
        flex-direction: row !important;
    }
    .eleco-rs-wrap .eleco-rs-card {
        width: 220px;
        flex-shrink: 0;
    }

    .eleco-rs-wrap .eleco-rs-track:nth-child(1) .eleco-rs-strip {
        animation-name: elecoLeft;
        animation-duration: 28s;
    }
    .eleco-rs-wrap .eleco-rs-track:nth-child(2) .eleco-rs-strip {
        animation-name: elecoRight;
        animation-duration: 36s;
    }

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

/* Hide scrollbars */
.eleco-rs-wrap, .eleco-rs-wrap * { scrollbar-width: none; }
.eleco-rs-wrap::-webkit-scrollbar,
.eleco-rs-wrap *::-webkit-scrollbar { display: none; }