/**
 * COMPONENTS / BRAND STRIP
 * -----------------------------------------------------------------------------
 * Tira de marcas de la portada, en carrusel continuo con Swiper.
 *
 *   <section class="brand-strip">
 *       <div class="container brand-strip__inner">
 *           <span class="brand-strip__label">Equipos con respaldo de fábrica</span>
 *           <div class="brand-strip__slider swiper" data-brand-slider>
 *               <div class="swiper-wrapper">
 *                   <div class="swiper-slide brand-strip__item">
 *                       <span class="brand-strip__name">GoodWe</span>
 *                   </div>
 *               </div>
 *           </div>
 *       </div>
 *   </section>
 *
 * Tipográfico a propósito: no hay logotipos oficiales en el proyecto. Cuando
 * lleguen los SVG, el <span> pasa a ser un <img> y el resto no cambia.
 */

.brand-strip {
    background: var(--bg);
    border-bottom: 1px solid var(--border-soft);
    padding: 46px 0;
}

.brand-strip__inner {
    display: flex;
    align-items: center;
    gap: var(--gap-grid-lg);
}

.brand-strip__label {
    flex-shrink: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- Carrusel ----------------------------------------------------------- */

.brand-strip__slider {
    /* `min-width: 0` deja que la pista encoja dentro del flex en vez de
       desbordar el contenedor cuando hay muchas marcas. */
    flex: 1;
    min-width: 0;
    /* Los nombres se desvanecen por los bordes en lugar de cortarse en seco. */
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/*
 * Desplazamiento a velocidad constante. Swiper anima con una curva de easing
 * pensada para pasar de diapositiva en diapositiva; en un desfile continuo esa
 * curva se nota como un tirón al principio y al final de cada ciclo.
 */
.brand-strip__slider .swiper-wrapper {
    transition-timing-function: linear;
}

/*
 * Ancho fijo por marca, no el que mida cada logotipo. Los archivos vienen del
 * fabricante con proporciones muy distintas (el de Solis es apaisado, el de
 * Dyness casi cuadrado) y a ancho libre la tira avanzaba a saltos irregulares.
 */
.brand-strip__item {
    width: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-strip__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 62px;
}

/*
 * Atenuados, pero NO en escala de grises.
 *
 * El gris es el recurso habitual en estas tiras, y aquí no funciona: los logos
 * que envía el fabricante son de trazo fino y gris claro de origen (Dyness,
 * Solis), así que desaturados y al 55 % de opacidad no se leían. Se deja el
 * color de cada marca y solo se baja la intensidad; al pasar por encima
 * recuperan el 100 %.
 */
.brand-strip__logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.78;
    transition: var(--transition);
}

.brand-strip__link:hover .brand-strip__logo,
.brand-strip__link:focus-visible .brand-strip__logo {
    filter: none;
    opacity: 1;
}

/* Respaldo para una marca sin logotipo cargado. */
.brand-strip__name {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: 22px;
    letter-spacing: -0.6px;
    color: var(--brand-idle);
    white-space: nowrap;
    transition: var(--transition);
}

.brand-strip__link:hover .brand-strip__name {
    color: var(--heading);
}

/* --- Sin Swiper --------------------------------------------------------- */

/*
 * Swiper marca su raíz con .swiper-initialized al arrancar. Mientras eso no
 * ocurra —el archivo no cargó, o el visitante tiene el JS desactivado— la
 * pista se comporta como la fila estática del diseño original: sin esto los
 * slides se apilarían uno bajo otro.
 */
.brand-strip__slider:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 46px;
}

/* Las copias solo existen para alimentar el bucle del carrusel. */
.brand-strip__slider:not(.swiper-initialized) .brand-strip__item[aria-hidden="true"] {
    display: none;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1000px) {

    .brand-strip__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }

    /* En columna la pista ocupa todo el ancho del contenedor. */
    .brand-strip__slider {
        width: 100%;
    }
}

@media (max-width: 700px) {

    .brand-strip {
        padding: var(--space-lg) 0;
    }

    /* Logos algo más pequeños para que entren tres en pantalla. */
    .brand-strip__item {
        width: 130px;
    }

    .brand-strip__link {
        height: 48px;
    }

    .brand-strip__name {
        font-size: 18px;
    }

    .brand-strip__slider:not(.swiper-initialized) .swiper-wrapper {
        gap: var(--space-md) var(--space-lg);
    }
}