/*
 * Block: Steps
 */

section.steps {
    overflow: unset;
}

/* Layout: intro left, cards right */
.steps__layout {
    align-items: start;
    gap: var(--container-gap);
}

/* ---- Intro column ---- */
.steps__intro {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
}

@media (min-width: 992px) {
    .steps__intro {
        position: sticky;
        inset-block-start: var(--sticky-offset, 0);
    }
}

/* ---- Cards column ---- */
.steps__cards {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
}

.steps__card {
	border-radius: var(--radius, 0.8rem);
    padding: var(--space-xl) var(--space-l);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    border: var(--border);
    border-color: transparent;
}

.steps__card.is-active {
    border-color: var(--secondary);
}

.steps__number {
    display: block;
    font-size: var(--h5);
    font-weight: 700;
    line-height: 1;
    color: var(--base-light);
    margin-bottom: var(--space-xs);
    user-select: none;
    transition: var(--transition);
	font-family: var(--heading-font-family);
}

.steps__card.is-active .steps__number {
    color: var(--secondary);
}

.steps__title {
    margin: 0 0 var(--space-xs);
}

.steps__description {
    margin: 0;
    color: var(--text-light-muted);
    transition: var(--transition);
}

.steps__card.is-active .steps__description {
    color: var(--text-dark-muted);
}