.listCardsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap-lg);

    &.compact {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--gap-md);
    }

    &.wide {
        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
        gap: var(--gap-xl);
    }

    &.horizontal {
        grid-template-columns: 1fr;
    }
}

/* RESP-025 (R15): em telas grandes, cards wide não ultrapassam 480px por coluna */
@media (min-width: 1440px) {
    .listCardsGrid.wide {
        grid-template-columns: repeat(auto-fill, minmax(450px, 480px));
    }
}

/* RESP-014: escala de gap — tablet/mobile */
@media (max-width: 768px) {
    .listCardsGrid,
    .listCardsGrid.compact,
    .listCardsGrid.wide {
        grid-template-columns: 1fr;
        gap: var(--gap-md);
    }
}

/* RESP-001: small mobile (320–430px) — 1 coluna e min-width: 0 para evitar scroll horizontal */
/* RESP-014: gap reduzido em small mobile */
@media (max-width: 430px) {
    .listCardsGrid,
    .listCardsGrid.compact,
    .listCardsGrid.wide {
        grid-template-columns: 1fr;
        min-width: 0;
        gap: var(--gap-sm);
    }
}

@media (max-width: 320px) {
    .listCardsGrid,
    .listCardsGrid.compact,
    .listCardsGrid.wide {
        gap: var(--gap-grid-xs);
    }
}