/* Blog post page — extends css/blog.css. Loaded by every post, whether it is
   rendered from the blog admin (post.php) or is one of the original static
   copies, so both look the same. */

/* ── Layout ─────────────────────────────────────────────────────────────── */
/* A narrower column: ~70 characters a line is the comfortable reading width. */
.post-main{max-width:760px}
@media (min-width:992px){
  /* The sidebar form stays in view while the article scrolls. */
  .post-sidebar{position:sticky;top:96px;align-self:flex-start}
}

/* ── Header: category, title, byline, cover ─────────────────────────────── */
.post-cat{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:rgba(139,0,0,.08);border-radius:20px;padding:.3rem .8rem;margin-bottom:1rem}
.post-title{font-size:clamp(2rem,4.2vw,2.75rem);line-height:1.15;letter-spacing:-.025em;margin-bottom:1.1rem;text-wrap:balance}
.post-meta{gap:.5rem 1.4rem;font-size:.875rem;padding-bottom:1.5rem;margin-bottom:2rem;border-bottom:1px solid var(--border)}
.post-meta span{display:inline-flex;align-items:center;gap:.4rem}
.post-meta i{color:var(--accent)}
.post-img{aspect-ratio:16/9;max-height:460px;border-radius:16px;margin-bottom:2.25rem;box-shadow:0 18px 40px -24px rgba(11,14,23,.35)}
.post-img-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;aspect-ratio:16/9;max-height:420px;width:100%;border:2px dashed var(--border);border-radius:14px;background:var(--surface);color:var(--muted);margin-bottom:2rem;font-size:.9rem}
.post-img-placeholder i{font-size:2rem}

/* ── Article text ───────────────────────────────────────────────────────── */
/* Slightly larger text, a softer colour than pure black, tighter leading. */
.post-body{font-size:1.0625rem;line-height:1.8;color:#262a36;overflow-wrap:break-word}
.post-body p{margin-bottom:1.35rem}
/* The opening paragraph reads as an introduction. */
.post-body>p:first-child,.post-lead{font-size:1.2rem;line-height:1.7;color:var(--ink)}
.post-lead{color:var(--muted)}
.post-body strong{color:var(--ink);font-weight:700}

.post-body h2,.post-body h3,.post-body h4{font-family:var(--ff-h);color:var(--ink);scroll-margin-top:96px;text-wrap:balance}
.post-body h2{font-size:1.75rem;font-weight:800;line-height:1.25;letter-spacing:-.015em;margin:2.9rem 0 1rem}
/* A short accent rule marks each main section. */
.post-body h2::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--accent);margin-bottom:.9rem}
.post-body h3{font-size:1.35rem;font-weight:700;line-height:1.3;margin:2.1rem 0 .7rem}
.post-body h4{font-size:1.1rem;font-weight:700;line-height:1.4;margin:1.7rem 0 .5rem}
.post-body h2:first-child,.post-body h3:first-child{margin-top:0}

.post-body a:not(.post-btn):not(.btn){color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.post-body a:not(.post-btn):not(.btn):hover{color:var(--accent2);text-decoration-thickness:2px}

.post-body ul,.post-body ol{padding-left:1.5rem;margin-bottom:1.4rem}
.post-body li{margin-bottom:.55rem;padding-left:.2rem}
.post-body li::marker{color:var(--accent);font-weight:700}
.post-body li>ul,.post-body li>ol{margin:.55rem 0 0}

.post-body blockquote{border-left:4px solid var(--accent);background:var(--surface);padding:1.1rem 1.4rem;border-radius:0 12px 12px 0;margin:1.9rem 0;color:var(--ink);font-size:1.1rem;line-height:1.7}
.post-body blockquote p:last-child{margin-bottom:0}
.post-body hr{border:0;height:1px;background:var(--border);margin:2.6rem 0;opacity:1}

/* ── Images, captions, video ────────────────────────────────────────────── */
.post-body img{display:block;max-width:100%;height:auto;border-radius:12px;margin:1.9rem auto}
.post-body figure{margin:1.9rem 0}
.post-body figure img{margin:0 auto}
.post-body figcaption{text-align:center;font-size:.85rem;line-height:1.5;color:var(--muted);margin-top:.7rem}
/* A caption added in the editor sits right after its image, outside a figure. */
.post-body>img+figcaption{margin-top:-1.2rem;margin-bottom:1.9rem}
.post-video{position:relative;aspect-ratio:16/9;margin:1.9rem 0;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 18px 40px -24px rgba(11,14,23,.45)}
.post-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.post-body figure>.post-video{margin:0}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.post-body table{width:100%;border-collapse:collapse;margin:1.9rem 0;font-size:.95rem;line-height:1.55}
.post-body th,.post-body td{border:1px solid var(--border);padding:.7rem .9rem;vertical-align:top;text-align:left}
.post-body th,.post-body thead td,.post-body tbody:first-child>tr:first-child>td{background:var(--surface);color:var(--ink);font-weight:700}
.post-body td p,.post-body th p{margin-bottom:.4rem}
.post-body td p:last-child,.post-body th p:last-child{margin-bottom:0}

/* ── Highlight, code ────────────────────────────────────────────────────── */
.post-body mark{border-radius:3px;padding:0 .15em}
.post-body code{background:var(--surface);border-radius:4px;padding:.1rem .35rem;font-size:.9em}
.post-body pre{background:#111827;color:#f9fafb;border-radius:12px;padding:1rem 1.25rem;margin:1.9rem 0;overflow-x:auto;font-size:.9rem;line-height:1.6}
.post-body pre code{background:none;padding:0;color:inherit}

/* ── Buttons and FAQ blocks inside an article ───────────────────────────── */
.post-btn-row{margin:1.75rem 0}
.post-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--accent);color:#fff!important;text-decoration:none!important;font-weight:700;font-size:.92rem;padding:.7rem 1.5rem;border-radius:8px;transition:background .2s,transform .2s}
.post-btn:hover{background:var(--accent2);transform:translateY(-2px)}
.post-faq{border:1px solid var(--border);border-radius:12px;margin:.75rem 0;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.post-faq[open]{border-color:rgba(139,0,0,.3);box-shadow:0 10px 30px -22px rgba(11,14,23,.4)}
.post-faq summary{cursor:pointer;list-style:none;padding:1rem 3rem 1rem 1.25rem;font-family:var(--ff-h);font-weight:700;font-size:1rem;color:var(--ink);position:relative;line-height:1.5}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary::after{content:"+";position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);font-size:1.3rem;font-weight:400;color:var(--accent)}
.post-faq[open] summary{color:var(--accent);background:rgba(139,0,0,.04)}
.post-faq[open] summary::after{content:"\2212"}
.post-faq>div{padding:.5rem 1.25rem 1rem;color:#3a3f4d;font-size:1rem;line-height:1.75}
.post-faq>div p:last-child{margin-bottom:0}

/* ── Course call-to-action under the article ────────────────────────────── */
.post-cta{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;margin-top:3rem;padding:1.6rem 1.85rem;background:linear-gradient(135deg,var(--ink),#1c2233);border-left:4px solid var(--accent);border-radius:16px;color:#fff;box-shadow:0 22px 44px -28px rgba(11,14,23,.6)}
.post-cta>div{flex:1 1 280px;min-width:0}
.post-cta b{display:block;font-family:var(--ff-h);font-size:1.12rem;line-height:1.35}
.post-cta span{display:block;font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.7);margin-top:.35rem}
.post-cta .btn{flex-shrink:0;padding:.65rem 1.4rem;font-size:.9rem}

/* ── Phones ─────────────────────────────────────────────────────────────── */
@media (max-width:767.98px){
  /* A wide table scrolls inside itself instead of stretching the page. */
  .post-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .post-body th,.post-body td{min-width:130px}
}
@media (max-width:575.98px){
  .post-meta{padding-bottom:1.2rem;margin-bottom:1.5rem}
  .post-img{border-radius:12px;margin-bottom:1.75rem}
  .post-body{font-size:1rem;line-height:1.75}
  .post-body>p:first-child,.post-lead{font-size:1.08rem}
  .post-body h2{font-size:1.45rem;margin-top:2.3rem}
  .post-body h3{font-size:1.2rem;margin-top:1.8rem}
  .post-body blockquote{font-size:1.02rem;padding:1rem 1.1rem}
  .post-cta{padding:1.35rem 1.25rem;margin-top:2.25rem}
  .post-cta .btn{width:100%;text-align:center}
}