/* ============================================================
   Public-side blog — direct port of design/styles/content.css
   (the public blog block). Only the classes the public templates
   render are kept here; the admin-side helpers stay in the
   design twin and ship with the SPA bundle.
   ============================================================ */

.public-shell { background: var(--bg-base); }
.public-shell-continuation { min-height: 0; }
.public-nav   { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg-base) 80%, transparent); border-bottom: 1px solid var(--border-subtle); }
.public-nav-inner { max-width: 1200px; margin: 0 auto; padding: var(--s-5) var(--s-7); display: flex; align-items: center; gap: var(--s-7); }
.public-nav a       { color: var(--text-secondary); text-decoration: none; font-size: var(--fs-md); font-weight: 500; }
.public-nav a:hover { color: var(--text-primary); }
.public-nav a.brand { display: flex; align-items: center; gap: var(--s-3); color: var(--text-primary); font-weight: 600; font-size: var(--fs-lg); letter-spacing: -0.01em; }

.public-wrap  { max-width: 1200px; margin: 0 auto; padding: var(--s-12) var(--s-7); }
.public-shell-continuation > .public-wrap { padding-top: 0; }
.public-hero  { padding: var(--s-12) 0 var(--s-10); border-bottom: 1px solid var(--border-subtle); }
.public-hero .eyebrow { font-size: var(--fs-sm); color: var(--brand-400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.public-hero h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin-top: var(--s-4); }
.public-hero p  { font-size: var(--fs-lg); color: var(--text-secondary); max-width: 640px; margin-top: var(--s-5); }

/* Category pills */
.cat-pills      { display: flex; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-7) 0; }
.cat-pill       { padding: 6px 14px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 500; background: var(--bg-raised); border: 1px solid var(--border-subtle); color: var(--text-secondary); cursor: pointer; transition: all var(--dur-fast); text-decoration: none; }
.cat-pill:hover { background: var(--bg-hover); color: var(--text-primary); }
.cat-pill.active { background: var(--text-primary); color: var(--bg-base); border-color: var(--text-primary); }

/* Card grid */
.posts-grid           { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-7); }
.post-card            { background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; transition: all var(--dur-fast); display: flex; flex-direction: column; }
.post-card:hover      { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.post-card .pc-cover  { aspect-ratio: 16 / 9; background: var(--bg-inset); overflow: hidden; }
.post-card .pc-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-card .pc-body   { padding: var(--s-6); display: flex; flex-direction: column; flex: 1; }
.post-card .pc-cat    { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-400); margin-bottom: var(--s-3); }
.post-card .pc-title  { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: var(--s-3); color: var(--text-primary); }
.post-card .pc-excerpt { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; flex: 1; }
.post-card .pc-foot   { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border-subtle); font-size: var(--fs-xs); color: var(--text-tertiary); }

/* Featured card — first published post on page 1 */
.featured-card             { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; transition: all var(--dur-fast); margin-bottom: var(--s-10); }
.featured-card:hover       { border-color: var(--border-strong); }
.featured-card .fc-cover   { min-height: 360px; background: var(--bg-inset); }
.featured-card .fc-cover img { width: 100%; height: 100%; object-fit: cover; }
.featured-card .fc-body    { padding: var(--s-10); display: flex; flex-direction: column; justify-content: center; }
.featured-card .fc-eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: rgba(99, 102, 241, 0.1); color: var(--brand-400); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.featured-card .fc-cat     { font-size: var(--fs-xs); color: var(--brand-400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--s-5); }
.featured-card .fc-title   { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin: var(--s-4) 0; color: var(--text-primary); }
.featured-card .fc-excerpt { font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.55; }
.featured-card .fc-foot    { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); font-size: var(--fs-sm); color: var(--text-tertiary); }

/* Article (single post) */
.article-wrap                  { max-width: 760px; margin: 0 auto; padding: var(--s-12) var(--s-7); }
.article-wrap .back            { font-size: var(--fs-sm); color: var(--text-tertiary); text-decoration: none; }
.article-wrap .back:hover      { color: var(--text-primary); }
.article-wrap .eyebrow         { font-size: var(--fs-sm); color: var(--brand-400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-top: var(--s-7); display: inline-block; }
.article-wrap h1               { font-size: clamp(36px, 5vw, 56px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; margin: var(--s-6) 0 var(--s-5); color: var(--text-primary); }
.article-wrap .meta            { display: flex; align-items: center; gap: var(--s-4); font-size: var(--fs-sm); color: var(--text-tertiary); margin-bottom: var(--s-7); flex-wrap: wrap; }
.article-wrap .meta .av        { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 600; }
.article-wrap .lede            { font-size: var(--fs-xl); color: var(--text-secondary); line-height: 1.5; margin-bottom: var(--s-8); }
.article-wrap .cover           { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--r-lg); margin-bottom: var(--s-10); background: var(--bg-inset); }
.article-wrap .prose p         { font-size: 17px; line-height: 1.7; color: var(--text-primary); margin-bottom: var(--s-6); }
.article-wrap .prose h2        { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.015em; margin: var(--s-10) 0 var(--s-5); color: var(--text-primary); }
.article-wrap .prose h3        { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; margin: var(--s-8) 0 var(--s-4); color: var(--text-primary); }
.article-wrap .prose blockquote { border-left: 3px solid var(--brand-500); padding-left: var(--s-5); margin: var(--s-7) 0; color: var(--text-secondary); font-size: var(--fs-lg); font-style: italic; }
.article-wrap .prose code      { font-family: var(--font-mono); font-size: 0.9em; padding: 2px 6px; background: var(--bg-inset); border-radius: var(--r-sm); }
.article-wrap .prose pre       { background: var(--bg-inset); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: var(--s-6); overflow: auto; font-size: var(--fs-sm); margin: var(--s-6) 0; }
.article-wrap .prose pre code  { background: transparent; padding: 0; }
.article-wrap .prose ul, .article-wrap .prose ol { padding-left: var(--s-7); margin-bottom: var(--s-6); }
.article-wrap .prose li        { font-size: 17px; line-height: 1.7; margin-bottom: var(--s-3); }
.article-wrap .prose a         { color: var(--brand-400); text-decoration: underline; text-underline-offset: 2px; }
.article-wrap .prose img       { max-width: 100%; height: auto; border-radius: var(--r-md); }

.tag-row { display: flex; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-7) 0; }
.tag     { padding: 4px 10px; border-radius: var(--r-sm); font-size: var(--fs-xs); background: var(--bg-inset); color: var(--text-secondary); border: 1px solid var(--border-subtle); }

/* Comments — rendered on the article page below the prose */
.comments-section { padding-top: var(--s-10); border-top: 1px solid var(--border-subtle); margin-top: var(--s-10); }
.comments-section .ch { font-size: var(--fs-xl); font-weight: 600; margin-bottom: var(--s-6); color: var(--text-primary); }
.comments-form    { padding: var(--s-5); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-md); margin-bottom: var(--s-7); }
.comments-form textarea, .comments-form input { width: 100%; padding: 10px 12px; font: inherit; color: var(--text-primary); background: var(--bg-inset); border: 1px solid var(--border-subtle); border-radius: var(--r-sm); margin-bottom: var(--s-3); }
.comments-form textarea { resize: vertical; min-height: 96px; }
.comments-form .row    { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.comments-form .row > * { flex: 1 1 200px; margin-bottom: 0; }
.comments-form .actions { display: flex; align-items: center; gap: var(--s-3); justify-content: flex-end; margin-top: var(--s-3); }
.comments-form .hint   { font-size: var(--fs-xs); color: var(--text-tertiary); flex: 1; }
.comments-form .alert  { padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); margin-bottom: var(--s-3); }
.comments-form .alert.ok  { background: rgba(16, 185, 129, 0.12); color: #10B981; border: 1px solid rgba(16, 185, 129, 0.25); }
.comments-form .alert.err { background: rgba(239, 68, 68, 0.12); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.25); }
.comments-form .comment-as { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--bg-inset); border: 1px solid var(--border-subtle); border-radius: var(--r-sm); margin-bottom: var(--s-3); }
.comments-form .comment-as .av    { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--fs-sm); }
.comments-form .comment-as .col   { display: flex; flex-direction: column; line-height: 1.2; }
.comments-form .comment-as .lbl   { font-size: var(--fs-xs); color: var(--text-tertiary); }
.comments-form .comment-as .nm    { font-size: var(--fs-sm); color: var(--text-primary); font-weight: 600; }
.comments-form .comment-as .spacer { flex: 1; }

.comment-list  { display: flex; flex-direction: column; gap: var(--s-6); }
.comment       { display: flex; gap: var(--s-4); align-items: flex-start; }
.comment .av   { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 600; flex-shrink: 0; }
.comment .body { flex: 1; min-width: 0; }
.comment .who  { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.comment .who .nm { font-weight: 600; color: var(--text-primary); }
.comment .who .ts { font-size: var(--fs-xs); color: var(--text-tertiary); }
.comment .text    { font-size: var(--fs-md); line-height: 1.6; margin-top: var(--s-2); white-space: pre-wrap; color: var(--text-primary); }
.comment .replies { margin-top: var(--s-5); padding-left: var(--s-5); border-left: 2px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--s-5); }

.comments-empty { padding: var(--s-7) 0; text-align: center; color: var(--text-tertiary); font-size: var(--fs-sm); }

/* Newsletter / related (article footer rails) */
.cta-card  { padding: var(--s-7); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); text-align: center; margin: var(--s-10) 0; }
.cta-card  .t { font-size: var(--fs-xl); font-weight: 600; color: var(--text-primary); margin-bottom: var(--s-2); }
.cta-card  .d { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--s-5); }

.related-section { margin-top: var(--s-12); padding-top: var(--s-10); border-top: 1px solid var(--border-subtle); }
.related-section .h { font-size: var(--fs-xl); font-weight: 600; margin-bottom: var(--s-6); color: var(--text-primary); }

/* Pagination footer */
.blog-pager { display: flex; justify-content: center; gap: var(--s-3); margin-top: var(--s-12); padding-top: var(--s-10); border-top: 1px solid var(--border-subtle); }
.blog-pager a, .blog-pager span { padding: 8px 16px; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.blog-pager a    { background: var(--bg-raised); border: 1px solid var(--border-subtle); color: var(--text-primary); text-decoration: none; }
.blog-pager span { color: var(--text-tertiary); }

.blog-empty { text-align: center; color: var(--text-secondary); padding: var(--s-12) 0; font-size: var(--fs-md); }
.blog-empty-state {
    position: relative;
    overflow: hidden;
    margin: 0 0 var(--s-12);
    padding: clamp(var(--s-8), 6vw, 72px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xl);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 12%, transparent), transparent 42%),
        radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--info-fg) 12%, transparent), transparent 30%),
        var(--bg-raised);
    text-align: center;
}
.blog-empty-state::after {
    content: "";
    position: absolute;
    inset: auto -10% -34% -10%;
    height: 52%;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-inset) 82%, transparent));
    pointer-events: none;
}
.blog-empty-state > * { position: relative; z-index: 1; }
.blog-empty-state-compact { margin-top: var(--s-8); }
.blog-empty-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 var(--s-4);
    border: 1px solid color-mix(in srgb, var(--brand-400) 28%, var(--border-subtle));
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--brand-500) 9%, transparent);
    color: var(--brand-300);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.blog-empty-state h2 {
    max-width: 760px;
    margin: var(--s-5) auto 0;
    color: var(--text-primary);
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.08;
    letter-spacing: 0;
}
.blog-empty-state p {
    max-width: 620px;
    margin: var(--s-5) auto 0;
    color: var(--text-secondary);
    font-size: var(--fs-lg);
    line-height: 1.6;
}
.blog-empty-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-top: var(--s-7);
}
.blog-empty-preview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
    margin-top: var(--s-10);
    text-align: left;
}
.blog-empty-preview > div {
    min-height: 124px;
    padding: var(--s-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--bg-inset) 74%, transparent);
}
.blog-empty-preview span {
    display: block;
    margin-bottom: var(--s-3);
    color: var(--brand-300);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.blog-empty-preview strong {
    display: block;
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: 1.45;
    letter-spacing: 0;
}
.blog-footer { border-top: 1px solid var(--border-subtle); padding: var(--s-10) var(--s-7); text-align: center; color: var(--text-tertiary); font-size: var(--fs-sm); }
.blog-footer a { color: inherit; }

/* Layout shrink for one-column at narrow widths */
@media (max-width: 720px) {
    .featured-card { grid-template-columns: 1fr; }
    .featured-card .fc-cover { min-height: 220px; }
    .featured-card .fc-body  { padding: var(--s-7); }
    .public-wrap   { padding: var(--s-8) var(--s-5); }
    .article-wrap  { padding: var(--s-8) var(--s-5); }
    .blog-empty-state { padding: var(--s-8) var(--s-5); }
    .blog-empty-state h2 { font-size: var(--fs-3xl); }
    .blog-empty-state p { font-size: var(--fs-base); }
    .blog-empty-preview { grid-template-columns: 1fr; text-align: center; }
}