/* Fallback styling for images in blog posts */

/* Ensure images are responsive */
article img,
.hero img,
.product img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}

/* Image wrapper styling */
.img-wrapper {
  text-align: center;
  margin: 20px 0;
}

/* Image captions */
.img-caption {
  font-size: 0.85rem;
  color: #a5b4fc;
  margin-top: 10px;
  font-style: italic;
  text-align: center;
}

/* Loading placeholder for images */
img[src*="placeholder"],
img[src*="/images/"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Broken image fallback */
img::before {
  content: '';
  display: block;
}

img::after {
  content: '📷 Image: ' attr(alt);
  display: block;
  padding: 20px;
  background: rgba(99, 102, 241, 0.1);
  border: 2px dashed #667eea;
  border-radius: 8px;
  text-align: center;
  color: #a5b4fc;
  font-size: 0.9rem;
}

/* Hero images - larger and more prominent */
.hero img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Inline images in product/content sections */
.product img {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Mobile responsive images */
@media (max-width: 768px) {
  .hero img,
  .product img {
    margin: 15px 0;
  }
  
  .img-caption {
    font-size: 0.8rem;
    padding: 0 10px;
  }
}