/* ============================================================
   coreMtp — Categories MotoPro Widget Styles
   Archivo: assets/css/categories-mtp.css
   Plugin: coreMtp v2.0.0
   ============================================================ */

.mtp-categories-wrapper {
    width: 100%;
}

.mtp-categories-title-wrapper {
    margin-bottom: 25px;
}

.mtp-categories-title {
    margin: 0;
    line-height: 1.2;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.mtp-categories-title-regular {
    font-weight: 400;
}

.mtp-categories-title-bold {
    font-weight: 700;
}

/* Grid Principal */
.mtp-categories-grid {
    display: grid;
    /* Las variables se inyectan dinámicamente desde Elementor */
    grid-template-columns: repeat(var(--mtp-grid-cols, 8), 1fr);
    gap: var(--mtp-grid-gap, 15px);
    width: 100%;
}

/* Item */
.mtp-category-item {
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.mtp-category-item:hover,
.mtp-category-item:focus {
    text-decoration: none;
    outline: none;
}

/* Contenedor de la Imagen/Icono */
.mtp-category-media-box {
    width: 100%;
    /* Ratio controlado vía CSS var desde Elementor (ej. 1/1, 3/4) */
    aspect-ratio: var(--mtp-ratio, 1/1);
    border-radius: var(--mtp-radius, 0px);
    background-color: var(--mtp-bg, transparent);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    border: var(--mtp-border-width, 0) solid var(--mtp-border-color, transparent);
}

.mtp-category-item:hover .mtp-category-media-box {
    border-color: var(--mtp-border-hover, transparent);
    box-shadow: var(--mtp-shadow-hover, none);
}

/* Imagen */
.mtp-category-media-box img {
    width: 100%;
    height: 100%;
    /* Normalmente 'cover' o 'contain' controlado por clase en Elementor */
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

.mtp-category-item:hover .mtp-category-media-box img.mtp-hover-zoom {
    transform: scale(1.05); /* Zoom sutil al pasar el mouse */
}

/* Iconos */
.mtp-category-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.mtp-category-icon-wrapper i {
    font-size: var(--mtp-icon-size, 32px);
    color: var(--mtp-icon-color, #333);
}

.mtp-category-icon-wrapper svg {
    width: var(--mtp-icon-size, 32px);
    height: var(--mtp-icon-size, 32px);
    fill: var(--mtp-icon-color, #333);
}

.mtp-category-item:hover .mtp-category-icon-wrapper {
    transform: translateY(-3px);
}

/* Nombre de la categoría */
.mtp-category-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--mtp-text-color, #555);
    transition: color 0.3s;
    line-height: 1.3;
}

.mtp-category-item:hover .mtp-category-name {
    color: var(--mtp-text-hover, #333);
}

/* Responsividad Nativa inyectada por Elementor */
@media (max-width: 1024px) {
    .mtp-categories-grid {
        grid-template-columns: repeat(var(--mtp-grid-cols-tablet, 5), 1fr);
        gap: var(--mtp-grid-gap-tablet, 15px);
    }
}

@media (max-width: 767px) {
    .mtp-categories-grid {
        grid-template-columns: repeat(var(--mtp-grid-cols-mobile, 3), 1fr);
        gap: var(--mtp-grid-gap-mobile, 10px);
    }
    
    /* Si el usuario activa el carrusel en móvil */
    .mtp-categories-grid.mtp-mobile-scroll {
        display: flex;
        overflow-x: auto;
        padding-bottom: 15px; /* Espacio para el scrollbar */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling en iOS */
    }
    
    .mtp-categories-grid.mtp-mobile-scroll::-webkit-scrollbar {
        height: 4px;
    }
    .mtp-categories-grid.mtp-mobile-scroll::-webkit-scrollbar-track {
        background: #f1f1f1; 
        border-radius: 4px;
    }
    .mtp-categories-grid.mtp-mobile-scroll::-webkit-scrollbar-thumb {
        background: #ccc; 
        border-radius: 4px;
    }

    .mtp-categories-grid.mtp-mobile-scroll .mtp-category-item {
        /* Se calcula el ancho exacto mostrando X items visibles */
        flex: 0 0 calc( (100% / var(--mtp-grid-cols-mobile, 3)) - (var(--mtp-grid-gap-mobile, 10px) * (var(--mtp-grid-cols-mobile, 3) - 1) / var(--mtp-grid-cols-mobile, 3)) );
        scroll-snap-align: start;
        min-width: 80px;
    }
}