/* ==========================================================================
   Home page: steps section
   Left: title + vertical list of numbered step cards, height driven by
   content (no fixed height). Each card carries its own bar segment behind
   the number badge, stretched to the card's full height via flex; the
   segment lights up blue when the card is active. Active state follows
   scroll position (home-steps.js, IntersectionObserver at viewport middle),
   works both scrolling down and up. Right: static media panel with a dark
   overlay box, shared for the whole section — does not react to the active
   card.
   ========================================================================== */

.home-steps {
    display: flex;
    flex-direction: column;
    background: var(--hpb-color-blue-light);
}

.home-steps__content {
    padding: 80px 24px;
}

.home-steps__title {
    color: var(--hpb-color-dark);
}

.home-steps__items {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
}

.home-steps__item {
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.home-steps__marker {
    position: relative;
    flex-shrink: 0;
    width: 48px;
}

.home-steps__item-bar {
    position: absolute;
    top: -12px;
    bottom: 0;
    right: -10px;
    transform: translateX(-50%);
    width: 3px;
    height: calc(100% + 24px);
    background: var(--hpb-color-label-blue-light);
    transition: background 300ms;
}

.home-steps__item .home-steps__item-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--hpb-color-label-blue-light);
    border-radius: 2px;
    transition: background 300ms;
}

.home-steps__item.is-active .home-steps__item-bar::after {
    background: var(--hpb-color-blue-middle);
}

.home-steps__item:first-child .home-steps__item-bar {
    border-radius: 2px 2px 0 0;
}

.home-steps__item:last-child .home-steps__item-bar {
    border-radius: 0 0 2px 2px;
}

.home-steps__number {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    color: var(--hpb-color-white);
    background: var(--hpb-color-label-blue-light);
    transition: background 300ms;
}

.home-steps__item.is-active .home-steps__number {
    background: var(--hpb-color-blue-middle);
}

.home-steps__item-content {
    background: var(--hpb-color-white);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.home-steps__item-title {
    color: var(--hpb-color-dark);
    margin-bottom: 8px;
}

.home-steps__item-text {
    color: var(--hpb-color-text-body);
}

.home-steps__link {
    margin-top: 8px;
}

.home-steps__media {
    position: relative;
    display: none;
}

.home-steps__media__wrapper {
    position: absolute;
    z-index: 1;
    inset: 0;
}

.wrapper .home-steps__image,
.home-steps__image {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.home-steps__overlay-text:not(.m-mob) {
    position: absolute;
    z-index: 2;
    top: 24px;
    left: 24px;
    right: 24px;
    background: linear-gradient(180deg, #004F99 -1.63%, rgba(0, 56, 112, 0) 69.54%);
    color: var(--hpb-color-white);
    font-family: var(--hpb-font-family-base);
    padding: 20px 24px 20px 20px;
    min-height: 522px;
    border-radius: 8px;
}

.home-steps__overlay-text-wrapper {
    padding-left: 22px;
    border-left: 2px solid var(--hpb-color-white);
}

.home-steps__overlay-text.m-mob {
    margin-top: 16px;
}

@media (min-width: 750px) {
    .home-steps__item {
        gap: 52px;
    }
    .home-steps__link {
        letter-spacing: 0.7px;
    }
    .home-steps__marker {
        width: 64px;
    }
    .home-steps__number {
        width: 64px;
        height: 64px;
    }
    .home-steps__item-bar {
        width: 4px;
        right: -30px;
    }
}

@media (min-width: 992px) {
    .home-steps {
        flex-direction: row;
    }

    .home-steps__content {
        width: 59%;
        padding: 128px 24px;
    }

    .home-steps__items {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .home-steps__item:first-child .home-steps__item-bar {
        height: calc(100% + 36px);
        top: -24px;
    }

    .home-steps__item:last-child .home-steps__item-bar {
        height: calc(100% + 36px);
    }

    .home-steps__media {
        display: block;
        height: auto;
        width: 41%;
    }

    .home-steps__item-content {
        padding: 24px;
    }
    .home-steps__overlay-text.m-mob {
        display: none;
    }
    .home-steps__link {
        margin-top: 32px;
    }
}

@media (min-width: 1200px) {
    .home-steps__items {
        max-width: 586px;
        margin-right: 0;
        margin-left: auto;
    }
    .home-steps__title {
        max-width: 586px;
        margin-right: 0;
        margin-left: auto;
    }
    .home-steps__content {
        padding-right: 144px;
    }
    .home-steps__overlay-text:not(.m-mob) {
        padding: 48px;
        max-width: 430px;
        top: 40px;
        left: 40px;
    }
    .home-steps__overlay-text-wrapper {
        padding-left: 24px;
    }
}