/**
 * Zenth Shop · Brands Strip
 *
 * Franja horizontal de logos de marcas (WooCommerce taxonomy). Dos modos:
 * marquee (scroll infinito CSS-only) o static (lista flex). Tinte de logos
 * vía triple capa con mask-image (img base + ::before blanco + ::after rojo).
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Wrapper            → .zenth-brands-strip (tokens locales + caja)
 *   §2  Modo static        → .zenth-brands-strip--mode-static + __list
 *   §3  Modo marquee        → __viewport + __track + __list--marquee + keyframes
 *   §4  Item (compartido)   → __item-wrap / __item / focus
 *   §5  Capa 0 — img base   → .zenth-brands-strip__logo (invisible, SEO/a11y)
 *   §6  Capa 1 — ::before   → tinte blanco base (visible por default)
 *   §7  Capa 2 — ::after    → tinte rojo hover (crossfade) + fallback tipográfico
 *   §8  Otros efectos hover → opacity / scale / none
 *   §9  Estados vacíos      → .zenth-brands-strip--empty (editor Elementor)
 *   §10 Responsive          → TODOS los @media de tamaño consolidados acá
 *   §11 Capacidad/a11y      → @media print + prefers-reduced-motion
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS (desktop es la base, sin media query)
 *   Tablet        → max-width: 1024px   (gap + alto de logo más chicos)
 *   Mobile        → max-width: 767px     (padding + wrap/scroll + máscara)
 *
 *   Todos los @media de tamaño viven en §10, de más ancho a más angosto.
 *   Los media de CAPACIDAD (print, prefers-reduced-motion) van aparte en §11
 *   porque NO son breakpoints de tamaño y no se consolidan con los de arriba.
 * ─────────────────────────────────────────────────────────────────────────
 * Tokens locales (inline por widget / por item salvo donde se indica)
 *   --zbs-bg                  fondo de la franja (default --cr-color-dark)
 *   --zbs-justify             alineación del flex en modo static
 *   --zbs-logo-max-h          alto máx del logo desktop
 *   --zbs-gap                 gap entre logos
 *   --zbs-pad-y               padding vertical de la franja
 *   --zbs-tint-base           color default del logo (default #fff)
 *   --zbs-tint-hover          color hover del logo (default --cr-color-primary)
 *   --zbs-fade                duración del crossfade hover
 *   --zbs-marquee-duration    duración de un ciclo del marquee
 *   --zbs-logo-src            URL del SVG individual (inline por item)
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · WRAPPER
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-brands-strip {
    --zbs-bg: var(--cr-color-dark, #1a1a1a);
    --zbs-tint-base: #ffffff;
    --zbs-tint-hover: var(--cr-color-primary, #c00000);
    --zbs-fade: 320ms;

    position: relative;
    display: block;
    width: 100%;
    background: var(--zbs-bg);
    padding: var(--zbs-pad-y, 40px) 0;
    box-sizing: border-box;
    overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · MODO STATIC
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-brands-strip--mode-static {
    padding-left: var(--cr-container-pad, 32px);
    padding-right: var(--cr-container-pad, 32px);
}

.zenth-brands-strip--mode-static .zenth-brands-strip__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: var(--cr-container-max, 1440px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: var(--zbs-justify, space-around);
    flex-wrap: nowrap;
    gap: var(--zbs-gap, 56px);
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · MODO MARQUEE
   ───────────────────────────────────────────────────────────────────────
   Estructura:
     .zenth-brands-strip
       .zenth-brands-strip__viewport (full width, sin padding lateral
                                      para que el loop entre/salga por
                                      los bordes de la pantalla)
         .zenth-brands-strip__track (flex row, contiene 2 listas)
           ul.--marquee (set 1)
           ul.--marquee (set 2, clones aria-hidden)

   Animación: el track translada 0 → -50%. Como el set 2 es idéntico al
   set 1, en el momento en que el track llega a -50% el set 2 está
   exactamente donde estaba el set 1 al inicio → reset visualmente
   imperceptible.
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-brands-strip--mode-marquee {
    /* No padding horizontal: el marquee es edge-to-edge. */
}

.zenth-brands-strip__viewport {
    width: 100%;
    overflow: hidden;
    /* Máscara suave en los bordes para que los logos no aparezcan/desaparezcan
       de golpe. Edges gradient negro transparente, centro opaco. */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 64px,
        #000 calc(100% - 64px),
        transparent 100%
    );
            mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 64px,
        #000 calc(100% - 64px),
        transparent 100%
    );
}

.zenth-brands-strip__track {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: max-content;
    animation: zenth-brands-marquee var(--zbs-marquee-duration, 40s) linear infinite;
    /* Evita que el animado salte en algunos engines cuando se compone capa. */
    will-change: transform;
}

.zenth-brands-strip__list--marquee {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--zbs-gap, 56px);
    /* Padding lateral interno entre ambos sets para que el último logo
       del set 1 no quede pegado al primero del set 2 al loopear. */
    padding-right: var(--zbs-gap, 56px);
    flex-shrink: 0;
}

@keyframes zenth-brands-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Pause-on-hover: solo si el cliente lo habilitó. */
.zenth-brands-strip--mode-marquee.zenth-brands-strip--pause-on-hover:hover .zenth-brands-strip__track,
.zenth-brands-strip--mode-marquee.zenth-brands-strip--pause-on-hover:focus-within .zenth-brands-strip__track {
    animation-play-state: paused;
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · ITEM (compartido entre modos)
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-brands-strip__item-wrap {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zenth-brands-strip__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--zbs-logo-max-h, 48px);
    /* Ancho mínimo para que el mask tenga un canvas razonable.
       Sin esto, items sin link (div) colapsarían al ancho del texto. */
    min-width: calc(var(--zbs-logo-max-h, 48px) * 2.4);
    line-height: 1;
    text-decoration: none;
    color: inherit;
    cursor: default;
    transition: transform var(--zbs-fade) ease;
    -webkit-tap-highlight-color: transparent;
}

a.zenth-brands-strip__item {
    cursor: pointer;
}

a.zenth-brands-strip__item:focus-visible {
    outline: 2px solid var(--zbs-tint-hover);
    outline-offset: 6px;
    border-radius: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · CAPA 0 — <img> base (invisible, sirve a SEO/print/a11y)
   ───────────────────────────────────────────────────────────────────────
   La imagen real queda en el DOM como contenido semántico pero se hace
   invisible. Lo que el usuario ve son las capas ::before y ::after que
   sí están tintadas con mask-image.
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-brands-strip__logo {
    display: block;
    height: var(--zbs-logo-max-h, 48px) !important;
    max-height: var(--zbs-logo-max-h, 48px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    /* Blindaje contra reglas globales que pongan height:auto. */
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · CAPA 1 — ::before (TINTE BLANCO BASE, visible por default)
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-brands-strip__item::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--zbs-tint-base);
    pointer-events: none;

    -webkit-mask-image: var(--zbs-logo-src);
            mask-image: var(--zbs-logo-src);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center center;
            mask-position: center center;
    -webkit-mask-size: contain;
            mask-size: contain;

    opacity: 1;
    transition: opacity var(--zbs-fade) ease;
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · CAPA 2 — ::after (TINTE ROJO HOVER) + fallback tipográfico
   ───────────────────────────────────────────────────────────────────────
   Visible solo cuando hover_effect = tint-red Y el item está en hover.
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-brands-strip--hover-tint-red .zenth-brands-strip__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--zbs-tint-hover);
    pointer-events: none;

    -webkit-mask-image: var(--zbs-logo-src);
            mask-image: var(--zbs-logo-src);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center center;
            mask-position: center center;
    -webkit-mask-size: contain;
            mask-size: contain;

    opacity: 0;
    transition: opacity var(--zbs-fade) ease;
}

/* Hover/focus: crossfade entre blanco y rojo. */
.zenth-brands-strip--hover-tint-red .zenth-brands-strip__item:hover::before,
.zenth-brands-strip--hover-tint-red .zenth-brands-strip__item:focus-visible::before {
    opacity: 0;
}

.zenth-brands-strip--hover-tint-red .zenth-brands-strip__item:hover::after,
.zenth-brands-strip--hover-tint-red .zenth-brands-strip__item:focus-visible::after {
    opacity: 1;
}

/* Items sin logo: usamos el fallback tipográfico, sin pseudos. */
.zenth-brands-strip__item--no-logo::before,
.zenth-brands-strip__item--no-logo::after {
    display: none !important;
}

.zenth-brands-strip__item--no-logo .zenth-brands-strip__logo {
    display: none;
}

/* Fallback tipográfico cuando la marca no tiene logo. */
.zenth-brands-strip__fallback {
    position: relative;
    font-family: var(--cr-font-display, "Super Brigade"), serif;
    font-size: clamp(18px, 1.6vw, 24px);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--zbs-tint-base);
    white-space: nowrap;
    transition: color var(--zbs-fade) ease;
}

.zenth-brands-strip--hover-tint-red .zenth-brands-strip__item--no-logo:hover .zenth-brands-strip__fallback,
.zenth-brands-strip--hover-tint-red .zenth-brands-strip__item--no-logo:focus-visible .zenth-brands-strip__fallback {
    color: var(--zbs-tint-hover);
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 · OTROS EFECTOS HOVER (opacity / scale / none)
   ───────────────────────────────────────────────────────────────────────
   Cuando se elige uno de estos en lugar de tint-red, el ::after queda
   sin display porque no se crea (solo se crea bajo la clase tint-red).
   El ::before sigue mostrando el blanco base.
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-brands-strip--hover-opacity .zenth-brands-strip__item::before {
    opacity: 0.7;
}

.zenth-brands-strip--hover-opacity .zenth-brands-strip__item:hover::before,
.zenth-brands-strip--hover-opacity .zenth-brands-strip__item:focus-visible::before {
    opacity: 1;
}

.zenth-brands-strip--hover-opacity .zenth-brands-strip__item--no-logo .zenth-brands-strip__fallback {
    opacity: 0.7;
}

.zenth-brands-strip--hover-opacity .zenth-brands-strip__item--no-logo:hover .zenth-brands-strip__fallback {
    opacity: 1;
}

.zenth-brands-strip--hover-scale .zenth-brands-strip__item:hover,
.zenth-brands-strip--hover-scale .zenth-brands-strip__item:focus-visible {
    transform: scale(1.08);
}


/* ═══════════════════════════════════════════════════════════════════════
   §9 · ESTADOS VACÍOS (solo en editor de Elementor)
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-brands-strip--empty {
    padding: 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    text-align: center;
    color: #fff;
    font-family: var(--cr-font-body, "Montserrat"), sans-serif;
    font-size: 14px;
}

.zenth-brands-strip--empty p {
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   §10 · RESPONSIVE — todos los @media de tamaño, de más ancho a más angosto
   ───────────────────────────────────────────────────────────────────────
   Tiers:  Tablet (≤1024) → Mobile (≤767)
   El cascade max-width va de mayor a menor, así el breakpoint más chico
   siempre pisa al más grande dentro de su rango.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── TABLET · max-width: 1024px ─────────────────── */
/* Gap más chico, logos un poco más bajos. */
@media (max-width: 1024px) {
    .zenth-brands-strip--mode-static .zenth-brands-strip__list,
    .zenth-brands-strip__list--marquee {
        gap: clamp(24px, 4vw, 40px);
    }

    .zenth-brands-strip__list--marquee {
        padding-right: clamp(24px, 4vw, 40px);
    }

    .zenth-brands-strip__item,
    .zenth-brands-strip__logo {
        height: calc(var(--zbs-logo-max-h, 48px) * 0.85);
        max-height: calc(var(--zbs-logo-max-h, 48px) * 0.85);
    }
}

/* ───────────────────────── MOBILE · max-width: 767px ──────────────────── */
@media (max-width: 767px) {
    /* §2 · Static: padding lateral mobile */
    .zenth-brands-strip--mode-static {
        padding-left: var(--cr-container-pad-mobile, 16px);
        padding-right: var(--cr-container-pad-mobile, 16px);
    }

    /* §2 · Static con wrap habilitado: logos en varias filas, centrados */
    .zenth-brands-strip--wrap-mobile .zenth-brands-strip__list {
        flex-wrap: wrap;
        gap: clamp(20px, 5vw, 32px) clamp(16px, 4vw, 28px);
        justify-content: center;
    }

    /* §4 / §5 · Item + logo más chicos */
    .zenth-brands-strip__item,
    .zenth-brands-strip__logo {
        height: clamp(28px, 8vw, 40px);
        max-height: clamp(28px, 8vw, 40px);
    }

    /* §2 · En mobile sin wrap (modo static), scroll horizontal silencioso. */
    .zenth-brands-strip--mode-static:not(.zenth-brands-strip--wrap-mobile) .zenth-brands-strip__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
    }

    .zenth-brands-strip--mode-static:not(.zenth-brands-strip--wrap-mobile) .zenth-brands-strip__list::-webkit-scrollbar {
        display: none;
    }

    /* §3 · Marquee mobile: máscara más chica en los bordes. */
    .zenth-brands-strip--mode-marquee .zenth-brands-strip__viewport {
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 32px,
            #000 calc(100% - 32px),
            transparent 100%
        );
                mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 32px,
            #000 calc(100% - 32px),
            transparent 100%
        );
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   §11 · CAPACIDAD / ACCESIBILIDAD — print + prefers-reduced-motion
   ───────────────────────────────────────────────────────────────────────
   No son breakpoints de tamaño: van aparte y NO se consolidan con §10.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────── PRINT ────────────────────────────────── */
/* §5 · En print, mostramos el logo real (sin mask) y ocultamos las capas. */
@media print {
    .zenth-brands-strip__logo {
        opacity: 1;
    }
    .zenth-brands-strip__item::before,
    .zenth-brands-strip__item::after {
        display: none !important;
    }
}

/* ─────────────────── ACCESIBILIDAD · prefers-reduced-motion ───────────────
   Usuarios con reduce-motion activado ven la franja estática (sin
   animación), aunque el modo configurado sea marquee. */
@media (prefers-reduced-motion: reduce) {
    .zenth-brands-strip__item,
    .zenth-brands-strip__logo,
    .zenth-brands-strip__item::before,
    .zenth-brands-strip__item::after,
    .zenth-brands-strip__fallback {
        transition: none !important;
    }

    .zenth-brands-strip__track {
        animation: none !important;
        /* Sin animación, mostramos un set completo y ocultamos el clone. */
    }

    /* En reduce-motion ocultamos el segundo set para que no aparezca
       como contenido duplicado visual. */
    .zenth-brands-strip__list--marquee[aria-hidden="true"] {
        display: none;
    }

    /* Y centramos el primer set para que se vea bien sin scroll. */
    .zenth-brands-strip--mode-marquee .zenth-brands-strip__viewport {
        -webkit-mask-image: none;
                mask-image: none;
        overflow-x: auto;
    }

    .zenth-brands-strip--mode-marquee .zenth-brands-strip__track {
        width: 100%;
        justify-content: center;
    }
}