/**
 * Estilos para el shortcode [motai_all_info_cards]
 * Grid responsive de infocards
 * 
 * @package MotaiListingPlugin
 * @version 2.4.0
 */

.motai-all-info-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0;
}

/* ===========================================
   LAYOUT PARA MOTOS NUEVAS (solo 2 cards)
   =========================================== */

.motai-all-info-cards-container.motai-all-info-cards--nueva {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
}

/* ===========================================
   RESPONSIVE - TABLET
   =========================================== */

@media (max-width: 992px) {
    .motai-all-info-cards-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    /* Para motos nuevas en tablet, mantener 2 columnas */
    .motai-all-info-cards-container.motai-all-info-cards--nueva {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===========================================
   RESPONSIVE - MÓVIL
   =========================================== */

@media (max-width: 768px) {
    .motai-all-info-cards-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    /* Para motos nuevas en móvil, 1 columna */
    .motai-all-info-cards-container.motai-all-info-cards--nueva {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   AJUSTES PARA LAS CARDS DENTRO DEL GRID
   =========================================== */

.motai-all-info-cards-container .motai-info-card {
    width: 100%;
    margin: 0; /* Remover márgenes individuales */
}