/*
 * Brands Ticker — Frontend CSS
 * ─────────────────────────────────────────────────────────────
 * Este archivo es el único lugar donde están los estilos del
 * ticker. Podés sobreescribirlos desde tu tema con mayor
 * especificidad o editar este archivo directamente.
 *
 * Clases principales:
 *   .brands-bar-logos       → contenedor exterior
 *   .brands-track-logos     → pista animada
 *   .brand-logo-item        → cada ítem (a o span)
 *   .brand-logo-item img    → imagen del logo
 * ─────────────────────────────────────────────────────────────
 */

/* ── Contenedor exterior ─────────────────────────────────── */
.brands-bar-logos {
    background: var(--white-bg, #ffffff);
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-light, #e5e5e5);
    overflow: hidden;
    width: 100%;
}

/* ── Pista animada ───────────────────────────────────────── */
.brands-track-logos {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: max-content;

    /* gap y animation-duration se inyectan inline desde el shortcode */
    gap: 48px;
    animation: bt-ticker-scroll 40s linear infinite;
}

/* Pausar al hover (opcional — comentá si no querés este comportamiento) */
.brands-bar-logos:hover .brands-track-logos {
    animation-play-state: paused;
}

/* ── Cada ítem ───────────────────────────────────────────── */
.brand-logo-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.70;
    transition: opacity 0.25s ease;
    text-decoration: none;
}

a.brand-logo-item:hover {
    opacity: 1;
}

/* ── Imagen ──────────────────────────────────────────────── */
.brand-logo-item img {
    /* height se inyecta inline desde el shortcode */
    height: 60px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    display: block;
    pointer-events: none; /* el clic lo maneja el <a> */
}

/* ── Keyframe: desplazamiento hacia la derecha ───────────── */
/*
 * Empieza en -50% y termina en 0 → movimiento de izquierda
 * a derecha. -50% funciona porque el track tiene
 * [originales + duplicados], entonces -50% del total =
 * exactamente el ancho del set original → loop perfecto.
 */
@keyframes bt-ticker-scroll {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* ── Grayscale: activado con clase .bt-grayscale ─────────── */
/*
 * Se aplica poniendo la clase bt-grayscale en .brands-bar-logos.
 * El shortcode lo hace automáticamente según la config del panel.
 */
.brands-bar-logos.bt-grayscale .brand-logo-item img {
    filter: grayscale(100%) brightness(0.55) contrast(1.1);
    opacity: 0.75;
    transition: filter .3s ease, opacity .3s ease;
}

.brands-bar-logos.bt-grayscale .brand-logo-item:hover img {
    filter: none;
    opacity: 1;
}

/* ── Accesibilidad: reduce-motion ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .brands-track-logos {
        animation: none;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        gap: 24px;
        padding: 0 16px;
    }
}