/* ===== Blog Common Styles ===== */
/* Shared across all blog pages: index, category, search, tag, post */

:root {
    --primary: #7c6aff;
    --primary-dark: #6c5ce7;
    --primary-light: #a29bfe;
    --primary-bg: #f0edff;
    --gradient: linear-gradient(120deg, #DB2777 0%, #6D28D9 55%, #2563EB 100%);
    --text: #1e293b;
    --text-secondary: #64748b;
    --text-light: #94a3b8;
    --bg: #ffffff;
    --bg-alt: #f8f9fe;
    --border: #e8e5f5;
    --shadow: 0 2px 12px rgba(124,106,255,0.06);
    --shadow-hover: 0 12px 32px rgba(124,106,255,0.13);
}

body { background: var(--bg-alt); color: var(--text); }
a { text-decoration: none; color: inherit; }

.blog-container { max-width:1280px; margin:0 auto; padding:0 24px; }

/* ===== Blog Hero ===== */
.blog-hero {
    padding:48px 0 40px;
    background:linear-gradient(160deg, #ece8ff 0%, #e0dbff 30%, #f0edff 60%, #f8f6ff 100%);
    position:relative; overflow:hidden; margin-bottom:0;
}
.hero-deco { position:absolute; pointer-events:none; z-index:0; }
.hero-deco-glow1 { top:-40%; right:10%; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(124,106,255,0.15) 0%, transparent 65%); animation:glow1 7s ease-in-out infinite; }
.hero-deco-glow2 { bottom:-50%; left:5%; width:450px; height:450px; border-radius:50%; background:radial-gradient(circle, rgba(71,209,137,0.10) 0%, transparent 65%); animation:glow2 9s ease-in-out infinite; }
.hero-deco-glow3 { top:-20%; left:30%; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(168,85,247,0.08) 0%, transparent 60%); animation:glow3 11s ease-in-out infinite; }
@keyframes glow1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-100px,40px) scale(1.2);} }
@keyframes glow2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(80px,-30px) scale(1.15);} }
@keyframes glow3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(60px,25px) scale(1.1);} }

.hero-deco-ring1 { top:8px; left:5%; width:80px; height:80px; border-radius:50%; border:2px solid rgba(124,106,255,0.14); animation:ring-spin 12s linear infinite; }
.hero-deco-ring2 { bottom:5px; right:8%; width:60px; height:60px; border-radius:50%; border:1.5px solid rgba(168,85,247,0.12); animation:ring-spin 9s linear infinite reverse; }
.hero-deco-ring3 { top:30%; left:42%; width:50px; height:50px; border-radius:50%; border:1.5px solid rgba(124,106,255,0.08); animation:ring-spin 15s linear infinite; }
@keyframes ring-spin { 0%{transform:rotate(0deg) scale(1);} 50%{transform:rotate(180deg) scale(1.08);} 100%{transform:rotate(360deg) scale(1);} }

.hero-deco-dot1 { top:15px; left:8%; width:6px; height:6px; border-radius:50%; background:rgba(124,106,255,0.22); animation:float-y 4s ease-in-out infinite; }
.hero-deco-dot2 { bottom:12px; right:10%; width:5px; height:5px; border-radius:50%; background:rgba(168,85,247,0.18); animation:float-y 3.5s ease-in-out infinite 0.8s; }
.hero-deco-dot3 { top:65%; left:25%; width:4px; height:4px; border-radius:50%; background:rgba(71,209,137,0.18); animation:float-y 5s ease-in-out infinite 1.5s; }
.hero-deco-dot4 { top:20%; right:30%; width:4px; height:4px; border-radius:50%; background:rgba(124,106,255,0.15); animation:float-y 4.5s ease-in-out infinite 0.3s; }
.hero-deco-dot5 { top:40%; left:55%; width:5px; height:5px; border-radius:50%; background:rgba(168,85,247,0.12); animation:float-y 3.8s ease-in-out infinite 2s; }
.hero-deco-dot6 { bottom:25%; right:45%; width:3px; height:3px; border-radius:50%; background:rgba(124,106,255,0.18); animation:float-y 4.2s ease-in-out infinite 1s; }
@keyframes float-y { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-16px);} }

.hero-deco-diamond1 { top:20px; right:18%; width:10px; height:10px; background:rgba(124,106,255,0.10); border-radius:2px; animation:spin-slow 8s linear infinite; }
.hero-deco-diamond2 { bottom:18px; left:20%; width:8px; height:8px; background:rgba(168,85,247,0.08); border-radius:2px; animation:spin-slow 10s linear infinite reverse; }
.hero-deco-diamond3 { top:50%; left:65%; width:7px; height:7px; background:rgba(71,209,137,0.08); border-radius:2px; animation:spin-slow 12s linear infinite; }
@keyframes spin-slow { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }

.hero-deco-cross1 { top:25%; left:12%; width:12px; height:12px; animation:cross-pulse 5s ease-in-out infinite; }
.hero-deco-cross2 { bottom:20%; right:15%; width:10px; height:10px; animation:cross-pulse 6s ease-in-out infinite 1.5s; }
.hero-deco-cross1::before, .hero-deco-cross1::after,
.hero-deco-cross2::before, .hero-deco-cross2::after { content:''; position:absolute; background:rgba(124,106,255,0.12); border-radius:1px; }
.hero-deco-cross1::before { width:12px; height:2px; top:50%; left:0; transform:translateY(-50%); }
.hero-deco-cross1::after  { width:2px; height:12px; left:50%; top:0; transform:translateX(-50%); }
.hero-deco-cross2::before { width:10px; height:2px; top:50%; left:0; transform:translateY(-50%); }
.hero-deco-cross2::after  { width:2px; height:10px; left:50%; top:0; transform:translateX(-50%); }
@keyframes cross-pulse { 0%,100%{transform:rotate(0deg) scale(1); opacity:0.4;} 50%{transform:rotate(90deg) scale(1.2); opacity:0.8;} }

.blog-hero .blog-container { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.hero-text { flex:1; }
.hero-text h1 { font-size:2em; font-weight:800; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:8px; }
.hero-text p { color:var(--text-secondary); font-size:15px; margin:0; }

.hero-right { display:flex; flex-direction:column; gap:14px; min-width:320px; }
.hero-search { display:flex; gap:6px; background:white; padding:6px; border-radius:12px; box-shadow:0 2px 12px rgba(124,106,255,0.1); }
.hero-search input { flex:1; border:none; outline:none; padding:10px 14px; font-size:14px; background:transparent; color:var(--text); }
.hero-search input::placeholder { color:var(--text-light); }
.hero-search button { padding:0 20px; background:var(--gradient); color:white; border:none; border-radius:8px; cursor:pointer; font-size:14px; font-weight:500; transition:all 0.2s; }
.hero-search button:hover { box-shadow:0 4px 12px rgba(109,40,217,0.3); }
.hero-stats { display:flex; gap:16px; }
.hero-stat { flex:1; text-align:center; padding:10px 8px; background:rgba(255,255,255,0.7); border-radius:10px; backdrop-filter:blur(8px); }
.hero-stat-num { font-size:18px; font-weight:800; color:var(--primary-dark); }
.hero-stat-label { font-size:11px; color:var(--text-light); font-weight:500; }

/* ===== Toolbar ===== */
.blog-toolbar {
    padding:14px 0; display:flex; justify-content:space-between; align-items:center;
    border-bottom:1px solid var(--border); margin-bottom:24px;
}
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:13px; margin:0 !important; padding:0 !important; background:none !important; border-radius:0 !important; }
.breadcrumb a { color:var(--text-secondary); padding:4px 8px; border-radius:6px; transition:all 0.2s; }
.breadcrumb a:hover { color:var(--primary); background:var(--primary-bg); }
.breadcrumb .active { color:var(--primary); font-weight:600; }
.breadcrumb-sep { color:var(--text-light); font-size:11px; }
.toolbar-right { display:flex; gap:8px; align-items:center; }
.toolbar-right .toolbar-btn, .toolbar-right .lang-btn, .toolbar-right .sidebar-toggle {
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 12px; background:white; border:1.5px solid var(--border);
    border-radius:8px; color:var(--text-secondary); font-size:12px; font-weight:500;
    cursor:pointer; transition:all 0.2s;
}
.toolbar-right .toolbar-btn:hover, .toolbar-right .lang-btn:hover, .toolbar-right .sidebar-toggle:hover { color:var(--primary); border-color:var(--primary-light); background:var(--primary-bg); }

/* ===== Main Layout ===== */
.blog-main { display:flex; gap:28px; align-items:flex-start; }
.posts-container { flex:1; min-width:0; }
.blog-sidebar { width:280px; flex-shrink:0; transition:width 0.4s ease, opacity 0.3s ease, margin 0.4s ease; overflow:hidden; }
.blog-sidebar.hidden { width:0; opacity:0; margin-left:-28px; pointer-events:none; }

/* ===== Cards Grid ===== */
.posts-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }

.article-card {
    background:white; border-radius:12px; overflow:hidden;
    box-shadow:var(--shadow); transition:all 0.3s; display:flex; flex-direction:column;
}
.article-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-hover); }

.card-cover {
    width:100%; height:170px; position:relative; overflow:hidden;
    background:var(--gradient); display:flex; align-items:center; justify-content:center;
    color:white; text-align:center;
}
.card-cover img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.article-card:hover .card-cover img { transform:scale(1.06); }
.card-cover-text { position:relative; z-index:1; }
.cover-icon { font-size:30px; margin-bottom:8px; }
.cover-title { font-size:14px; font-weight:600; }

.card-info { padding:16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-meta { display:flex; gap:6px; flex-wrap:wrap; }
.card-tag { display:inline-block; padding:2px 8px; background:var(--primary-bg); color:var(--primary); font-size:11px; font-weight:600; border-radius:5px; }
.card-tag.hot { background:#fef3c7; color:#d97706; }
.card-title, .article-title {
    font-size:15px; font-weight:700; line-height:1.5; color:var(--text) !important;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    transition:color 0.2s; margin:0;
}
.card-title:hover, .article-title a:hover { color:var(--primary) !important; }
.article-title a { color:var(--text) !important; text-decoration:none; }
.card-bottom, .card-footer {
    display:flex; flex-direction:column; gap:8px;
    padding-top:10px; border-top:1px solid #f1f5f9; margin-top:auto;
}
.card-tags, .article-tags { display:flex; gap:4px; flex-wrap:wrap; }
.card-tags span, .article-tag {
    display:inline-flex; align-items:center; padding:2px 6px; background:var(--primary-bg); color:var(--primary);
    font-size:11px; border-radius:4px; transition:all 0.2s; cursor:pointer; text-decoration:none; font-weight:500;
}
.card-tags span:hover, .article-tag:hover { background:var(--primary); color:white; }
.card-date, .article-date { color:var(--text-light); font-size:12px; align-self:flex-end; }

/* ===== Sidebar ===== */
.sidebar-sticky { position:sticky; top:0; }
.sidebar-widget {
    background:white; border-radius:12px; padding:18px;
    box-shadow:var(--shadow); margin-bottom:16px;
}
.widget-title {
    font-size:14px; font-weight:700; color:var(--text); margin:0 0 14px;
    display:flex; align-items:center; gap:7px;
}
.widget-title i { color:var(--primary); font-size:13px; }

.search-form { display:flex; gap:6px; margin:0; }
.search-input {
    flex:1; padding:9px 12px;
    border:1.5px solid var(--border); background:#faf9ff; color:var(--text);
    border-radius:8px; font-size:13px; outline:none; transition:all 0.2s;
}
.search-input::placeholder { color:var(--text-light); }
.search-input:focus { border-color:var(--primary); background:white; box-shadow:0 0 0 3px rgba(124,106,255,0.1); }
.search-btn {
    padding:0 14px; background:var(--gradient); color:white;
    border:none; border-radius:8px; cursor:pointer; transition:all 0.2s; font-size:13px;
}
.search-btn:hover { box-shadow:0 4px 12px rgba(109,40,217,0.3); }

.category-list { display:flex; flex-direction:column; gap:5px; max-height:720px; overflow-y:auto; }
.category-list::-webkit-scrollbar { width:4px; }
.category-list::-webkit-scrollbar-thumb { background:var(--primary-light); border-radius:4px; }
.category-list::-webkit-scrollbar-track { background:transparent; }
.category-link {
    display:flex; justify-content:space-between; align-items:center;
    padding:9px 11px; background:#faf9ff; border-radius:8px;
    color:var(--text-secondary); font-size:13px; transition:all 0.2s; cursor:pointer; text-decoration:none;
}
.category-link:hover { background:var(--primary); color:white; }
.category-name { font-weight:500; }
.category-count {
    font-size:11px; padding:2px 8px;
    background:rgba(124,106,255,0.08); border-radius:10px; font-weight:600; color:var(--primary);
}
.category-link:hover .category-count { background:rgba(255,255,255,0.2); color:white; }

.tags-list { display:flex; flex-wrap:wrap; gap:6px; max-height:720px; overflow-y:auto; }
.tags-list::-webkit-scrollbar { width:4px; }
.tags-list::-webkit-scrollbar-thumb { background:var(--primary-light); border-radius:4px; }
.tags-list::-webkit-scrollbar-track { background:transparent; }
.cloud-tag {
    display:inline-flex; align-items:center; gap:3px;
    padding:5px 10px; background:#faf9ff; color:var(--text-secondary);
    font-size:12px; border-radius:6px; border:1px solid var(--border);
    transition:all 0.2s; cursor:pointer; text-decoration:none;
}
.cloud-tag:hover { background:var(--primary); color:white; border-color:var(--primary); transform:translateY(-2px); }
.tag-count { font-size:10px; opacity:0.5; }

/* Hot articles widget */
.hot-article { display:flex; gap:10px; align-items:center; text-decoration:none; }
.hot-article + .hot-article { margin-top:12px; }
.hot-rank {
    flex-shrink:0; width:28px; height:28px; border-radius:6px;
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
}
.hot-rank.rank-1 { background:var(--gradient); color:white; }
.hot-rank.rank-other { background:var(--primary-bg); color:var(--primary); }
.hot-article-title { font-size:13px; font-weight:500; color:var(--text); line-height:1.4; }
.hot-article:hover .hot-article-title { color:var(--primary); }

/* Post info widget (post page sidebar) */
.post-info-list { display:flex; flex-direction:column; gap:12px; }
.post-info-item { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #f1f5f9; font-size:14px; }
.post-info-item:last-child { border-bottom:none; }
.post-info-label { color:var(--text-secondary); font-weight:500; }
.post-info-value { color:var(--text); font-weight:600; }
.post-info-value a { color:var(--primary); text-decoration:none; }
.post-info-value a:hover { color:var(--primary-light); }

/* ===== Pagination ===== */
.pagination-container { grid-column:1/-1; display:flex; justify-content:center; margin-top:28px; }
.pagination { display:flex; gap:6px; }
.page-link {
    display:flex; align-items:center; justify-content:center;
    min-width:36px; height:36px; padding:0 10px;
    background:white; color:var(--text-secondary); border:1px solid var(--border);
    border-radius:8px; font-weight:600; font-size:13px; transition:all 0.2s; cursor:pointer; text-decoration:none;
}
.page-link:hover, .page-link.active { background:var(--primary); color:white; border-color:var(--primary); }

/* ===== No posts ===== */
.no-posts { grid-column:1/-1; text-align:center; padding:80px 40px; background:white; border-radius:12px; }
.no-posts i { font-size:60px; color:#cbd5e1; margin-bottom:20px; }
.no-posts p { color:var(--text-secondary); font-size:16px; }

/* ===== Blog Footer override ===== */
.blog-footer { margin-top:40px; border-top:1px solid var(--border); background:white; }
.blog-footer a:hover { color:var(--primary) !important; }

/* ===== Lang dropdown ===== */
.toolbar-right .lang-switcher { position:relative; }
.toolbar-right .lang-dropdown {
    position:absolute; top:calc(100% + 6px); right:0; background:white;
    border:1px solid var(--border); border-radius:10px;
    box-shadow:0 4px 20px rgba(0,0,0,0.1); min-width:180px; display:none; z-index:100;
}
.toolbar-right .lang-dropdown.show { display:block; }
.toolbar-right .lang-option {
    display:flex; align-items:center; gap:8px; padding:10px 14px;
    color:var(--text-secondary); text-decoration:none; transition:all 0.2s;
}
.toolbar-right .lang-option:hover { background:#f8fafc; }
.toolbar-right .lang-option.active { background:var(--primary); color:white; }

/* ===== Back to top ===== */
.back-top {
    position:fixed; bottom:30px; right:30px; z-index:99;
    width:42px; height:42px; border-radius:50%;
    background:var(--gradient); color:white; border:none;
    box-shadow:0 4px 16px rgba(124,106,255,0.3);
    cursor:pointer; font-size:16px;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:all 0.3s;
}
.back-top.show { opacity:1; visibility:visible; transform:translateY(0); }
.back-top:hover { box-shadow:0 6px 24px rgba(124,106,255,0.45); transform:translateY(-2px); }

/* ===== Responsive ===== */
@media (max-width:1100px) { .posts-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:992px) {
    .blog-sidebar { display:none; }
    .sidebar-toggle { display:none; }
}
@media (max-width:768px) {
    .blog-hero .blog-container { flex-direction:column; text-align:center; gap:20px; }
    .hero-right { min-width:unset; width:100%; }
    .hero-text h1 { font-size:1.6em; }
    .blog-toolbar { flex-direction:column; gap:10px; align-items:stretch; }
    .posts-grid { grid-template-columns:1fr; }
}