/* Vibe Dev X-Spotlight Custom Styles */

/* Pinterest-Style Masonry Layout */
.masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-auto-rows: 20px;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* Masonry Item Styling */
.masonry-item {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: white;
  transition: all 0.3s ease;
  transform-origin: center center;
}

/* Fix rounded corners without overflow hidden */
.masonry-item > *:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.masonry-item > *:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.masonry-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* X Embed Container Optimization */
.embed-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0; /* Reset rounded corners for embeds */
}

/* Ensure Twitter/X embeds render properly */
.embed-container iframe,
.embed-container blockquote {
  width: 100% !important;
  max-width: none !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .masonry-container {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    padding: 18px;
  }
}

/* Prevent layout shift at bottom */
body {
  padding-bottom: 100px; /* Increased buffer at bottom */
  min-height: 100vh;
}

/* Main content wrapper to ensure footer stays down */
main {
  flex: 1;
  padding-bottom: 500px; /* Large bottom padding to prevent reaching bottom */
}

/* Ensure HTML and body fill viewport */
html, body {
  height: 100%;
}

/* Use flexbox to push footer down */
body {
  display: flex;
  flex-direction: column;
}

/* Footer at bottom */
footer {
  margin-top: auto;
}

/* Prevent scroll behavior during layout calculations */
html.calculating-layout {
  scroll-behavior: auto !important;
}

/* Stabilize masonry container during calculations */
.masonry-container {
  min-height: 500px; /* Prevent collapse during recalculation */
}

/* Smooth transitions for masonry items */
.masonry-item {
  transition: grid-row-end 0.2s ease-out;
}

@media (max-width: 768px) {
  .masonry-container {
    grid-template-columns: 1fr;
    grid-auto-rows: 40px;
    gap: 15px;
    padding: 15px;
  }
  
  .masonry-item:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 480px) {
  .masonry-container {
    grid-template-columns: 1fr;
    grid-auto-rows: 40px; /* Increased from 20px for mobile content */
    gap: 15px; /* Increased from 12px for better spacing */
    padding: 15px; /* Increased from 12px for better margins */
  }
  
  .masonry-item {
    border-radius: 8px;
    margin-bottom: 5px; /* Additional bottom margin to prevent overlap */
  }
}

/* Loading State */
.masonry-loading {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.masonry-loaded {
  opacity: 1;
}

/* Animation for new items */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.masonry-item-new {
  animation: fadeInUp 0.5s ease forwards;
}

/* Optimize post card content spacing */
.masonry-item .p-4 {
  padding: 1rem;
  position: relative;
}

/* Ensure proper spacing for categories */
.masonry-item .border-b:last-child {
  border-bottom: none;
  margin-bottom: 0.5rem; /* Consistent bottom margin */
}

/* DUAL-ANCHORED LAYOUT - Both categories and reactions fixed positioned */

/* Categories section - anchored above reactions with space for 3 rows */
.masonry-item > div:nth-last-child(2):not(.submitted-by-section) {
  position: absolute !important;
  bottom: 60px !important; /* Above reaction section */
  left: 0 !important;
  right: 0 !important;
  
  /* Fixed styling for categories */
  margin: 0 !important;
  padding: 0.5rem 1rem !important;
  background: white !important;
  border-top: 1px solid #f3f4f6;
  z-index: 9;
  
  /* Taller height for categories to fit 3 rows */
  height: 85px !important;
  max-height: 85px !important;
  display: flex !important;
  align-items: flex-start !important; /* Start from top instead of center */
  
  /* Handle empty categories gracefully */
  min-height: 85px !important;
  
  /* Allow flex wrap for multiple rows of categories */
  flex-wrap: wrap !important;
  align-content: flex-start !important; /* Align rows from top */
  
  /* Adjust padding for better vertical spacing */
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  
  /* Prevent overflow - contain categories within the box */
  overflow: hidden !important;
  
  /* Ensure proper spacing between category pills */
  gap: 0.25rem !important;
}

/* Reactions section - anchored at bottom with full height but smaller button */
.masonry-item > div:last-child:not(.submitted-by-section) {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  
  /* Fixed consistent spacing regardless of content */
  margin: 0 !important;
  padding: 0.5rem 1rem !important;
  
  /* Visual styling */
  background: white !important;
  border-top: 1px solid #f3f4f6;
  z-index: 10;
  
  /* Full height for reactions section */
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
}

/* Target Tailwind p-4 class specifically in reaction sections */
.masonry-item .p-4:last-child {
  padding: 0.5rem 1rem !important; /* Override Tailwind p-4 (1rem) */
}

/* Force consistent spacing for all action containers */
.masonry-item div.p-4 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Reserve space for all three anchored sections */
.masonry-item {
  padding-bottom: 185px !important; /* Reserve space for submitted by (40px) + categories (85px) + reactions (60px) */
  margin-bottom: 0 !important;
  position: relative !important; /* Required for absolute positioning */
}

/* Force consistent reaction container spacing */
.reaction-container {
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure no space-x-4 Tailwind class creates variance */
.masonry-item .flex.items-center.space-x-4 {
  gap: 1rem !important; /* Replace space-x-4 with consistent gap */
}

/* Override any space-x utilities in actions section */
.masonry-item [class*="space-x-"] {
  gap: 1rem !important;
}

/* Vote button hover effects */
.vote-btn {
  transition: all 0.2s ease;
}

.vote-btn:hover {
  transform: scale(1.05);
}

/* External link hover effect */
a[target="_blank"]:hover i {
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

/* Category pills optimization for masonry */
.masonry-item .rounded-full {
  white-space: nowrap;
  /* Compact category pills to fit 3 rows in 60px */
  font-size: 0.75rem !important; /* 12px */
  padding: 0.125rem 0.5rem !important; /* 2px 8px */
  line-height: 1.2 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  max-height: 18px !important; /* Each pill ~18px allows 3 rows in 60px with gaps */
}

/* Specific styling for category section pills */
.masonry-item > div:nth-last-child(2) .rounded-full {
  margin: 0 !important; /* Remove all margins since we use gap */
}

/* Post header avatar optimization */
.masonry-item .w-8.h-8 {
  flex-shrink: 0;
}

/* Submitted by section - ensure it stays in normal flow */
.submitted-by-section {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  z-index: 1 !important;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Focus states for accessibility */
.masonry-item:focus-within {
  outline: 2px solid var(--vibe-blue);
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .masonry-container {
    display: block;
  }
  
  .masonry-item {
    page-break-inside: avoid;
    margin-bottom: 1rem;
  }
}

/* Enhanced Reaction System Styles */
.reaction-container {
  position: relative;
  display: block !important;
  visibility: visible !important;
}

/* Non-authenticated reaction display */
.reaction-display-container {
  /* Simple container, no special positioning needed */
}

/* Ensure masonry items contain their content properly */
.masonry-item {
  overflow: visible;
  position: relative;
}

/* But hide overflow for embed container */
.embed-container {
  overflow: hidden;
  border-radius: 0.5rem;
}

.reaction-trigger {
  min-width: 80px;
  /* Make the button itself 15px shorter */
  height: 32px !important; /* Down from default ~47px */
  padding: 0.25rem 0.75rem !important; /* Reduced vertical padding */
  font-size: 0.875rem !important; /* Slightly smaller text */
}

/* Ensure reaction count and icon scale appropriately */
.reaction-trigger .reaction-count {
  font-size: 0.875rem !important;
}

.reaction-trigger .reaction-icon {
  font-size: 1rem !important; /* Slightly smaller emoji */
}

.reaction-picker {
  z-index: 50;
  transform-origin: bottom left;
  animation: fadeInScale 0.2s ease-out;
  /* Ensure picker stays within viewport and post boundaries */
  max-width: 90vw;
  /* Prevent overflow beyond masonry item */
  position: absolute !important;
  bottom: 100% !important;
  left: 0 !important;
  right: auto !important;
  /* Ensure picker stays within container */
  max-width: calc(100% - 1rem) !important;
}

/* Adjust picker positioning to avoid overflow */
.reaction-picker:not(.show) {
  pointer-events: none;
}

.reaction-picker.show {
  display: block !important;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.reaction-option {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.reaction-option:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  margin-bottom: 4px;
  z-index: 100;
}

.reaction-option.active {
  background-color: rgba(139, 92, 246, 0.1);
  border: 2px solid var(--vibe-blue);
}

/* Reaction count animation */
@keyframes reactionBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.reaction-count.animate {
  animation: reactionBounce 0.3s ease-out;
}

/* Show labels for all devices */
.reaction-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1;
  text-align: center;
  color: #4b5563; /* text-gray-600 */
}

/* Mobile optimizations for reactions */
@media (max-width: 768px) {
  /* Mobile-specific adjustments for all three sections */
  .masonry-item > div:nth-last-child(2) {
    height: 75px !important; /* Categories taller on mobile for 3 full rows */
    bottom: 45px !important; /* Above reaction section on mobile */
    padding: 0.5rem 0.75rem !important; /* More padding for proper spacing */
    max-height: 75px !important;
    overflow: hidden !important;
    gap: 0.25rem !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
  }
  
  .masonry-item > div:last-child {
    height: 45px !important; /* Standard mobile reaction section height */
    padding: 0.375rem 0.75rem !important;
  }
  
  .masonry-item {
    padding-bottom: 155px !important; /* Adjust reserved space for mobile: submitted by (35px) + categories (75px) + reactions (45px) */
  }

  .reaction-picker {
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: calc(100% - 1rem) !important;
    /* Ensure mobile picker stays within post */
    right: 0.5rem !important;
  }
  
  .reaction-picker-content {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.25rem !important;
  }
  
  .reaction-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    min-width: 70px;
  }
  
  .reaction-option span.text-2xl {
    font-size: 1.5rem;
  }
  
  /* Adjust label size on mobile */
  .reaction-label {
    font-size: 0.625rem;
  }
  
  /* Adjust picker position for smaller screens */
  @media (max-width: 480px) {
    .reaction-picker-content {
      grid-template-columns: repeat(3, 1fr);
    }
    
    .reaction-option {
      min-width: 60px;
      padding: 0.375rem;
    }
  }
}