/* ============================================================
   RS9 GAME — blog.css  (blog listing + single post)
   ============================================================ */

/* Search bar (CSS only) */
.blog-search { max-width: 520px; margin: var(--space-6) auto 0; position: relative; }
.blog-search input { width: 100%; background: var(--color-surface); border: 1px solid var(--color-border-white); border-radius: var(--radius-pill); padding: var(--space-4) var(--space-6) var(--space-4) var(--space-12); color: var(--color-white); }
.blog-search input:focus { border-color: var(--color-accent); box-shadow: var(--shadow-glow-sm); outline: none; }
.blog-search i { position: absolute; left: var(--space-5); top: 50%; transform: translateY(-50%); color: var(--color-accent); font-size: var(--text-xl); }

/* Blog grid */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 640px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card { background: var(--color-surface); border: 1px solid var(--color-border-white); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base), border-color var(--duration-base); }
.post-card.hide { display: none; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow); border-color: var(--color-border); }
.post-card__img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; }
.post-card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.post-card__meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.cat-pill { background: var(--color-accent); color: #fff; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px var(--space-3); border-radius: var(--radius-pill); }
.post-card h3 { font-size: var(--text-lg); text-transform: none; letter-spacing: 0.01em; line-height: 1.3; margin-bottom: var(--space-2); }
.post-card p { font-size: var(--text-sm); flex: 1; margin-bottom: var(--space-4); }
.post-card__link { font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: 0.06em; color: var(--color-accent); }
.post-card__link:hover { text-decoration: underline; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-12); }
.pagination a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px solid var(--color-border-white); font-family: var(--font-display); color: var(--color-white-70); transition: all var(--duration-fast); }
.pagination a:hover, .pagination a.active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* Newsletter */
.newsletter { background: linear-gradient(135deg, #1A0005, #0f0f0f); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-10) var(--space-6); text-align: center; max-width: 720px; margin: var(--space-16) auto 0; }
.newsletter h3 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.newsletter form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 460px; margin: var(--space-5) auto 0; }
.newsletter input { flex: 1; background: var(--color-surface); border: 1px solid var(--color-border-white); border-radius: var(--radius-pill); padding: var(--space-3) var(--space-5); color: var(--color-white); }
.newsletter input:focus { border-color: var(--color-accent); outline: none; box-shadow: var(--shadow-glow-sm); }
@media (min-width: 560px) { .newsletter form { flex-direction: row; } }

/* Single post */
.article { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
.article__cover { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--color-border-white); margin-bottom: var(--space-6); }
.article__byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.article__byline .cat-pill { color: #fff; }
.article__body h2 { font-size: var(--text-2xl); margin: var(--space-8) 0 var(--space-3); }
.article__body h3 { font-size: var(--text-xl); text-transform: none; margin: var(--space-6) 0 var(--space-2); }
.article__body p { margin-bottom: var(--space-4); color: var(--color-white-70); }
.article__body ul { list-style: disc; padding-left: var(--space-6); margin-bottom: var(--space-4); }
.article__body li { color: var(--color-white-70); margin-bottom: var(--space-2); }
.article__body a { color: var(--color-accent); text-decoration: underline; }
.article__body blockquote { border-left: 3px solid var(--color-accent); padding: var(--space-3) var(--space-5); background: var(--color-surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: var(--space-5) 0; font-style: italic; color: var(--color-white); }

.sidebar { display: flex; flex-direction: column; gap: var(--space-6); }
.widget { background: var(--color-surface); border: 1px solid var(--color-border-white); border-radius: var(--radius-lg); padding: var(--space-6); }
.widget h4 { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.widget--cta { background: linear-gradient(135deg, #2a0008, #0f0f0f); border-color: var(--color-accent); text-align: center; }
.related-item { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-white); font-size: var(--text-sm); color: var(--color-white-70); transition: color var(--duration-fast); }
.related-item:last-child { border-bottom: none; }
.related-item:hover { color: var(--color-accent); }
@media (min-width: 992px) { .article { grid-template-columns: 1fr 320px; gap: var(--space-12); } .sidebar { position: sticky; top: calc(var(--nav-height) + var(--space-5)); align-self: start; } }