/*!
 * Instagram Widget Component - Styles
 * Version: 1.0.0
 * Author: GitHub Copilot
 * Date: 2025-08-21
 */

/* Core widget styles */
.ig-widget {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Reel item animations and hover effects */
.ig-reel-item {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  cursor: pointer;
}

.ig-reel-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important;
}

/* Caption overlay styling */
.ig-caption-overlay {
  transition: opacity 0.3s ease;
  backdrop-filter: blur(8px);
  z-index: 10;
  pointer-events: none;
}
/* Ensure stretched-link is always clickable */
.ig-reel-item .stretched-link {
  z-index: 20;
  pointer-events: auto;
}

.ig-reel-item:hover .ig-caption-overlay {
  opacity: 1 !important;
}

/* Gradient overlay for stats and captions */
.bg-gradient-dark {
  background: linear-gradient(transparent, rgb(0 0 0 / 70%));
}

/* Object fit utility (for older browsers) */
.object-fit-cover {
  object-fit: cover;
}

/* Custom aspect ratio classes */
.ratio-4x5 {
  --bs-aspect-ratio: 125%;
}

.ratio-9x16 {
  --bs-aspect-ratio: 177.778%;
}

/* Loading animations */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Error state styling */
.ig-widget .alert {
  border-radius: 0.75rem;
}

/* Header styling */
.ig-widget-header .rounded-circle {
  border: 2px solid rgb(255 255 255 / 10%);
  box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 7.5%);
}

/* Footer button styling */
.ig-widget-footer .btn {
  border-radius: 2rem;
  padding: 0.75rem 2rem;
  font-weight: 600;
}

/* Stats overlay styling */
.ig-widget .position-absolute.bottom-0 {
  backdrop-filter: blur(4px);
  border-radius: 0 0 0.75rem 0.75rem;
}

/* Responsive adjustments */
@media (width <= 576px) {
  .ig-widget .ig-reel-item {
    transform: none;
  }

  .ig-widget .ig-reel-item:hover {
    transform: none;
    box-shadow: 0 0.25rem 0.5rem rgb(0 0 0 / 10%) !important;
  }
}

/* Loading spinner customization */
.ig-widget .spinner-border {
  width: 2rem;
  height: 2rem;
}

.ig-widget .spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

/* Caption text styling */
.ig-widget .ig-reel-item p {
  line-height: 1.4;
}

/* Follow button styling */
.ig-widget .btn-outline-primary {
  border-width: 2px;
  font-weight: 600;
}

.ig-widget .btn-outline-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.25rem 0.5rem rgb(0 123 255 / 25%);
}