/* Article layout inherits the native theme's palette, type and spacing. */
.blog-single { background: var(--bg-deep); }
.blog-post__hero { position: relative; isolation: isolate; padding-block: 34px var(--space-40); border-bottom: 1px solid var(--border); background: var(--bg-deep); }
.blog-post__hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, var(--bg-deep) 8%, rgba(4,11,17,.86) 42%, rgba(4,11,17,.18)), url('../images/hero-systems-in-motion-approved-start.webp') right 45% / cover no-repeat; opacity: .8; }
.blog-post__breadcrumbs { margin-bottom: 26px; color: var(--text-secondary); font-size: var(--text-11); line-height: 1.6; }
.blog-post__breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 5px 10px; }
.blog-post__breadcrumbs li { display: inline; overflow-wrap: anywhere; }
.blog-post__breadcrumbs li + li::before { content: '/'; color: var(--text-muted); margin-right: 10px; }
.blog-post__breadcrumbs a:hover { color: var(--accent); }
.blog-post__intro { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.15fr); align-items: center; gap: var(--space-48); }
.blog-post__intro-copy { min-width: 0; }
.blog-post__category { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.blog-post__category::before { content: ''; width: 6px; height: 6px; background: currentColor; }
.blog-post__title { font-size: clamp(32px,3.4vw,49px); line-height: 1.08; margin: 0 0 var(--space-20); overflow-wrap: anywhere; }
.blog-post__excerpt { max-width: 45ch; margin-bottom: var(--space-24); color: var(--text-secondary); font-size: clamp(16px,1.4vw,19px); line-height: 1.55; }
.blog-post__intro .blog-meta { margin-top: var(--space-24); gap: var(--space-12) var(--space-20); }
.blog-post__cover { aspect-ratio: 1.92; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.blog-post__cover .blog-image { width: 100%; height: 100%; }
.blog-post__layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: var(--space-40); align-items: start; padding-block: var(--space-40) var(--space-28); }
.blog-post__sidebar { min-width: 0; align-self: stretch; border-right: 1px solid var(--border); padding-right: var(--space-24); }
.blog-post__sidebar-inner { position: sticky; top: 28px; max-height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; padding: 5px var(--space-6) 5px 0; }
.blog-toc { padding-bottom: 22px; }
.blog-toc summary { cursor: pointer; padding-block: 2px 14px; }
.blog-toc nav { padding-left: 1px; }
.blog-toc__item a { display: block; position: relative; padding: var(--space-8) 0 var(--space-8) 14px; border-left: 1px solid var(--border); font-size: var(--text-12); line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.blog-toc__item--nested a { padding-left: var(--space-24); }
.blog-toc__item a:hover, .blog-toc__item a[aria-current='location'] { color: var(--accent); border-color: var(--accent); }
.blog-share { padding-block: var(--space-20); border-top: 1px solid var(--border); }
.blog-share h2 { margin-bottom: var(--space-12); }
.blog-share__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.blog-share__actions :is(a,button) { display: inline-flex; align-items: center; justify-content: center; width: 40px; min-height: 40px; padding: var(--space-8); background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; color: var(--text-secondary); }
.blog-share__actions [hidden] { display: none; }
.blog-share__actions :is(a,button):hover { color: var(--accent); border-color: var(--accent); }
.blog-share__status { color: var(--accent); font-size: var(--text-12); line-height: 1.5; }
.blog-share__status:not(:empty) { margin-top: 10px; }
.blog-post__contact { position: relative; padding: 116px var(--space-16) 18px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: linear-gradient(180deg,transparent 0,var(--bg-deep) 130px), url('../images/hero-systems-in-motion-approved-start.webp') 70% top / auto 150px no-repeat; }
.blog-post__contact h2 { margin-bottom: 10px; font-size: 20px; line-height: 1.2; }
.blog-post__contact p { color: var(--text-secondary); font-size: var(--text-12); line-height: 1.65; margin-bottom: 18px; }
.blog-post__contact .button { width: 100%; padding-inline: var(--space-12); font-size: var(--text-12); gap: 10px; min-height: 44px; height: auto; }
.blog-post__main { min-width: 0; max-width: 920px; }
.blog-post__main--protected { grid-column: 1 / -1; }
.blog-prose { font-size: var(--text-17); line-height: 1.75; color: var(--text-secondary); overflow-wrap: anywhere; }
.blog-prose > :first-child { margin-top: 0; }
.blog-prose > :last-child { margin-bottom: 0; }
.blog-prose :is(p,ul,ol,dl) { margin-block: 0 1.25em; }
.blog-prose :is(p,ul,ol,dl) { max-width: 75ch; }
.blog-prose :is(h1,h2,h3,h4,h5,h6) { color: var(--text-primary); line-height: 1.22; font-weight: 500; letter-spacing: -.025em; margin: 1.7em 0 .6em; scroll-margin-top: 32px; }
.blog-prose :is(h1,h2) { font-size: clamp(25px,2.1vw,32px); }
.blog-prose h3 { font-size: clamp(21px,1.8vw,26px); }
.blog-prose :is(h4,h5,h6) { font-size: 19px; }
.blog-prose :is(h2,h3,h4,h5,h6):focus { outline-offset: 8px; }
.blog-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.blog-prose a:hover { color: var(--accent-hover); }
.blog-prose :is(strong,b) { font-weight: 600; color: var(--text-primary); }
.blog-prose :is(ul,ol) { padding-left: 1.45em; }
.blog-prose ul { list-style: disc; }
.blog-prose ol { list-style: decimal; }
.blog-prose li { padding-left: .25em; margin-bottom: .4em; }
.blog-prose li::marker { color: var(--accent); }
.blog-prose li :is(ul,ol) { margin-block: .5em; }
.blog-prose dt { color: var(--text-primary); font-weight: 500; }
.blog-prose dd { margin: 0 0 1em 1.25em; }
.blog-prose blockquote { margin: var(--space-28) 0; padding: 22px 26px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text-primary); }
.blog-prose blockquote p:last-child { margin-bottom: 0; }
.blog-prose cite { display: block; margin-top: var(--space-16); color: var(--text-secondary); font-size: 13px; font-style: normal; }
.blog-prose .wp-block-pullquote { padding: 0; margin-block: var(--space-32); }
.blog-prose .wp-block-pullquote blockquote { font-size: clamp(22px,2vw,30px); line-height: 1.4; }
.blog-prose figure { margin-block: var(--space-28); max-width: 100%; }
.blog-prose :is(img,video) { max-width: 100%; height: auto; }
.blog-prose figcaption, .blog-prose .wp-caption-text { margin-top: 10px; color: var(--text-secondary); font-size: var(--text-12); line-height: 1.6; text-align: center; }
.blog-prose :is(.alignwide,.alignfull) { max-width: 100%; width: 100%; margin-inline: 0; }
.blog-prose .alignleft { float: left; margin: var(--space-8) var(--space-24) 18px 0; max-width: 48%; }
.blog-prose .alignright { float: right; margin: var(--space-8) 0 18px var(--space-24); max-width: 48%; }
.blog-prose .aligncenter { margin-inline: auto; }
.blog-prose::after { content: ''; display: block; clear: both; }
.blog-prose :is(iframe,embed,object) { max-width: 100%; }
.blog-prose .wp-has-aspect-ratio .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.blog-prose .wp-embed-aspect-4-3 .wp-block-embed__wrapper { aspect-ratio: 4 / 3; }
.blog-prose .wp-embed-aspect-1-1 .wp-block-embed__wrapper { aspect-ratio: 1; }
.blog-prose .wp-embed-aspect-9-16 .wp-block-embed__wrapper { aspect-ratio: 9 / 16; }
.blog-prose .wp-has-aspect-ratio .wp-block-embed__wrapper::before { display: none; }
.blog-prose .wp-has-aspect-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.blog-prose .wp-block-gallery { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.blog-prose .wp-block-gallery figure { min-width: 0; margin-block: 0; }
.blog-prose .wp-block-gallery img { width: 100%; object-fit: cover; }
.blog-prose .blocks-gallery-grid { display: flex; flex-wrap: wrap; gap: var(--space-16); padding: 0; list-style: none; }
.blog-prose .blocks-gallery-item { flex: 1 1 220px; padding: 0; }
.blog-prose .wp-block-columns { min-width: 0; gap: var(--space-24); }
.blog-prose .wp-block-column { min-width: 0; }
.blog-prose .wp-block-table { width: 100%; overflow-x: auto; scrollbar-color: var(--border-strong) var(--bg-deep); }
.blog-prose table { width: 100%; border-collapse: collapse; font-size: var(--text-14); line-height: 1.6; margin-block: var(--space-24); }
.blog-prose .wp-block-table table { margin-block: 0; }
.blog-prose > table { display: block; overflow-x: auto; scrollbar-color: var(--border-strong) var(--bg-deep); }
.blog-prose :is(th,td) { border: 1px solid var(--border-strong); padding: 11px var(--space-16); vertical-align: top; text-align: start; }
.blog-prose th { color: var(--accent); font-weight: 500; background: var(--surface); }
.blog-prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--surface); }
.blog-prose :is(code,kbd,samp) { font-family: var(--font-mono); font-size: .85em; }
.blog-prose :not(pre) > code { padding: 2px 5px; border: 1px solid var(--border); border-radius: 3px; color: var(--text-primary); background: var(--surface); }
.blog-prose pre { clear: both; max-width: 100%; margin: var(--space-24) 0; padding: var(--space-20); overflow-x: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text-primary); font-family: var(--font-mono); font-size: 13px; line-height: 1.8; tab-size: 4; scrollbar-color: var(--border-strong) var(--bg-deep); }
.blog-prose pre code { display: block; font-size: inherit; white-space: pre; overflow-wrap: normal; }
.blog-prose pre:has(code) { padding-top: var(--space-64); }
.blog-prose__code { position: relative; margin-block: var(--space-24); min-width: 0; }
.blog-prose__code pre { margin: 0; }
.blog-prose__code-toolbar { position: absolute; inset: 0 1px auto; display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); justify-content: flex-end; align-items: center; min-height: 44px; padding: 5px 14px; border-bottom: 1px solid var(--border-strong); border-radius: var(--radius) var(--radius) 0 0; background: var(--surface); }
.blog-prose__copy { padding: var(--space-4) 0; min-height: 32px; border: 0; background: transparent; font-size: var(--text-12); color: var(--text-secondary); cursor: pointer; }
.blog-prose__copy:hover { color: var(--accent); }
.blog-prose__copy:disabled { cursor: progress; opacity: .6; }
.blog-prose__copy-status { font-size: var(--text-12); color: var(--accent); }
.blog-prose hr { border: 0; border-top: 1px solid var(--border); margin-block: 36px; }
.blog-prose .post-password-form { max-width: 580px; }
.blog-prose .post-password-form label { display: block; margin-bottom: var(--space-16); }
.blog-prose .post-password-form input { max-width: 100%; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text-primary); background: var(--surface); }
.blog-prose .post-password-form input[type='password'] { display: block; width: 100%; margin-top: var(--space-8); }
.blog-prose .post-password-form input[type='submit'] { color: var(--bg-deep); background: var(--accent); border-color: var(--accent); cursor: pointer; }
.blog-post__pages { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-block: var(--space-32); }
.blog-post__pages :is(a,.post-page-numbers) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius); }
.blog-post__pages a .post-page-numbers { border: 0; }
.blog-post__pages .current { background: var(--surface); color: var(--accent); }
.blog-post__tags { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: 30px; }
.blog-post__tags a { padding: 5px 13px; font-size: var(--text-12); border: 1px solid var(--border-strong); border-radius: 24px; color: var(--text-secondary); }
.blog-post__tags a:hover { color: var(--accent); border-color: var(--accent); }
.blog-author { display: flex; align-items: flex-start; gap: var(--space-20); margin-top: var(--space-28); padding: var(--space-24); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.blog-author__avatar { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; }
.blog-author__copy { min-width: 0; overflow-wrap: anywhere; }
.blog-author__label { color: var(--text-secondary); font-size: var(--text-11); }
.blog-author__name { margin: 3px 0 var(--space-8); font-size: 19px; line-height: 1.3; }
.blog-author__name a:hover { color: var(--accent); }
.blog-author__bio { color: var(--text-secondary); font-size: var(--text-14); line-height: 1.65; }
.blog-author__bio p + p { margin-top: 10px; }
.blog-author__website { display: inline-block; margin-top: var(--space-12); color: var(--accent); font-size: var(--text-12); }
.blog-related { border-top: 1px solid var(--border); padding-block: var(--space-24) 54px; }
.blog-related__heading { display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-24); align-items: center; justify-content: space-between; margin-bottom: 18px; }
.blog-related__heading .blog-link { font-size: var(--text-12); }
@media (max-width: 1100px) {
  .blog-post__intro { gap: var(--space-32); }
  .blog-post__layout { grid-template-columns: 190px minmax(0,1fr); gap: 30px; }
  .blog-post__sidebar { padding-right: var(--space-20); }
  .blog-post__contact { padding-inline: var(--space-12); }
}
@media (max-width: 800px) {
  .blog-post__hero { padding-block: var(--space-24) var(--space-32); }
  .blog-post__intro { grid-template-columns: minmax(0,1fr); gap: var(--space-28); }
  .blog-post__title { max-width: 22ch; font-size: clamp(32px,5.5vw,46px); }
  .blog-post__hero::before { opacity: .45; }
  .blog-post__cover { max-height: 400px; }
  .blog-post__layout { grid-template-columns: minmax(0,1fr); gap: var(--space-28); padding-top: var(--space-28); }
  .blog-post__sidebar { border-right: 0; padding: 0 0 var(--space-24); border-bottom: 1px solid var(--border); }
  .blog-post__sidebar-inner { position: static; max-height: none; padding: 0; overflow: visible; }
  .blog-toc { padding-bottom: 0; }
  .blog-toc nav { margin-bottom: var(--space-16); }
  .blog-toc__item a { padding-block: 10px; font-size: var(--text-14); }
  .blog-share { padding-bottom: 0; margin-top: var(--space-8); }
  .blog-share__actions :is(a,button) { width: 44px; min-height: 44px; }
  .blog-post__contact { display: none; }
  .blog-prose { font-size: var(--text-16); }
}
@media (max-width: 480px) {
  .blog-post__title { font-size: 32px; }
  .blog-post__breadcrumbs { font-size: 10px; }
  .blog-post__breadcrumbs li[aria-current] { display: none; }
  .blog-post__intro .blog-meta { gap: var(--space-12) var(--space-16); }
  .blog-post__intro .blog-meta__author { width: 100%; }
  .blog-prose :is(.alignleft,.alignright) { float: none; margin: var(--space-24) 0; max-width: 100%; }
  .blog-prose blockquote { padding: 18px; }
  .blog-prose pre { padding: var(--space-16); font-size: var(--text-12); }
  .blog-prose :is(th,td) { padding: 9px var(--space-12); }
  .blog-author { gap: 14px; padding: 18px; }
  .blog-author__avatar { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-single :is(a,button) { transition: none; }
}