/* blog.css — blog listing page. Shared chrome lives in theme.css. */

/* aurora blobs */
.aurora span { opacity: 0.4; }
.aurora .b1 { width: 44vw; height: 44vw; right: -10vw; top: -12vw; background: #5b3bff; animation: drift1 24s ease-in-out infinite; }
.aurora .b2 { width: 40vw; height: 40vw; left: -8vw; bottom: -14vw; background: #0e7490; animation: drift2 28s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vw,5vw) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(5vw,-4vw) scale(1.1); } }

.container { max-width: 1180px; margin: 0 auto; }

.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.topbar-left { display: flex; align-items: center; gap: 14px; }
.entry-count { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--ink-dimmer); }

header.hero { margin: 30px 0 44px; }
header.hero h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 600;
    letter-spacing: -0.02em; line-height: 1.05; margin: 14px 0 12px;
}
header.hero p { color: var(--ink-dim); max-width: 54ch; font-size: 1.05rem; line-height: 1.55; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px; }

.post {
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease;
    animation-delay: 0.1s;
}
.post:hover { transform: translateY(-6px); }
.post a { color: inherit; text-decoration: none; display: block; }

.post-img { position: relative; height: 210px; overflow: hidden; }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2,.8,.2,1); }
.post:hover .post-img img { transform: scale(1.06); }
.post-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,11,0.75), transparent 55%); }
.status-flag {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(45,32,6,0.92); border: 1px solid rgba(255,176,32,0.4); color: #ffcd6b;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.read-time {
    position: absolute; bottom: 14px; right: 14px; z-index: 2;
    font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--ink);
    background: rgba(8,8,11,0.85); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border-hi);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.post-body { padding: 24px; }
.post-body .meta { margin-bottom: 12px; font-size: 0.82rem; }
.post-body h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.45rem; font-weight: 600; line-height: 1.25; margin-bottom: 10px; }
.excerpt { color: var(--ink-dim); line-height: 1.6; margin-bottom: 18px; font-size: 0.96rem; }
.arrow { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--cyan); font-weight: 600; font-size: 0.9rem; }
.arrow ion-icon { transition: transform 0.25s ease; }
.post:hover .arrow ion-icon { transform: translateX(5px); }

/* --- Light mode --- */
:root[data-theme="light"] .post-body h2 { color: var(--violet); }
:root[data-theme="light"] .excerpt { color: #4a4560; }
:root[data-theme="light"] .read-time { background: rgba(255,255,255,0.85); }

@media (max-width: 700px) {
    .blog-grid { grid-template-columns: 1fr; }
    .topbar { flex-direction: column; align-items: flex-start; gap: 14px; }
}