/**
 * Grid de veículos (#grid-motos): colunas no desktop e tipografia dos cards
 * conforme data-cols (3, 4 ou 5). Mais colunas = fonte menor.
 * No mobile permanece 1 coluna com tamanhos confortáveis.
 */
@media (min-width: 768px) {
    #grid-motos {
        grid-template-columns: repeat(var(--moto-cols, 4), minmax(0, 1fr));
    }
}

/* Mobile e fallback: equivalente a cards largos */
#grid-motos {
    --moto-card-title-fs: 1.125rem;
    --moto-card-meta-fs: 0.875rem;
    --moto-card-price-fs: 1.5rem;
}

@media (min-width: 768px) {
    #grid-motos[data-cols="3"] {
        --moto-card-title-fs: 1.125rem;
        --moto-card-meta-fs: 0.875rem;
        --moto-card-price-fs: 1.5rem;
    }

    #grid-motos[data-cols="4"] {
        --moto-card-title-fs: 1rem;
        --moto-card-meta-fs: 0.8125rem;
        --moto-card-price-fs: 1.25rem;
    }

    #grid-motos[data-cols="5"] {
        --moto-card-title-fs: 0.875rem;
        --moto-card-meta-fs: 0.75rem;
        --moto-card-price-fs: 1.125rem;
    }
}

#grid-motos > .card .card-body .card-title {
    font-size: var(--moto-card-title-fs);
    line-height: 1.2;
}

#grid-motos > .card .card-body .moto-catalog-meta {
    font-size: var(--moto-card-meta-fs);
    line-height: 1.35;
}

#grid-motos > .card .card-body .moto-catalog-meta strong {
    font-weight: 600;
}

#grid-motos > .card .card-body .moto-catalog-price {
    font-size: var(--moto-card-price-fs);
    line-height: 1.2;
}

/*
 * Carrossel nos cards: com altura fixa (h-64) e cards estreitos (ex.: 5 colunas),
 * object-fit: contain deixa faixas vazias em fotos horizontais. Cover preenche a área.
 */
#grid-motos .card-carousel__slide img {
    object-fit: cover;
}

/* Filtro cilindrada (catálogo): 2 colunas no mobile — reforço caso utilitários Tailwind não carreguem */
@media (max-width: 767px) {
    .filtros-cilindrada-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 0.5rem;
        width: 100%;
    }

    .filtros-cilindrada-grid > .filtros-cilindrada-item {
        min-width: 0;
        max-width: 100%;
    }
}