/* Image Fallback Styles */

/* Smooth transitions for image hiding */
.story-card-image-container,
.featured-story-image {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hide image containers smoothly */
.story-card-image-container.hidden,
.featured-story-image.hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

/* Alternative: Slide up animation for hiding */
.story-card-image-container.slide-up {
  transform: translateY(-20px);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Text placeholder styling */
.image-placeholder-text {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  color: #6c757d;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
}

.image-placeholder-text span {
  padding: 20px;
  text-align: center;
}

/* Loading skeleton while checking image */
.image-loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Story card adjustments when image is hidden */
.modern-story-card .story-card-content.no-image {
  border-radius: 8px;
  padding-top: 24px;
}

.modern-story-card.no-image {
  min-height: auto;
}

/* Featured story adjustments when image is hidden */
.featured-story-card .featured-story-content.no-image {
  grid-template-columns: 1fr;
}

.featured-story-card .featured-story-text.expanded {
  max-width: none;
  text-align: center;
}

/* Clickable story cards */
.modern-story-card,
.story-card {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.modern-story-card:hover,
.story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.modern-story-card:hover .story-card-image,
.story-card:hover .story-card-image {
  transform: scale(1.05);
}

.modern-story-card:hover .story-card-title,
.story-card:hover .story-card-title {
  color: var(--color-accent, #e1a957);
}

/* Add subtle animation to card elements */
.story-card-image {
  transition: transform 0.3s ease;
}

.story-card-title {
  transition: color 0.3s ease;
}

/* Visual feedback for clickable areas */
.modern-story-card:hover .story-card-link,
.story-card:hover .story-card-link {
  background-color: var(--color-accent, #e1a957);
  color: white;
}

/* Prevent double-click issues on nested links */
.modern-story-card .story-card-link,
.story-card .story-card-link {
  pointer-events: none;
  position: relative;
  z-index: 1;
}

.modern-story-card:hover .story-card-link,
.story-card:hover .story-card-link {
  pointer-events: auto;
}

/* Featured story card hover effects */
.featured-story-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Active state feedback */
.modern-story-card:active,
.story-card:active {
  transform: translateY(-2px);
  transition: transform 0.1s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .story-card-image-container.hidden + .story-card-content {
    padding-top: 16px;
  }
  
  .featured-story-content.no-image {
    grid-template-columns: 1fr !important;
  }

  /* Reduce hover effects on mobile */
  .modern-story-card:hover,
  .story-card:hover {
    transform: translateY(-2px);
  }
}