/* ============================================================
   HARSHITH VS - Blog Layer
   Extends main.css tokens · listing + article styles
   ============================================================ */

.nav-link.active {
    color: var(--w)
}

/* ── top3d-style reading column ──
   Everything on blog pages lives in one centered ~896px column
   (max-w-4xl equivalent) with comfortable side padding. */
.blog-page .wrap {
    max-width: 58rem;
    padding: 0 clamp(1rem, 4vw, 1.5rem)
}


/* ============================================================
   LISTING - /blog/
   ============================================================ */

.blog-head {
    padding: calc(var(--nav-h) + clamp(3.5rem, 10vh, 6rem)) 0 clamp(2.5rem, 6vh, 4rem)
}

.blog-head .label {
    margin-bottom: 16px
}

.blog-head .h-xl {
    margin-bottom: 20px
}

.blog-intro {
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--w40);
    max-width: 36rem
}

.post-list {
    padding-bottom: var(--gap)
}

.post-row {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 28px;
    padding: 36px 0;
    border-top: 1px solid var(--border);
    align-items: start
}

.post-row:last-child {
    border-bottom: 1px solid var(--border)
}

.post-date {
    font-family: var(--mono);
    font-size: .625rem;
    color: var(--w25);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding-top: 7px
}

.post-title {
    font-family: var(--display);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--w95);
    letter-spacing: -.02em;
    line-height: 1.25;
    margin-bottom: 10px;
    transition: color .25s ease
}

.post-row:hover .post-title {
    color: var(--accent-soft)
}

.post-desc {
    font-size: .8125rem;
    line-height: 1.65;
    color: var(--w40);
    max-width: 38rem;
    margin-bottom: 14px
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px
}

.post-read {
    font-family: var(--mono);
    font-size: .5625rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--w25);
    margin-left: 8px
}

.post-arrow {
    font-size: 1.125rem;
    color: var(--w25);
    padding-top: 4px;
    transition: transform .3s var(--ease-premium), color .25s ease
}

.post-row:hover .post-arrow {
    transform: translate(3px, -3px);
    color: var(--accent-soft)
}

.post-empty {
    padding: 48px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-family: var(--mono);
    font-size: .6875rem;
    color: var(--w25);
    letter-spacing: .05em
}

@media(max-width:640px) {
    .post-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 28px 0
    }

    .post-date {
        padding-top: 0
    }

    .post-arrow {
        display: none
    }
}


/* ============================================================
   ARTICLE - Hero
   ============================================================ */

.bpost-hero {
    padding: calc(var(--nav-h) + clamp(3.5rem, 10vh, 6rem)) 0 0;
    position: relative;
    overflow: hidden
}

.bpost-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 600px;
    background: radial-gradient(ellipse at center, rgba(138, 92, 255, .05) 0%, transparent 65%);
    pointer-events: none
}

.bpost-kicks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-bottom: 28px;
    position: relative
}

.bpost-title {
    font-family: var(--display);
    font-size: clamp(2.125rem, 6vw, 4.25rem);
    font-weight: 700;
    color: var(--w);
    letter-spacing: -.03em;
    line-height: 1.04;
    max-width: 58rem;
    margin-bottom: 28px;
    position: relative
}

.bpost-title .em {
    color: var(--accent-soft)
}

.bpost-title .strike {
    color: var(--w25);
    text-decoration: line-through;
    text-decoration-thickness: .05em;
    text-decoration-color: rgba(248, 113, 113, .55)
}

.bpost-caret {
    color: var(--accent);
    animation: bCaretBlink 1.1s step-end infinite
}

@keyframes bCaretBlink {
    50% {
        opacity: 0
    }
}

.bpost-standfirst {
    font-size: clamp(1rem, 1.8vw, 1.1875rem);
    font-weight: 300;
    color: var(--w60);
    line-height: 1.65;
    max-width: 44rem;
    margin-bottom: 36px;
    position: relative
}

.bpost-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-family: var(--mono);
    font-size: .625rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--w25);
    position: relative
}

.bpost-byline b {
    color: var(--w80);
    font-weight: 600
}

.bpost-hero .impact-row {
    margin-top: clamp(2.5rem, 6vh, 4rem)
}


/* ============================================================
   ARTICLE - Body
   ============================================================ */

.bsec {
    padding: clamp(2.5rem, 6vh, 3.5rem) 0 0
}

.bcol {
    max-width: none
}

.bsec .label {
    margin-bottom: 12px
}

.bsec-title {
    font-family: var(--display);
    font-size: clamp(1.5rem, 3.2vw, 2.125rem);
    font-weight: 700;
    color: var(--w);
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-bottom: 24px
}

.bprose p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--w60);
    margin-bottom: 20px
}

.bprose .lead {
    font-size: clamp(1.125rem, 1.8vw, 1.25rem);
    color: var(--w80);
    font-weight: 300
}

.bprose strong {
    color: var(--w95);
    font-weight: 600
}

.bprose em {
    font-style: normal;
    font-family: var(--mono);
    font-size: .875em;
    color: var(--accent-soft)
}

.bprose h3 {
    font-family: var(--display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--w80);
    letter-spacing: -.01em;
    margin: 32px 0 14px
}

.bprose ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 18px
}

.bprose ul li {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--w60);
    margin-bottom: 10px
}

.bquote {
    margin: 30px 0;
    padding: 6px 0 6px 22px;
    border-left: 2px solid var(--accent);
    color: var(--w60);
    font-style: italic;
    font-size: .9375rem;
    line-height: 1.8
}

.callout {
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-mid);
    border-left: 2px solid var(--amber);
    border-radius: 12px;
    padding: 24px 28px;
    margin: 32px 0;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--w60)
}

.callout-tag {
    display: block;
    font-family: var(--mono);
    font-size: .5625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 10px;
    font-weight: 500
}

.callout em {
    font-style: normal;
    font-family: var(--mono);
    font-size: .875em;
    color: var(--accent-soft)
}

.bnote {
    font-family: var(--mono);
    font-size: .625rem;
    color: var(--w25);
    letter-spacing: .04em;
    line-height: 1.7;
    margin-top: 12px
}

/* Wide terminals: preserve indentation, scroll sideways */
.terminal-scroll .terminal-body {
    white-space: pre;
    overflow-x: auto
}


/* ── Before / After Split ── */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border-mid);
    border-radius: 12px;
    overflow: hidden;
    margin: 30px 0
}

.split>div {
    background: var(--bg-card);
    padding: 26px
}

.split .hd {
    font-family: var(--mono);
    font-size: .625rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 18px
}

.split .before .hd {
    color: #f87171
}

.split .after .hd {
    color: #22C55E
}

.split ol {
    margin: 0;
    padding-left: 20px;
    font-family: var(--mono);
    font-size: .71875rem;
    line-height: 1.6;
    color: var(--w40)
}

.split ol li {
    margin-bottom: 11px
}

.split ol li b {
    color: var(--w80);
    font-weight: 600
}

.split .after .one {
    color: var(--accent-soft);
    font-weight: 600
}

@media(max-width:640px) {
    .split {
        grid-template-columns: 1fr
    }
}


/* ── Pipeline DAG ── */
.dag {
    border: 1px solid var(--border-mid);
    border-radius: 12px;
    background: var(--bg-card);
    padding: 26px;
    margin: 30px 0;
    overflow-x: auto
}

.dag-track {
    display: flex;
    min-width: 680px
}

.dag-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px;
    position: relative
}

.dag-stage+.dag-stage::before {
    content: '→';
    position: absolute;
    left: -7px;
    top: 36px;
    color: var(--w15);
    font-family: var(--mono);
    font-size: .75rem
}

.dag-st {
    font-family: var(--mono);
    font-size: .5625rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--w25);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px
}

.dag-node {
    font-family: var(--mono);
    font-size: .6875rem;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-mid);
    background: var(--bg-surface);
    color: var(--w80);
    line-height: 1.45
}

.dag-node small {
    display: block;
    color: var(--w25);
    font-size: .5625rem;
    margin-top: 3px
}

.dag-node.gate {
    border-color: rgba(251, 191, 36, .35);
    border-style: dashed
}

.dag-node.gate .badge {
    color: var(--amber);
    font-weight: 600
}

.dag-node.auto {
    border-left: 2px solid var(--accent)
}

.dag-node.deploy {
    background: var(--accent-bg);
    border-color: rgba(138, 92, 255, .4);
    color: var(--accent-soft)
}

.dag-node.deploy small {
    color: rgba(171, 141, 255, .5)
}


/* ── Deploy Button Panel ── */
.deploy-panel {
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
    border-radius: 12px;
    padding: 22px;
    margin: 30px 0;
    font-family: var(--mono);
    box-shadow: var(--shadow-md)
}

.deploy-ph {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--w25);
    font-size: .5625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 18px
}

.deploy-ph .chip {
    color: var(--accent-soft)
}

.dbtn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.dbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .6875rem;
    padding: 9px 14px;
    border-radius: 6px;
    border: 1px solid var(--border-mid);
    background: var(--bg-surface);
    color: var(--w60);
    cursor: default
}

.dbtn::before {
    content: '▶';
    font-size: .5rem;
    color: var(--w25)
}

.dbtn.scope-all {
    border-color: rgba(138, 92, 255, .4);
    color: var(--w80)
}

.dbtn.scope-all::before {
    color: var(--accent)
}

.dbtn.scope-gate::before {
    color: var(--blue)
}

.dbtn .scope {
    color: var(--w25);
    font-size: .5625rem
}


/* ── Rollback Flow ── */
.flow {
    display: grid;
    gap: 12px;
    margin: 30px 0
}

.flow-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 18px;
    align-items: start
}

.flow-label {
    font-family: var(--mono);
    font-size: .625rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 10px 12px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid
}

.flow-label.ok {
    color: #22C55E;
    border-color: rgba(34, 197, 94, .3);
    background: rgba(34, 197, 94, .06)
}

.flow-label.warn {
    color: var(--amber);
    border-color: rgba(251, 191, 36, .3);
    background: rgba(251, 191, 36, .06)
}

.flow-label.bad {
    color: #f87171;
    border-color: rgba(248, 113, 113, .3);
    background: rgba(248, 113, 113, .06)
}

.flow-desc {
    font-size: .875rem;
    line-height: 1.7;
    color: var(--w40);
    padding-top: 7px
}

.flow-desc b {
    color: var(--w80);
    font-weight: 600
}

.flow-desc em {
    font-style: normal;
    font-family: var(--mono);
    font-size: .875em;
    color: var(--accent-soft)
}

@media(max-width:560px) {
    .flow-row {
        grid-template-columns: 1fr;
        gap: 6px
    }

    .flow-label {
        text-align: left
    }
}


/* ── Takeaway Cards ── */
.takeaways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border-mid);
    border-radius: 12px;
    overflow: hidden;
    margin: 30px 0
}

.tk {
    background: var(--bg-card);
    padding: 24px;
    transition: background .3s ease
}

.tk:hover {
    background: var(--bg-surface)
}

.tk h4 {
    font-family: var(--display);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--w80);
    margin: 0 0 8px;
    letter-spacing: -.01em
}

.tk p {
    font-size: .8125rem;
    line-height: 1.65;
    color: var(--w40);
    margin: 0
}

.tk p em {
    font-style: normal;
    font-family: var(--mono);
    font-size: .875em;
    color: var(--accent-soft)
}


/* ── Post End / Nav ── */
.post-end {
    margin-top: clamp(4rem, 10vh, 6.5rem);
    border-top: 1px solid var(--border);
    padding: 44px 0
}

.post-end-in {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px
}

.post-back {
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .04em;
    color: var(--w40);
    transition: color .2s ease
}

.post-back:hover {
    color: var(--w)
}

.post-share {
    font-family: var(--mono);
    font-size: .625rem;
    letter-spacing: .05em;
    color: var(--w25)
}

.post-share a {
    color: var(--w40);
    transition: color .2s ease
}

.post-share a:hover {
    color: var(--accent-soft)
}


/* ============================================================
   READING CALM — dim the ambient light on blog pages so the
   atmosphere never competes with the text.
   ============================================================ */

/* Softer radial tints + deeper vignette */
html:has(.blog-page)::before {
    background:
        radial-gradient(ellipse 70% 50% at 75% -10%, rgba(79, 124, 255, .025) 0%, transparent 58%),
        radial-gradient(ellipse 55% 45% at 8% 108%, rgba(138, 92, 255, .02) 0%, transparent 58%),
        radial-gradient(ellipse 100% 85% at 50% 38%, rgba(4, 5, 8, .62) 0%, transparent 100%)
}

/* Fainter grid */
html:has(.blog-page)::after {
    background-image:
        linear-gradient(rgba(247, 248, 250, .008) 1px, transparent 1px),
        linear-gradient(90deg, rgba(247, 248, 250, .008) 1px, transparent 1px)
}

/* Quieter orbs + no aurora on reading pages */
.blog-page::before {
    background: radial-gradient(circle, rgba(138, 92, 255, .04) 0%, rgba(79, 124, 255, .018) 45%, transparent 68%)
}

.blog-page::after {
    background: radial-gradient(circle, rgba(79, 124, 255, .03) 0%, transparent 68%)
}

.blog-page .bg-aurora {
    opacity: .28
}

.blog-page .bg-particles {
    opacity: .5
}

/* Calmer article hero glow */
.bpost-hero::before {
    background: radial-gradient(ellipse at center, rgba(138, 92, 255, .03) 0%, transparent 65%)
}

/* Content panels recede into the page — flat near-black fills,
   defined only by a hairline border, no frosted brightening,
   no accent glow. Nothing competes with the prose. */
.blog-page .split,
.blog-page .dag,
.blog-page .deploy-panel,
.blog-page .takeaways,
.blog-page .callout,
.blog-page .terminal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, .06);
    box-shadow: none
}

/* The gap colour that shows between split/takeaway cells */
.blog-page .split,
.blog-page .takeaways {
    background: rgba(255, 255, 255, .06)
}

/* Panel fills sit just a hair above the page background */
.blog-page .split > div,
.blog-page .dag,
.blog-page .deploy-panel,
.blog-page .terminal,
.blog-page .callout {
    background: #0A0C11
}

.blog-page .tk {
    background: #0A0C11
}

.blog-page .tk:hover {
    background: #0E1118
}

.blog-page .dag-node {
    background: #0E1117;
    box-shadow: none
}

.blog-page .dbtn {
    background: #0E1117;
    box-shadow: none
}

/* Terminal body/bar flatten too */
.blog-page .terminal-bar {
    background: #0C0E13
}


/* ============================================================
   GLASS LAYER — blog refinements on the premium visual system
   ============================================================ */

/* ── Post rows: floating glass on hover ── */
.post-row {
    position: relative;
    border-radius: 14px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 -20px;
    border-top-color: transparent;
    transition: background .45s var(--ease-premium), box-shadow .45s var(--ease-premium), transform .45s var(--ease-premium), border-color .45s var(--ease-premium)
}

.post-row+.post-row {
    border-top-color: var(--border)
}

.post-row:last-child {
    border-bottom: none
}

.post-list .wrap>.post-row:first-of-type {
    border-top: none
}

.post-row:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 12px 40px rgba(3, 4, 7, .4),
        0 0 56px rgba(138, 92, 255, .06);
    transform: translateY(-3px);
    border-top-color: transparent
}

.post-row:hover+.post-row {
    border-top-color: transparent
}

.post-row:hover .post-title {
    text-shadow: 0 0 24px rgba(138, 92, 255, .35)
}

/* ── Article title: gradient + bloom like the hero ── */
.bpost-title {
    background: linear-gradient(180deg, #FFFFFF 0%, #EDF0F7 45%, #B9C0D2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 26px rgba(138, 92, 255, .16)) drop-shadow(0 0 80px rgba(79, 124, 255, .10))
}

.bpost-title .em {
    -webkit-text-fill-color: var(--accent-soft)
}

.bpost-title .strike {
    -webkit-text-fill-color: var(--w25)
}

.bpost-caret {
    -webkit-text-fill-color: var(--accent)
}

/* ── Callout: full glass panel ── */
.callout {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-left: 2px solid var(--amber);
    box-shadow:
        var(--glass-gloss),
        0 8px 32px rgba(3, 4, 7, .3),
        0 0 48px rgba(251, 191, 36, .04)
}

/* ── Split / DAG / deploy panel / takeaways: sealed glass ── */
.split,
.dag,
.deploy-panel,
.takeaways {
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-color: var(--glass-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 8px 32px rgba(3, 4, 7, .3),
        0 0 56px rgba(138, 92, 255, .035)
}

.deploy-panel {
    background: var(--glass-bg)
}

.dag {
    background: var(--glass-bg)
}

.dag-node {
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05)
}

.dbtn {
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 8px rgba(3, 4, 7, .3)
}

.dbtn.scope-all {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 8px rgba(3, 4, 7, .3), 0 0 20px rgba(138, 92, 255, .10)
}

/* ── Takeaway cards brighten under the cursor ── */
.tk:hover {
    background: rgba(255, 255, 255, .05)
}

/* ── Quote: soft accent bloom on the rule ── */
.bquote {
    border-left-color: var(--accent);
    box-shadow: -8px 0 24px -12px rgba(138, 92, 255, .35)
}

/* ── Softer prose for long reading ── */
.bprose p,
.bprose ul li {
    color: var(--w60)
}

/* ── Mobile: swap blur for solid tint ── */
@media (max-width: 768px) {

    .split,
    .dag,
    .deploy-panel,
    .takeaways,
    .callout {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: linear-gradient(180deg, rgba(20, 24, 34, .92), rgba(13, 16, 24, .94))
    }

    .post-row {
        margin: 0;
        padding-left: 0;
        padding-right: 0
    }

    .post-row:hover {
        transform: none;
        background: none;
        box-shadow: none
    }
}