/**
 * Componente: Card Grid
 * Descrição: Container responsivo para organizar cards.
 * Autor: Kennedy Arantes
 * Data: 2025-10-27
 */

/* === Base do Grid === */
.card-grid {
    @apply
        w-full
        mb-12;
}

/* === Header do Grid === */
.card-grid__header {
    @apply
        flex items-center justify-between
        mb-6 pb-3
        border-b-2 border-neutral-200 dark:border-neutral-700;
}

.card-grid__title {
    @apply
        text-xl font-bold text-neutral-800 dark:text-neutral-100;
}

.card-grid__count {
    @apply
        text-sm font-medium text-neutral-600 dark:text-neutral-400
        px-3 py-1
        bg-neutral-100 dark:bg-neutral-700
        rounded-full;
}

/* === Container do Grid (Responsivo) === */
.card-grid__container {
    @apply
        grid
        gap-6
        grid-cols-1 /* Mobile-first: 1 coluna */
        sm:grid-cols-2   /* Tablet: 2 colunas */
        lg:grid-cols-3   /* Desktop: 3 colunas */
        xl:grid-cols-4;  /* Wide: 4 colunas */
}

/* === Variações de Grid === */

/* Grid Compacto */
.card-grid--compact .card-grid__container {
    @apply
        gap-4
        lg:grid-cols-4
        xl:grid-cols-5;
}

/* Grid Espaçoso */
.card-grid--spacious .card-grid__container {
    @apply
        gap-8
        lg:grid-cols-2
        xl:grid-cols-3;
}

/* Grid Sem Header */
.card-grid--no-header .card-grid__header {
    @apply hidden;
}

/* === Estados de Vazio/Carregando === */
.card-grid__empty,
.card-grid__loading {
    @apply
        col-span-full
        py-12 px-6
        text-center text-neutral-500 dark:text-neutral-400;
}

.card-grid__empty::before,
.card-grid__loading::before {
    @apply
        block
        text-4xl
        mb-4;
}

.card-grid__empty::before {
    content: "📭";
}

.card-grid__loading::before {
    content: "⏳";
    @apply animate-spin;
}