/*
===========================================================================
Copyright (C) 2026 RPTX LLC

This file is part of AskFolder.
===========================================================================
*/
/* blog.css -- the blog's index, its posts, and the missing page */

.blog, .post { padding: 64px 0 110px; }
.blog h1 { margin-top: 10px; font-size: 44px; }
.blog-lead { max-width: 38rem; margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: var( --text-2 ); }
.blog-grid { display: grid; gap: 18px; margin-top: 44px; }
@media ( min-width: 860px ) { .blog-grid { grid-template-columns: repeat( 3, 1fr ); } }
.blog-card { display: flex; flex-direction: column; gap: 10px; border-radius: 22px; background: var( --card ); border: 1px solid var( --line ); padding: 24px; color: var( --text ); transition: border-color 0.15s, transform 0.15s; }
.blog-card:hover { border-color: rgba( 106, 168, 255, 0.5 ); transform: translateY( -2px ); color: var( --text ); }
.blog-card small { font-size: 12px; font-weight: 700; color: var( --sky ); }
.blog-card b { font: 800 21px/1.25 var( --brand ); }
.blog-card span { font-size: 14px; line-height: 1.6; color: var( --text-2 ); }

.post-wrap { max-width: 760px; }
.post-back { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var( --text-2 ); }
.post-back .ico { transform: scaleX( -1 ); }
.post h1 { margin-top: 18px; font-size: 42px; line-height: 1.1; }
.post-meta { margin: 16px 0 0; font-size: 13px; color: var( --text-3 ); }
.post-lead { margin: 22px 0 0; font-size: 19px; line-height: 1.6; color: #dbe4f2; }
.post-body { margin-top: 26px; font-size: 17px; line-height: 1.8; color: #cfd9ea; }
.post-body h2 { margin: 44px 0 0; font-size: 26px; color: #fff; }
.post-body p { margin: 16px 0 0; }
.post-body ul, .post-body ol { margin: 16px 0 0; padding-left: 22px; }
.post-body li + li { margin-top: 8px; }
.post-body a { color: var( --sky-hi ); text-decoration: underline; text-underline-offset: 3px; }
.post-body code { border-radius: 6px; background: rgba( 255, 255, 255, 0.06 ); padding: 1px 6px; font: 500 0.9em var( --mono ); }
.post-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 52px; border-radius: 22px; background: linear-gradient( 145deg, #1d3c6c, #0c1d36 ); border: 1px solid rgba( 106, 168, 255, 0.3 ); padding: 24px; }
.post-cta b { display: block; font: 800 20px/1.2 var( --brand ); }
.post-cta span { display: block; margin-top: 4px; font-size: 14px; color: #a9bfdd; }
.more { display: grid; gap: 14px; margin-top: 30px; }
@media ( min-width: 640px ) { .more { grid-template-columns: 1fr 1fr; } }
.more-card { display: grid; gap: 6px; border-radius: 18px; border: 1px solid var( --line ); padding: 18px; color: var( --text ); }
.more-card:hover { border-color: rgba( 106, 168, 255, 0.5 ); color: var( --text ); }
.more-card small { font-size: 12px; color: var( --text-3 ); }
.more-card b { font-size: 15px; line-height: 1.4; }

.lost-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

@media ( max-width: 640px ) {
	.blog, .post { padding-top: 36px; }
	.blog h1, .post h1 { font-size: 32px; }
	.post-body { font-size: 16px; }
}