/* ==========================================================================
   Blog Detail (single-new-aug.php)
   Styled to Figma "Blog Detail" (node 15580:14970) — real post content
   (the_content()) stays as-is per references/blog.md §6. This file only
   covers what that decision put in scope: hero, sticky TOC, entry-content
   typography, FAQ container tweaks, related articles, newsletter, CTA.
   ========================================================================== */

.blog-detail {
  overflow: hidden;
}

/* ---- Hero ---- */
.blog-hero {
  position: relative;
  padding-block: 64px 0;
}

.blog-hero__container {
  max-width: 1150px;
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  text-align: center;
}

/* Category chip — Figma node 15580:15952/15953: a filled pill badge, not
   plain uppercase text (get_design_context: bg #1b072f, 1px #4a2b68
   border, 90% opacity, radius ~43px/pill, text #d8b4fe). The original
   build rendered this as bare text with no chip treatment. */
.blog-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #d8b4fe;
  background: #1b072f;
  border: 1px solid #4a2b68;
  opacity: 0.9;
  border-radius: 999px;
  padding: 8px 18px;
  margin-bottom: 16px;
}

.blog-hero__title {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: clamp(32px, 5.5vw, 78px);
  line-height: 1.1;
  letter-spacing: normal; /* Figma (15580:15947): no tracking on this heading */
  color: #f7f7f8;
  margin-bottom: 20px;
}

.blog-hero__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-base);
  font-size: 14px;
  color: #aab1c0;
}

.blog-hero__meta a {
  color: #aab1c0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-hero__meta a:hover {
  color: #f7f7f8;
}

.blog-hero__dot {
  color: #565d6b;
}

.blog-hero__image {
  position: relative;
  max-width: 1140px;
  margin: 40px auto 0;
  padding: 40px var(--container-padding-inline) 0;
}

/* Real featured-image assets are often light-background product/app
   mockups (confirmed live — e.g. the AI Blog Summarizer post's
   screenshot). Dropped directly onto the page's dark background with no
   framing, that reads as a broken color seam rather than an intentional
   card. Figma's own hero (node 15580:14970's "BG" mask-group frame) uses
   soft ambient glow/gradient shapes behind the image for the same
   reason — this radial glow + card border/shadow reproduces that
   blending treatment without needing a new asset. */
.blog-hero__image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 60% at 50% 40%,
    rgba(161, 0, 255, 0.28),
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* `contain`, not `cover` — deliberate. Real featured images are often
   informational graphics with text/labels baked in right to the edges
   (confirmed live: a real post's image had "Monitoring"/"Analysis"
   labels cut clean off by a fixed-aspect-ratio `cover` crop). These
   aren't fill-the-frame photography, so cropping risks losing real
   content; a contained image inside the glow/frame still reads as
   intentional. */
.blog-hero__image img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-height: 480px;
  height: auto;
  border-radius: 16px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* ---- Body layout: sticky TOC sidebar + content column ----
   Figma's design is NOT uniformly dark (confirmed via get_design_context
   on the hero's own "BG" node, fill #190d34 — dark only there) — the
   article body, in the reference screenshot (Final_output/blog_detail.png),
   sits on a light/white background with dark text, breaking from the
   rest of the site's all-dark theme for this one stretch. Hero/FAQ/
   footer/CTA stay on their existing (dark/yellow/dark) treatments;
   only .blog-body + .blog-related switch to a light surface here. */
.blog-body {
  background: #ffffff;
  padding-block: 24px 80px;
}

.blog-body__container {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 264px;
  gap: 40px;
  align-items: start;
}

.blog-toc {
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

.blog-toc__label {
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #77717d; /* Figma node 15580:15970 */
  margin-bottom: 16px;
}

.blog-toc__nav {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 16px;
}

.blog-toc__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: rgba(0, 0, 0, 0.08);
}

.blog-toc__item {
  position: relative;
  padding-block: 8px;
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1.4;
  color: #6b7280;
  transition: color 0.2s ease;
}

.blog-toc__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -16px;
  width: 2px;
  height: 100%;
  background: transparent;
  transition: background-color 0.2s ease;
}

.blog-toc__item:hover {
  color: #111318;
}

.blog-toc__item.is-active {
  color: #4d155f; /* Figma node 15580:15987 active span color */
  font-weight: 600;
}

.blog-toc__item.is-active::before {
  background-color: var(--color-accent-purple);
}

/* ---- Sidebar: promo card + share block (Figma node 15612:25362) ---- */
.blog-sidebar-promo {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.blog-promo {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 28px 18px;
  background: #020010;
  background-image: radial-gradient(120% 90% at 85% -20%, rgba(118, 5, 245, 0.55), transparent 60%);
}

.blog-promo__eyebrow {
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #d8b4fe;
  margin-bottom: 12px;
}

.blog-promo__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 16px;
}

.blog-promo__text {
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 24px;
}

.blog-promo__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 18px;
  background: #7605f5;
  color: #ffffff;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.blog-promo__cta:hover,
.blog-promo__cta:focus-visible {
  transform: scale(1.08);
}

.blog-share {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  padding: 22px 20px;
  background: #ffffff;
}

.blog-share__label {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  color: #171717;
  margin: 0 0 16px;
}

.blog-share__icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.blog-share__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #171717;
}

.blog-share__icon svg {
  width: 12px;
  height: 14px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.blog-share__icon:hover svg,
.blog-share__icon:focus-visible svg {
  transform: scale(1.15) rotate(-8deg);
  color: var(--color-accent-purple);
}

/* ---- entry-content: real post body typography ----
   Figma node 15580:16031 (real body paragraph): Inter Regular, 16px,
   line-height 29px (~1.81), color #171717 — the previous 19px/1.6/
   #3f4451 values were a real, uncorrected mismatch (diagnosed but never
   applied, see blog.md §9.9/§9.10). */
.entry-content {
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.81;
  color: #171717;
  max-width: 74ch;
}

.entry-content > * + * {
  margin-top: 24px;
}

.entry-content h2,
.entry-content h3,
.entry-content .wp-block-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  color: #171717; /* Figma node 15606:16488: #171717, not #111318 */
  line-height: 1.2;
  letter-spacing: -0.044em; /* Figma node 15606:16488: -2.46px at 56px */
  margin-top: 48px;
  margin-bottom: 0;
}

.entry-content h2 {
  font-size: clamp(28px, 3.6vw, 56px);
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.entry-content h3 {
  font-size: clamp(20px, 1.8vw, 27px);
}

.entry-content > h2:first-child,
.entry-content > h3:first-child {
  margin-top: 0;
}

.entry-content p {
  margin: 0;
}

.entry-content a {
  color: var(--color-accent-purple);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.4em;
  list-style: revert;
}

.entry-content ul {
  list-style-type: disc;
}

.entry-content ol {
  list-style-type: decimal;
}

.entry-content li + li {
  margin-top: 8px;
}

.entry-content blockquote,
.entry-content .wp-block-quote {
  border-left: 3px solid var(--color-accent-purple);
  padding-left: 24px;
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1.4;
  font-style: italic;
  color: #272b33;
}

.entry-content figure.wp-block-image,
.entry-content figure.wp-block-table,
.entry-content figure.wp-block-gallery {
  margin: 0;
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Real posts use two different embedded-video authoring shapes (found
   live: automobile-product-configurator-wordpress-personalization has a
   native <video>, wordpress-multisite-plugin-woocommerce has both a real
   core/embed YouTube iframe AND a separate legacy raw <iframe> pasted
   directly inside a <p>). Neither was covered before — a fixed-width
   iframe/video (e.g. width="852"/"500") would otherwise overflow any
   viewport narrower than that. */
.entry-content video {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.entry-content iframe {
  max-width: 100%;
}

.entry-content .wp-block-embed__wrapper {
  position: relative;
}

.entry-content .wp-has-aspect-ratio .wp-block-embed__wrapper {
  aspect-ratio: 16 / 9;
}

.entry-content .wp-has-aspect-ratio .wp-block-embed__wrapper iframe {
  width: 100%;
  height: 100%;
}

/* Real posts wrap 2-up text+image sections in wp-block-columns (found
   live: automobile-product-configurator-wordpress-personalization has 4
   of these). No block-library CSS is loaded on this theme, so without an
   explicit rule these render as two plain stacked divs — the side-by-side
   layout is lost entirely, not just on mobile. */
.entry-content .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}

.entry-content .wp-block-column {
  flex: 1 1 320px;
  min-width: 0;
}

.entry-content .wp-block-column > *:first-child {
  margin-top: 0;
}

.entry-content figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}

/* Legacy classic-editor alignment classes still present on real posts —
   on the <figure> itself (not the <img>) in some real posts (found live:
   shopify-vs-bigcommerce-start-you-business-with-the-best-shopping-cart,
   what-is-new-and-how-to-migrate-for-magento-2-upgrade), on the <img>
   directly in others — both need the same float treatment. */
.entry-content img.alignleft,
.entry-content figure.alignleft {
  float: left;
  margin-right: 24px;
}

.entry-content img.alignright,
.entry-content figure.alignright {
  float: right;
  margin-left: 24px;
}

.entry-content img.aligncenter,
.entry-content figure.aligncenter {
  display: block;
  margin-inline: auto;
}

/* "Key Takeaways" box — WP core wp:accordion block. Found live (real post
   how-to-test-whether-an-ai-agent-can-buy-from-your-site) with real
   content matching the Figma "Key Takeaways" box (node 16211:15292) —
   this contradicts blog.md §6's earlier "no real post has data for this"
   call, which was true when written but is now outdated for posts using
   this newer block type. The block ships its own per-post inline
   background-color (e.g. #e8eaf0) from whoever authored it in the block
   editor — overridden with !important to the consistent Figma palette
   rather than left per-post-arbitrary. Toggle open/close already works
   via WP core's own block script (confirmed live: click flips
   aria-expanded false/true) — only visual styling was missing, since no
   wp-block-library CSS loads on this theme. */
.entry-content .wp-block-accordion {
  margin: 40px 0;
}

.entry-content .wp-block-accordion-item {
  background: #f8f2ff !important;
  border-left: 3px solid #9e02fa;
  box-shadow: 0 10px 28px rgba(35, 27, 39, 0.04);
}

.entry-content .wp-block-accordion-heading {
  font-family: var(--font-base);
  font-weight: 400;
  color: inherit;
  letter-spacing: normal;
  margin: 0;
  background: transparent !important;
}

.entry-content .wp-block-accordion-heading__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 22px;
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}

.entry-content .wp-block-accordion-heading__toggle-title {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a100ff;
}

/* The block's own script only toggles aria-expanded, not the icon
   character — the native "+" glyph is hidden (font-size:0) and a chevron
   drawn/rotated in CSS instead, matching the Figma weui:arrow-outlined
   icon's open/closed states. */
.entry-content .wp-block-accordion-heading__toggle-icon {
  font-size: 0;
  position: relative;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.entry-content .wp-block-accordion-heading__toggle-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid #a100ff;
  border-bottom: 2px solid #a100ff;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

/* WordPress auto-loads a small per-block stylesheet for wp:accordion (a
   real exception to "no block CSS loads" — that's true only of the big
   bundled wp-block-library.css) which itself rotates .toggle-icon 45deg
   on open. Confirmed live via computed style: the icon span's own
   transform is already `matrix(0.707107, ...)` (rotate(45deg)) once
   expanded, with no inline style attribute — a real stylesheet rule, not
   JS. Nested 2D rotations sum, so this pseudo-element's own rotation
   must target 225deg minus that 45deg parent contribution (=180deg), not
   225deg on its own, or the two rotations compound into a wrong angle. */
.entry-content .wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon::before {
  transform: rotate(180deg);
}

.entry-content .wp-block-accordion-panel {
  padding: 0 28px 22px 45px;
}

.entry-content .wp-block-accordion-panel .wp-block-list {
  margin: 0;
  padding-left: 1em;
}

.entry-content .wp-block-accordion-panel li {
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.75;
  color: #332f35;
  padding-block: 5px;
}

.entry-content .wp-block-accordion-panel li strong {
  color: #171717;
  font-weight: 600;
}

/* Neutralize legacy pasted-editor inline styles (blog.md §6.1): some real
   posts carry `style="box-sizing:border-box;margin:0;padding:0;"` on
   inline <span> elements — harmless for typography, but must not be
   allowed to reset box-model on block-level content. */
.entry-content span[style] {
  box-sizing: content-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* display:block + overflow-x:auto alone doesn't produce real horizontal
   scroll — found live (WORDPRESS_VERIFICATION.md pass, real table in a
   real post): the browser instead squeezes columns to fit the viewport
   and word-breaks mid-word ("Address" -> "Addres"/"s"). `white-space:
   nowrap` was tried first and rejected — this real table has a
   short-label column next to a long-prose column, and nowrap on prose
   cells produces one absurdly wide unreadable line instead of normal
   wrapping. `min-width` on cells is the right fix: it stops a column
   being squeezed below a legible width (so no more mid-word breaks)
   while still allowing normal multi-line wrapping inside each cell —
   the table's total min width then exceeds a narrow viewport, which is
   what actually makes the overflow-x:auto above engage. */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  display: block;
  overflow-x: auto;
}

.entry-content th,
.entry-content td {
  padding: 12px 16px;
  min-width: 140px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
}

.entry-content th {
  background: rgba(0, 0, 0, 0.03);
  color: #111318;
  font-weight: 600;
}

/* Real content baked-in CTA (blog.md §4) — `.post-contact-btn`/`.btn-cls`
   markup appears verbatim inside some posts' saved content. */
.entry-content .post-contact-btn {
  text-align: center;
}

.entry-content .btn-cls {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  font-weight: 600;
  font-size: 15px;
}

/* ---- FAQ (reuses sitewide .faq component; container width tweak only) ---- */
.blog-faq {
  margin-top: 64px;
  padding-block: 64px;
  margin-inline: calc(-1 * var(--container-padding-inline));
  padding-inline: var(--container-padding-inline);
}

.blog-faq .faq__heading {
  /* Figma node 15612:18358: 64px desktop, tracking -3.46px (~-0.054em) —
     the previous 40px cap was well under the design's real size. */
  font-size: clamp(28px, 4.6vw, 64px);
  letter-spacing: -0.03em;
  text-align: left;
  margin-bottom: 24px;
}

/* ---- Newsletter (real Zoho Campaigns embed, ported from old theme) ---- */
.blog-newsletter {
  margin-top: 48px;
  padding: 32px;
  border-radius: 16px;
  background: #f7f7f8;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.blog-newsletter__content h3 {
  font-family: var(--font-base);
  font-size: 20px;
  color: #111318;
  margin-bottom: 8px;
}

.blog-newsletter__content p {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 20px;
}

.blog-newsletter__form-row {
  display: flex;
  gap: 12px;
}

.blog-newsletter__input {
  flex: 1;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: #ffffff;
  color: #111318;
  font-size: 15px;
}

.blog-newsletter__submit {
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--color-accent-purple);
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

/* ---- Related Articles (also light per Final_output/blog_detail.png) ---- */
.blog-related {
  background: #ffffff;
  padding-block: 80px;
}

.blog-related__container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
}

.blog-related__heading {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.3;
  letter-spacing: -0.03em; /* Figma node 15612:18386: -3.46px at 56px (~-0.062em) */
  color: #111318;
  margin-bottom: 32px;
}

.blog-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-related__card {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #f7f7f8;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-related__card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.blog-related__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.blog-related__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-related__body {
  padding: 20px 24px 24px;
}

/* Figma node 15612:18394 uses Inter 14px, not DM Sans 12px. Category
   label + divider (node 15612:18392/18393) now wired in via
   tbi_ai_blog_primary_category() per related post (blog.md §9.8). */
.blog-related__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-base);
  font-size: 14px;
  color: rgba(25, 24, 27, 0.7);
  margin-bottom: 8px;
}

.blog-related__category {
  color: #4d155f;
  font-weight: 600;
}

.blog-related__dot {
  color: rgba(25, 24, 27, 0.4);
}

.blog-related__title {
  font-family: var(--font-base);
  font-size: 22px;
  font-weight: 600;
  color: #111318;
  line-height: 1.36;
}

/* ---- Bottom CTA ---- */
.blog-cta {
  background: var(--color-cta-bg);
  padding-block: 64px;
}

.blog-cta__container {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  text-align: center;
}

/* Figma node 15612:18438 — every other page's bottom CTA banner
   (automation/aibusiness/shopify/ecommerce/our-work/recommendation) has
   this eyebrow line above the heading; the blog build had dropped it. */
.blog-cta__eyebrow {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-cta-text);
  margin: 0 0 16px;
}

.blog-cta__heading {
  font-family: var(--font-base);
  font-weight: 900;
  font-size: clamp(28px, 4.4vw, 63px);
  line-height: 1.13;
  letter-spacing: normal; /* Figma (15612:18433): no tracking on this heading */
  color: var(--color-cta-text);
  margin-bottom: 24px;
}

.blog-cta__button {
  display: inline-block;
  padding: 16px 36px;
  border-radius: 999px;
  background: #543582; /* Figma node 15612:18434 */
  color: #ffffff;
  font-family: var(--font-mono-label);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  .blog-body__container {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 32px;
  }

  /* Sidebar promo/share card: no room next to a 2-column tablet layout —
     stacks full-width below the article instead of a sticky 3rd column. */
  .blog-sidebar-promo {
    grid-column: 1 / -1;
    position: static;
    flex-direction: row;
    max-width: 520px;
  }

  .blog-promo,
  .blog-share {
    flex: 1;
  }

  .blog-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .blog-hero {
    padding-block: 40px 32px;
  }

  /* minmax(0, 1fr), not bare 1fr — a bare 1fr track's minimum size is
     "auto" (its content's min-content width), so the horizontally-
     scrolling TOC pill row (children flex-shrink:0) blew this track out
     to ~646px on a 320px viewport, silently clipped only by
     .blog-detail's page-level overflow:hidden — which meant most TOC
     items were entirely unreachable (not just visually overflowed),
     since the pill row's own overflow-x:auto never got a real 320px
     box to scroll within. Confirmed via computed
     getComputedStyle(...).gridTemplateColumns reporting "646.812px"
     instead of a fraction. minmax(0, 1fr) caps the track at the
     available width so the nested overflow-x:auto scroll works. */
  .blog-body__container {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .blog-sidebar-promo {
    grid-column: 1 / -1;
    position: static;
    flex-direction: column;
    max-width: none;
  }

  /* TOC becomes a horizontal scrolling strip above the content on mobile —
     the sticky vertical sidebar layout only makes sense at 768px+. */
  .blog-toc {
    position: static;
  }

  .blog-toc__nav {
    flex-direction: row;
    overflow-x: auto;
    padding-left: 0;
    padding-bottom: 8px;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .blog-toc__bar {
    display: none;
  }

  .blog-toc__item {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: #f7f7f8;
    border: 1px solid rgba(0, 0, 0, 0.08);
  }

  .blog-toc__item::before {
    display: none;
  }

  .blog-toc__item.is-active {
    background: var(--color-accent-purple);
    color: #ffffff;
  }

  .entry-content {
    font-size: 16px;
  }

  .blog-newsletter__form-row {
    flex-direction: column;
  }

  .blog-related__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 479px) {
  .blog-hero__container {
    padding-inline: var(--container-padding-inline);
  }

  .blog-hero__title {
    font-size: 28px;
  }
}

/* ==========================================================================
   Touch-guard + reduced-motion pairing (ANIMATION.md pattern 8) — required
   for every hover transform above: .blog-promo__cta, .blog-share__icon svg,
   and .blog-related__card (a pre-existing hover transform found unpaired
   while adding the two new ones here, fixed in the same edit).
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  .blog-promo__cta:hover {
    transform: none;
  }

  .blog-share__icon:hover svg {
    transform: none;
  }

  .blog-related__card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-promo__cta:hover {
    transform: none !important;
  }

  .blog-share__icon:hover svg {
    transform: none !important;
  }

  .blog-related__card:hover {
    transform: none !important;
  }

  .entry-content .wp-block-accordion-heading__toggle-icon::before {
    transition: none !important;
  }
}