/*
 * Blog (layouts/blog + blog/*) in the site's dark design. Tokens and the nav/footer come from core.css and home.css
 * (loaded by partials/site-frame); this file covers the blog's own pages: the header with search and categories,
 * the featured post, post cards, pagination, the article and its body text (.blog-prose).
 */

.bl-main { position: relative; padding: 7.5rem 0 4rem; color: var(--text); }
.bl-main::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 30rem; z-index: -1; pointer-events: none;
    background: radial-gradient(40rem 22rem at 15% 0%, rgba(41, 92, 81, .4), transparent 70%), radial-gradient(36rem 20rem at 90% 10%, rgba(61, 220, 151, .08), transparent 70%);
}
@media (min-width: 1024px) { .bl-main { padding-top: 9rem; } }
.bl-wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) { .bl-wrap { padding: 0 2rem; } }

/* ---------- Page header: title, search, category filters ---------- */
.bl-head { display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 900px) { .bl-head { grid-template-columns: minmax(0, 1fr) auto; } }
.bl-kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.bl-kicker::before { content: ""; width: 1.25rem; height: 1px; background: currentColor; opacity: .6; }
.bl-back { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: 1rem; font-size: .85rem; font-weight: 600; color: var(--text-2); transition: color .2s; }
.bl-back:hover { color: var(--mint); }
.bl-back svg { width: 1rem; height: 1rem; }
.bl-title { margin-top: 1rem; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; color: var(--text); }
.bl-title em { font-style: normal; color: var(--mint); }
.bl-lede { margin-top: .9rem; max-width: 36rem; font-size: 1.02rem; line-height: 1.7; color: var(--text-2); }

.bl-search { display: flex; align-items: center; gap: .3rem; width: 100%; max-width: 22rem; padding: .3rem .3rem .3rem 1rem; border-radius: 9999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s; }
.bl-search:focus-within { box-shadow: inset 0 0 0 1px var(--mint), 0 0 0 4px rgba(61, 220, 151, .12); }
.bl-search svg { width: 1rem; height: 1rem; flex: none; color: var(--text-3); }
.bl-search input { flex: 1; min-width: 0; padding: .45rem .25rem; border: 0; outline: none; font: inherit; font-size: 16px; color: var(--text); background: transparent; }
@media (min-width: 768px) { .bl-search input { font-size: .9rem; } }
.bl-search input::placeholder { color: var(--text-3); }
.bl-search button, .bl-search a { display: grid; place-items: center; flex: none; height: 2.2rem; padding: 0 .9rem; border: 0; border-radius: 9999px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.bl-search button { color: #04140e; background: var(--mint); }
.bl-search a { color: var(--text-2); }

.bl-filters { display: flex; gap: .4rem; margin-top: 2rem; padding-bottom: .25rem; overflow-x: auto; scrollbar-width: none; }
.bl-filters::-webkit-scrollbar { display: none; }
.bl-filters a { flex: none; padding: .5rem .95rem; border-radius: 9999px; font-size: .82rem; font-weight: 600; white-space: nowrap; color: var(--text-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: color .2s, box-shadow .2s, background .2s; }
.bl-filters a:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .4); }
.bl-filters a.is-on { color: #04140e; background: var(--mint); box-shadow: none; }

/* ---------- Featured post ---------- */
.bl-featured { display: grid; margin-top: 2.5rem; overflow: hidden; border-radius: 1.75rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .25s; }
@media (min-width: 1000px) { .bl-featured { grid-template-columns: 1.25fr 1fr; } }
.bl-featured:hover { box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .4); }
.bl-featured-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
@media (min-width: 1000px) { .bl-featured-media { aspect-ratio: auto; min-height: 24rem; } }
.bl-featured-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.bl-featured:hover .bl-featured-media img { transform: scale(1.03); }
.bl-featured-badge { position: absolute; left: 1rem; top: 1rem; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 9999px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #04140e; background: var(--mint); }
.bl-featured-body { display: flex; flex-direction: column; justify-content: center; padding: 1.75rem; }
@media (min-width: 640px) { .bl-featured-body { padding: 2.5rem; } }
.bl-featured-body h2 { margin-top: .9rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; color: var(--text); transition: color .2s; }
.bl-featured:hover h2 { color: var(--mint-2); }
.bl-featured-body p { margin-top: 1rem; font-size: .95rem; line-height: 1.7; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.bl-read { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 700; color: var(--mint); }
.bl-read svg { width: 1rem; height: 1rem; transition: transform .25s; }
.bl-featured:hover .bl-read svg { transform: translateX(3px); }

/* Placeholder art when a post has no cover: the brand mark on a green field */
.bl-cover-ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(80% 90% at 20% 10%, rgba(61, 220, 151, .25), transparent 60%), linear-gradient(135deg, #0f2a22, #1f3f34 55%, #295c51); }
.bl-cover-ph span { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; color: rgba(238, 245, 242, .35); }

/* Meta line: category / date / read time */
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.bl-meta .is-cat { color: var(--mint); }
.bl-meta i { font-style: normal; opacity: .5; }
.bl-author { display: flex; align-items: center; gap: .55rem; margin-top: auto; padding-top: 1.25rem; font-size: .84rem; color: var(--text-2); }
.bl-av { display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: .72rem; font-weight: 800; color: #04140e; background: linear-gradient(135deg, var(--mint), #1f8a64); }

/* ---------- Post grid ---------- */
.bl-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 3.5rem 0 1.5rem; }
.bl-list-head h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.bl-list-head small { display: block; margin-top: .2rem; font-size: .84rem; color: var(--text-3); }
.bl-rss { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; color: var(--text-3); }
.bl-rss:hover { color: var(--mint); }
.bl-rss svg { width: .85rem; height: .85rem; }
.bl-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .bl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bl-grid { grid-template-columns: repeat(3, 1fr); } }

.bl-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 1.4rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s, transform .25s; }
.bl-card:hover { box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .4); transform: translateY(-3px); }
.bl-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.bl-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.bl-card:hover .bl-card-media img { transform: scale(1.04); }
.bl-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.25rem 1.35rem 1.35rem; }
.bl-card h3 { margin-top: .65rem; font-size: 1.08rem; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; color: var(--text); transition: color .2s; }
.bl-card:hover h3 { color: var(--mint-2); }
.bl-card p { margin-top: .5rem; font-size: .88rem; line-height: 1.6; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.bl-empty { margin-top: 1rem; padding: 3.5rem 1.5rem; border-radius: 1.4rem; text-align: center; box-shadow: inset 0 0 0 1px var(--line-2); }
.bl-empty b { display: block; font-size: 1.05rem; color: var(--text); }
.bl-empty p { margin-top: .4rem; font-size: .9rem; color: var(--text-3); }
.bl-empty .btn { margin-top: 1.25rem; }

/* ---------- Pagination ---------- */
.bl-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: 3rem; }
.bl-pages a, .bl-pages span { display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .9rem; border-radius: 9999px; font-size: .86rem; font-weight: 600; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
.bl-pages a:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .4); }
.bl-pages .is-on { color: #04140e; background: var(--mint); box-shadow: none; }
.bl-pages .is-off { opacity: .4; }

/* ---------- Closing CTA band ---------- */
.bl-cta { display: grid; gap: 1.5rem; align-items: center; margin-top: 4rem; padding: 2rem; border-radius: 1.75rem; background: radial-gradient(70% 120% at 0% 0%, rgba(61, 220, 151, .16), transparent 60%), var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
@media (min-width: 860px) { .bl-cta { grid-template-columns: 1fr auto; padding: 2.5rem 3rem; } }
.bl-cta h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.bl-cta p { margin-top: .5rem; font-size: .95rem; color: var(--text-2); }
.bl-cta-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- Article ---------- */
.bl-preview { margin-bottom: 1.5rem; padding: .8rem 1rem; border-radius: .9rem; font-size: .88rem; font-weight: 600; color: #fde68a; background: rgba(245, 158, 11, .1); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .35); }
.bl-article-head { max-width: 50rem; margin: 0 auto; text-align: center; }
.bl-article-head .bl-back { margin-bottom: 1.5rem; }
.bl-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.bl-cats a { padding: .3rem .75rem; border-radius: 9999px; font-size: .74rem; font-weight: 700; color: var(--mint); background: rgba(61, 220, 151, .1); }
.bl-cats a:hover { background: rgba(61, 220, 151, .18); }
.bl-article-head .bl-title { margin-top: 1.1rem; font-size: clamp(2rem, 4.6vw, 3.25rem); }
.bl-article-head .bl-lede { margin: 1.1rem auto 0; max-width: 40rem; font-size: 1.08rem; }
.bl-byline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem .75rem; margin-top: 1.5rem; font-size: .88rem; color: var(--text-3); }
.bl-byline b { font-weight: 600; color: var(--text-2); }
.bl-byline i { font-style: normal; opacity: .5; }
.bl-article-cover { max-width: 64rem; margin: 2.5rem auto 0; overflow: hidden; border-radius: 1.75rem; box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 80px -40px rgba(0, 0, 0, .8); }
.bl-article-cover img { width: 100%; aspect-ratio: 2.2 / 1; object-fit: cover; }
.bl-article-body { max-width: 46rem; margin: 3rem auto 0; }

/* Article text */
.blog-prose { font-size: 1.06rem; line-height: 1.85; color: var(--text-2); }
.blog-prose > :first-child { margin-top: 0; }
.blog-prose h1, .blog-prose h2, .blog-prose h3, .blog-prose h4 { margin: 2.2em 0 .65em; font-weight: 800; line-height: 1.25; letter-spacing: -.025em; color: var(--text); }
.blog-prose h2 { font-size: 1.6rem; }
.blog-prose h3 { font-size: 1.25rem; }
.blog-prose h4 { font-size: 1.05rem; }
.blog-prose p { margin: 0 0 1.25em; }
.blog-prose ul, .blog-prose ol { margin: 0 0 1.4em; padding-left: 1.35em; }
.blog-prose ul { list-style: disc; }
.blog-prose ol { list-style: decimal; }
.blog-prose li { margin-bottom: .5em; padding-left: .2em; }
.blog-prose li::marker { color: var(--mint); }
.blog-prose strong { font-weight: 700; color: var(--text); }
.blog-prose a { color: var(--mint); text-decoration: underline; text-decoration-color: rgba(61, 220, 151, .4); text-underline-offset: 3px; }
.blog-prose a:hover { text-decoration-color: var(--mint); }
.blog-prose img { display: block; max-width: 100%; height: auto; margin: 2rem 0; border-radius: 1.1rem; }
.blog-prose blockquote { margin: 2rem 0; padding: 1.1rem 1.4rem; border-left: 3px solid var(--mint); border-radius: 0 1rem 1rem 0; font-size: 1.1rem; line-height: 1.7; color: var(--text); background: rgba(61, 220, 151, .06); }
.blog-prose pre { margin: 1.75rem 0; padding: 1.1rem 1.25rem; overflow-x: auto; border-radius: 1rem; font-size: .88rem; line-height: 1.6; color: #e2e8f0; background: #0b1512; box-shadow: inset 0 0 0 1px var(--line); }
.blog-prose code { font-size: .9em; }
.blog-prose :not(pre) > code { padding: .15em .4em; border-radius: .35rem; color: var(--mint-2); background: rgba(255, 255, 255, .06); }
.blog-prose table { width: 100%; margin: 2rem 0; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 1rem; font-size: .92rem; box-shadow: inset 0 0 0 1px var(--line-2); }
.blog-prose th, .blog-prose td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.blog-prose tr:last-child td { border-bottom: 0; }
.blog-prose th { font-weight: 700; color: var(--text); background: rgba(255, 255, 255, .04); }
.blog-prose hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--line-2); }

/* Article FAQ, tags and related posts */
.bl-faq { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.bl-faq h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.bl-faq > p { margin-top: .35rem; font-size: .9rem; color: var(--text-3); }
.bl-faq .faq-list { margin-top: 1.25rem; }
.bl-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.bl-tags a { padding: .4rem .8rem; border-radius: 9999px; font-size: .8rem; font-weight: 600; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.bl-tags a:hover { color: var(--mint); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .4); }
.bl-related { margin-top: 4.5rem; }
.bl-related > h2 { margin-bottom: 1.5rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); }

@media (prefers-reduced-motion: reduce) { .bl-card, .bl-card-media img, .bl-featured-media img { transition: none; } }