/* post.css - Blog post detail page styles */

/* ─── Layout ─── */
main{
    max-width:740px;
    margin:0 auto;
    padding:8rem 2rem 4rem
}
/* common.css sets body.has-banner main{padding-top:banner-h} on the
   assumption that inner .section elements supply the base clearance. Post
   pages put content straight into <main> without a .section wrapper, so
   we restore the 8rem clearance and stack banner-h on top of it. */
body.has-banner main{padding-top:calc(8rem + var(--banner-h,36px))}

/* ─── Back link (override from common.css) ─── */
.back-link{margin-bottom:2.5rem}

/* ─── Hero image ─── */
.post-hero-img{
    width:100%;max-height:420px;
    object-fit:cover;
    border-radius:var(--radius-lg);
    margin-bottom:2rem;
    border:1px solid var(--border)
}

/* ─── Title ─── */
.post-title{
    font-family:var(--font-display);
    font-size:2.4rem;
    font-weight:800;
    line-height:1.15;
    letter-spacing:-.02em;
    color:var(--text-bright);
    margin-bottom:1.2rem
}

/* ─── Meta row ─── */
.post-meta{
    display:flex;gap:.8rem;
    align-items:center;
    margin-bottom:2.5rem;
    flex-wrap:wrap
}
.post-date{
    color:var(--accent);
    font-family:var(--font-mono);
    font-size:.8rem;
    letter-spacing:.3px
}
.post-tag{
    color:var(--text-secondary);
    font-size:.72rem;
    font-family:var(--font-mono);
    background:var(--accent-dim);
    padding:.2rem .65rem;
    border-radius:var(--radius-pill);
    border:1px solid var(--border);
    letter-spacing:.2px;
    transition:border-color .2s
}
.post-tag:hover{border-color:var(--accent);color:var(--accent)}
a.post-tag{text-decoration:none}
.post-read-time{
    color:var(--text-muted);
    font-size:.76rem;
    font-family:var(--font-mono);
    letter-spacing:.3px
}
.post-meta-sep{
    color:var(--text-muted);
    font-size:.7rem
}

/* ─── Post body ─── */
.post-body{
    color:var(--text-secondary);
    font-size:1.05rem;
    line-height:1.8
}
.post-body p{
    margin-bottom:1.5rem
}
.post-body img{
    max-width:100%;
    border-radius:var(--radius-lg);
    margin:1.5rem 0;
    border:1px solid var(--border)
}

/* ─── Footer image ─── */
.post-footer-img{
    width:100%;max-height:420px;
    object-fit:cover;
    border-radius:var(--radius-lg);
    margin-top:2rem;
    border:1px solid var(--border)
}

/* ─── Share buttons ─── */
.post-actions{
    display:flex;gap:1rem;
    justify-content:center;
    margin-top:2.5rem;
    flex-wrap:wrap
}
.share-btn{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.6rem 1.4rem;
    border:1px solid var(--border);
    border-radius:var(--radius);
    color:var(--text-secondary);
    text-decoration:none;
    font-family:var(--font-mono);font-size:.78rem;
    letter-spacing:.3px;
    transition:all .25s;
    background:0 0
}
.share-btn:hover{
    border-color:var(--accent);
    color:var(--accent);
    transform:translateY(-1px);
    box-shadow:0 4px 16px rgba(100,255,218,.08)
}
.share-btn svg{
    width:15px;height:15px;
    fill:currentColor
}

/* ─── CTA mentoring box ─── */
.post-cta{
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:2.5rem 2rem;
    text-align:center;
    margin-top:3rem;
    position:relative;
    overflow:hidden
}
.post-cta::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--accent),rgba(100,255,218,.3));
    opacity:.6
}
.post-cta p{
    color:var(--text-secondary);
    margin-bottom:1.2rem;
    font-size:1rem;
    line-height:1.7
}
.post-cta a{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.75rem 2rem;
    border:1.5px solid var(--accent);
    background:var(--accent);
    color:var(--bg-deep);
    text-decoration:none;
    border-radius:var(--radius);
    font-family:var(--font-mono);font-size:.85rem;
    font-weight:600;letter-spacing:.3px;
    transition:all .25s;
    cursor:pointer
}
.post-cta a:hover{
    background:transparent;
    color:var(--accent);
    transform:translateY(-1px);
    box-shadow:0 4px 20px rgba(100,255,218,.1)
}
/* Two-button row when a post hits both audiences (client + learner).
   Primary action gets the filled button; secondary is outlined so buyers
   and learners both see their path without one drowning out the other. */
.post-cta-actions{
    display:flex;flex-wrap:wrap;
    gap:.8rem;
    justify-content:center
}
.post-cta-actions a.secondary{
    background:transparent;
    color:var(--accent);
    border-color:var(--accent)
}
.post-cta-actions a.secondary:hover{
    background:var(--accent);
    color:var(--bg-deep)
}

/* ─── Next / Previous navigation ─── */
.post-nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
    margin-top:2.5rem
}
.post-nav.single{
    grid-template-columns:1fr
}
.post-nav a{
    display:flex;flex-direction:column;gap:.3rem;
    padding:1.2rem 1.4rem;
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    text-decoration:none;
    transition:all .3s;
    min-width:0;
    overflow:hidden
}
.post-nav a:hover{
    border-color:var(--border-hover);
    transform:translateY(-2px);
    box-shadow:0 8px 30px rgba(0,0,0,.25)
}
.post-nav .pn-label{
    color:var(--text-muted);
    font-family:var(--font-mono);
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.8px
}
.post-nav .pn-title{
    color:var(--text-primary);
    font-size:.88rem;
    font-family:var(--font-display);
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.post-nav a:hover .pn-title{
    color:var(--accent)
}
.post-nav .pn-next{
    text-align:right
}

/* ─── Loading state ─── */
.loading{
    color:var(--text-muted);
    text-align:center;
    padding:4rem 0;
    font-family:var(--font-mono);
    font-size:.88rem
}

/* ─── Responsive ─── */
@media(max-width:768px){
    main{
        padding:6rem 1.5rem 3rem
    }
    body.has-banner main{padding-top:calc(6rem + var(--banner-h,36px))}
    .post-title{
        font-size:1.8rem
    }
    .post-meta{
        gap:.6rem
    }
    .post-nav{
        grid-template-columns:1fr;
        gap:.8rem
    }
    .post-nav .pn-next{
        text-align:left
    }
    .post-cta{
        padding:2rem 1.5rem
    }
}

@media(max-width:480px){
    main{
        padding:5.5rem 1.2rem 2.5rem
    }
    body.has-banner main{padding-top:calc(5.5rem + var(--banner-h,36px))}
    .post-title{
        font-size:1.5rem
    }
    .post-body{
        font-size:1rem;
        line-height:1.75
    }
    .post-actions{
        flex-direction:column;
        align-items:stretch
    }
    .share-btn{
        justify-content:center
    }
}

/* ─── Author bio block ─────────────────────────────────────────
   Sits between the post body (and optional footer image) and the share
   buttons. Pushes /about traffic, reinforces the personal brand, and
   gives a face to the writeup before the reader bounces or shares. */
.post-author{
    display:flex;align-items:center;gap:1.1rem;
    padding:1.2rem 1.4rem;
    margin-top:2.5rem;
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    text-decoration:none;
    transition:border-color .2s,background .2s
}
.post-author:hover{
    border-color:var(--accent);
    background:var(--accent-dim)
}
.post-author .pa-photo{
    width:64px;height:64px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid var(--border);
    flex-shrink:0
}
.post-author .pa-body{
    display:flex;flex-direction:column;gap:.25rem;
    min-width:0
}
.post-author .pa-name{
    color:var(--text-bright);
    font-family:var(--font-display);
    font-size:1rem;
    font-weight:700;
    line-height:1.2
}
.post-author .pa-bio{
    color:var(--text-secondary);
    font-size:.82rem;
    line-height:1.5
}
.post-author .pa-cta{
    color:var(--accent);
    font-family:var(--font-mono);
    font-size:.74rem;
    letter-spacing:.3px;
    margin-top:.15rem
}
@media(max-width:560px){
    .post-author{padding:1rem;gap:.9rem}
    .post-author .pa-photo{width:54px;height:54px}
    .post-author .pa-bio{font-size:.78rem}
}

/* ─── CVE cross-link box (post → CVE) ─── */
.post-cve-box{
    display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
    padding:.95rem 1.1rem;
    margin-bottom:2rem;
    background:var(--accent-warm-dim);
    border:1px solid var(--border);
    border-left:3px solid var(--accent-warm);
    border-radius:var(--radius);
    text-decoration:none;
    transition:border-color .2s,background .2s
}
.post-cve-box:hover{
    border-color:var(--accent-warm);
    background:rgba(240,165,0,.18)
}
.post-cve-box .pcb-label{
    color:var(--text-muted);
    font-family:var(--font-mono);
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.6px
}
.post-cve-box .pcb-id{
    color:var(--accent-warm);
    font-family:var(--font-mono);
    font-size:.95rem;
    font-weight:700
}
.post-cve-box .pcb-cta{
    margin-left:auto;
    color:var(--text-secondary);
    font-family:var(--font-mono);
    font-size:.78rem
}
.post-cve-box:hover .pcb-cta{color:var(--accent-warm)}

/* ─── Related posts ─── */
.post-related{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
.post-related-title{
    font-family:var(--font-display);
    font-size:1.05rem;
    font-weight:600;
    color:var(--text-bright);
    text-transform:uppercase;
    letter-spacing:.6px;
    margin-bottom:1.2rem
}
.post-related-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:.9rem
}
.post-related-card{
    display:flex;flex-direction:column;gap:.4rem;
    padding:1rem 1.1rem;
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    text-decoration:none;
    transition:all .25s
}
.post-related-card:hover{
    border-color:var(--accent);
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(0,0,0,.2)
}
.post-related-card .prc-title{
    color:var(--text-primary);
    font-family:var(--font-display);
    font-size:.92rem;
    font-weight:600;
    line-height:1.35
}
.post-related-card:hover .prc-title{color:var(--accent)}
.post-related-card .prc-excerpt{
    color:var(--text-muted);
    font-size:.78rem;
    line-height:1.45
}
@media(max-width:520px){
    .post-related-grid{grid-template-columns:1fr}
}

/* ─── Code copy button ──────────────────────────────────────────────
   Wrapped around each <pre> to anchor the absolute-positioned button.
   Hidden until the wrapper is hovered, except on touch devices where
   the button stays visible. */
.code-wrap{position:relative}
.code-copy{
    position:absolute;
    top:.55rem;right:.55rem;
    padding:.3rem .7rem;
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    color:var(--text-muted);
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.4px;
    cursor:pointer;
    opacity:0;
    transition:opacity .2s,color .2s,border-color .2s,background .2s
}
.code-wrap:hover .code-copy,
.code-copy:focus-visible{opacity:1}
.code-copy:hover{
    color:var(--accent);
    border-color:var(--accent)
}
.code-copy.ok{
    opacity:1;
    color:var(--accent);
    border-color:var(--accent);
    background:var(--accent-dim)
}
@media(hover:none){
    .code-copy{opacity:.7}
}

/* ─── Code blocks (Prism syntax highlighting) ──────────────────────
   The rendered post body is wrapped in <div class="post-body">, so all
   selectors are scoped to that. Minimal theme matching the site palette. */
.post-body pre[class*="language-"]{
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:1rem 1.2rem;
    font-family:var(--font-mono);
    font-size:.88rem;
    line-height:1.55;
    margin:1.5rem 0
}
.post-body pre[class*="language-"]>code{
    font-family:inherit;
    color:var(--text-primary);
    background:none;
    padding:0;
    /* Wrap long lines inside the block instead of clipping behind a
       horizontal scroll. Preserve whitespace runs for indentation. */
    white-space:pre-wrap;
    overflow-wrap:anywhere
}
/* Propagate wrap behaviour to every block in the post body. Paths like
   lib/controllers/customer_cabinet_controller.php and URLs like
   /api/booking?id=42 have no whitespace the browser can break at, so
   without this they push the paragraph past the 740px column. */
.post-body,
.post-body p,
.post-body li{
    overflow-wrap:anywhere;
    word-break:break-word
}
/* Inline code. Earlier versions used a padded background pill, but long tokens
   like `lib/controllers/customer_cabinet_controller.php` would wrap badly: the
   first character of the wrapped line would render outside the pill's left
   edge. We dropped the background fill in favor of accent-colored text on a
   thin gradient "highlighter" that paints under the glyphs, not around them.
   Highlights wrap cleanly across lines because there's no padding to spill. */
.post-body code:not([class*="language-"]){
    font-family:var(--font-mono);
    font-size:.88em;
    font-weight:500;
    color:var(--accent);
    background:linear-gradient(transparent 0%,transparent 12%,rgba(100,255,218,.12) 12%,rgba(100,255,218,.12) 92%,transparent 92%);
    padding:0 .12em;
    border-radius:2px;
    overflow-wrap:anywhere;
    word-break:break-word;
    /* JetBrains Mono renders `->` as a `→` ligature by default; disable so
       code shows literal characters and wraps at clean character boundaries. */
    font-variant-ligatures:none;
    font-feature-settings:"liga" 0,"calt" 0;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone
}
.post-body pre[class*="language-"],
.post-body pre[class*="language-"]>code{
    font-variant-ligatures:none;
    font-feature-settings:"liga" 0,"calt" 0
}
/* Prism token colors */
.token.comment,.token.prolog,.token.cdata{color:var(--text-muted);font-style:italic}
.token.punctuation{color:var(--text-secondary)}
.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:var(--accent-warm)}
.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:var(--accent)}
.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:var(--text-primary)}
.token.atrule,.token.attr-value,.token.keyword{color:var(--accent);font-weight:500}
.token.function,.token.class-name{color:var(--text-bright)}
.token.regex,.token.important,.token.variable{color:var(--accent-warm)}
.token.important,.token.bold{font-weight:600}
.token.italic{font-style:italic}