@layer components {
    .step-card {
        /* Tile geometry lives in one place: the card's top padding is derived from it, so
           resizing the tile can't silently push the illustration onto the heading. */
        --step-card-icon-size: 3.5rem;
        --step-card-icon-overhang: 0.85rem;

        position: relative;
        background: var(--color-surface-raised);
        color: var(--color-text);
        padding: var(--space-m);
        border-radius: var(--radius-l);
        border: 1px solid var(--color-border);
        transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);

        &:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-m);
            border-color: transparent;
        }

        /* Illustration tile poking diagonally out of the top-left corner. Only steps that
           declare an `icon` in content/how-it-works.yaml get one, so the layout shift is scoped
           with :has() — the payment steps on /cennik share this component and stay plain. */
        & .step-card__icon {
            position: absolute;
            top: calc(var(--step-card-icon-overhang) * -1);
            left: calc(var(--step-card-icon-overhang) * -1);
            z-index: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: var(--step-card-icon-size);
            height: var(--step-card-icon-size);
            border-radius: var(--radius-m);
            /* Brand gradient rather than a surface colour: in dark mode the card and every
               "raised" surface token are the same slate, so a tinted tile would vanish into
               the card it's supposed to be poking out of. */
            background: var(--gradient-brand-strong);
            color: var(--color-on-brand);
            box-shadow: var(--shadow-glow);
            rotate: -10deg;
            transition: rotate 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
        }

        & .step-card__icon-glyph {
            width: 1.6rem;
            height: 1.6rem;
            /* Cancel the tile's tilt so the glyph itself stays upright and readable. */
            rotate: 10deg;
        }

        &:hover .step-card__icon {
            rotate: -4deg;
            box-shadow: var(--shadow-l);
        }

        &:has(.step-card__icon) {
            /* Clear the tile's lower edge, plus a breathing gap. The tilt makes the tile a
               little taller than its box, hence the extra --space-xs rather than a bare sum. */
            padding-block-start: calc(var(--step-card-icon-size) - var(--step-card-icon-overhang) + var(--space-xs));

            /* The illustration is the focal point now, so the counter steps back to a quiet
               badge in the opposite corner instead of competing with a second gradient. */
            & .step-card__number {
                position: absolute;
                top: var(--space-xs);
                right: var(--space-xs);
                width: 2rem;
                height: 2rem;
                font-size: 0.9rem;
                background: var(--color-surface-mixed);
                border: 1px solid var(--color-border);
                color: var(--color-text-muted);
                box-shadow: none;
            }

            /* Keep a long title off the number badge in the corner. */
            & .step-card__title {
                margin-block-start: 0;
                padding-inline-end: 2.5rem;
            }
        }

        & .step-card__number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: var(--radius-full);
            background: var(--gradient-brand-strong);
            color: var(--color-on-brand);
            font-family: var(--font-display);
            font-weight: 700;
            box-shadow: var(--shadow-glow);
        }

        & .step-card__title {
            margin-block-start: var(--space-s);
            font-size: 1.15rem;
        }

        & .step-card__description {
            color: var(--color-text-muted);
        }
    }
}