/* Steps variation: numbered */
.page-view__section--steps:is(
    .page-view__section--variation-numbered,
    :not([data-section-variation])
) .page-view__steps-list {
    display: grid;
    gap: calc(var(--common-gap) * 4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: stretch;
}

.page-view__section--steps:is(
    .page-view__section--variation-numbered,
    :not([data-section-variation])
) .page-view__step-item {
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: flex-start;
    gap: var(--size-base);
    transform: scale(1);
    transition: 0.2s transform, 0.2s background-color, 0.2s border, 0.2s box-shadow;
}

@media (min-width: 780px) {
    .page-view__section--steps:is(
    .page-view__section--variation-numbered,
    :not([data-section-variation])
    ) .page-view__step-item {
        background-color: transparent;
        border-radius: var(--radius-card);
        border: 1px solid transparent;
        padding: var(--size-base);
    }

    .page-view__section--steps:is(
    .page-view__section--variation-numbered,
    :not([data-section-variation])
    ) .page-view__step-item:hover {
        transform: scale(1.1);
        background-color: var(--color-bg-top);
        border: 1px solid var(--color-primary);
        box-shadow: 0 16px 16px rgba(0, 0, 0, 0.1);
    }
}

.page-view__section--steps:is(
    .page-view__section--variation-numbered,
    :not([data-section-variation])
) .page-view__step-number {
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary-opposite);
    margin-inline: auto;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-primary) 78%, #7c3aed) 0%,
        color-mix(in srgb, var(--color-accent) 70%, #06b6d4) 50%,
        color-mix(in srgb, var(--color-error) 60%, #16f947) 100%
    );
    background-size: 240% 240%;
    animation:
        page-view-steps-number-gradient-shift 7s ease-in-out infinite;
    will-change: background-position;
}

@keyframes page-view-steps-number-gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-view__section--steps:is(
        .page-view__section--variation-numbered,
        :not([data-section-variation])
    ) .page-view__step-number {
        animation: none;
        background-position: 50% 50%;
    }
}

.page-view__section--steps:is(
    .page-view__section--variation-numbered,
    :not([data-section-variation])
) .page-view__step-body {
    display: flex;
    flex-direction: column;
    gap: var(--size-xs);
    min-width: 0;
}

.page-view__section--steps:is(
    .page-view__section--variation-numbered,
    :not([data-section-variation])
) .page-view__step-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text);
    text-align: center;
}

.page-view__section--steps:is(
    .page-view__section--variation-numbered,
    :not([data-section-variation])
) .page-view__step-text {
    margin: 0;
    color: var(--color-secondary);
    line-height: 1.65;
    text-align: center;
}