/**
 * OUTPUT PAGE - Complete CLS Fixes
 * Targets the actual layout shift culprits: container & footer
 */

/* ============================================
   CRITICAL FIX: Main Container Stability
   This prevents the 0.92 layout shift!
   ============================================ */

main .container {
  /* Reserve minimum height to prevent collapse */
  min-height: 100vh;
}

/* When content loads, allow natural height */
main .container.loaded {
  min-height: 0;
}

/* ============================================
   Footer Stability
   ============================================ */

footer {
  /* Prevent footer from jumping */
  position: relative;
}

/* ============================================
   Grid Stability
   ============================================ */

#socialMediaGrid,
#videoScriptsGrid,
#longformGrid {
  min-height: 600px;
  transition: min-height 0.3s ease;
}

#socialMediaGrid.loaded,
#videoScriptsGrid.loaded,
#longformGrid.loaded {
  min-height: 0;
}

/* ============================================
   Quality Mounts
   ============================================ */

#qualityAgentMount {
  min-height: 200px;
  transition: min-height 0.3s ease, opacity 0.3s ease;
}

#qualityAgentMount:not(:empty) {
  min-height: 0;
  opacity: 1;
}

#qualityAgentMount:empty {
  opacity: 0;
  pointer-events: none;
}

#qualityEditMount {
  min-height: 150px;
  transition: min-height 0.3s ease, opacity 0.3s ease;
}

#qualityEditMount:not(:empty) {
  min-height: 0;
  opacity: 1;
}

#qualityEditMount:empty {
  opacity: 0;
  pointer-events: none;
}

/* ============================================
   Output Header
   ============================================ */

.output-header {
  min-height: 180px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.output-header.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Content Sections
   ============================================ */

#social-section,
#video-section,
#longform-section {
  min-height: 600px;
  transition: opacity 0.3s ease;
}

/* ============================================
   Output Content Wrapper
   ============================================ */

#outputContent {
  /* Prevent shift when becoming visible */
  min-height: 800px;
}

#outputContent.loaded {
  min-height: 0;
}

/* ============================================
   Loading State
   ============================================ */

#loadingState {
  min-height: 400px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#loadingState.hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

/* ============================================
   Cards
   ============================================ */

.output-card {
  min-height: 300px;
  contain: layout;
}

.card-header {
  min-height: 40px;
}

.card-content {
  min-height: 200px;
  transition: min-height 0.3s ease;
}

.card-content.loaded {
  min-height: 0;
}

/* ============================================
   Images
   ============================================ */

.output-card img,
.card-content img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.output-card img.loaded,
.card-content img.loaded {
  opacity: 1;
}

.output-card img:not(.loaded) {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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

/* ============================================
   Mobile Responsive
   ============================================ */

@media (max-width: 768px) {
  main .container {
    min-height: 100vh;
  }
  
  #socialMediaGrid,
  #videoScriptsGrid,
  #longformGrid,
  #social-section,
  #video-section,
  #longform-section {
    min-height: 500px;
  }
  
  .output-card {
    min-height: 250px;
  }
  
  #qualityAgentMount {
    min-height: 150px;
  }
  
  #qualityEditMount {
    min-height: 100px;
  }
  
  #outputContent {
    min-height: 600px;
  }
}

/* ============================================
   Performance
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

#socialMediaGrid,
#videoScriptsGrid,
#longformGrid {
  contain: layout style;
}