/* blz_steps — numbered process cards with connecting arrows, ported from
   editorial-tech-green.html (NEXT STEPS block), tokens → --blz-*. Design
   inner class names (.steps/.step/.n) kept for pixel/DOM parity, scoped
   under the module root (.blz-steps) because they're generic. */

.blz-steps .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; margin-top: 56px; }
.blz-steps .step { background: var(--blz-card-bg); border: 1px solid var(--blz-line); border-radius: var(--blz-radius); padding: 38px 34px; position: relative; transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s; }
.blz-steps .step:hover { transform: translateY(-6px); box-shadow: var(--blz-shadow); }
.blz-steps .step .n { font-family: var(--blz-serif); font-weight: 300; font-size: 76px; line-height: 1; color: var(--blz-accent-2); opacity: .85; }
.blz-steps .step h3 { font-weight: 700; font-size: 19px; margin-top: 18px; }
.blz-steps .step p { font-size: 14.5px; color: var(--blz-mute); line-height: 1.7; margin-top: 10px; }
.blz-steps .step::after { content: "→"; position: absolute; top: 44px; right: -22px; font-size: 22px; color: var(--blz-accent-2); z-index: 2; }
.blz-steps .step:last-child::after { display: none; }
.blz-steps .steps-cta { text-align: center; margin-top: 52px; }
.blz-steps .steps-cta .fine { font-size: 13px; color: var(--blz-mute); margin-top: 14px; }

@media (max-width: 1024px) {
	.blz-steps .steps { grid-template-columns: 1fr; }
	.blz-steps .step::after { display: none; }
}

/* ---- rows layout (layout="rows"): full-width numbered list — events /
   programs / practices. Hairline-separated rows: 01-number | main | meta. */
.blz-steps .steps-intro { max-width: 62ch; margin-top: -24px; margin-bottom: 24px; color: var(--blz-mute); }
.blz-steps .step-rows { margin-top: 40px; border-top: 1px solid var(--blz-line); }
.blz-steps .step-rows .step { display: grid; grid-template-columns: 110px 1fr 260px; gap: 34px; padding: 44px 0; border-bottom: 1px solid var(--blz-line); background: none; border-radius: 0; border-left: none; border-right: none; border-top: none; }
.blz-steps .step-rows .step:hover { transform: none; box-shadow: none; }
.blz-steps .step-rows .step::after { display: none; }
.blz-steps .step-rows .n { font-size: 54px; opacity: .55; }
.blz-steps .step-rows h3 { font-family: var(--blz-serif); font-weight: 420; font-size: 27px; margin-top: 0; letter-spacing: -.01em; }
.blz-steps .step-rows .step-where { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--blz-mute); margin-top: 8px; }
.blz-steps .step-rows .step-main p:not(.step-where) { max-width: 56ch; }
.blz-steps .step-side { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.blz-steps .step-meta { display: grid; gap: 10px; margin: 0; }
.blz-steps .step-meta > div { display: flex; gap: 12px; font-size: 14px; }
.blz-steps .step-meta dt { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; color: var(--blz-mute); min-width: 52px; padding-top: 2px; }
.blz-steps .step-meta dd { margin: 0; color: var(--blz-ink-soft); }
.blz-band--dark .step-meta dd, .blz-band--dark-2 .step-meta dd { color: var(--blz-on-dark-soft); }

@media (max-width: 900px) {
	.blz-steps .step-rows .step { grid-template-columns: 64px 1fr; }
	.blz-steps .step-side { grid-column: 2; }
}