/* Techronyx Blog — article blocks that /assets/css/site.css does not style yet.
   Loaded only on articles that use them. */

.prose .tx-steps { list-style: none; padding: 0; margin: 2em 0; display: grid; gap: 12px; counter-reset: st; }
.prose .tx-steps li { counter-increment: st; position: relative; margin: 0; padding: 20px 24px 20px 78px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.prose .tx-steps li::before {
  content: counter(st, decimal-leading-zero); position: absolute; left: 22px; top: 18px; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font: 500 13px/1 var(--font-mono); color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(255, 122, 61, .3);
}
.prose .tx-steps li strong { display: block; margin-bottom: 2px; font-family: var(--font-display); color: var(--text); }

.prose :is(.tx-figure, .wp-caption) { margin: 2.4em 0; max-width: 100%; }
.prose :is(.tx-figure, .wp-caption) img { width: 100%; height: auto; border-radius: 16px; }
.prose :is(figcaption, .wp-caption-text) { padding-top: 12px; text-align: center; font-size: 14px; color: var(--muted); }

.prose blockquote { margin: 2em 0; padding: 22px 26px; border-left: 3px solid var(--accent); border-radius: 0 18px 18px 0; background: linear-gradient(90deg, var(--accent-soft), transparent 75%); font-family: var(--font-display); color: var(--text); }
.prose blockquote p:last-child { margin: 0; }
.prose pre { margin: 1.8em 0; padding: 20px 22px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; font: 500 14px/1.7 var(--font-mono); }

@media (max-width: 640px) { .prose .tx-steps li { padding-left: 68px; } .prose .tx-steps li::before { left: 16px; } }