/* Lawndale Image Fix - Comprehensive Text Visibility Enhancement */
/* Mobile-first responsive design with Netlify compatibility */

/* Enhanced Lawndale portfolio image positioning - v2 images */
.portfolio-image img[src*="lawndale"] {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center top; /* Fixed positioning for v2 cropped images */
  width: 100%;
  height: auto;
  max-width: 600px;
  border-radius: 8px;
  image-rendering: crisp-edges;
  transition: transform 0.3s ease;
}

/* Mobile optimization with text visibility priority */
@media (max-width: 768px) {
  .portfolio-image img[src*="lawndale"] {
    max-width: 100%;
    object-position: center 20%; /* Slightly different for mobile */
    border-radius: 6px;
  }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
  .portfolio-image img[src*="lawndale"] {
    object-position: center 18%;
  }
}

/* High-resolution display optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .portfolio-image img[src*="lawndale"] {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Netlify deployment compatibility - fallback for older browsers */
@supports not (object-position: center 15%) {
  .portfolio-image img[src*="lawndale"] {
    background-position: center 15%;
    background-size: cover;
  }
}

/* Loading state optimization */
.portfolio-image img[src*="lawndale"][loading="lazy"] {
  background: linear-gradient(135deg, #4a5568 20%, #2d3748 80%);
  min-height: 267px; /* Reserve space to prevent layout shift */
}

/* Error handling for broken images */
.portfolio-image img[src*="lawndale"]:not([src]) {
  background: linear-gradient(135deg, #e8f4fd 0%, #f3f1ee 100%);
  position: relative;
}

.portfolio-image img[src*="lawndale"]:not([src])::before {
  content: "Lawndale Inc. Website Preview";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #4a5568;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  text-align: center;
}

/* Performance optimization */
.portfolio-image img[src*="lawndale"] {
  will-change: transform;
  contain: layout style paint;
}

/* Accessibility enhancement */
.portfolio-image img[src*="lawndale"]:focus {
  outline: 2px solid #4299e1;
  outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .portfolio-image img[src*="lawndale"] {
    transition: none;
  }
}