/* ═══════════════════════════════════════════════════════════════════════════
   Blog List Page — Redesigned with sidebar filters + image cards
   ═══════════════════════════════════════════════════════════════════════════ */

body { background: #f8f9fb; }

/* ─── Hero ─────────────────────────────────────────────────── */
.blog-hero {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 60%, #24243e 100%);
    color: #fff;
    padding: 56px 0 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.blog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.blog-hero h1 { font-size: 2.5rem; font-weight: 800; position: relative; margin-bottom: 8px; }
.blog-hero p { color: rgba(255,255,255,0.7); font-size: 1.05rem; position: relative; margin-bottom: 24px; }
.blog-hero .container { z-index: 2; }
.blog-hero .hero-strings-canvas { z-index: 1; }

/* ─── Search bar ────────────────────────────────────────────── */
.blog-search-wrap { position: relative; max-width: 520px; margin: 0 auto; }
.blog-search-wrap input {
    border-radius: 50px;
    padding: 12px 22px 12px 46px;
    border: none;
    font-size: .95rem;
    background: rgba(255,255,255,0.12);
    color: #fff;
    backdrop-filter: blur(6px);
    width: 100%;
    outline: none;
    transition: background .2s;
}
.blog-search-wrap input::placeholder { color: rgba(255,255,255,0.5); }
.blog-search-wrap input:focus { background: rgba(255,255,255,0.2); }
.blog-search-wrap .search-icon {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,0.55); font-size: .9rem;
}

/* ─── Category filter pills ────────────────────────────────── */
.blog-filter-bar {
    background: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 100;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.blog-filter-bar::-webkit-scrollbar { display: none; }
.blog-filter-inner { display: flex; gap: 6px; padding: 12px 16px; white-space: nowrap; }
.filter-pill {
    border: none; background: transparent; padding: 7px 16px; border-radius: 50px;
    font-size: .82rem; font-weight: 600; color: #6b7280; cursor: pointer;
    transition: all .18s; display: inline-flex; align-items: center; gap: 6px;
}
.filter-pill:hover { background: #f3f4f6; color: #374151; }
.filter-pill.active { background: #5e5ce6; color: #fff; }
.pill-count {
    font-size: .7rem; background: rgba(0,0,0,0.08); border-radius: 20px;
    padding: 1px 7px; font-weight: 700;
}
.filter-pill.active .pill-count { background: rgba(255,255,255,0.25); }

/* ─── Sidebar Filters ───────────────────────────────────────── */
.filter-sidebar {
    background: #fff; border-radius: 14px; border: 1px solid #e9ecef;
    padding: 22px 20px; position: sticky; top: 70px;
}
.filter-sidebar-title {
    font-size: .9rem; font-weight: 700; color: #1a1a2e; margin-bottom: 18px;
    padding-bottom: 12px; border-bottom: 1px solid #f0f0f0;
}
.filter-group { margin-bottom: 16px; }
.filter-label { font-size: .78rem; font-weight: 600; color: #6b7280; margin-bottom: 6px; display: block; }
.filter-select {
    width: 100%; padding: 8px 12px; border: 1.5px solid #e5e7eb; border-radius: 8px;
    font-size: .85rem; color: #374151; background: #fff; cursor: pointer;
    transition: border-color .2s; appearance: auto;
}
.filter-select:focus { border-color: #5e5ce6; outline: none; box-shadow: 0 0 0 3px rgba(94,92,230,0.1); }
.filter-reset-btn {
    width: 100%; padding: 9px 14px; border: 1.5px solid #e5e7eb; border-radius: 8px;
    background: #fff; font-size: .82rem; font-weight: 600; color: #6b7280;
    cursor: pointer; transition: all .15s; margin-bottom: 20px;
}
.filter-reset-btn:hover { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.popular-tags-section { border-top: 1px solid #f0f0f0; padding-top: 16px; }
.popular-tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.popular-tag {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
    border-radius: 20px; font-size: .72rem; font-weight: 600;
    background: #f0edff; color: #5e5ce6; cursor: pointer; transition: all .15s; border: none;
}
.popular-tag:hover { background: #5e5ce6; color: #fff; }

/* ─── Article count ─────────────────────────────────────────── */
.article-count { font-size: .85rem; color: #6b7280; margin-bottom: 16px; }

/* ─── Section heading ───────────────────────────────────────── */
.section-heading {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: #9ca3af; margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
}
.section-heading::after { content: ''; flex: 1; height: 1px; background: #f3f4f6; }

/* ─── Featured card ─────────────────────────────────────────── */
.featured-article {
    border-radius: 16px; border: 1px solid #e5e7eb; overflow: hidden;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff; position: relative; display: flex; align-items: stretch;
    min-height: 170px; margin-bottom: 24px; text-decoration: none;
}
.featured-article:hover { text-decoration: none; color: #fff; }
.featured-article .feat-accent { width: 5px; background: linear-gradient(180deg, #22d3ee, #6366f1); flex-shrink: 0; }
.featured-article .feat-body {
    padding: 22px 22px 18px; display: flex; flex-direction: column;
    justify-content: center; flex: 1;
}
.featured-label {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: #22d3ee; margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}
.featured-label::before {
    content: ''; width: 6px; height: 6px; background: #22d3ee;
    border-radius: 50%; animation: featPulse 1.8s ease-in-out infinite;
}
@keyframes featPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
.featured-article h2 { font-size: 1.15rem; font-weight: 800; color: #fff; line-height: 1.35; margin-bottom: 6px; }
.featured-article p {
    font-size: .83rem; color: rgba(255,255,255,0.6); margin-bottom: 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.featured-article .feat-cta {
    display: inline-flex; align-items: center; gap: 6px; background: #22d3ee;
    color: #0f172a; border-radius: 8px; padding: 7px 16px; font-size: .8rem;
    font-weight: 700; text-decoration: none; align-self: flex-start; transition: all .18s;
}
.featured-article:hover .feat-cta { background: #06b6d4; color: #fff; transform: translateX(3px); }
.featured-article .feat-icon {
    position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
    font-size: 3.5rem; color: rgba(255,255,255,0.05); pointer-events: none;
}

/* ─── Blog cards with images ────────────────────────────────── */
.blog-card {
    border: 1px solid #e9ecef; border-radius: 14px; overflow: hidden;
    transition: box-shadow .2s, transform .2s, border-color .2s;
    height: 100%; background: #fff; display: flex; flex-direction: column;
}
.blog-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.09); transform: translateY(-3px); border-color: #d1d5db; }
.blog-card-img { width: 100%; height: 170px; object-fit: cover; display: block; }
.blog-card-img-placeholder {
    width: 100%; height: 170px; display: flex; align-items: center;
    justify-content: center; font-size: 2.5rem; color: rgba(255,255,255,0.6);
}
.blog-card-svg-wrap {
    width: 100%; height: 170px; overflow: hidden; position: relative;
}
.blog-card-svg-wrap svg { width: 100%; height: 100%; display: block; }
.blog-card-svg-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 2.8rem; color: #fff; opacity: 0.2; pointer-events: none;
}
.blog-card-svg-badge {
    position: absolute; bottom: 12px; left: 14px;
    background: rgba(255,255,255,0.18); backdrop-filter: blur(4px);
    color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .08em;
    padding: 3px 10px; border-radius: 12px;
}
.blog-card-body { padding: 16px 18px 14px; display: flex; flex-direction: column; flex: 1; }
.blog-card .blog-tag {
    display: inline-flex; align-items: center; gap: 5px; font-size: .68rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    border-radius: 20px; padding: 3px 9px; margin-bottom: 8px; width: fit-content;
}
.blog-card h3 { font-size: .92rem; font-weight: 700; line-height: 1.4; margin-bottom: 6px; color: #111827; }
.blog-card h3 a { color: inherit; text-decoration: none; }
.blog-card h3 a:hover { color: #5e5ce6; }
.blog-excerpt {
    font-size: .8rem; color: #6b7280; line-height: 1.55; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid #f3f4f6;
}
.blog-meta { font-size: .7rem; color: #9ca3af; display: flex; align-items: center; gap: 10px; }
.blog-meta span { display: inline-flex; align-items: center; gap: 3px; }

/* ─── Category colour tokens ────────────────────────────────── */
.cat-pdf    { background: #fef2f2; color: #dc2626; }
.cat-developer { background: #eff6ff; color: #2563eb; }
.cat-security  { background: #f0fdf4; color: #16a34a; }
.cat-video  { background: #fff7ed; color: #ea580c; }
.cat-text   { background: #fdf4ff; color: #9333ea; }
.cat-email  { background: #ecfeff; color: #0891b2; }
.cat-tools  { background: #f0fdf4; color: #0d9488; }
.cat-productivity { background: #fefce8; color: #ca8a04; }
.cat-image  { background: #fdf2f8; color: #c026d3; }
.cat-ai     { background: #ede9fe; color: #7c3aed; }
.cat-crypto { background: #fef3c7; color: #d97706; }

.img-bg-pdf    { background: linear-gradient(135deg, #fef2f2, #fecaca); }
.img-bg-developer { background: linear-gradient(135deg, #eff6ff, #bfdbfe); }
.img-bg-security  { background: linear-gradient(135deg, #f0fdf4, #bbf7d0); }
.img-bg-video  { background: linear-gradient(135deg, #fff7ed, #fed7aa); }
.img-bg-text   { background: linear-gradient(135deg, #fdf4ff, #e9d5ff); }
.img-bg-email  { background: linear-gradient(135deg, #ecfeff, #a5f3fc); }
.img-bg-tools  { background: linear-gradient(135deg, #f0fdf4, #99f6e4); }
.img-bg-productivity { background: linear-gradient(135deg, #fefce8, #fde68a); }
.img-bg-image  { background: linear-gradient(135deg, #fdf2f8, #f5d0fe); }
.img-bg-ai     { background: linear-gradient(135deg, #ede9fe, #c4b5fd); }
.img-bg-crypto { background: linear-gradient(135deg, #fef3c7, #fcd34d); }

/* ─── Pagination ────────────────────────────────────────────── */
.blog-pagination { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 2.5rem; flex-wrap: wrap; }
.blog-pagination .page-btn {
    min-width: 38px; height: 38px; border: 1px solid #e5e7eb; background: #fff;
    color: #374151; border-radius: 8px; font-size: .875rem; font-weight: 600;
    cursor: pointer; transition: all .15s; display: inline-flex; align-items: center;
    justify-content: center; padding: 0 10px;
}
.blog-pagination .page-btn:hover { background: #f0edff; border-color: #5e5ce6; color: #5e5ce6; }
.blog-pagination .page-btn.active { background: #5e5ce6; border-color: #5e5ce6; color: #fff; }
.blog-pagination .page-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 991px) { .filter-sidebar { position: static; margin-bottom: 20px; } }
@media (max-width: 768px) {
    .blog-hero { padding: 38px 0 28px; }
    .blog-hero h1 { font-size: 1.8rem; }
    .featured-article h2 { font-size: 1rem; }
    .featured-article .feat-body { padding: 16px; }
    .featured-article .feat-icon { display: none; }
    .blog-card-img, .blog-card-img-placeholder, .blog-card-svg-wrap { height: 140px; }
    .blog-card-svg-icon { font-size: 2.2rem; }
}
@media (max-width: 480px) {
    .blog-hero h1 { font-size: 1.5rem; }
    .blog-filter-inner { padding: 8px 12px; }
    .filter-pill { padding: 5px 12px; font-size: .78rem; }
}