/**
 * Estilos específicos para la vista Grid (rejilla) de Kuula Collections.
 */

.uie-kuula-grid {
    display: grid;
    grid-template-columns: repeat(var(--uie-columns, 4), 1fr);
    gap: 20px;
    width: 100%;
}

.uie-kuula-grid .uie-kuula-card {
    aspect-ratio: 1 / 1;
    width: 100%;
}

/* Animación de carga escalonada */
.uie-kuula-grid .uie-kuula-card {
    opacity: 0;
    transform: translateY(15px);
    animation: uieKuulaFadeInUp 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes uieKuulaFadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Delays para efecto stagger en carga */
.uie-kuula-grid .uie-kuula-card:nth-child(1)  { animation-delay: 0.05s; }
.uie-kuula-grid .uie-kuula-card:nth-child(2)  { animation-delay: 0.10s; }
.uie-kuula-grid .uie-kuula-card:nth-child(3)  { animation-delay: 0.15s; }
.uie-kuula-grid .uie-kuula-card:nth-child(4)  { animation-delay: 0.20s; }
.uie-kuula-grid .uie-kuula-card:nth-child(5)  { animation-delay: 0.25s; }
.uie-kuula-grid .uie-kuula-card:nth-child(6)  { animation-delay: 0.30s; }
.uie-kuula-grid .uie-kuula-card:nth-child(7)  { animation-delay: 0.35s; }
.uie-kuula-grid .uie-kuula-card:nth-child(8)  { animation-delay: 0.40s; }
.uie-kuula-grid .uie-kuula-card:nth-child(n+9) { animation-delay: 0.45s; }

/* ──────────────────────────────────────────────────────────
   RESPONSIVE DESIGN
   ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .uie-kuula-grid {
        grid-template-columns: repeat(min(var(--uie-columns, 4), 3), 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .uie-kuula-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .uie-kuula-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}