/* ========================================
   Image Placeholders & Styling
======================================== */

/* Hero Background Image */
.hero-background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  z-index: 1;
}

/* Placeholder Images */
.placeholder-image {
  background: linear-gradient(135deg, var(--color-gray-200) 0%, var(--color-gray-300) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-600);
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.placeholder-image::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255,255,255,0.05) 10px,
    rgba(255,255,255,0.05) 20px
  );
}

/* Case Study Images */
.case-study-image img,
.event-image img,
.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.case-study-card:hover .case-study-image img,
.event-card:hover .event-image img {
  transform: scale(1.05);
}

/* Team Member Images */
.team-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%);
  transition: all var(--transition-base);
}

.team-card:hover .team-image img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* Image Loading States */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Responsive Images */
@media (max-width: 768px) {
  .placeholder-image {
    font-size: 1rem;
  }
}