/* ==========================================================================
   SIT Services · article layout (blog posts and tutorials)
   Built from tokens.css; no raw colours or sizes.
   ========================================================================== */

.article { padding-block: clamp(var(--space-7), 6vw, var(--space-9)) var(--section-gap); }
.article__inner { max-width: var(--container-narrow); margin-inline: auto; }

/* Breadcrumb */
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--fs-small); color: var(--color-ink-3); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent-text); text-decoration: underline; }

/* Header */
.article__header { margin-top: var(--space-4); padding-bottom: var(--space-7); border-bottom: 1px solid var(--color-border); }
.article__header h1 { font-size: var(--fs-h2); line-height: 1.12; max-width: 22ch; }
.article__header .t-lead { margin-top: var(--space-5); }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-5); font-size: var(--fs-small); color: var(--color-ink-3); }

/* Contents */
.toc { margin-top: var(--space-7); padding: var(--space-5) var(--space-6); background: var(--color-surface); border-radius: var(--radius-lg); }
.toc h2 { font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: 0; }
.toc ol { margin-top: var(--space-3); padding-left: 1.4em; list-style: decimal; display: grid; gap: var(--space-1); }
.toc a { display: inline-block; padding-block: var(--space-1); color: var(--color-accent-text); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* Body copy */
.prose { margin-top: var(--space-7); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { margin-top: var(--space-8); font-size: var(--fs-h3); font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); scroll-margin-top: calc(var(--nav-height) + var(--space-4)); }
.prose h3 { margin-top: var(--space-6); font-size: var(--fs-h3); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-4); }
.prose p, .prose li { color: var(--color-ink); max-width: var(--measure); }
.prose ul, .prose ol { padding-left: 1.4em; display: grid; gap: var(--space-2); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--color-ink-3); }
.prose strong { font-weight: var(--fw-semibold); }
.prose a { color: var(--color-accent-text); }

/* Inline code */
.prose :not(pre) > code {
  padding: 0.1em 0.35em; background: var(--color-surface-2); color: var(--color-ink);
  border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.88em;
  overflow-wrap: anywhere;
}

/* Code block: a file label, a copy button, then the code */
.code { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.code__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--color-border); }
.code__name { font-family: var(--font-mono); font-size: 0.875rem; color: var(--color-ink-2); }
.code__copy {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3);
  background: transparent; color: var(--color-ink-2); border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: var(--fs-small); font-weight: var(--fw-medium); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-press) var(--ease-out);
}
.code__copy svg { width: 16px; height: 16px; }
.code__copy:active { transform: scale(var(--press-scale)); }
.code__copy.is-copied { color: var(--color-success); }
@media (hover: hover) and (pointer: fine) { .code__copy:hover { background: var(--color-surface-2); color: var(--color-ink); } }
.code pre {
  margin: 0; padding: var(--space-4); overflow-x: auto;
  font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.65; color: var(--color-ink);
  tab-size: 2;
}
.code pre:focus-visible { outline-offset: -3px; }

/* Note */
.note { padding: var(--space-4) var(--space-5); background: var(--color-accent-soft); border-radius: var(--radius-md); color: var(--color-ink); }
.note strong { color: var(--color-accent-text); }

/* Closing call to action */
.article__cta { margin-top: var(--space-9); }