/**
 * Comment Separator Styles
 * These styles define the comment separator used across different categories
 */

/* Comment separator layout */
.comment-separator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  position: relative;
  height: 3px;
  clear: both; /* Ensure it doesn't compete with floated elements */
  width: 100%; /* Ensure it spans the full width */
  box-sizing: border-box; /* Better box model */
}

/* Comment separator dotted line effect */
.comment-separator::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 25px;
  background: repeating-linear-gradient(
    to bottom,
    #e0e0e0,
    #e0e0e0 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 0.8; /* Slightly more visible */
}

/* Separator variations that can be used with the partial */
.comment-separator.solid-sep {
  height: 1px;
  margin: 40px 0;
}

.comment-separator.solid-sep::before {
  height: 1px;
  background: #e0e0e0;
  top: 0;
}

.comment-separator.thick-sep {
  height: 3px;
}

.comment-separator.thick-sep::before {
  height: 3px;
  background: #e0e0e0;
  top: 0;
}

/* Related comment layout styles */
.comment-author-image {
  max-width: 150px; /* Instead of width: 100% */
  height: auto; /* Instead of height: 100% */
  object-fit: contain;
  z-index: 2;
  display: block;
  margin: 0 0 0 auto; /* Push the image to the right */
  max-height: 150px; /* Set a consistent height */
  margin-top: -40px;
}

.comment-description {
  flex: 0 0 80%;
  padding-right: 15px;
}

.comment-author-space {
  width: 100%;
  position: relative; /* Enable positioning context */
  text-align: right;
}

/* Author photo and separator alignment */
.comment-description-container {
  margin-bottom: 30px;
  border-bottom: var(--border-thin-light);
}

/* Special separator that follows author photos */
.author-photo-separator {
  margin-top: 0 !important; /* Override default margin */
  position: relative;
  top: 0; /* Align perfectly with bottom of photo */
  margin-bottom: 30px; /* Add space below */
}

/* Style 2 specific right column layout */
.comment-description-container-right-column {
  margin: 30px 0 0px;
  border-bottom: var(--border-thin-light);
}

.comment-description-container-right-column .comment-author-space {
  width: 100%;
  z-index: 999;
  text-align: right;
}

.comment-description-container-right-column .comment-author-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  max-height: 150px; /* Consistent height */
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .comment-author-space {
    flex: 0 0 40%;
  }

  .comment-description {
    flex: 0 0 60%;
  }

  .comment-description-container-right-column {
    flex-direction: column;
  }

  .comment-description-container-right-column .comment-description {
    flex: 0 0 75%;
    padding-left: 0;
    padding-right: 0;
  }
}