/*--------------------------------------------------------------
# Instagram Feed Component - Tailwind Optimized
--------------------------------------------------------------*/

/* Only unique styles that cannot be replaced with Tailwind classes */

/* Column modifiers for dynamic grid layout - can't be done with Tailwind */
.instagram-feed-grid--columns-1 {
  @apply grid-cols-1;
}

.instagram-feed-grid--columns-2 {
  @apply grid-cols-2;
}

.instagram-feed-grid--columns-3 {
  @apply grid-cols-3;
}

.instagram-feed-grid--columns-4 {
  @apply grid-cols-4;
}

.instagram-feed-grid--columns-5 {
  @apply grid-cols-5;
}

.instagram-feed-grid--columns-6 {
  @apply grid-cols-6;
}

/* Loading animation - complex keyframes */
.instagram-feed--loading::after {
  @apply content-[''] absolute top-1/2 left-1/2 w-10 h-10 -mt-5 -ml-5 border-4 border-gray-200 rounded-full;
  border-top-color: var(--color-instagram);
  animation: instagram-feed-spin 1s linear infinite;
}

@keyframes instagram-feed-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}