/*
  =====================================================================================
  LATEST-POSTS.CSS - Fresh Start - Houtini WordPress Theme
  Clean, sophisticated card design matching the guides page workflow showcase
  Eliminates all previous conflicts and Bootstrap interference
  =====================================================================================
*/

/*
  =====================================================================================
  SECTION 1: CLEAN CONTAINER DESIGN
  Match the sophisticated workflow showcase cards with proper glass morphism
  =====================================================================================
*/

/* WordPress Latest Posts Container - Clean Override */
.wp-block-latest-posts__list.bs-list-group.list-group.wp-block-latest-posts {
    /* Reset all inherited styles */
    all: unset !important;
    
    /* Modern grid layout */
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: 1.5rem !important;
    
    /* Container styling */
    padding: 2.5rem !important;
    margin: 3rem auto !important;
    max-width: 1200px !important;
    
    /* Glass morphism container like workflow showcase */
    background: rgba(250, 250, 250, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0, 102, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 102, 255, 0.1) !important;
    
    /* List reset */
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Dark theme container */
body.dark .wp-block-latest-posts__list.bs-list-group.list-group.wp-block-latest-posts {
    background: rgba(23, 23, 23, 0.9) !important;
    border-color: rgba(0, 102, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 102, 255, 0.2) !important;
}

/*
  =====================================================================================
  SECTION 2: INDIVIDUAL FUNCTION CARDS
  Clean white cards with modern styling matching workflow cards
  =====================================================================================
*/

/* Individual Function Cards */
.wp-block-latest-posts__list .list-group-item {
    /* Reset all inherited styles */
    all: unset !important;
    
    /* Card foundation */
    display: flex !important;
    flex-direction: column !important;
    
    /* Card styling - match workflow cards */
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 102, 255, 0.1) !important;
    padding: 1.5rem !important;
    
    /* Shadow and effects */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    
    /* Height consistency */
    min-height: 120px !important;
    height: auto !important;
}

/* Dark theme cards */
body.dark .wp-block-latest-posts__list .list-group-item {
    background: rgba(26, 26, 26, 0.9) !important;
    border-color: rgba(0, 102, 255, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Card hover effects - match workflow cards */
.wp-block-latest-posts__list .list-group-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(0, 102, 255, 0.15) !important;
    border-color: #0066FF !important;
}

body.dark .wp-block-latest-posts__list .list-group-item:hover {
    box-shadow: 0 16px 40px rgba(0, 102, 255, 0.3) !important;
}

/*
  =====================================================================================
  SECTION 3: FUNCTION LINK STYLING
  Clean typography and meaningful FontAwesome icons
  =====================================================================================
*/

/* Function Links - Clean Typography */
.wp-block-latest-posts__list .stretched-link {
    /* Reset all inherited styles */
    all: unset !important;
    
    /* Typography */
    font-family: 'Montserrat', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    color: #000000 !important;
    
    /* Layout */
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0.75rem 0 !important;
    
    /* Interaction */
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Dark theme function links */
body.dark .wp-block-latest-posts__list .stretched-link {
    color: #ffffff !important;
}

/* Function link hover effects */
.wp-block-latest-posts__list .stretched-link:hover {
    color: #0066FF !important;
    text-decoration: none !important;
}

body.dark .wp-block-latest-posts__list .stretched-link:hover {
    color: #3399FF !important;
}

/*
  =====================================================================================
  SECTION 4: FONTAWESOME ICONS
  Meaningful icons based on function type - no more blue dots
  =====================================================================================
*/

/* Base icon styling */
.wp-block-latest-posts__list .stretched-link::before {
    /* FontAwesome base */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 1.25rem !important;
    
    /* Icon container */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    
    /* Styling */
    background: rgba(0, 102, 255, 0.1) !important;
    color: #0066FF !important;
    border-radius: 8px !important;
    
    /* Positioning */
    flex-shrink: 0 !important;
    
    /* Transition */
    transition: all 0.3s ease !important;
}

/* Dark theme icons */
body.dark .wp-block-latest-posts__list .stretched-link::before {
    background: rgba(0, 102, 255, 0.2) !important;
    color: #3399FF !important;
}

/* Icon hover effects */
.wp-block-latest-posts__list .stretched-link:hover::before {
    background: rgba(0, 102, 255, 0.2) !important;
    color: #0066FF !important;
    transform: scale(1.1) !important;
}

body.dark .wp-block-latest-posts__list .stretched-link:hover::before {
    background: rgba(0, 102, 255, 0.3) !important;
    color: #66B2FF !important;
}

/*
  =====================================================================================
  SECTION 5: SPECIFIC FUNCTION ICONS
  Meaningful icons based on function names and categories
  =====================================================================================
*/

/* Quick Start */
.wp-block-latest-posts__list .stretched-link[href*="quick-start"]::before {
    content: "\f135"; /* fa-rocket */
}

/* Analysis Functions */
.wp-block-latest-posts__list .stretched-link[href*="analyze_"]::before {
    content: "\f0e4"; /* fa-search */
}

.wp-block-latest-posts__list .stretched-link[href*="count_files"]::before {
    content: "\f0ca"; /* fa-list-ul */
}

.wp-block-latest-posts__list .stretched-link[href*="security_audit"]::before {
    content: "\f132"; /* fa-shield-alt */
}

.wp-block-latest-posts__list .stretched-link[href*="find_unused"]::before {
    content: "\f2ed"; /* fa-trash */
}

/* Generation Functions */
.wp-block-latest-posts__list .stretched-link[href*="generate_"]::before {
    content: "\f013"; /* fa-cog */
}

.wp-block-latest-posts__list .stretched-link[href*="create_"]::before {
    content: "\f067"; /* fa-plus */
}

/* Creative Functions */
.wp-block-latest-posts__list .stretched-link[href*="arcade_game"]::before {
    content: "\f11b"; /* fa-gamepad */
}

.wp-block-latest-posts__list .stretched-link[href*="css_art"]::before {
    content: "\f1fc"; /* fa-paint-brush */
}

.wp-block-latest-posts__list .stretched-link[href*="text_adventure"]::before {
    content: "\f02d"; /* fa-book */
}

/* System Functions */
.wp-block-latest-posts__list .stretched-link[href*="health_check"]::before {
    content: "\f21e"; /* fa-heartbeat */
}

.wp-block-latest-posts__list .stretched-link[href*="list_functions"]::before {
    content: "\f0c9"; /* fa-bars */
}

/* WordPress Functions */
.wp-block-latest-posts__list .stretched-link[href*="wordpress"]::before {
    content: "\f19a"; /* fa-wordpress */
}

/* Flow and Execution */
.wp-block-latest-posts__list .stretched-link[href*="trace_execution"]::before {
    content: "\f1e6"; /* fa-route */
}

.wp-block-latest-posts__list .stretched-link[href*="diff_method"]::before {
    content: "\f126"; /* fa-code-branch */
}

.wp-block-latest-posts__list .stretched-link[href*="find_pattern"]::before {
    content: "\f002"; /* fa-search */
}

/*
  =====================================================================================
  SECTION 6: RESPONSIVE DESIGN
  Clean responsive breakpoints matching other sections
  =====================================================================================
*/

@media (max-width: 1024px) {
    .wp-block-latest-posts__list.bs-list-group.list-group.wp-block-latest-posts {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
        gap: 1.25rem !important;
        padding: 2rem !important;
    }
}

@media (max-width: 768px) {
    .wp-block-latest-posts__list.bs-list-group.list-group.wp-block-latest-posts {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 1.5rem !important;
        margin: 2rem auto !important;
    }
    
    .wp-block-latest-posts__list .list-group-item {
        padding: 1.25rem !important;
        min-height: 100px !important;
    }
    
    .wp-block-latest-posts__list .stretched-link {
        font-size: 1rem !important;
    }
    
    .wp-block-latest-posts__list .stretched-link::before {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .wp-block-latest-posts__list.bs-list-group.list-group.wp-block-latest-posts {
        padding: 1rem !important;
        border-radius: 16px !important;
    }
    
    .wp-block-latest-posts__list .list-group-item {
        padding: 1rem !important;
        border-radius: 12px !important;
    }
    
    .wp-block-latest-posts__list .stretched-link {
        font-size: 0.95rem !important;
        gap: 0.75rem !important;
    }
}

/*
  =====================================================================================
  SECTION 7: ADDITIONAL POLISH
  Subtle enhancements for professional appearance
  =====================================================================================
*/

/* Gradient accent on hover */
.wp-block-latest-posts__list .list-group-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #0066FF, #00CC88);
    border-radius: 16px 16px 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wp-block-latest-posts__list .list-group-item:hover::after {
    opacity: 1;
}

/* Focus accessibility */
.wp-block-latest-posts__list .stretched-link:focus {
    outline: 2px solid #0066FF !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* Performance optimization */
.wp-block-latest-posts__list .list-group-item {
    will-change: transform, box-shadow;
}

/*
  =====================================================================================
  END OF CLEAN LATEST POSTS STYLING
  Total lines: ~300 (down from 1000+)
  Clean, maintainable, and Bootstrap-conflict-free
  =====================================================================================
*/