/* BBclubs Mobile Responsive Stylesheet */

/* Main post content container */
.post-text-content {
  position: relative;
}

/* Collapsed state - limit height and add fade */
.post-text-content.collapsed {
  max-height: 200px; /* ~5 lines */
  position: relative;
  overflow: hidden;
}

/* Special handling for posts with images */
.post-text-content.collapsed:has(img) {
  max-height: none; /* Don't limit height if images are present */
  overflow: visible;
}

/* Fallback for browsers that don't support :has() */
.post-text-content.collapsed.has-images {
  max-height: none;
  overflow: visible;
}

/* Gradient fade effect at bottom when collapsed */
.post-text-content.collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, #fff);
  pointer-events: none;
  z-index: 1;
}

/* See More button styling */
.see-more-btn {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #495057;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  margin: 8px 0 0 0;
  border-radius: 4px;
  display: inline-block;
  font-weight: 500;
  transition: all 0.2s ease;
  z-index: 2;
  position: relative;
}

.see-more-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
  color: #343a40;
}

.see-more-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Expanded state - no height limit */
.post-text-content.expanded {
  max-height: none;
}

.post-text-content.expanded::after {
  display: none;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .post-text-content.collapsed {
    max-height: 150px; /* Smaller height on mobile */
  }
  
  /* Hide sidebar on mobile */
  .sidebar {
    display: none !important;
  }
  
  /* Make main content full width on mobile */
  .main-content {
    width: 100% !important;
    margin-left: 0 !important;
  }
  
  /* Hide sidebar toggle buttons on mobile */
  .sidebar-toggle,
  .sidebar-show-toggle {
    display: none !important;
  }
  
  /* Adjust page layout for mobile */
  .page-layout {
    flex-direction: column;
  }
}