﻿/* === Trusted by the best — Ticker (width-normalized, roomy, no-hover-clip) === */

.partner-ticker {
    position: relative;
    user-select: none;
    /* Tweakables */
    --cell-w: clamp(140px, 12vw, 200px); /* equal width per logo cell */
    --row-h: clamp(48px, 4.4vw, 84px); /* logo row/cell height */
    --gap: clamp(32px, 3.5vw, 72px); /* space between cells */
    --pad-x: clamp(8px, 1.2vw, 14px); /* inner side padding per cell */
    --hover-scale: 1.2; /* 120% on hover */
    --edge-fade: 16px; /* horizontal fade width */
}

    /* Viewport: add vertical padding for hover room; hide only horizontal overflow; keep fade */
    .partner-ticker .ticker-viewport {
        position: relative;
        padding-block: calc(max(18px, (var(--hover-scale) - 1) * var(--row-h) / 2 + 6px));
        overflow-x: hidden;
        overflow-y: visible;
        -webkit-mask-image: linear-gradient( to right, transparent, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent );
        mask-image: linear-gradient( to right, transparent, #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent );
    }

    /* Track: smooth marquee target + spacing */
    .partner-ticker .ticker-track {
        display: flex;
        align-items: center;
        gap: var(--gap);
        will-change: transform;
    }

        /* Equal-width, centered cells */
        .partner-ticker .ticker-track > li {
            list-style: none;
            flex: 0 0 auto;
            width: var(--cell-w);
            height: var(--row-h);
            display: flex;
            align-items: center;
            justify-content: center;
            padding-inline: var(--pad-x);
            overflow: visible; /* allow hover grow to spill */
            isolation: isolate; /* cleaner stacking while scaled */
        }

    /* Logos: contain within cell; scale from center on hover */
    .partner-ticker .partner-logo {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transform-origin: center;
        transition: transform .14s ease, filter .14s ease;
    }

@media (hover:hover) {
    .partner-ticker .partner-logo:hover {
        transform: scale(var(--hover-scale));
    }
}

/* Arrows */
.partner-ticker .ticker-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: rgba(255,255,255,0.12);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .12s ease, opacity .12s ease;
    z-index: 2;
}

    .partner-ticker .ticker-btn:hover,
    .partner-ticker .ticker-btn:focus {
        background: rgba(255,255,255,0.22);
        outline: none;
    }

.partner-ticker .ticker-prev {
    left: 4px;
}

.partner-ticker .ticker-next {
    right: 4px;
}

/* XS: static grid; remove fade; keep vertical padding light */
@media (max-width: 576px) {
    .partner-ticker .ticker-viewport {
        padding-block: 12px;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .partner-ticker .ticker-track {
        transform: none !important;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 16px;
        justify-items: center;
    }

    .partner-ticker .ticker-btn {
        display: none;
    }
}

/* Reduced motion: stop movement, keep readable */
@media (prefers-reduced-motion: reduce) {
    .partner-ticker .ticker-track {
        transform: none !important;
    }
}

/* === Button-safe fade + extra padding at edges === */
.partner-ticker {
    /* button footprint + a little cushion */
    --btn-size: 42px; /* matches .ticker-btn width/height */
    --btn-gap: 8px; /* space from the edge */
    --safe-pad: calc(var(--btn-size) + var(--btn-gap) + 0px);
    /* widen the fade so it reaches under the buttons */
    --edge-fade: 48px; /* was 16px; try 24–32px if you want more */
}

    /* position buttons relative to the same vars (optional but tidy) */
    .partner-ticker .ticker-prev {
        left: var(--btn-gap);
    }

    .partner-ticker .ticker-next {
        right: var(--btn-gap);
    }

    /* give the logos a buffer so they don't sit under the buttons,
   and stretch the fade across that buffer */
    .partner-ticker .ticker-viewport {
        /* vertical space already handled in your current CSS; here’s horizontal: */
        padding-inline: var(--safe-pad);
        /* hide only horizontally; allow hover to breathe vertically */
        overflow-x: hidden;
        overflow-y: visible;
        /* fade covers the safe area + the fade width on both sides */
        -webkit-mask-image: linear-gradient( to right, transparent 0, transparent var(--safe-pad), #000 calc(var(--safe-pad) + var(--edge-fade)), #000 calc(100% - (var(--safe-pad) + var(--edge-fade))), transparent calc(100% - var(--safe-pad)), transparent 100% );
        mask-image: linear-gradient( to right, transparent 0, transparent var(--safe-pad), #000 calc(var(--safe-pad) + var(--edge-fade)), #000 calc(100% - (var(--safe-pad) + var(--edge-fade))), transparent calc(100% - var(--safe-pad)), transparent 100% );
    }

/* XS still shows static grid (no arrows), so keep things simple */
@media (max-width: 576px) {
    .partner-ticker .ticker-viewport {
        padding-block: 22px;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .partner-ticker .ticker-track {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 3 → 2 */
        column-gap: 36px;
        row-gap: 36px;
    }
        /* make each cell fill its grid column cleanly */
        .partner-ticker .ticker-track > li {
            width: 100%;
        }
}


/* XS grid and reduced-motion: show only originals, hide cloned half */
@media (max-width: 576px), (prefers-reduced-motion: reduce) {
    .partner-ticker .ticker-track > li[data-clone] {
        display: none !important;
    }
}

/* === Plain chevrons + vertical centering tweak === */
.partner-ticker {
    /* Touch target & positioning knobs */
    --btn-size: 42px; /* clickable area size */
    --btn-gap: 8px; /* distance from the edge */
    --btn-nudge-y: -7px; /* raise/lower arrows a hair; negative = up */
}

    /* remove circle, keep large hit area */
    .partner-ticker .ticker-btn {
        position: absolute;
        top: calc(50% + var(--btn-nudge-y));
        transform: translateY(-50%); /* center vertically */
        width: var(--btn-size);
        height: var(--btn-size);
        padding: 0;
        border: 0;
        background: none; /* no circle */
        box-shadow: none;
        border-radius: 0;
        display: grid;
        place-items: center;
        color: rgba(255,255,255,.85);
        cursor: pointer;
        z-index: 2;
        transition: color .12s ease, opacity .12s ease;
    }

        .partner-ticker .ticker-btn:hover,
        .partner-ticker .ticker-btn:focus {
            color: #fff; /* simple hover/focus feedback */
            outline: none;
        }

        /* icon sizing (overrides fa-2x if present) */
        .partner-ticker .ticker-btn i {
            font-size: clamp(22px, 2.1vw, 28px);
            line-height: 1;
            display: block;
        }

    /* horizontal placement */
    .partner-ticker .ticker-prev {
        left: var(--btn-gap);
    }

    .partner-ticker .ticker-next {
        right: var(--btn-gap);
    }

/* XS: hide chevrons (must come LAST so it wins the cascade) */
@media (max-width: 576px) {
    #partnerTicker .ticker-btn {
        display: none !important;
    }
}
