.block-steps {
    padding: 8rem 0;
    background: url(../../../assets/images/gradient-2.png);
    background-size: contain;
}

.block-steps__inner {
    max-width: var(--wp--style--global--wide-size, 1500px);
    margin: 0 auto;
}

/* Header — centred above the full-width steps */
.block-steps__header {
    max-width: 40rem;
    margin: 0 auto clamp(30px, 5vw, 60px);
    text-align: center;
}

.block-steps__description {
    font-size: var(--wp--preset--font-size--normal);
    line-height: 1.5;
    margin: 0;
    opacity: 0.75;
}

.block-steps__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 auto;
    padding: 0;
    max-width: 70rem;
}

/* Card — the white box each step sits in */
.block-steps__card {
    --steps-card-padding: clamp(16px, 2vw, 24px);
    /* Tighter than the card padding, so the image sits close to the white edge */
    --steps-image-inset: 8px;
    --steps-image-min-height: 320px;

    background: var(--wp--preset--color--base, #fff);
    border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
    border-radius: 10px;
    padding: var(--steps-card-padding);
    /* Anchors the absolutely placed toggle icon and image */
    position: relative;
}

/* Toggle — the title itself; the icon is positioned against the card, not this button.
   Pulled out over the card padding so that whole area is clickable, not just the text. */
.block-steps__toggle {
    display: block;
    width: auto;
    margin: calc(-1 * var(--steps-card-padding)) calc(-1 * var(--steps-card-padding)) 0;
    padding: var(--steps-card-padding) calc(var(--steps-card-padding) + 40px + 1.5rem) 0 var(--steps-card-padding);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: currentColor;
}

.block-steps__toggle:focus-visible {
    outline: 2px solid currentColor;
    /* Negative, so the ring stays inside the card now the button reaches its edges */
    outline-offset: -2px;
}

.block-steps__step-title {
    font-family: var(--wp--preset--font-family--maax);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 500;
    line-height: 1.14;
}

/* Circled plus / minus — pinned to the card so it sits over the image once open */
.block-steps__icon {
    position: absolute;
    top: var(--steps-card-padding);
    right: var(--steps-card-padding);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.block-steps__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.block-steps__icon circle {
    fill: var(--wp--preset--color--contrast, #202333);
    stroke: none;
}

.block-steps__icon line {
    stroke: var(--wp--preset--color--base, #fff);
}

/* Panel */
.block-steps__panel {
    overflow: hidden;
}

/* Kept clear of the image on the right */
.block-steps__panel-inner {
    max-width: 52%;
    padding-top: var(--steps-card-padding);
}

/* The image is absolute, so it cannot grow the card itself. Giving the panel a floor
   keeps the image at full height instead of collapsing it onto short text. */
.block-steps__card:has(.block-steps__image) .block-steps__panel-inner {
    min-height: var(--steps-image-min-height);
}

.block-steps__text {
    font-size: var(--wp--preset--font-size--normal);
    line-height: 1.5;
    opacity: 0.75;
}

.block-steps__text > *:first-child {
    margin-top: 0;
}

.block-steps__text > *:last-child {
    margin-bottom: 0;
}

.block-steps__button {
    margin-top: 1.5rem;
}

/* Absolute so it can span from the card's top edge without being clipped by the
   panel's height animation — that is what puts the toggle on top of the image */
.block-steps__image {
    position: absolute;
    top: var(--steps-image-inset);
    right: var(--steps-image-inset);
    bottom: var(--steps-image-inset);
    width: 42%;
    margin: 0;
    overflow: hidden;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
}

/* Revealed with its own panel, straight off the toggle state — no JS needed */
.block-steps__toggle[aria-expanded="true"] ~ .block-steps__image {
    opacity: 1;
    visibility: visible;
}

.block-steps__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

@media (prefers-reduced-motion: reduce) {
    .block-steps__image {
        transition: none;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Image drops below the text, so it can no longer be absolutely placed */
@media (max-width: 900px) {
    .block-steps__panel-inner {
        max-width: none;
    }

    .block-steps__card:has(.block-steps__image) .block-steps__panel-inner {
        min-height: 0;
    }

    .block-steps__image {
        position: static;
        /* display rather than opacity: a hidden static image would still take up space */
        display: none;
        width: 100%;
        aspect-ratio: 16 / 9;
        margin-top: var(--steps-card-padding);
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .block-steps__toggle[aria-expanded="true"] ~ .block-steps__image {
        display: block;
    }
}

@media (max-width: 600px) {
    .block-steps {
        padding: 4rem 0;
    }
}