/**
 * SDI Category Clusters - estilos del front
 *
 * Dos vistas sobre el mismo marcado:
 *   - escritorio (>= 768px): rejilla de tarjetas, imagen + nombre en línea.
 *   - móvil (< 768px): carrusel deslizable a todo el ancho de la pantalla, con
 *     la imagen circular sobre el nombre, 3,5 elementos a la vista y degradado
 *     en el borde derecho. Sin flechas ni puntos: se pasa con el dedo.
 *
 * El carrusel móvil es scroll nativo con scroll-snap, no un slider JS: así
 * hereda la inercia del sistema y, si el JS falla, la fila sigue siendo
 * deslizable. front.js solo apaga el.sdicc-item  degradado al llegar al final.
 */

.sdicc-clusters {
    margin: 0 0 28px;
}

.sdicc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 991px) {
    .sdicc-item {
        display: flex;
        margin: 0;
        padding: 0;
        width: 260px;
        height: 80px;
    }
}

.sdicc-item {
    display: flex;
    margin: 0;
    padding: 0;
}

.sdicc-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 260px;
    padding: 0 10px;
    background: #fff;
    border-radius: 10px;
    color: #502c1e !important;
    font-size: 16px;
    line-height: 16px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(80, 44, 30, .06);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.sdicc-link:hover,
.sdicc-link:focus {
    color: #502c1e;
    text-decoration: none;
    border-color: rgba(80, 44, 30, .18);
    box-shadow: 0 4px 12px rgba(80, 44, 30, .12);
    transform: translateY(-2px);
}

.sdicc-img-wrap {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Categoría sin miniatura propia: la imagen "sin foto" del idioma va sobre un
   fondo gris en vez de a blanco, para que no parezca la miniatura real. */
.sdicc-img-wrap--empty {
    border-radius: 8px;
}

.sdicc-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.sdicc-name {
    flex: 1 1 auto;
}

/* ===================================================================
 *  MÓVIL: carrusel de enlaces
 * =================================================================== */

@media (max-width: 767px) {
    .sdicc-clusters {
        /* Sangrado a todo el ancho de la pantalla: el carrusel se sale del
           contenedor para que la última tarjeta muera en el borde derecho. */
        --sdicc-gap: 14px;
        --sdicc-per-view: 3.5;
        --sdicc-edge: 20px;
        --sdicc-fade: #fff;

        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        margin-bottom: 22px;
    }

    .sdicc-list {
        flex-wrap: nowrap;
        gap: var(--sdicc-gap);
        /* Solo padding a la izquierda: a la derecha el contenido llega al borde
           de la pantalla y se corta con el degradado. */
        padding: 0 0 0 var(--sdicc-edge);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scroll-padding-left: var(--sdicc-edge);
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .sdicc-list::-webkit-scrollbar {
        display: none;
    }

    .sdicc-item {
        /* 3,5 tarjetas a la vista => 3 huecos completos visibles. */
        flex: 0 0 calc((100% - 3 * var(--sdicc-gap)) / var(--sdicc-per-view));
        scroll-snap-align: start;
    }

    /* La tarjeta pierde caja, borde y sombra: imagen circular sobre el nombre. */
    .sdicc-link {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        max-width: none;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        text-align: center;
        transition: opacity .18s ease;
    }

    .sdicc-link:hover,
    .sdicc-link:focus {
        border-color: transparent;
        box-shadow: none;
        transform: none;
    }

    .sdicc-link:active {
        opacity: .65;
    }

    .sdicc-img-wrap,
    .sdicc-img-wrap--empty {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: #d9d6d3;
        border-radius: 50%;
    }

    .sdicc-img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
        mix-blend-mode: normal;
    }

    .sdicc-name {
        flex: 0 0 auto;
        font-size: 14px;
        line-height: 14px;
        font-weight: 600;
    }

    /* El editor del tema pinta todos los enlaces en #777 con
       `a:link:not(.nav-link):not(.btn)`; hace falta más especificidad para
       recuperar el marrón del diseño. */
    .sdicc-clusters .sdicc-list a.sdicc-link:link,
    .sdicc-clusters .sdicc-list a.sdicc-link:visited,
    .sdicc-clusters .sdicc-list a.sdicc-link:hover,
    .sdicc-clusters .sdicc-list a.sdicc-link:focus {
        color: #502c1e;
    }

    /* Difuminado del borde derecho: recorta el carrusel con una máscara en vez
       de superponer un degradado de color, así funciona sobre cualquier fondo.
       front.js quita .sdicc-at-end mientras quede algo por deslizar. */
    .sdicc-list {
        --sdicc-mask: linear-gradient(to right,
                #000 0,
                #000 calc(100% - 96px),
                rgba(0, 0, 0, .06) 100%);

        -webkit-mask-image: var(--sdicc-mask);
        mask-image: var(--sdicc-mask);
    }

    .sdicc-clusters.sdicc-at-end .sdicc-list {
        -webkit-mask-image: none;
        mask-image: none;
    }
}