/* Critical CSS for LCP optimization */

/* Core layout styles */
.grid {
  display: grid;
}

.bg-gray-800 {
  background-color: #1f2937;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.overflow-hidden {
  overflow: hidden;
}

.h-[300px] {
  height: 300px;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.object-cover {
  object-fit: cover;
}

.top-0 {
  top: 0;
}

.left-0 {
  left: 0;
}

.z-0 {
  z-index: 0;
}

/* Grid layouts */
@media (min-width: 640px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Optimizing LCP animation display */
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

/* Image optimizations for LCP */
img {
  content-visibility: auto;
}

/* Add optimizations for below-the-fold content */
.content-visibility-auto {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

/* Background images optimization */
.bg-lazy {
  background-image: none !important;
  background-color: #121212;
}

/* Prevent layout shifts */
.container-stable {
  contain: layout style paint;
  content-visibility: auto;
}

/* Fix CLS issues for grid layouts on mobile */
.grid {
  contain: layout;
}

/* Add aspect-ratio fixes for images to prevent shifts */
.aspect-square {
  aspect-ratio: 1 / 1;
}

.h-[300px] {
  height: 300px !important;
  min-height: 300px;
}

/* Force stable dimensions on mobile devices */
@media (max-width: 768px) {
  .stable-mobile-height {
    min-height: var(--min-height, 300px);
    height: auto !important;
  }
  
  /* Fix common CLS issues on mobile */
  .flex-col {
    min-height: fit-content;
    height: auto;
  }
}

/* Critical CSS for preventing layout shifts */

/* Base styles to prevent CLS */
:root {
  --min-content-height: 500px;
}

/* Stable height containers */
.stable-height {
  min-height: var(--min-height, 380px);
  height: auto !important;
  contain: content;
}

/* Popular vehicles section */
.flex-col {
  min-height: fit-content;
  height: auto;
}

/* Exclusive offers section */
.bg-gradient-to-b.from-\[\#121212\] {
  min-height: 500px;
  height: auto !important;
}

@media (max-width: 768px) {
  .stable-mobile-height {
    min-height: var(--min-height, 300px);
    height: auto !important;
  }
  
  /* Fix common CLS issues on mobile */
  .flex-col {
    min-height: fit-content;
    height: auto;
  }
  
  /* Enforce content stability for sliding elements */
  [class*='carousel'] {
    contain: layout style paint;
  }
}

/* Force placeholder dimensions to match final content */
[class*='Placeholder'] {
  height: auto !important;
  min-height: inherit;
}

/* Prevent content shifting during image loads */
img {
  aspect-ratio: attr(width) / attr(height);
}

/* Prevent animation-based layout shifts */
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transform: translateZ(0); /* Force GPU acceleration */
  will-change: opacity;
  contain: strict;
}

/* Ensure images maintain aspect ratio during loading */
.image-wrapper {
  position: relative;
  overflow: hidden;
}

.image-wrapper > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}