/**
 * CSS for Custom Blog Posts Module
 */

/* Style for each category <p> tag */
.box-blog-post .cat-label {
  display: inline-block; /* Treat as inline block for padding/margin */
  background-color: #FFF2E1;
  border-radius: 30px;
  padding: 4px 12px;
  margin-top: 16px; /* Vertical space above category tags */
  margin-right: 8px; /* Horizontal space if multiple fit on one line */
  margin-bottom: 16px; /* Vertical space below category tags */
  line-height: 1.2; /* Adjust line height based on padding */
  text-transform: uppercase; /* Retain from original class */
  font-size: 0.7em; /* Retain from original is-xxsmall class approx */
  opacity: 0.7; /* Retain from original op-7 class */
}

/* Style for the link within the category tag */
.box-blog-post .cat-label a {
  color: #EC6A24 !important; /* Use !important to override theme link styles if needed */
  text-decoration: none;
  font-weight: normal; /* Ensure link isn't bolded by default theme styles */
}

/* Reset hover state for the category link */
.box-blog-post .cat-label a:hover {
  color: #EC6A24 !important; /* Keep the same color on hover */
  text-decoration: none !important; /* Ensure no underline on hover */
}

/* Prevent background change when parent .box is hovered */
.box-blog-post.has-hover:hover .cat-label {
  background-color: #FFF2E1 !important; /* Keep the desired background on parent hover */
}

/* Prevent text color change when parent .box is hovered */
.box-blog-post.has-hover:hover .cat-label a {
  color: #EC6A24 !important; /* Keep the desired text color on parent hover */
}

/* Custom border radius for the post image container */
.box-blog-post .box-image {
  border-top-left-radius: 24px !important;
  border-top-right-radius: 24px !important;
  border-bottom-right-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  overflow: hidden; /* Ensure inner elements are clipped */
}

/* Ensure the inner div also respects the clipping */
.box-blog-post .box-image > div {
    border-radius: inherit; /* Inherit the complex radius from parent */
}

/* Style the author info section (now includes date) */
.box-blog-post .post-author-info {
  display: flex;
  justify-content: space-between; /* Pushes author details and date to opposite ends */
  align-items: center; /* Vertically center items */
  gap: 10px; /* Space between author details and date */
  margin-bottom: 16px; /* Space below author/date line */
}

/* Style the inner span containing avatar and name */
.box-blog-post .post-author-info .author-details {
  display: flex;
  align-items: center;
  gap: 8px; /* Space between avatar and name */
  flex-shrink: 1; /* Allow shrinking if needed */
}

.box-blog-post .post-author-info .avatar {
  border-radius: 50%; /* Make avatar circular */
  width: 24px; /* Ensure width */
  height: 24px; /* Ensure height */
}

.box-blog-post .post-author-info .author-name {
  color: #111928; /* Set text color */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2; /* Adjust line height */
  white-space: nowrap; /* Prevent name wrapping */
  overflow: hidden;
  text-overflow: ellipsis; /* Add ellipsis if name is too long */
}

/* Style the date within the author info section */
.box-blog-post .post-author-info .post-meta {
  flex-shrink: 0; /* Prevent date from shrinking */
  white-space: nowrap; /* Prevent date from wrapping */
  margin-bottom: 0; /* Remove default margin */
}

/* Adjust title margin */
.box-blog-post .post-title {
    margin-bottom: 16px; /* Add space below title */
}

/* Style the wrapper for comments and read more */
.box-blog-post .comments-readmore-wrapper {
  display: flex;
  justify-content: space-between; /* Pushes comments and button to opposite ends */
  align-items: center; /* Vertically center items */
}

/* Style the container for comments, likes, views */
.box-blog-post .comments-readmore-wrapper .post-meta-counts {
  display: flex; /* Align counts horizontally */
  align-items: center;
  gap: 12px; /* Space between count groups (Likes, Comments, Views) */
  flex-grow: 1; /* Allow taking available space */
}

/* Style individual count spans (comments, likes, views) */
.box-blog-post .comments-readmore-wrapper .post-meta-counts > span {
  display: inline-flex; /* Align icon and number within each span */
  align-items: center;
  gap: 8px; /* Space between icon and number */
  line-height: 1; /* Adjust line height for icon alignment */
}

.count-number {
  font-size: 12px; /* Font size for the number */
}

/* Style the SVG icons within the counts */
.box-blog-post .comments-readmore-wrapper .post-meta-counts svg {
  width: 16px;
  height: auto; /* Maintain aspect ratio */
  max-height: 16px; /* Limit height */
  fill: #111928; /* Ensure fill color */
}

/* Ensure button doesn't have extra top or bottom margin and set text color */
.box-blog-post .comments-readmore-wrapper .button {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #2D68F8 !important; /* Set read more link color */
}

/* Add bottom border to each blog post box */
.box-blog-post {
  border-bottom: 1px solid #9CA3AF;
}

.from_the_blog_excerpt {
  min-height: 52px;
  font-size: 16px;
  color: #374151;
}

.from_the_blog_excerpt, .post-categories {
  margin-bottom: 16px !important;
}