/* =============================================================================
 * Steps / Process — horizontal / vertical / alternating / cards / circles.
 * ========================================================================== */
.fw-steps {
	--st-accent: var(--color-primary, #4a90d9);
	--st-marker-text: #ffffff;
	--st-title: inherit;
	--st-text: #6b7280;
	--st-line: #e2e8f0;
	--st-size: 48px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fw-steps__item { position: relative; }
.fw-steps__marker {
	width: var(--st-size); height: var(--st-size);
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--st-accent); color: var(--st-marker-text);
	font-weight: 700; font-size: 1.05rem; line-height: 1;
	z-index: 1; position: relative;
}
.fw-steps--shape-circle  .fw-steps__marker { border-radius: 50%; }
.fw-steps--shape-rounded .fw-steps__marker { border-radius: .7rem; }
.fw-steps--shape-square  .fw-steps__marker { border-radius: 0; }
.fw-steps__icon { display: inline-flex; }
.fw-steps__icon i { font-size: 1.3rem; }
.fw-steps__icon img { width: 1.4rem; height: 1.4rem; object-fit: contain; }
.fw-steps--marker-none .fw-steps__marker { display: none; }
.fw-steps__title { color: var(--st-title); margin: 0 0 .35rem; font-size: 1.15rem; line-height: 1.3; }
.fw-steps__text { color: var(--st-text); line-height: 1.6; }
.fw-steps__text > :last-child { margin-bottom: 0; }
.fw-steps__text > :first-child { margin-top: 0; }
.fw-steps__connector { display: none; }
/* Connector: None — the per-design sheets turn the spine back on (vertical / alternating / horizontal),
   so the option's own choice has to out-rank them. Without this, picking None still drew the line. */
.fw-steps--connector-none .fw-steps__connector { display: none !important; }
.fw-steps__empty { padding: 1.25rem; border: 1px dashed rgba(0,0,0,.2); border-radius: .5rem; color: #6c757d; text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
	.fw-steps--design-horizontal, .fw-steps--design-circles, .fw-steps--design-cards { flex-direction: column; }
	.fw-steps--design-horizontal .fw-steps__item, .fw-steps--design-circles .fw-steps__item { text-align: left; display: grid; grid-template-columns: var(--st-size) 1fr; gap: 0 1rem; padding: 0 0 1.5rem; }
	/* Marker = None → no marker element is rendered, so the body would occupy the reserved marker
	   track. Collapse to one column (same reason as design/vertical.css). */
	.fw-steps--marker-none.fw-steps--design-horizontal .fw-steps__item,
	.fw-steps--marker-none.fw-steps--design-circles .fw-steps__item { grid-template-columns: 1fr; }
	.fw-steps--design-horizontal .fw-steps__marker, .fw-steps--design-circles .fw-steps__marker { margin: 0; --st-size: 48px; }
	.fw-steps--design-horizontal .fw-steps__connector { display: none; }

	.fw-steps--design-alternating::before { left: calc(var(--st-size) / 2 - 1px); transform: none; }
	.fw-steps--design-alternating .fw-steps__item,
	.fw-steps--design-alternating .fw-steps__item:nth-child(odd),
	.fw-steps--design-alternating .fw-steps__item:nth-child(even) { width: 100%; margin-left: 0; text-align: left; padding: 0 0 2rem 3.5rem; }
	.fw-steps--design-alternating .fw-steps__item .fw-steps__marker,
	.fw-steps--design-alternating .fw-steps__item:nth-child(odd) .fw-steps__marker,
	.fw-steps--design-alternating .fw-steps__item:nth-child(even) .fw-steps__marker { left: 0; right: auto; }
}

/* --------------------------------------------------------------------------
   Card Rows — the step BODY layout (shared slot-designer). Governs how the
   icon / number / title / description flow inside .fw-steps__body; the marker
   chip + connector spine stay owned by the Design + Marker options. Mirrors
   the ts-card / posts row rules (renamed prefix `steps-card`).
   -------------------------------------------------------------------------- */
.fw-steps__body .steps-card__row { display: flex; gap: .5rem; }
.fw-steps__body .steps-card-row--inline { flex-direction: row; flex-wrap: wrap; align-items: center; }
.fw-steps__body .steps-card-row--stack  { flex-direction: column; }
.fw-steps__body .steps-card-row--inline.steps-card-row--reverse { flex-direction: row-reverse; }
.fw-steps__body .steps-card-j-start   { justify-content: flex-start; }
.fw-steps__body .steps-card-j-center  { justify-content: center; }
.fw-steps__body .steps-card-j-between  { justify-content: space-between; }
.fw-steps__body .steps-card-j-end     { justify-content: flex-end; }
.fw-steps__body .steps-card-a-start   { align-items: flex-start; }
.fw-steps__body .steps-card-a-center  { align-items: center; }
.fw-steps__body .steps-card-a-end     { align-items: flex-end; }
.fw-steps__body .steps-card-a-stretch { align-items: stretch; }
.fw-steps__body .steps-card__row + .steps-card__row { margin-top: .5rem; }
/* Inline number/icon slots (independent of the spine marker). */
.fw-steps__body .fw-steps__num-inline { font-weight: 700; color: var(--st-accent, currentColor); }
.fw-steps__body .fw-steps__icon-inline { display: inline-flex; align-items: center; color: var(--st-accent, currentColor); }
.fw-steps__body .fw-steps__icon-inline svg { width: 1.25em; height: 1.25em; }
/* Icon BADGE slot — same look as the marker chip (accent fill + shape + size), so the icon reads identically
   whether it sits on the marker spine or inside a Card Row. Shape follows the shortcode's Marker Shape. */
.fw-steps__body .fw-steps__icon-badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: var(--st-size); height: var(--st-size); flex: 0 0 auto;
	background: var(--st-accent); color: var(--st-marker-text);
}
.fw-steps--shape-circle  .fw-steps__body .fw-steps__icon-badge { border-radius: 50%; }
.fw-steps--shape-rounded .fw-steps__body .fw-steps__icon-badge { border-radius: .7rem; }
.fw-steps--shape-square  .fw-steps__body .fw-steps__icon-badge { border-radius: 0; }
.fw-steps__body .fw-steps__icon-badge .fw-steps__icon svg { width: 1.4rem; height: 1.4rem; }