/* Masonry Layout for Ad Cards - JavaScript controlled */
.masonry-grid {
  position: relative;
  width: 100%;
  /* Remove CSS grid - JavaScript will handle positioning */
}

/* Base masonry item - positioned absolutely by JavaScript */
.masonry-item {
  break-inside: avoid;
  margin-bottom: 0;
  /* Width and position will be set by JavaScript */
  transition: all 0.3s ease;
}

/* Card structure improvements */
.masonry-item .group {
  height: auto; /* Let content determine height */
  display: flex;
  flex-direction: column;
  min-height: fit-content;
}

/* Content-based sizing - specific heights for different content types */
.masonry-video .ad-creative-preview {
  height: 320px; /* More height for videos */
}

.masonry-vertical .ad-creative-preview {
  height: 400px; /* Extra height for vertical content */
}

.masonry-horizontal .ad-creative-preview {
  height: 240px; /* Less height for horizontal content */
}

.masonry-square .ad-creative-preview {
  height: 280px; /* Standard height for square content */
}

.masonry-large .ad-creative-preview {
  height: 350px; /* More height for multi-image carousels */
}

.masonry-medium .ad-creative-preview {
  height: 280px; /* Standard height */
}

.masonry-small .ad-creative-preview {
  height: 240px; /* Compact height for small cards */
}

/* Creative preview area optimization - fixed constraints */
.ad-creative-preview {
  width: 100%;
  height: 280px; /* Fixed height to prevent overflow */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Dynamic content sizing for creative assets - with overflow protection */
.dynamic-aspect {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Flexible image sizing - strict containment */
.flexible-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Video-specific styling - contained within preview area */
.masonry-video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0.5rem;
}

/* All videos maintain containment */
video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Smooth transitions for carousel */
.carousel-transition {
  transition: opacity 0.3s ease-in-out;
}

/* Hover effects for carousel navigation */
.carousel-nav {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.group:hover .carousel-nav {
  opacity: 1;
}

/* Improve carousel indicators */
.carousel-indicators {
  transition: all 0.2s ease-in-out;
}

.carousel-indicators button {
  transition: all 0.2s ease-in-out;
}

.carousel-indicators button:hover {
  transform: scale(1.2);
}

/* Ensure content fills available space efficiently */
.masonry-item .group .ad-creative-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Better content distribution in cards */
.masonry-item .group > *:first-child {
  flex-grow: 1;
}

.masonry-item .group > *:last-child {
  flex-shrink: 0;
}

/* Prevent layout shift during image loading */
.flexible-image {
  transition: height 0.2s ease-out;
}

/* Ensure videos maintain proper aspect ratios */
video.dynamic-aspect {
  aspect-ratio: 16 / 9; /* Default fallback aspect ratio */
}

/* Loading states */
.masonry-item.loading .group {
  min-height: 300px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

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