/* ==========================================================================
   Blog single — /blog/<slug>/  (block: blog-single)
   Mirrors 2024 frame 588:656: header (pill · title · image right · author) then
   sticky-left Contents column | right article. 2026 dark palette; the article
   body is migrated WP the_content, restyled for the dark theme.
   Frame proportions: content 1799 wide; header title left ~989 / image right 737;
   body left column 435 (~24%), right column 1041 (~58%).
   ========================================================================== */

.section--post { padding-top: clamp(140px, 15vh, 200px); padding-bottom: clamp(64px, 9vh, 120px); }

/* ---- Header ---------------------------------------------------------------- */
.post__header {
  display: grid; grid-template-columns: 1fr 41%; gap: clamp(28px, 3.5vw, 64px);
  align-items: center; padding-bottom: clamp(28px, 4vh, 48px);
  border-bottom: 1px solid rgba(255,255,255,.16); margin-bottom: clamp(36px, 5vh, 64px);
}
.post__cat {
  display: inline-block; margin-bottom: 20px; padding: 6px 15px; border-radius: 999px;
  background: var(--accent); color: var(--black, #0d0d0d);
  font-family: var(--font-display); font-size: 13px; letter-spacing: .04em; text-transform: capitalize;
}
.post__title { font-size: clamp(30px, 3vw, 52px); line-height: 1.04; max-width: 14em; }
.post__by { display: flex; align-items: baseline; gap: 16px; margin-top: 22px; font-family: var(--font-display); font-size: 15px; }
.post__by-name { color: var(--fg); }
.post__date { color: rgba(255,255,255,.5); letter-spacing: .05em; }
.post__hero { aspect-ratio: 737 / 398; overflow: hidden; }
.post__hero img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Body: sticky Contents | article -------------------------------------- */
.post__body { display: grid; grid-template-columns: 24% 1fr; gap: clamp(40px, 5vw, 96px); align-items: start; }
/* Native scrolling (reduced motion / no JS): CSS sticky, 120px down. Under ScrollSmoother the page is transformed
   (sticky has no effect), so js/blocks/blog-single.js pins the column with ScrollTrigger at the same offset
   (.is-pinned-js) — client change request #47. */
.post__aside { align-self: stretch; }   /* full article height, so the sticky column has room to travel */
.post__sticky { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 22px; }
.post__sticky.is-pinned-js { position: relative; top: auto; }
.post__aside-by { color: rgba(255,255,255,.6); font-family: var(--font-display); font-size: 15px; }
.post__toc-heading { margin-bottom: 12px; color: var(--fg); font-family: var(--font-display); font-weight: 500; font-size: 17px; }
.post__toc-list { list-style: none; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid rgba(255,255,255,.16); }
.post__toc-list a {
  display: block; padding-left: 16px; margin-left: -1px; border-left: 2px solid transparent;
  color: rgba(255,255,255,.6); font-family: var(--font-display); font-size: 15px; line-height: 1.3;
  text-decoration: none; transition: color .25s ease, border-color .25s ease;
}
.post__toc-list a:hover { color: var(--fg); }
.post__toc-list a.is-active { color: var(--accent); border-left-color: var(--accent); }
.post__back { color: var(--accent); font-family: var(--font-display); font-size: 15px; text-decoration: none; }
.post__back:hover { text-decoration: underline; }

/* ---- Article body (migrated the_content, dark-themed) --------------------- */
.post__content { max-width: 820px; }
.post__content > * + * { margin-top: 1.2em; }
.post__content p, .post__content li { color: rgba(255,255,255,.82); font-size: 18px; line-height: 1.7; }
.post__content h2, .post__content h3, .post__content h4 { margin-top: 1.8em; font-family: var(--font-display); font-weight: 500; color: var(--fg); line-height: 1.14; scroll-margin-top: 110px; }
.post__content h2 { font-size: clamp(26px, 2vw, 34px); }
.post__content h3 { font-size: clamp(22px, 1.6vw, 27px); }
.post__content h4 { font-size: 20px; }
.post__content a { color: var(--accent); text-underline-offset: 3px; }
.post__content ul, .post__content ol { padding-left: 1.4em; }
.post__content li + li { margin-top: .5em; }
.post__content img { max-width: 100%; height: auto; border-radius: var(--radius-card, 16px); }
.post__content figure { margin: 2em 0; }
.post__content figcaption { margin-top: .6em; color: rgba(255,255,255,.5); font-size: 14px; }
.post__content blockquote { margin: 2em 0; padding: .2em 0 .2em 1.2em; border-left: 3px solid var(--accent); color: var(--fg); font-family: var(--font-display); font-size: 1.15em; }
.post__content iframe { max-width: 100%; border-radius: var(--radius-card, 16px); }
.post__content hr { border: 0; border-top: 1px solid rgba(255,255,255,.15); }
.post__content table { width: 100%; border-collapse: collapse; font-size: 16px; }
.post__content td, .post__content th { padding: 10px 12px; border: 1px solid rgba(255,255,255,.15); text-align: left; }

/* ---- Tablet / mobile ------------------------------------------------------ */
@media (max-width: 1024px) {
  .post__header { grid-template-columns: 1fr; }
  .post__hero { max-width: 560px; }
  .post__body { grid-template-columns: 1fr; gap: 28px; }
  .post__sticky { position: static; }
  .post__toc { display: none; }                        /* TOC is a desktop sticky aid */
}
@media (max-width: 640px) {
  .section--post { padding-top: 118px; }
  .post__content p, .post__content li { font-size: 17px; }
}

/* Wide tables in article content scroll sideways inside the column instead of widening the page on phones
   (three posts overflowed 320–390px). */
.post__content { min-width: 0; }                 /* a grid item: without this it stretches to its widest table */
.post__content .wp-block-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post__content table { max-width: none; }

/* Client call 30 Sep: square images on the blog post */
.section--post .card-img, .post__content img, .post__content iframe { border-radius: 0; }