/**
 * 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
 */

/* ============================================
   EQUAL HEIGHT CARDS
   ============================================ */

/* Make each post item fill full height */
.elementor-posts .elementor-post {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Make card fill the full height of the post item */
.elementor-post__card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Override flex-direction for stacked-three layout */
.posts-stacked-three .elementor-post__card {
    flex-direction: row !important;
}

/* Make thumbnail container not grow */
.elementor-post__thumbnail {
    flex-shrink: 0;
}

/* ============================================
   RELATED ARTICLES / DEFAULT LAYOUT
   Fixed image height for consistent blocks
   ============================================ */

/* Desktop: Fixed 270px height for thumbnails in default layout (Related articles) */
/* Only apply to default layout, not posts-featured-single or posts-stacked-three */
.elementor-posts .elementor-post__thumbnail {
    height: 270px !important;
    min-height: 270px !important;
    max-height: 270px !important;
    overflow: hidden;
}

/* Ensure thumbnail link has same height */
.elementor-posts .elementor-post__thumbnail__link {
    height: 270px !important;
    min-height: 270px !important;
    max-height: 270px !important;
    display: block;
}

/* Images should cover the 270px height */
.elementor-posts .elementor-post__thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Mobile: Fixed 210px height for thumbnails in default layout */
@media (max-width: 768px) {
    .elementor-posts .elementor-post__thumbnail {
        height: 210px !important;
        min-height: 210px !important;
        max-height: 210px !important;
    }
    
    .elementor-posts .elementor-post__thumbnail__link {
        height: 210px !important;
        min-height: 210px !important;
        max-height: 210px !important;
    }
    
    .elementor-posts .elementor-post__thumbnail img {
        height: 100% !important;
    }
}

/* Make text area fill remaining vertical space */
.elementor-post__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px; /* All around padding */
}

/* Make excerpt area grow to push read-more to bottom */
.elementor-post__excerpt {
    flex: 1;
    margin-bottom: 16px;
}

/* ============================================
   RELATED ARTICLES - TEXT TRUNCATION & ALIGNMENT
   ============================================ */

/* Ensure text area maintains proper flex layout for bottom alignment */
.elementor-posts .elementor-post__text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between;
}

/* Title: 2 lines max, truncate with ellipsis */
.elementor-posts .elementor-post__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: calc(1.4em * 2); /* 2 lines */
    margin-bottom: 12px;
    flex-shrink: 0; /* Don't shrink */
}

/* Title link styling */
.elementor-posts .elementor-post__title a {
    display: block;
    text-decoration: none;
}

/* Excerpt: 105 characters max with ellipsis - grows to push read more down */
.elementor-posts .elementor-post__excerpt {
    /* Keep as flex child of .elementor-post__text */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    line-height: 1.5;
    margin-bottom: 16px;
    flex: 1 !important; /* Force flex-grow: 1 */
    min-height: 0; /* Allow shrinking */
}

/* Apply -webkit-box to the paragraph for line clamping */
.elementor-posts .elementor-post__excerpt p {
    margin: 0;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* Show 2 lines with ellipsis */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1; /* Paragraph fills the excerpt container */
}

/* Read more link - fixed to bottom */
.elementor-posts .elementor-post__read-more {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-top: auto !important; /* Push to bottom */
    margin-bottom: 0;
    text-decoration: none;
    flex-shrink: 0; /* Don't shrink */
}

/* Arrow SVG styling in read more link */
.elementor-posts .elementor-post__read-more svg {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    width: 18px;
    height: 24px;
}

/* ============================================
   FIXED DIMENSIONS - DESKTOP VIEW
   ============================================ */

/* Desktop: Fixed height for posts container */
@media (min-width: 769px) {
    .elementor-posts-container.elementor-posts.elementor-posts--skin-cards.elementor-grid.elementor-has-item-ratio {
        height: 789px !important;
    }
    
    /* Fixed height for text area in desktop view */
    .elementor-post__text {
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
    }
}

/* ============================================
   BADGE REPOSITIONING
   ============================================ */

/* Remove badge from thumbnail area and reposition to text area */
.elementor-posts .elementor-post__badge {
    /* Remove default positioning */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    
    /* Badge styling - override Elementor Pro defaults */
    display: inline-block !important;
    width: fit-content !important;
    padding: 6px 12px !important;
    margin-block-start: 24px !important;
    margin-block-end: 16px !important;
    margin-left: 30px !important;
    margin-inline-end: 0 !important;
    border-radius: 24px 24px 24px 24px !important; /* Override Elementor's 999px */
    font-size: 12px !important;
    font-weight: 600 !important; /* Override Elementor's 500 */
    text-transform: none !important; /* Override Elementor's uppercase */
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important; /* Override Elementor's 12px */
    
    /* Default color (will be overridden by dynamic CSS) */
    background-color: #4CAF50 !important;
    color: #ffffff !important;
}

/* Move badge to be first child in text area via CSS order */
.elementor-posts .elementor-post__text .elementor-post__badge {
    order: -1;
    align-self: flex-start;
}

/* Adjust spacing for title */
.elementor-post__text .elementor-post__title {
    margin-top: 0;
    margin-bottom: 16px;
}

/* ============================================
   FEATURED SINGLE POST LAYOUT
   ============================================ */

/* 
 * Activate by adding CSS class "posts-featured-single" to the Elementor Posts widget
 * (Advanced tab → CSS Classes → Add "posts-featured-single")
 * Recommended: Set Posts Per Page to 1
 * 
 * Design: Full background image with overlaid content card at bottom
 */

/* Featured post card - container for background image and overlay */
.posts-featured-single .elementor-post .elementor-post__card {
    position: relative;
    height: 100%;
    min-height: 600px;
    overflow: hidden;
    border-radius: 12px; /* Rounded corners for the entire card */
}

/* Thumbnail link - make it fill entire card */
.posts-featured-single .elementor-post .elementor-post__thumbnail__link {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Thumbnail container as full background - positioned absolutely to fill entire card */
.posts-featured-single .elementor-post .elementor-post__thumbnail {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.posts-featured-single .elementor-post .elementor-post__thumbnail img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important; /* Remove Elementor's centering transform */
}

/* Text content as overlay at bottom */
.posts-featured-single .elementor-post .elementor-post__text {
    position: absolute;
    bottom: 20px; /* 20px spacing at bottom to show image */
    left: 20px; /* 20px spacing at left to show image */
    right: 20px; /* 20px spacing at right to show image */
    z-index: 2;
    background: inherit; /* Match .elementor-post__card background color */
    padding: 24px; /* All around padding */
    border-radius: 16px; /* Rounded corners for content card */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    width: unset;
}

/* Badge - positioned inside text box at top-left corner */
.posts-featured-single .elementor-post .elementor-post__badge {
    position: absolute !important;
    bottom: 177px !important;
    left: 50px !important;
    margin: 0 !important;
    z-index: 3;
}

/* Title styling - with top margin to clear badge */
.posts-featured-single .elementor-post .elementor-post__title {
    font-size: 1.75em;
    line-height: 1.3;
    margin-top: 50px; /* Push below badge */
    margin-bottom: 12px;
}

/* Title link - ensure it displays correctly */
.posts-featured-single .elementor-post .elementor-post__title a {
    display: block;
    color: #ffffff;
    text-decoration: none;
}

/* Excerpt styling */
.posts-featured-single .elementor-post .elementor-post__excerpt {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* Excerpt paragraph - fixed width on desktop */
@media (min-width: 769px) {
    .posts-featured-single .elementor-post .elementor-post__excerpt p {
        width: 430px;
        max-width: 430px;
    }
}

/* Article Highlight Button - featured posts */
.posts-featured-single .elementor-post .elementor-post__read-more {
    display: inline-flex;
    width: 49px;
    height: 49px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0;
    text-indent: -9999px;
    overflow: hidden;
    background-image: url('../images/Article Highlight Button.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    text-decoration: none;
    flex-shrink: 0;
    position: absolute;
    bottom: 24px; /* 24px from bottom of .elementor-post__text */
    right: 24px; /* 24px from right of .elementor-post__text */
}

.posts-featured-single .elementor-post .elementor-post__read-more:hover {
    opacity: 0.8;
    transform: scale(1.05);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.posts-featured-single .elementor-post .elementor-post__read-more span,
.posts-featured-single .elementor-post .elementor-post__read-more svg {
    display: none !important;
}

/* Mobile: Stacked layout - image on top, text below */
@media (max-width: 768px) {
    /* Card - fixed height */
    .posts-featured-single .elementor-post .elementor-post__card {
        height: 419px;
        min-height: 419px;
        max-height: 419px;
        display: flex;
        flex-direction: column;
    }
    
    /* Thumbnail - top half, 200px height */
    .posts-featured-single .elementor-post .elementor-post__thumbnail__link {
        position: relative !important;
        width: 100%;
        height: 200px;
        flex-shrink: 0;
    }
    
    .posts-featured-single .elementor-post .elementor-post__thumbnail {
        position: relative !important;
        width: 100%;
        height: 200px;
        flex-shrink: 0;
    }
    
    .posts-featured-single .elementor-post .elementor-post__thumbnail img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    /* Text area - bottom half */
    .posts-featured-single .elementor-post .elementor-post__text {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        width: 100%;
        margin: 0;
        padding: 24px 0; /* Top and bottom padding only, no left/right */
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
    }
    
    /* Badge - positioned in normal flow */
    .posts-featured-single .elementor-post .elementor-post__badge {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        margin: 0 0 0px 24px !important;
    }
    
    /* Title - adjust spacing */
    .posts-featured-single .elementor-post .elementor-post__title {
        font-size: 1.3em;
        margin-top: 0; /* No margin-top needed since badge is in normal flow */
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 12px;
    }
    
    /* Excerpt - adjust spacing */
    .posts-featured-single .elementor-post .elementor-post__excerpt {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 16px;
    }
    
    /* Excerpt paragraph - fixed width on mobile */
    .posts-featured-single .elementor-post .elementor-post__excerpt p {
        width: 240px;
        max-width: 240px;
    }
    
    /* Article Highlight Button - positioned in bottom right, mobile icon */
    .posts-featured-single .elementor-post .elementor-post__read-more {
        position: absolute;
        bottom: 24px;
        right: 16px;
        width: 40px;
        height: 40px;
        /* background-image: url('../images/IconmobileNewsLink.svg') !important; */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    /* Hide children on mobile - ensure span and SVG are hidden */
    .posts-featured-single .elementor-post .elementor-post__read-more span,
    .posts-featured-single .elementor-post .elementor-post__read-more svg {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        font-size: 0 !important;
        line-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ============================================
   STACKED THREE POSTS LAYOUT
   ============================================ */

/* 
 * Activate by adding CSS class "posts-stacked-three" to the Elementor Posts widget
 * (Advanced tab → CSS Classes → Add "posts-stacked-three")
 * Recommended: Set Posts Per Page to 3
 */

/* Container for stacked posts */
.posts-stacked-three .elementor-posts-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Desktop: Fixed container height to match featured post column */
@media (min-width: 769px) {
    .posts-stacked-three .elementor-posts-container {
        height: 789px !important;
    }
    
    /* Each post should fill equal space (789px - 48px gaps = 741px / 3 = 247px each) */
    .posts-stacked-three .elementor-post {
        flex: 1 !important;
        min-height: 0 !important;
    }
}

/* Each post card - horizontal layout (thumbnail left, text right) */
.posts-stacked-three .elementor-posts-container .elementor-post .elementor-post__card,
.posts-stacked-three .elementor-post .elementor-post__card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    height: 100% !important; /* Fill parent post height */
    overflow: hidden; /* Prevent content from sliding under */
    min-height: 0; /* Allow flex items to shrink */
    position: relative !important; /* For absolute badge positioning */
    border-radius: 20px !important; /* Rounded corners */
}

/* Thumbnail link - constrain to match card height */
.posts-stacked-three .elementor-post .elementor-post__thumbnail__link {
    display: flex !important;
    align-items: stretch;
    align-self: stretch !important; /* Stretch to fill card height in row layout */
    flex-shrink: 0;
    width: 196px !important;
    max-width: 196px !important;
    margin: 0 !important; /* Remove Elementor Pro's bottom margin */
}

/* Thumbnail - smaller, fixed width */
.posts-stacked-three .elementor-post .elementor-post__thumbnail {
    flex: 0 0 196px !important; /* Fixed width - changed from 140px */
    max-width: 196px !important;
    width: 196px !important;
    height: 100% !important;
    display: flex !important;
    align-items: stretch;
    align-self: stretch !important; /* Stretch to fill link height */
    padding-bottom: 0 !important; /* Remove Elementor's fit-height padding */
}

.posts-stacked-three .elementor-post .elementor-post__thumbnail img {
    object-fit: cover !important; /* Cover the entire space */
    width: 100% !important;
    height: 100% !important; /* Fill the container height */
    object-position: center !important; /* Center the image */
}

/* Text area fills remaining space */
.posts-stacked-three .elementor-post .elementor-post__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Allow text to shrink */
    overflow: hidden; /* Prevent text from overflowing */
    padding: 24px !important; /* Add padding all around */
    /* padding-bottom: 80px !important; Extra bottom padding for read-more button */
    position: relative; /* For absolute read-more positioning */
}

/* Badge - positioned above text area, not in flex flow */
.posts-stacked-three .elementor-post .elementor-post__badge {
    position: absolute !important;
    top: 24px !important;
    left: 220px !important;
    margin: 0 !important;
    z-index: 2;
}

/* Title - compact with top margin to clear badge */
.posts-stacked-three .elementor-post .elementor-post__title {
    font-size: 1em;
    margin-top: 16px !important; /* Space below badge (badge + padding = 24px + 16px = 40px from top) */
    margin-bottom: 8px;
    line-height: 1.4;
}

/* Excerpt - compact */
.posts-stacked-three .elementor-post .elementor-post__excerpt {
    margin-bottom: 8px;
    font-size: 0.9em;
    line-height: 1.5;
}

/* Excerpt paragraph - fixed width on desktop */
@media (min-width: 769px) {
    .posts-stacked-three .elementor-post .elementor-post__excerpt p {
        width: 274px;
        max-width: 274px;
    }
}

/* Article Highlight Button - stacked posts */
.posts-stacked-three .elementor-post .elementor-post__read-more {
    display: inline-flex !important;
    width: 49px !important;
    height: 49px !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    background-image: url('../images/Article Highlight Button.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: none;
    text-decoration: none;
    flex-shrink: 0;
    position: absolute !important;
    bottom: 24px !important;
    right: 24px !important;
}

.posts-stacked-three .elementor-post .elementor-post__read-more:hover {
    opacity: 0.8;
    transform: scale(1.05);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.posts-stacked-three .elementor-post .elementor-post__read-more span,
.posts-stacked-three .elementor-post .elementor-post__read-more svg {
    display: none !important;
}

/* Mobile: Horizontal layout like desktop but with mobile measurements */
@media (max-width: 768px) {
    /* Remove fixed container height on mobile */
    .posts-stacked-three .elementor-posts-container {
        height: auto !important;
    }
    
    /* Card - horizontal layout with 20px padding (like desktop) */
    .posts-stacked-three .elementor-posts-container .elementor-post .elementor-post__card,
    .posts-stacked-three .elementor-post .elementor-post__card {
        flex-direction: row !important; /* Keep horizontal like desktop */
        gap: 20px !important; /* 20px gap between image and text */
        height: auto !important;
    }
    
    /* Thumbnail link - 115px width, stretch height */
    .posts-stacked-three .elementor-post .elementor-post__thumbnail__link {
        display: flex !important;
        width: 115px !important;
        max-width: 115px !important;
        align-self: stretch !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
    
    /* Thumbnail - 115px width, stretch height */
    .posts-stacked-three .elementor-post .elementor-post__thumbnail {
        flex: 0 0 115px !important;
        width: 115px !important;
        max-width: 115px !important;
        height: 100% !important;
        display: flex !important;
        align-items: stretch;
        align-self: stretch !important;
        padding-bottom: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Image - cover full thumbnail space */
    .posts-stacked-three .elementor-post .elementor-post__thumbnail img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
    }
    
    /* Text area - no extra padding (card has padding) */
    .posts-stacked-three .elementor-post .elementor-post__text {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        flex: 1 !important;
    }
    
    /* Badge - absolute positioned with offset (115px image + 20px gap from left, 20px from top) */
    .posts-stacked-three .elementor-post .elementor-post__badge {
        position: absolute !important;
        top: 20px !important;
        left: 135px !important; /* 115px image width + 20px gap */
        margin: 0 !important;
        z-index: 2;
    }
    
    /* Title - 160px width, 10px margin-top to clear badge */
    .posts-stacked-three .elementor-post .elementor-post__title {
        width: 160px !important;
        max-width: 160px !important;
        padding-bottom: 20px;
        margin-top: 40px !important; /* Space for badge (badge height + 10px gap) */
        margin-bottom: 8px !important;
    }
    
    /* Excerpt - hide on mobile */
    .posts-stacked-three .elementor-post .elementor-post__excerpt {
        display: none !important;
    }
    
    /* Read-more button - 40px x 40px, 10px from right and bottom */
    .posts-stacked-three .elementor-post .elementor-post__read-more {
        position: absolute !important;
        bottom: 10px !important;
        right: 10px !important;
        width: 40px !important;
        height: 40px !important;
    }
}

/* ============================================
   ELEMENTOR POST INFO TAGS - PILL STYLING
   ============================================ */

/* Style Elementor Post Info tag links as pills (matches badge styling) */
.elementor-post-info__terms-list-item {
    display: inline-block !important;
    padding: 6px 12px !important;
    margin: 4px 4px 4px 0 !important;
    border-radius: 24px 24px 24px 24px !important; /* Same pill shape as badges */
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important; /* Override Elementor's uppercase, title case handled by JavaScript */
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    transition: opacity 0.3s ease;
    
    /* Default color (will be overridden by dynamic CSS) */
    background-color: #4CAF50 !important;
    color: #ffffff !important;
}

.elementor-post-info__terms-list-item:hover {
    opacity: 0.8;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.elementor-post__badge:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.elementor-post-info__terms-list-item:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ============================================
   ELEMENTOR BUTTON ICON PADDING
   ============================================ */

/* Override: Remove padding-left for buttons with button-no-padding class */
a.elementor-button.button-no-padding {
    padding-left: 0px !important;
    background-color: yellow !important; /* Temporary test */
}