/* ============================================================
   Coderix Widgets — Client Logos  (cxcl-)
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes cxcl-scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes cxcl-scroll-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* ── Wrapper ───────────────────────────────────────────────── */
.cxcl-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* Fade edges (marquee mode only) */
.cxcl-wrapper.cxcl-has-fade::before,
.cxcl-wrapper.cxcl-has-fade::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.cxcl-wrapper.cxcl-has-fade::before {
    left: 0;
    background: linear-gradient(to right, #f8fffe, transparent);
}
.cxcl-wrapper.cxcl-has-fade::after {
    right: 0;
    background: linear-gradient(to left, #f8fffe, transparent);
}

/* ── Marquee viewport ──────────────────────────────────────── */
.cxcl-marquee-viewport {
    overflow: hidden;
    width: 100%;
}

/* ── Track (scrolling row) ─────────────────────────────────── */
.cxcl-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 20px;
    animation: cxcl-scroll-left var(--cxcl-speed, 40s) linear infinite;
}
.cxcl-track.cxcl-rtl {
    animation-name: cxcl-scroll-right;
}
.cxcl-wrapper:hover .cxcl-track.cxcl-pause-hover {
    animation-play-state: paused;
}

/* ── Grid layout ───────────────────────────────────────────── */
/*
   Uses flex + flex-wrap (same pattern as the original hand-coded
   markup). justify-content is set by the Elementor alignment control
   via {{WRAPPER}} .cxcl-grid selector (justify-content: center/flex-start/flex-end).
   Column count is enforced by giving each card a calculated width.
   CSS custom properties --cxcl-cols / --cxcl-cols-tab / --cxcl-cols-mob
   are set on .cxcl-wrapper via inline style="" (highest specificity).
*/
.cxcl-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* default; overridden by Elementor selector */
    gap: 20px;
}

/* Each card takes up 1/N of the row minus gaps */
.cxcl-grid > .cxcl-card {
    flex: 0 0 calc( (100% - ( var(--cxcl-cols, 4) - 1 ) * 20px) / var(--cxcl-cols, 4) );
    max-width: calc( (100% - ( var(--cxcl-cols, 4) - 1 ) * 20px) / var(--cxcl-cols, 4) );
    box-sizing: border-box;
}
@media (max-width: 1024px) {
    .cxcl-grid > .cxcl-card {
        flex: 0 0 calc( (100% - ( var(--cxcl-cols-tab, 3) - 1 ) * 20px) / var(--cxcl-cols-tab, 3) );
        max-width: calc( (100% - ( var(--cxcl-cols-tab, 3) - 1 ) * 20px) / var(--cxcl-cols-tab, 3) );
    }
}
@media (max-width: 768px) {
    .cxcl-grid > .cxcl-card {
        flex: 0 0 calc( (100% - ( var(--cxcl-cols-mob, 2) - 1 ) * 20px) / var(--cxcl-cols-mob, 2) );
        max-width: calc( (100% - ( var(--cxcl-cols-mob, 2) - 1 ) * 20px) / var(--cxcl-cols-mob, 2) );
    }
}

/* ── Card ──────────────────────────────────────────────────── */
.cxcl-card {
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 8px 20px rgba(106, 190, 82, 0.35);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    box-sizing: border-box;
    overflow: hidden;
    /* Individual width/bg set via inline style="" on the element */
}

/* Lift effect */
.cxcl-card.cxcl-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(106, 190, 82, 0.45);
}

/* ── Logo image ────────────────────────────────────────────── */
.cxcl-card img {
    width: 160px;
    height: 100px;
    object-fit: contain;
    display: block;
    transition: filter 0.3s ease;
    /* Individual image widths set via inline style="" on the card.
       When a custom card width is set, stretch the image to fill it. */
}

.cxcl-card a {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    width: 100%;
    height: 100%;
}

/* Greyscale */
.cxcl-card.cxcl-grayscale img {
    filter: grayscale(100%) opacity(0.7);
}
.cxcl-card.cxcl-grayscale:hover img {
    filter: grayscale(0%) opacity(1);
}

/* ── Fallback text ─────────────────────────────────────────── */
/*
   Shown when no image is uploaded for a logo.
   Global styles set by Elementor Typography control + color picker.
   Per-item overrides applied via inline style="" on the <span>.
*/
.cxcl-fallback-text {
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    padding: 4px 6px;
    /* Individual color/size/weight/style applied inline per item */
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .cxcl-wrapper.cxcl-has-fade::before,
    .cxcl-wrapper.cxcl-has-fade::after { width: 60px; }
    .cxcl-card img { width: 130px; height: 80px; }
}
@media (max-width: 768px) {
    .cxcl-wrapper.cxcl-has-fade::before,
    .cxcl-wrapper.cxcl-has-fade::after { width: 40px; }
    .cxcl-card { min-width: 0; }
    .cxcl-card img { width: 110px; height: 70px; }
    .cxcl-fallback-text { font-size: 14px; }
}
@media (max-width: 480px) {
    .cxcl-wrapper.cxcl-has-fade::before,
    .cxcl-wrapper.cxcl-has-fade::after { width: 24px; }
    .cxcl-card img { width: 90px; height: 60px; }
    .cxcl-fallback-text { font-size: 13px; }
}