/**
 * Elementor Posts Widget Customization
 * v3.4.1 - Fully responsive modular layout system
 * 
 * FEATURES:
 * - Repositions post badges from thumbnail area to text area with absolute positioning
 * - Supports dynamic tag-based colors via inline styles
 * - Auto-detects all WordPress tags with admin-configurable colors
 * - Badge styling: Consistent pill-shaped badges on desktop and mobile
 * - Elementor Post Info tag links styled as pills (single post templates)
 * - Tags automatically converted to title case (first letter of each word capitalized)
 * - Fully responsive with desktop (769px+) and mobile (768px-) breakpoints
 * - Increased specificity to override Elementor default styles
 * - Fixed image heights for Related articles widget (270px desktop, 210px mobile)
 * - Text truncation: Titles limited to 50 chars (2 lines), excerpts to 105 chars
 * - Read more link fixed to bottom of cards with arrow icon
 * 
 * LAYOUT MODES:
 * 1. Default: Equal-height cards layout (no CSS class needed)
 *  - Fixed 270px image height (210px mobile) with object-fit: cover
 *  - Title: 50 characters max (2 lines with ellipsis)
 *  - Excerpt: 105 characters max with ellipsis
 *  - Read more link aligned to bottom with arrow icon
 * 2. Featured Single: Large prominent single post with overlay card
 *  - Activate by adding CSS class "posts-featured-single" to widget
 *  - Desktop: 789px height with background image and overlay content
 *  - Mobile: Stacked layout (image top, text bottom)
 * 3. Stacked Three: Horizontal cards (image left, text right)
 *  - Activate by adding CSS class "posts-stacked-three" to widget
 *  - Desktop: 196px image width, 789px container height, equal card distribution
 *  - Mobile: 115px image width, 20px padding, no excerpt, adjusted button positioning
 * 
 * RECOMMENDED USAGE:
 * - Use two separate Posts widgets for hero layouts (featured + stacked)
 * - Set Featured to 1 post, Stacked to 3 posts for optimal layout
 * - Default layout is perfect for Related articles widgets
 */

#feature-stack .elementor-post__read-more,
#posts-stack .elementor-post__read-more{
    transition-delay: 0s !important;
    transition-duration: 0.3s !important;
    transition-property: all !important;
    transition-timing-function: ease !important;
}

#feature-stack a,
#posts-stack a {
    text-decoration: none;
}

#feature-stack,
#feature-stack .elementor-posts {
  height: 100%;
}

#feature-stack .elementor-post__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  
  border-radius: 40px;
  overflow: hidden;

  height: 500px;
  min-height: auto;
  background-color: transparent;
}

#feature-stack .elementor-post__text {
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: calc(100% - 48px);
  border-radius: 20px;
  background: var(--Brand-Primary, #052E5E);
  
  padding: 24px;
  margin: 0;
}

#feature-stack .elementor-post__thumbnail {
  height: 100%;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

#feature-stack .elementor-post__thumbnail img {
  height: 100%;
  width: 100%;
}

#feature-stack .elementor-post__thumbnail__link {
  height: 100%;
  width: 100%;
  
  margin: 0 !important;
  padding: 0 !important;
}

#feature-stack .elementor-post__thumbnail__link * {
  height: 100%;
  object-fit: cover;
}

#posts-stack .elementor-posts {
  row-gap: 20px;
}

#posts-stack .elementor-post__thumbnail {
  padding: 0 !important;
}

#posts-stack .elementor-post__card,
#posts-stack .elementor-post__thumbnail__link {
  height: 210px;
}

#posts-stack .elementor-post__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  
  border-radius: 40px;
  overflow: hidden;
  row-gap: 10px;
  
  padding-left: 160px;
  /* background-color: transparent; */
}

#posts-stack .elementor-post__thumbnail__link {
  position: absolute;
  top: 0;
  left: 0; 
  width: 140px;

  margin: 0 !important;
  padding: 0 !important;
}

#posts-stack .elementor-post__thumbnail__link * {
  height: 100%;
  object-fit: cover;
}

#posts-stack .elementor-post__text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  column-gap: 12px;
  padding-right: 20px;
  flex-grow: 0;
  min-height: 110px;
}

#posts-stack .elementor-post__title,
#posts-stack .elementor-post__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 !important;
  padding: 0 !important;
}

#feature-stack .elementor-post__excerpt,
#posts-stack .elementor-post__excerpt {
  -webkit-line-clamp: 3;	
  padding-right: 75px !important;
}

#feature-stack .elementor-post__excerpt br,
#posts-stack .elementor-post__excerpt br {
  display: none;
}

#posts-stack .elementor-post__excerpt {
  display: none;
}

#posts-stack .elementor-post__badge {
  position: relative;
  top: auto;
  left: auto;
  
  display: inline-flex;
}

#feature-stack .elementor-post__read-more,
#posts-stack .elementor-post__read-more {
  position: absolute;
  right: 24px;
  bottom: 24px;
  
  height: 48px;
  width: 48px;
  
  overflow: hidden;
  margin: 0;
  padding: 0;
  
  background-image: url('../images/Article Highlight Button.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#posts-stack .elementor-post__read-more {
  bottom: 0px;
}

#feature-stack .elementor-post__read-more svg,
#feature-stack .elementor-post__read-more span,
#posts-stack .elementor-post__read-more svg,
#posts-stack .elementor-post__read-more span {
  opacity: 0;
}

@media (min-width: 769px) {
  #feature-stack .elementor-post__card {
    height: 100%;	
  }
  
  #posts-stack .elementor-post__card,
  #posts-stack .elementor-post__thumbnail__link {
    height: 247px;
  }
  
  #posts-stack .elementor-post__card {
    row-gap: 20px;
  }

  #posts-stack .elementor-post__thumbnail__link {
    width: 200px;
  }
  
  #posts-stack .elementor-post__card {
    padding-left: 220px;
  }
  
  #feature-stack .elementor-post__excerpt,
  #posts-stack .elementor-post__excerpt {
    display: flex;
  }
}   

#feature-stack .elementor-post__card:hover .elementor-post__read-more,
#posts-stack .elementor-post__card:hover .elementor-post__read-more {
    transform: rotate(45deg);
    background-image: url('../images/Article Highlight Hover Button.svg');
}

/* Posts Grid (default) */
#posts-grid .elementor-post__thumbnail {
  width: 100% !important;
  padding: 0 !important;
  height: 247px !important;
}

#posts-grid .elementor-post__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#posts-grid .elementor-pagination a,
#posts-grid .elementor-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;


  border-radius: 100%;
  width: 49px;
  aspect-ratio: 1/1;
  text-decoration: none;
  
  transition: all 0.2s ease;
}

#posts-grid .elementor-pagination span {
  border: 1px solid var(--Brand-Primary, #052E5E);
}

#posts-grid .elementor-pagination a:hover {
    color: var(--Background, #ECF0FF) !important;
    background: var(--Primary-P6, #7AACFD);
}