/* Featured customer stories carousel at the top of the case study index */
.cs-featured {
    /* Placed outside .container so the grey band spans the full page width (no rounded corners) */
    position: relative;
    background: #f8f8fc;
    padding-block: 55px 45px;
    margin-bottom: 60px;

    /* Align the content with the card grid below; the side padding is the gutter the arrows sit in */
    .cs-featured__inner {
        position: relative;
        max-width: calc(120rem + 120px);
        margin-inline: auto;
        padding-inline: 80px;
    }

    /* Keep the slides from stacking vertically before slick initializes */
    .cs-featured__slider:not(.slick-initialized) .cs-featured__slide+.cs-featured__slide {
        display: none;
    }

    .cs-featured__link {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--common-gap2);
        color: #111;

        &:hover {
            text-decoration: none;

            .cs-featured__title {
                color: #2a3037;
                text-decoration: underline;
                text-decoration-thickness: 1px;
                text-underline-offset: 3px;
            }

            .cs-featured__more {
                background: #2a3037;
                border-color: #2a3037;
                color: #fff;
            }

            .cs-featured__arrow-box {
                background: #fff;

                &::after {
                    transform: translateX(4px);
                }
            }
        }
    }

    .cs-featured__thumb img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        border-radius: 8px;
    }

    .cs-featured__company {
        font-size: 1.6rem;
        font-weight: 600;
        color: #616a78;
        margin: 0 0 12px;
    }

    .cs-featured__title {
        font-size: 2.4rem;
        line-height: 1.6;
        margin: 0 0 30px;
        transition: color .3s;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

    .cs-featured__more {
        display: inline-flex;
        align-items: center;
        position: relative;
        background: linear-gradient(180deg, #FFFFFF 0%, #f8f8fc 100%);
        border: 1px solid #d5d5dc;
        border-radius: 99px;
        color: #2a3037;
        font-size: 1.6rem;
        padding: 13px 65px 13px 30px;
        transition: background .3s, color .3s, border-color .3s;
    }

    .cs-featured__arrow-box {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 13px;
        width: 32px;
        height: 32px;
        border-radius: 99px;
        background: #f3f3f7;
        transition: background-color .3s;

        &::after {
            font: var(--fa-font-solid);
            content: "\f061";
            font-size: 14px;
            color: #2a3037;
            transition: transform .3s;
        }
    }

    /* Prev / next. slick sets display inline, so center the glyph without relying on flex */
    .cs-featured__nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        width: 44px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        padding: 0;
        border: 0;
        border-radius: 99px;
        background: #2a3037;
        cursor: pointer;
        transition: background-color .3s;

        &::before {
            font: var(--fa-font-solid);
            font-size: 16px;
            line-height: inherit;
            color: #fff;
        }

        &:hover {
            background: #0e0e1a;
        }
    }

    .cs-featured__nav--prev {
        left: 18px;

        &::before {
            content: "\f053";
        }
    }

    .cs-featured__nav--next {
        right: 18px;

        &::before {
            content: "\f054";
        }
    }

    /* Dots. slick-theme.css is not loaded, so they are styled here */
    .cs-featured__dots .slick-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        list-style: none;
        margin: 25px 0 0;
        padding: 0;

        li {
            line-height: 0;
        }

        button {
            width: 10px;
            height: 10px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: #c4cbd4;
            font-size: 0;
            color: transparent;
            cursor: pointer;
            transition: background-color .3s;
        }

        li.slick-active button {
            background: #2a3037;
        }
    }

    @media screen and (max-width:1199px) {
        .cs-featured__title {
            font-size: 2.2rem;
        }
    }

    @media screen and (max-width:959px) {
        padding-block: 45px 35px;

        .cs-featured__inner {
            padding-inline: 70px;
        }

        .cs-featured__title {
            font-size: 2rem;
            margin-bottom: 25px;
        }

        .cs-featured__nav {
            width: 40px;
            height: 40px;
            line-height: 40px;
        }

        .cs-featured__nav--prev {
            left: 15px;
        }

        .cs-featured__nav--next {
            right: 15px;
        }
    }

    @media screen and (max-width:767px) {
        padding-block: 35px 30px;
        margin-bottom: 45px;

        .cs-featured__inner {
            padding-inline: 20px;
        }

        .cs-featured__link {
            grid-template-columns: minmax(0, 1fr);
            gap: 20px;
        }

        .cs-featured__company {
            font-size: 1.5rem;
        }

        .cs-featured__title {
            font-size: 1.9rem;
            margin-bottom: 20px;
            -webkit-line-clamp: 3;
        }

        .cs-featured__more {
            font-size: 1.5rem;
            padding: 11px 58px 11px 25px;
        }
    }
}