:root {
    --primary: #4a90e2; /* Your original blue */
    --dark: #333;
    --bg-main: #f0f2f5; /* Light grey background */
    --glass: rgba(255, 255, 255, 0.95);
}

body { 
    margin: 0; 
    font-family: 'Segoe UI', sans-serif; 
    background: var(--bg-main); 
    color: var(--dark); 
}

/* Original Blue-Gradient Header */
.hero-header { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    padding: 60px 20px; 
    text-align: center; 
    color: white; 
}

/* Filter Bar - Clean White */
.filter-bar {
    max-width: 1000px; 
    margin: -30px auto 30px; 
    background: var(--glass);
    padding: 20px; 
    border-radius: 15px; 
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    display: flex; 
    gap: 15px; 
    flex-wrap: wrap; 
    backdrop-filter: blur(10px);
}

.filter-bar input, .filter-bar select {
    padding: 12px; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    flex: 1; 
    min-width: 200px;
}

/* Grid Layout */
.article-grid { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); 
    gap: 25px; 
    padding: 20px;
}

/* Professional White Card with 2026 Animations */
.article-card {
    background: white; 
    border-radius: 20px; 
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex; 
    flex-direction: column; 
    height: 100%;
}

.article-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}

.card-banner { height: 200px; background: #eee; overflow: hidden; }
.card-banner img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.5s ease;
}

.article-card:hover .card-banner img { transform: scale(1.08); }

.card-content { padding: 25px; flex-grow: 1; }
.card-meta { font-size: 0.85rem; color: #888; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.author-img { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #eee; }

.content-preview { 
    line-height: 1.6; 
    color: #555; 
    height: 80px; 
    overflow: hidden; 
    display: -webkit-box; 
    /* -webkit-line-clamp: 3;  */
    -webkit-box-orient: vertical; 
}

.read-more-link { 
    color: var(--primary); 
    font-weight: bold; 
    text-decoration: none; 
    display: inline-block; 
    margin-top: 15px; 
}

  .like-indicator {
            background: rgba(74, 144, 226, 0.1);
            color: #4a90e2;
            padding: 2px 10px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 5px;
        }
        .meta-text-wrapper {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

/* --- MOBILE OPTIMIZATION (650px Friendly) --- */
@media (max-width: 650px) {
    .hero-header { padding: 40px 15px; }
    .hero-header h1 { font-size: 1.8rem; }

    .filter-bar { 
        margin: -15px 15px 20px; 
        padding: 15px; 
        gap: 10px;
    }
    
    .filter-bar input, .filter-bar select { min-width: 100%; }
    
    .article-grid { 
        grid-template-columns: 1fr; /* Single column for small screens */
        padding: 10px;
        gap: 20px;
    }
    
    .article-card { border-radius: 15px; }
    .card-banner { height: 180px; }
}