---
// src/pages/blog/index.astro - Blog page with enhanced knowledge graph and filtering
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import KnowledgeGraph from '../../components/KnowledgeGraph.astro';
import Terminal from '../../components/Terminal.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';

// Get all blog entries
const allPosts = await getCollection('posts');

// Sort by publication date
const sortedPosts = allPosts.sort((a, b) => {
  const dateA = a.data.pubDate ? new Date(a.data.pubDate) : new Date(0);
  const dateB = b.data.pubDate ? new Date(b.data.pubDate) : new Date(0);
  return dateB.getTime() - dateA.getTime();
});

// Get all unique tags
const allTags = [...new Set(allPosts.flatMap(post => post.data.tags || []))].sort();

// Get all unique categories
const allCategories = [...new Set(allPosts.map(post => post.data.category).filter(Boolean))].sort();

// Prepare post data for client-side filtering and knowledge graph
const postsData = sortedPosts.map(post => ({
  slug: post.slug,
  title: post.data.title,
  description: post.data.description || '',
  pubDate: post.data.pubDate ? new Date(post.data.pubDate).toLocaleDateString('en-us', { year: 'numeric', month: 'short', day: 'numeric' }) : 'No date',
  pubDateISO: post.data.pubDate ? new Date(post.data.pubDate).toISOString() : '',
  category: post.data.category || 'Uncategorized',
  tags: post.data.tags || [],
  heroImage: post.data.heroImage || '/images/placeholders/default.jpg', 
  readTime: post.data.readTime || '5 min read',
  isDraft: post.data.draft || false
}));

// Prepare enhanced graph data with both posts and tags
const graphData = {
  nodes: [
    // Add post nodes
    ...sortedPosts
      .filter(post => !post.data.draft)
      .map(post => ({
        id: post.slug,
        label: post.data.title,
        type: 'post',
        category: post.data.category || 'Uncategorized',
        tags: post.data.tags || [],
        url: `/posts/${post.slug}/`
      })),
    
    // Add tag nodes
    ...allTags.map(tag => ({
      id: `tag-${tag}`,
      label: tag,
      type: 'tag',
      url: `/tag/${tag}/`
    }))
  ],
  edges: []
};

// Create edges between posts and their tags
sortedPosts
  .filter(post => !post.data.draft)
  .forEach(post => {
    const postTags = post.data.tags || [];
    
    // Add edges from post to tags
    postTags.forEach(tag => {
      graphData.edges.push({
        source: post.slug,
        target: `tag-${tag}`,
        type: 'post-tag',
        strength: 1
      });
    });
    
    // Check if post references other posts (optional)
    // This requires a related_posts field in frontmatter
    if (post.data.related_posts && Array.isArray(post.data.related_posts)) {
      post.data.related_posts.forEach(relatedSlug => {
        // Make sure related post exists
        if (sortedPosts.some(p => p.slug === relatedSlug)) {
          graphData.edges.push({
            source: post.slug,
            target: relatedSlug,
            type: 'post-post',
            strength: 2
          });
        }
      });
    }
  });

// Terminal commands for tech effect
const commands = [
  { 
    prompt: "[laforceit@argobox]$ ", 
    command: "find ./posts -type f -name \"*.md\" | sort -n | wc -l", 
    output: [`${allPosts.length} posts found`]
  },
  {
    prompt: "[laforceit@argobox]$ ",
    command: "ls -la ./tags",
    output: allTags.map(tag => `${tag}`)
  },
  {
    prompt: "[laforceit@argobox]$ ",
    command: "grep -r \"kubernetes\" --include=\"*.md\" ./posts | wc -l",
    output: [`${allPosts.filter(post => 
      post.data.tags?.includes('kubernetes') || 
      post.data.category === 'Kubernetes' ||
      post.data.title?.toLowerCase().includes('kubernetes') ||
      post.data.description?.toLowerCase().includes('kubernetes')
    ).length} matches found`]
  }
];
---

<BaseLayout title="Blog | LaForce IT - Home Lab & DevOps Insights" description="Explore articles about Kubernetes, Infrastructure, DevOps, and Home Lab setups">
  <Header slot="header" />
  <main>
    <!-- Hero Section with Terminal -->
    <section class="hero-section">
      <div class="hero-bg"></div>
      <div class="container">
        <div class="hero-content">
          <div class="hero-text">
            <div class="hero-subtitle">Technical Articles & Guides</div>
            <h1 class="hero-title">Exploring <span>advanced infrastructure</span> and automation</h1>
            <p class="hero-description">
              Dive into enterprise-grade home lab setups, Kubernetes deployments, and DevOps best practices for the modern tech enthusiast.
            </p>
          </div>
          <div class="terminal-container">
            <Terminal commands={commands} title="argobox:~/blog" />
          </div>
        </div>
      </div>
    </section>

    <!-- Blog Content Section -->
    <section class="blog-content-section">
      <div class="container">
        <!-- Search and Filter Section with integrated Knowledge Graph -->
        <div class="search-filter-container">
          <div class="section-header">
            <h2 class="section-title">Knowledge Graph & Content Explorer</h2>
            <p class="section-description">
              Explore connections between articles and topics, or search by keyword
            </p>
          </div>
          
          <!-- Knowledge Graph Visualization -->
          <div class="knowledge-graph-wrapper">
            <KnowledgeGraph graphData={graphData} height="500px" />
          </div>
          
          <div class="search-filter-section">
            <div class="search-bar">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="search-icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
              <input type="search" id="search-input" placeholder="Search posts..." class="search-input" />
            </div>
            <div class="tag-filters">
              <span class="filter-label">Filter by Tag:</span>
              <button class="tag-filter-btn active" data-tag="all">All</button>
              {allTags.map(tag => (
                <button class="tag-filter-btn" data-tag={tag}>{tag}</button>
              ))}
            </div>
          </div>
        </div>

        <!-- Blog Grid (populated by JS) -->
        <div class="blog-section">
          <div class="section-header">
            <h2 class="section-title">All Articles</h2>
            <p class="section-description">
              Technical insights, infrastructure guides, and DevOps best practices
            </p>
          </div>
          
          <div class="blog-grid" id="blog-grid">
            <div class="loading-indicator">
              <div class="loading-spinner"></div>
              <span>Loading articles...</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
  <Footer slot="footer" />

  <!-- Client-side script for filtering and graph interactions -->
  <script define:vars={{ postsData, graphData }}>
    // DOM Elements
    const searchInput = document.getElementById('search-input');
    const tagButtons = document.querySelectorAll('.tag-filter-btn');
    const blogGrid = document.getElementById('blog-grid');
    
    // State variables
    let currentFilterTag = 'all';
    let currentSearchTerm = '';
    let cy; // Cytoscape instance will be set by KnowledgeGraph component
  
    // Wait for cytoscape instance to be available
    document.addEventListener('graphReady', (e) => {
      cy = e.detail.cy;
      console.log('Graph ready and connected to filtering system');
    });
    
    // Function to create HTML for a single post card
// Update the post card HTML creation function in the blog/index.astro file
// Find the function that creates post cards (might be called createPostCardHTML)

function createPostCardHTML(post) {
  // Make sure tags is an array before stringifying
  const tagsString = JSON.stringify(post.tags || []);
  
  // Create tag pills HTML
  const tagPills = post.tags.map(tag =>
    `<span class="post-tag" data-tag="${tag}">${tag}</span>`
  ).join('');
  
  return `
    <article class="post-card" data-tags='${tagsString}' data-slug="${post.slug}">
      <div class="post-card-inner">
        <a href="/posts/${post.slug}/" class="post-image-link">
          <div class="post-image-container">
            <img
              width="720"
              height="360"
              src="${post.heroImage}"
              alt=""
              class="post-image"
              loading="lazy"
            />
            <div class="post-category-badge">${post.category}</div>
          </div>
        </a>
        <div class="post-content">
          <div class="post-meta">
            <time datetime="${post.pubDateISO}">${post.pubDate}</time>
            <span class="post-read-time">${post.readTime}</span>
          </div>
          <h3 class="post-title">
            <a href="/posts/${post.slug}/">${post.title}</a>
            ${post.isDraft ? '<span class="draft-badge">Draft</span>' : ''}
          </h3>
          <p class="post-excerpt">${post.description}</p>
          <div class="post-footer">
            <div class="post-tags">
              ${tagPills}
            </div>
            <a href="/posts/${post.slug}/" class="read-more">Read More</a>
          </div>
        </div>
      </div>
    </article>
  `;
}
  
    // Function to filter and update the grid
    function updateGrid() {
      const searchTermLower = currentSearchTerm.toLowerCase();
      
      // Ensure postsData is available
      if (typeof postsData === 'undefined' || !postsData) {
        console.error("postsData is not available in updateGrid");
        if(blogGrid) blogGrid.innerHTML = '<p class="no-results">Error loading post data.</p>';
        return;
      }

      const filteredPosts = postsData.filter(post => {
        const postTags = post.tags || []; // Ensure tags is an array
        const matchesTag = currentFilterTag === 'all' || postTags.includes(currentFilterTag);
        const matchesSearch = searchTermLower === '' ||
                            post.title.toLowerCase().includes(searchTermLower) ||
                            post.description.toLowerCase().includes(searchTermLower) ||
                            postTags.some(tag => tag.toLowerCase().includes(searchTermLower));
        return matchesTag && matchesSearch;
      });
  
      // Update the grid HTML
      if (blogGrid) {
        if (filteredPosts.length > 0) {
          blogGrid.innerHTML = filteredPosts.map(createPostCardHTML).join('');
          
          // Add click handlers to post tag spans
          document.querySelectorAll('.post-tag').forEach(tagSpan => {
            tagSpan.addEventListener('click', (e) => {
              e.preventDefault();
              const tag = tagSpan.dataset.tag;
              
              // Find and click the matching tag filter button
              const tagBtn = Array.from(tagButtons).find(btn => btn.dataset.tag === tag);
              if (tagBtn) {
                tagBtn.click();
              }
            });
          });
          
          // If graph is available, highlight matching nodes
          if (cy) {
            // Get matching slugs for posts
            const matchingSlugs = filteredPosts.map(post => post.slug);
            
            if (currentFilterTag !== 'all') {
              // We're filtering by tag - highlight tag node and connected posts
              cy.elements().addClass('faded').removeClass('highlighted filtered');
              
              // Highlight the tag node
              const tagNode = cy.getElementById(`tag-${currentFilterTag}`);
              if (tagNode.length > 0) {
                tagNode.removeClass('faded').addClass('highlighted');
                
                // Get connected posts and highlight them
                const connectedPosts = tagNode.neighborhood('node[type="post"]');
                connectedPosts.removeClass('faded').addClass('filtered');
                
                // Highlight connecting edges
                tagNode.connectedEdges().removeClass('faded').addClass('highlighted');
              }
            } 
            else if (currentSearchTerm) {
              // We're searching - highlight matching posts
              cy.elements().addClass('faded').removeClass('highlighted filtered');
              
              // Find and highlight matching post nodes
              matchingSlugs.forEach(slug => {
                const node = cy.getElementById(slug);
                if (node.length > 0) {
                  node.removeClass('faded').addClass('highlighted');
                  
                  // Also show connected tags
                  const connectedTags = node.neighborhood('node[type="tag"]');
                  connectedTags.removeClass('faded').addClass('filtered');
                  
                  // And highlight edges
                  node.connectedEdges().removeClass('faded');
                }
              });
            }
            else {
              // Reset graph view
              cy.elements().removeClass('faded highlighted filtered');
            }
          }
        } else {
          blogGrid.innerHTML = '<p class="no-results">No posts found matching your criteria. Try adjusting your search or filters.</p>';
          
          // Reset graph view
          if (cy) {
            cy.elements().removeClass('faded highlighted filtered');
          }
        }
      } else {
        console.error("Blog grid element not found!");
      }
    }
  
    // Event listener for search input
    if (searchInput) {
      searchInput.addEventListener('input', (e) => {
        currentSearchTerm = e.target.value;
        updateGrid();
      });
    } else {
      console.error("Search input element not found!");
    }
  
    // Event listeners for tag buttons
    tagButtons.forEach(button => {
      button.addEventListener('click', () => {
        // Update active button style
        tagButtons.forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');
        
        // Update filter and grid
        currentFilterTag = button.dataset.tag;
        updateGrid();
        
        // If tag changes but search is active, keep it integrated
        if (cy && currentFilterTag !== 'all') {
          // Find the tag node
          const tagNode = cy.getElementById(`tag-${currentFilterTag}`);
          if (tagNode.length > 0) {
            // Center the view on this tag
            cy.animate({
              center: { eles: tagNode },
              zoom: 1.5
            }, {
              duration: 500
            });
          }
        }
      });
    });
  
    // Initial grid population on client side
    document.addEventListener('DOMContentLoaded', () => {
      updateGrid(); // Call after DOM is fully loaded
      
      // Create link between graph and grid
      document.addEventListener('graphReady', (e) => {
        // Add a scroll-to-graph button
        const searchSection = document.querySelector('.search-filter-section');
        if (searchSection) {
          const graphButton = document.createElement('button');
          graphButton.className = 'graph-toggle-btn';
          graphButton.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="11" cy="11" r="8"></circle>
              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
              <line x1="11" y1="8" x2="11" y2="14"></line>
              <line x1="8" y1="11" x2="14" y2="11"></line>
            </svg>
            Explore Knowledge Graph
          `;
          graphButton.addEventListener('click', () => {
            document.querySelector('.knowledge-graph-wrapper').scrollIntoView({ 
              behavior: 'smooth',
              block: 'start'
            });
          });
          searchSection.appendChild(graphButton);
        }
      });
    });
  </script>
</BaseLayout>

<style>
  /* Hero Section */
  .hero-section {
    padding: 6rem 0 4rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
  }
  
  .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      radial-gradient(circle at 20% 35%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 75% 15%, rgba(59, 130, 246, 0.1) 0%, transparent 45%),
      radial-gradient(circle at 85% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 40%);
    z-index: -1;
  }
  
  .hero-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(rgba(226, 232, 240, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(226, 232, 240, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
  }
  
  .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 5vw, 3rem);
  }
  
  .hero-content {
    display: flex;
    align-items: center;
    gap: 4rem;
  }
  
  .hero-text {
    flex: 1;
  }
  
  .hero-subtitle {
    font-family: var(--font-mono);
    color: var(--accent-primary);
    font-size: var(--font-size-sm);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .hero-subtitle::before {
    content: '>';
    font-weight: bold;
  }
  
  .hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
  }
  
  .hero-title span {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  
  .hero-description {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    margin-bottom: 1.5rem;
    max-width: 540px;
  }

  .terminal-container {
    flex: 1;
    max-width: 560px;
  }
  
  /* Blog Content Section */
  .blog-content-section {
    padding: 2rem 0 5rem;
  }
  
  .section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 2rem;
  }
  
  .section-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
  }
  
  .section-title::after {
    content: '';
    position: absolute;
    height: 4px;
    width: 60px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
  }
  
  .section-description {
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
  }
  
  /* Search Filter Container with Knowledge Graph */
  .search-filter-container {
    margin-bottom: 4rem;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 12px;
    border: 1px solid var(--border-primary);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }
  
  .knowledge-graph-wrapper {
    width: 100%;
    padding: 0;
    margin: 0 0 1.5rem;
  }
  
  .search-filter-section {
    padding: 1.5rem;
    position: relative;
  }
  
  .search-bar {
    margin-bottom: 1.5rem;
    position: relative;
  }
  
  .search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
  }
  
  .search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: var(--font-sans);
    transition: all 0.3s ease;
  }
  
  .search-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
    outline: none;
  }
  
  .search-input::placeholder {
    color: var(--text-secondary);
  }
  
  .tag-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
  }
  
  .filter-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-right: 0.5rem;
    font-family: var(--font-mono);
  }
  
  .tag-filter-btn {
    background-color: rgba(226, 232, 240, 0.05);
    color: var(--text-secondary);
    border: 1px solid var(--card-border);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    font-family: var(--font-mono);
  }
  
  .tag-filter-btn:hover {
    background-color: rgba(226, 232, 240, 0.1);
    color: var(--text-primary);
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-2px);
  }
  
  .tag-filter-btn.active {
    background-color: var(--accent-primary);
    color: var(--bg-primary);
    border-color: var(--accent-primary);
    font-weight: 600;
  }
  
  .graph-toggle-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    color: var(--bg-primary);
    border: none;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.2);
  }
  
  .graph-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(6, 182, 212, 0.3);
  }
  
  /* Blog Section and Grid */
  .blog-section {
    margin-top: 4rem;
  }
  
  .blog-grid {
    margin: 2rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
  }
  
  /* Enhanced Post Card Styles */
  .post-card {
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
  }
  
  .post-card-inner {
    height: 100%;
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--card-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  .post-card:hover .post-card-inner {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.15);
    border-color: rgba(56, 189, 248, 0.4);
  }
  
  .post-image-link {
    display: block;
    text-decoration: none;
  }
  
  .post-image-container {
    position: relative;
  }
  
  .post-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  
  .post-card:hover .post-image {
    transform: scale(1.05);
  }
  
  .post-category-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: var(--bg-primary);
    padding: 0.35rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(6, 182, 212, 0.25);
    font-family: var(--font-mono);
  }
  
  .post-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  
  .post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
  }
  
  .post-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
  }
  
  .post-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .post-title a:hover {
    color: var(--accent-primary);
  }
  
  .draft-badge {
    display: inline-block;
    background: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    vertical-align: middle;
    font-family: var(--font-mono);
  }
  
  .post-excerpt {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
  }
  
  .post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
  }
  
  .post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .post-tag {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .post-tag:hover {
    background: rgba(16, 185, 129, 0.2);
    transform: translateY(-2px);
  }
  
  .read-more {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.3s ease;
  }
  
  .read-more:hover {
    color: var(--accent-secondary);
  }
  
  .read-more::after {
    content: '→';
    transition: transform 0.3s ease;
  }
  
  .post-card:hover .read-more::after {
    transform: translateX(3px);
  }
  
  .no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
    background: rgba(15, 23, 42, 0.2);
    border-radius: 10px;
    border: 1px dashed var(--card-border);
  }
  
  /* Loading Indicator */
  .loading-indicator {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
  }
  
  .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(6, 182, 212, 0.3);
    border-radius: 50%;
    border-top-color: var(--accent-primary);
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  /* Responsive Adjustments */
  @media (max-width: 1024px) {
    .hero-content {
      flex-direction: column;
      gap: 2rem;
    }
    
    .terminal-container {
      max-width: 100%;
      width: 100%;
    }
    
    .hero-text {
      text-align: center;
      align-items: center;
    }
    
    .hero-description {
      max-width: 100%;
    }
    
    .graph-toggle-btn {
      top: auto;
      bottom: 1.5rem;
      right: 1.5rem;
    }
  }
  
  @media (max-width: 768px) {
    .hero-section {
      padding: 4rem 0 3rem;
    }
    
    .section-header {
      margin-bottom: 2rem;
    }
    
    .search-filter-section {
      padding: 1rem;
    }
    
    .blog-grid {
      grid-template-columns: 1fr;
    }
    
    .graph-toggle-btn {
      padding: 0.5rem;
      right: 1rem;
      bottom: 1rem;
    }
    
    .graph-toggle-btn span {
      display: none;
    }
  }

/* Add CSS to make the image link more obvious on hover */
.post-image-link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px 8px 0 0; /* Match card radius */
}

.post-image-link:hover .post-image {
  transform: scale(1.05);
  transition: transform 0.5s ease;
}

.post-image-link::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(6, 182, 212, 0.1); /* Use accent color with alpha */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* Allow clicks through */
}

.post-image-link:hover::after {
  opacity: 1;
}
</style>