.rc-services {
    --rc-services-min: 11rem;
    --rc-services-body: 22rem;
    --rc-services-cover-h: 18rem;
    --rc-services-dur: 420ms;
    --rc-services-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --rc-services-rule: rgba(55, 55, 55, 0.35);

    position: relative;
    width: 100%;
    color: var(--color-body);
    font-family: var(--font-body);

    &::before,
    &::after {
        content: "";
        position: absolute;
        top: var(--s-large);
        bottom: var(--s-large);
        width: 1px;
        background: var(--rc-services-rule);
        pointer-events: none;
    }
    &::before { left: 0; }
    &::after { right: 0; }

    .rc-services__list {
        display: flex;
        flex-wrap: nowrap;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .rc-services__item {
        position: relative;
        display: flex;
        flex: 1 1 var(--rc-services-min);
        min-width: 0;
        height: var(--rc-services-cover-h);
        overflow: hidden;
        transition: flex-grow var(--rc-services-dur) var(--rc-services-ease);
        background: transparent;

        &:not(:last-child)::after {
            content: "";
            position: absolute;
            top: var(--s-large);
            bottom: var(--s-large);
            right: 0;
            width: 1px;
            background: var(--rc-services-rule);
            transition: opacity var(--rc-services-dur) var(--rc-services-ease);
            pointer-events: none;
        }

        &.is-active {
            flex-grow: 8;

            &::after {
                opacity: 0;
            }

            .rc-services__cover {
                background-image: var(--rc-service-image, none);
                color: #fff;
            }
            .rc-services__cover::before {
                opacity: 1;
            }
            .rc-services__title {
                color: #fff;
                font-weight: 700;
            }
            .rc-services__body {
                flex-basis: 50%;
            }
        }

        @media (hover: hover) {
            &:hover {
                flex-grow: 8;

                &::after {
                    opacity: 0;
                }

                .rc-services__cover {
                    background-image: var(--rc-service-image, none);
                    color: #fff;
                }
                .rc-services__cover::before {
                    opacity: 1;
                }
                .rc-services__title {
                    color: #fff;
                    font-weight: 700;
                }
                .rc-services__body {
                    flex-basis: 50%;
                }
            }
        }
    }

    .rc-services__toggle {
        all: unset;
        box-sizing: border-box;
        display: block;
        flex: 1 1 0;
        min-width: 0;
        cursor: pointer;

        &:focus-visible {
            outline: 2px solid var(--color-piscine);
            outline-offset: -4px;
        }
    }

    .rc-services__cover {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: var(--s-large);
        background-color: transparent;
        background-size: cover;
        background-position: center;
        transition: background-color var(--rc-services-dur) var(--rc-services-ease),
                    color var(--rc-services-dur) var(--rc-services-ease);

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 100%);
            opacity: 0;
            transition: opacity var(--rc-services-dur) var(--rc-services-ease);
            pointer-events: none;
        }
    }

    .rc-services__title {
        position: relative;
        z-index: 1;
        display: block;
        margin: 0;
        font-family: var(--font-heading);
        font-size: var(--fs-h4);
        font-weight: 400;
        line-height: 1.15;
        color: var(--color-primary);
        transition: color var(--rc-services-dur) var(--rc-services-ease),
                    font-weight var(--rc-services-dur) var(--rc-services-ease);

        p {
            margin: 0;

            & + p {
                margin-top: 0.15em;
            }
        }

        a {
            color: inherit;
            text-decoration: none;
        }
    }

    .rc-services__body {
        flex: 0 0 0;
        min-width: 0;
        overflow: hidden;
        background: var(--rc-service-color, var(--color-primary));
        color: #fff;
        transition: flex-basis var(--rc-services-dur) var(--rc-services-ease);
    }

    .rc-services__body-inner {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--s-medium);
        width: 100%;
        height: 100%;
        padding: var(--s-large) var(--s-xl);
        box-sizing: border-box;
    }

    .rc-services__content {
        font-size: var(--fs-body);
        line-height: 1.45;

        p {
            margin: 0 0 var(--s-small);

            &:last-child {
                margin-bottom: 0;
            }
        }

        a {
            color: inherit;
            text-decoration: underline;
        }
    }

    .rc-services__cta {
        align-self: flex-start;
        display: inline-block;
        padding: var(--s-small) var(--s-large);
        background: var(--color-primary);
        color: #fff;
        font-family: var(--font-body);
        font-size: var(--fs-body);
        font-weight: 600;
        text-decoration: none;
        border-radius: 2px;
        transition: transform 150ms var(--rc-services-ease), opacity 150ms var(--rc-services-ease);

        &:hover,
        &:focus-visible {
            transform: translateY(-1px);
            opacity: 0.92;
        }

        &:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }
    }

    @media (max-width: 1300px) {
        &::before,
        &::after {
            top: auto;
            bottom: auto;
            left: var(--s-large);
            right: var(--s-large);
            width: auto;
            height: 1px;
        }
        &::before { top: 0; }
        &::after { bottom: 0; }

        .rc-services__list {
            flex-direction: column;
        }

        .rc-services__item {
            flex: 0 0 auto;
            flex-direction: column;
            height: auto;

            &:not(:last-child)::after {
                top: auto;
                bottom: 0;
                right: var(--s-large);
                left: var(--s-large);
                width: auto;
                height: 1px;
            }

            &.is-active {
                flex-grow: 0;

                .rc-services__body {
                    flex-basis: auto;
                }
            }

            @media (hover: hover) {
                &:hover {
                    flex-grow: 0;

                    .rc-services__body {
                        flex-basis: auto;
                    }
                }
            }
        }

        .rc-services__toggle {
            width: 100%;
            min-width: 0;
        }

        .rc-services__cover {
            height: 9rem;
            min-height: 9rem;
        }

        .rc-services__body {
            flex-basis: 0;
            transition: flex-basis var(--rc-services-dur) var(--rc-services-ease);
        }

        .rc-services__body-inner {
            width: 100%;
            min-height: 0;
        }
    }
}