/*
 * Blog styles — reuses design tokens (colors, radii, spacing) from the
 * :root variables defined/rendered via css/styles.css. Loaded as an
 * extra stylesheet on blog and 404 pages (see Router/index.php).
 */

/* Shared hero banner used on the blog index and 404 pages */
.blog-hero{padding:calc(var(--nav-h) + 50px) 24px 10px;text-align:center}
.blog-hero .kick{font-size:.82rem;font-weight:500;letter-spacing:1.5px;color:var(--purple);direction:ltr}
.blog-hero h1{font-size:clamp(1.9rem,4.5vw,2.8rem);font-weight:700;margin-top:10px;letter-spacing:-.4px}
.blog-hero p{color:var(--muted);font-weight:300;margin-top:10px;max-width:50ch;margin-inline:auto}

/* Blog index: 3-column card grid (responsive, see media queries below) */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:var(--maxw);margin:0 auto;padding:50px 24px}
.blog-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;transition:border-color .25s,transform .25s}
.blog-card:hover{border-color:var(--cyan);transform:translateY(-3px)}
.blog-card .cover{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--card2);display:block}
.blog-card .body{padding:22px}
.blog-card .meta{font-size:.78rem;color:var(--muted);direction:ltr;font-weight:500}
.blog-card h2{font-size:1.08rem;font-weight:600;margin-top:10px;line-height:1.5}
.blog-card h2 a{color:inherit}
.blog-card h2 a:hover{color:var(--cyan)}
.blog-card p{font-size:.9rem;color:var(--muted);font-weight:300;margin-top:8px;line-height:1.7}
.blog-card .tags{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.blog-card .tag{font-size:.74rem;color:var(--cyan);border:1px solid var(--border);border-radius:999px;padding:4px 12px}

/* Page-number links rendered at the bottom of the blog index */
.pagination{display:flex;justify-content:center;gap:10px;padding:20px 24px 70px}
.pagination a,.pagination span{padding:8px 16px;border-radius:var(--r-btn);border:1px solid var(--border);color:var(--muted);font-size:.9rem;transition:color .2s,border-color .2s}
.pagination a:hover{color:var(--cyan);border-color:var(--cyan)}
.pagination .current{background:var(--cyan);color:#04121a;border-color:var(--cyan);font-weight:600}

/* SINGLE POST — .content holds HTML rendered from Markdown by app/Core/Markdown.php */
.post{max-width:74ch;margin:0 auto;padding:calc(var(--nav-h) + 50px) 24px 80px}
.post .breadcrumbs{font-size:.82rem;color:var(--muted);margin-bottom:18px}
.post .breadcrumbs a{color:var(--muted)} .post .breadcrumbs a:hover{color:var(--cyan)}
.post h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;letter-spacing:-.4px;line-height:1.4}
.post .meta{font-size:.85rem;color:var(--muted);direction:ltr;margin-top:12px;margin-bottom:30px}
.post .cover{width:100%;border-radius:var(--r-card);margin-bottom:30px;display:block}
.post .content{font-weight:300;line-height:1.9;text-align:justify}
.post .content h2{font-size:1.4rem;font-weight:600;margin:34px 0 14px;letter-spacing:-.2px}
.post .content h3{font-size:1.15rem;font-weight:600;margin:28px 0 12px}
.post .content p{margin-bottom:16px}
.post .content ul,.post .content ol{margin:0 0 16px 0;padding-inline-start:1.6em}
.post .content li{margin-bottom:6px}
.post .content blockquote{border-inline-start:3px solid var(--cyan);padding-inline-start:18px;color:var(--muted);margin:20px 0}
.post .content pre{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:16px;overflow-x:auto;direction:ltr;text-align:left;margin-bottom:16px}
.post .content code{font-family:monospace;background:var(--card2);padding:2px 6px;border-radius:4px;font-size:.88em}
.post .content pre code{background:none;padding:0}
.post .content img{max-width:100%;border-radius:var(--r-card)}
.post .content hr{border:none;border-top:1px solid var(--border);margin:30px 0}
.post .tags{margin-top:30px;display:flex;gap:8px;flex-wrap:wrap}
.post .tags .tag{font-size:.78rem;color:var(--cyan);border:1px solid var(--border);border-radius:999px;padding:5px 14px}
.post .back{display:inline-block;margin-top:40px;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:9px 20px;transition:color .2s,border-color .2s}
.post .back:hover{color:var(--cyan);border-color:var(--cyan)}

/* TABLET: blog grid to 2 columns */
@media(max-width:860px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
/* MOBILE: blog grid to 1 column */
@media(max-width:600px){
  .blog-grid{grid-template-columns:1fr;padding:40px 24px}
}