/* ============================================================================
   th-blog.css — Blog index + post pages on the theme-lab shell ($th_lab_layout).
   Binds tokens.css only. Zero raw brand hex.
   ============================================================================ */

/* ---- Index masthead ---- */
.page-blog .svc-masthead-inner .th-giant{max-width:20ch}

.blog-empty{
    margin:0;
    padding:clamp(22px,3vw,32px);
    border-radius:16px;
    background:var(--bg-2);
    border:1px solid var(--gray-line);
    color:var(--gray);
    font-size:1rem;
    line-height:1.7;
    max-width:52ch;
}
.blog-empty a{color:var(--blue);font-weight:600;text-decoration:none}
.blog-empty a:hover{color:var(--blue-light)}

/* ---- Reading progress (post) ---- */
.page-blog-post .blog-reading-progress{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:3px;
    z-index:1001;
    background:var(--blue-a08);
    transform-origin:0 50%;
    transform:scaleX(0);
    pointer-events:none;
}
.page-blog-post .blog-reading-progress::after{
    content:"";
    display:block;
    height:100%;
    width:100%;
    background:linear-gradient(90deg,var(--blue),var(--blue-light));
    box-shadow:0 0 12px var(--blue-a20);
}

/* ---- Post hero ---- */
.blog-post-hero{
    position:relative;
    overflow:hidden;
    background:var(--bg);
    border-bottom:1px solid var(--gray-line);
}
.blog-post-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse 70% 80% at 15% 0%,var(--blue-a12),transparent 55%),
        radial-gradient(ellipse 50% 60% at 95% 20%,color-mix(in srgb,var(--ambient-indigo) 12%,transparent),transparent 50%);
    pointer-events:none;
}
.blog-post-hero-inner{
    position:relative;
    z-index:1;
    padding-top:clamp(56px,8vw,96px);
    padding-bottom:clamp(40px,6vw,72px);
    max-width:52rem;
}
.blog-crumb{
    margin:0 0 1.1rem;
    font-family:var(--font-data);
    font-size:.68rem;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--gray);
}
.blog-crumb a{color:var(--gray);text-decoration:none}
.blog-crumb a:hover{color:var(--blue)}
.blog-crumb .sep{margin:0 .55rem;opacity:.45}
.blog-crumb .current{color:var(--white)}

.blog-post-hero .eyebrow{margin-bottom:1rem}
.blog-post-title{
    margin:0 0 1.1rem;
    font-family:var(--font-display);
    font-size:clamp(1.85rem,4.2vw,2.85rem);
    font-weight:700;
    line-height:1.15;
    letter-spacing:-.02em;
    color:var(--white);
    max-width:22ch;
}
.blog-featured{
    margin:0 0 1.35rem;
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--gray-line);
    background:var(--bg-card);
    max-width:48rem;
}
.blog-featured picture{display:contents}
.blog-featured img{
    display:block;
    width:100%;
    height:auto;
    max-height:420px;
    object-fit:cover;
}
.blog-dek{
    margin:0 0 1.25rem;
    max-width:46ch;
    font-size:clamp(1.05rem,1.4vw,1.18rem);
    font-weight:300;
    line-height:1.7;
    color:var(--gray);
}
.blog-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.5rem 0;
    margin:0;
    padding:0;
    list-style:none;
    font-family:var(--font-data);
    font-size:.72rem;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--gray);
}
.blog-meta li{display:inline-flex;align-items:center}
.blog-meta li + li::before{
    content:"·";
    margin:0 .65rem;
    opacity:.55;
}

/* ---- Article layout ---- */
.blog-article-section{padding-top:clamp(32px,5vw,56px)}
.blog-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:2rem;
    align-items:start;
}
@media(min-width:992px){
    .blog-layout:has(.blog-sidebar){
        grid-template-columns:minmax(0,1fr) 17.5rem;
        gap:clamp(28px,4vw,44px);
    }
}
.blog-article{min-width:0}

/* ---- Prose ---- */
.blog-prose{
    max-width:42rem;
    color:color-mix(in srgb,var(--white) 92%,transparent);
    font-size:1.0625rem;
    line-height:1.75;
}
.blog-prose > *:first-child{margin-top:0}
.blog-prose > *:last-child{margin-bottom:0}
.blog-prose p{margin:0 0 1.35rem}
.blog-prose h2{
    scroll-margin-top:calc(5rem + env(safe-area-inset-top,0px));
    font-family:var(--font-display);
    font-size:clamp(1.25rem,2.5vw,1.45rem);
    font-weight:700;
    line-height:1.25;
    color:var(--white);
    margin:2.5rem 0 .85rem;
    padding-top:.35rem;
    position:relative;
}
.blog-prose h2::before{
    content:"";
    display:block;
    width:2.25rem;
    height:3px;
    margin-bottom:.65rem;
    border-radius:999px;
    background:linear-gradient(90deg,var(--blue),transparent);
}
.blog-prose h3{
    scroll-margin-top:calc(5rem + env(safe-area-inset-top,0px));
    font-family:var(--font-display);
    font-size:1.08rem;
    font-weight:700;
    color:var(--white);
    margin:1.75rem 0 .65rem;
}
.blog-prose ul,
.blog-prose ol{
    margin:0 0 1.35rem;
    padding-left:0;
    list-style:none;
}
.blog-prose ul li,
.blog-prose ol li{
    position:relative;
    padding-left:1.35rem;
    margin-bottom:.65rem;
}
.blog-prose ul li::before{
    content:"";
    position:absolute;
    left:0;
    top:.72em;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--blue);
    box-shadow:0 0 8px var(--blue-a20);
}
.blog-prose ol{counter-reset:blog-ol}
.blog-prose ol li{counter-increment:blog-ol}
.blog-prose ol li::before{
    content:counter(blog-ol);
    position:absolute;
    left:0;
    top:.05em;
    font-family:var(--font-data);
    font-size:.78rem;
    font-weight:700;
    color:var(--blue);
}
.blog-prose strong{color:var(--white);font-weight:700}
.blog-prose a{
    color:var(--blue);
    font-weight:600;
    text-decoration:underline;
    text-decoration-color:var(--blue-a20);
    text-underline-offset:.15em;
}
.blog-prose a:hover{
    color:var(--blue-light);
    text-decoration-color:var(--blue-a20);
}
.blog-prose code{
    font-family:var(--font-data);
    font-size:.88em;
    padding:.12em .4em;
    border-radius:6px;
    background:var(--blue-a08);
    border:1px solid var(--blue-a12);
    color:var(--blue-light);
}
.blog-prose pre{
    margin:1.5rem 0;
    padding:1rem 1.15rem;
    border-radius:12px;
    background:var(--bg-2);
    border:1px solid var(--gray-line);
    overflow-x:auto;
}
.blog-prose pre code{
    padding:0;
    border:0;
    background:transparent;
    color:var(--white);
    font-size:.9em;
}
.blog-prose blockquote{
    margin:1.75rem 0;
    padding:1rem 1.15rem 1rem 1.25rem;
    border-left:3px solid var(--blue);
    border-radius:0 12px 12px 0;
    background:var(--blue-a08);
    color:var(--gray);
}
.blog-prose hr{
    border:0;
    height:1px;
    margin:2.25rem 0;
    background:linear-gradient(90deg,transparent,var(--gray-line),transparent);
}
.blog-prose img{
    display:block;
    max-width:100%;
    height:auto;
    margin:1.5rem 0;
    border-radius:12px;
    border:1px solid var(--gray-line);
}

/* ---- TOC + sidebar ---- */
.blog-panel{
    padding:1.1rem 1.15rem;
    border-radius:16px;
    border:1px solid var(--gray-line);
    background:var(--bg-2);
}
.blog-toc-mobile{
    display:block;
    margin-bottom:1.75rem;
}
.blog-toc-mobile summary{
    cursor:pointer;
    font-family:var(--font-data);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--gray);
    list-style:none;
}
.blog-toc-mobile summary::-webkit-details-marker{display:none}
.blog-toc-mobile[open] summary{
    margin-bottom:.75rem;
    color:var(--blue);
}
.blog-toc-list{
    margin:0;
    padding:0;
    list-style:none;
}
.blog-toc-list li + li{margin-top:.35rem}
.blog-toc-list li.is-sub{padding-left:.85rem}
.blog-toc-list a{
    display:block;
    font-size:.9rem;
    line-height:1.45;
    color:var(--gray);
    text-decoration:none;
    transition:color .2s var(--ease);
}
.blog-toc-list a:hover{color:var(--blue)}
.blog-toc-list a:focus-visible{
    outline:2px solid var(--blue);
    outline-offset:2px;
}

.blog-sidebar{
    display:none;
    flex-direction:column;
    gap:1rem;
}
@media(min-width:992px){
    .blog-toc-mobile{display:none}
    .blog-sidebar{
        display:flex;
        position:sticky;
        top:calc(5.25rem + env(safe-area-inset-top,0px));
        align-self:start;
        max-height:calc(100vh - 5.25rem - env(safe-area-inset-top,0px) - 1rem);
        overflow-y:auto;
        overscroll-behavior:contain;
    }
}
.blog-toc-title{
    margin:0 0 .75rem;
    font-family:var(--font-data);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--gray);
}
.blog-sidebar-help-title{
    margin:0 0 .45rem;
    font-family:var(--font-display);
    font-size:1rem;
    font-weight:700;
    color:var(--white);
}
.blog-sidebar-help-copy{
    margin:0;
    font-size:.88rem;
    line-height:1.55;
    color:var(--gray);
}
.blog-sidebar-help .btn{
    margin-top:1rem;
    width:100%;
    justify-content:center;
}

/* ---- Article footer ---- */
.blog-article-footer{
    max-width:42rem;
    margin-top:2.75rem;
    padding-top:2rem;
    border-top:1px solid var(--gray-line);
}
.blog-author{
    display:flex;
    gap:1rem;
    align-items:flex-start;
    padding:1.15rem 1.2rem;
    border-radius:16px;
    border:1px solid var(--gray-line);
    background:linear-gradient(135deg,var(--bg-card),var(--bg-2));
}
.blog-author-logo{
    flex-shrink:0;
    width:48px;
    height:48px;
    border-radius:10px;
    object-fit:contain;
    background:color-mix(in srgb,var(--white) 4%,transparent);
    padding:.25rem;
}
.blog-author-name{
    margin:0 0 .25rem;
    font-weight:700;
    color:var(--white);
}
.blog-author-bio{
    margin:0;
    font-size:.9rem;
    line-height:1.55;
    color:var(--gray);
}
.blog-related{
    margin-top:1.25rem;
    padding:1rem 1.15rem;
    border-radius:16px;
    border:1px solid var(--blue-a20);
    background:var(--blue-a08);
}
.blog-related-label{
    margin:0 0 .35rem;
    font-family:var(--font-data);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--blue);
}
.blog-related-link{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    color:var(--white);
    font-weight:700;
    text-decoration:none;
    transition:color .2s var(--ease);
}
.blog-related p{margin:0}
.blog-related-link:hover{color:var(--blue)}
.blog-back{margin-top:1.5rem;margin-bottom:0}
.blog-back a{
    color:var(--blue);
    font-weight:600;
    text-decoration:none;
}
.blog-back a:hover{color:var(--blue-light)}