/* ================================================================
   CASE STUDY STACK — matches working cs-stack behavior
   Keeps title/paragraph setup + decor image
================================================================ */

.case-study-highlight {
    --cs-radius: 32px;
    --cs-card-height: 480px;
    --cs-card-pad: clamp(18px, 2.4vw, 30px);
    --cs-title-gap: clamp(18px, 4svh, 40px);

    --cs-top-space: 160px;
    --cs-pin-height: 88svh;
    --cs-media-width: 66%;

    --cs-y-step: 8;
    --cs-z-step: -90;
    --cs-tilt: 15deg;

    --cs-c1-bg: var(--color-teal);
    --cs-c2-bg: var(--color-orange);
    --cs-c3-bg: var(--color-green);

    position: relative;
    width: 100%;
    margin-top: var(--cs-top-space);
    box-sizing: border-box;

    @supports (height: 100svh) {
        --cs-pin-height: 88svh;
    }

    @media (min-width: 991px) {
        --cs-card-height: clamp(368px, calc(var(--cs-pin-height) - 336px), 520px);
        --cs-card-pad: clamp(14px, 1.8vw, 26px);
        --cs-radius: clamp(24px, 3vw, 32px);
    }

    /* ================================================================
       PINNED AREA
       ================================================================ */

    .cs-stack__pin {
        position: relative;
        width: 100%;
        height: var(--cs-pin-height);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cs-stack__inner {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .decor {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            transform: translateY(-100px);
            z-index: 1;
            pointer-events: none;

            @media (min-width: 768px) {
                display: block;
            }
        }
    }

    /* ================================================================
       TITLE + PARAGRAPH SECTION
       ================================================================ */

    .title-text-sec {
        width: 100%;
        max-width: 932px;
        padding: 0 16px;
        margin: 0 auto var(--cs-title-gap);
        text-align: center;
        position: relative;
        z-index: 2;
        box-sizing: border-box;

        .heading {
            padding: 0 0 24px 0;
        }

        .paragraph {
            > * + * {
                margin-top: 1.25em;
            }
        }
    }

    /* ================================================================
       CARD STAGE
       ================================================================ */

    .cs-stack__stage {
        position: relative;
        width: 100%;
        height: var(--cs-card-height);
        perspective: 1600px;
        transform-style: preserve-3d;
        z-index: 2;
    }

    .cs-stack__list {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
    }

    .cs-stack__mobile-carousel {
        display: none;
    }

    /* ================================================================
       CARDS
       ================================================================ */

    .cs-stack__card {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 95%;
        max-width: 1008px;
        height: var(--cs-card-height);
        max-height: var(--cs-card-height);
        min-height: var(--cs-card-height);
        margin: 0 auto;
        border-radius: var(--cs-radius);
        display: flex;
        flex-wrap: wrap;
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform-style: preserve-3d;
        text-decoration: none;
        color: inherit;
        box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
        padding: 8px;
        box-sizing: border-box;

        @media (min-width: 991px) {
            flex-wrap: nowrap;
            padding: var(--cs-card-pad);
        }

        &:nth-child(1) {
            background: var(--cs-c1-bg);
        }

        &:nth-child(2) {
            background: var(--cs-c2-bg);
        }

        &:nth-child(3) {
            background: var(--cs-c3-bg);
        }

        img,
        .cs-stack__image {
            display: block;
            width: 100%;
            max-height: 200px;
            object-fit: cover;
            object-position: center;
            border-radius: 24px;
            order: 1;
            box-sizing: border-box;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            transform: translateZ(0);
            image-rendering: auto;

            @media (min-width: 516px) {
                max-height: 280px;
            }

            @media (min-width: 991px) {
                width: var(--cs-media-width);
                min-width: var(--cs-media-width);
                flex: 0 0 var(--cs-media-width);
                height: calc(var(--cs-card-height) - (var(--cs-card-pad) * 2));
                min-height: 0;
                max-height: none;
                object-fit: cover;
                order: 2;
            }
        }

        .content {
            flex-direction: column;
            padding: 20px 26px 26px 26px;
            order: 2;
            overflow: hidden;

            @media (min-width: 991px) {
                display: flex;
                flex: 1 1 calc(100% - var(--cs-media-width));
                height: 100%;
                min-width: 0;
                order: 1;
                padding: 16px 16px 16px 0px;
            }

            @media (min-width: 1200px) {
                padding: 32px 32px 32px 0px;
            }
        }

        h3 {
            color: var(--color-navy);
            padding-bottom: 24px;
        }

        .summary {
            color: var(--color-navy);
        }
    }

    /* ================================================================
       DESKTOP MID-RANGE
       ================================================================ */

    @media (min-width: 991px) and (max-width: 1300px) {
        --cs-card-height: clamp(352px, calc(var(--cs-pin-height) - 320px), 432px);
    }

    /* ================================================================
       HEIGHT-AWARE COMPACT MODE
       ================================================================ */

    @media (min-width: 991px) and (max-height: 800px) {
        --cs-y-step: 6;
        --cs-z-step: -60;

        .title-text-sec {
            margin-bottom: var(--cs-title-gap);

            .heading {
                padding-bottom: 8px;
            }

            .heading-3 {
                font-size: clamp(32px, 5svh, 56px);
                line-height: 1.02;
            }
        }

        .cs-stack__card {
            .content {
                padding: 13px 16px 13px 0;
            }

            h3 {
                font-size: clamp(22px, 2vw, 30px);
                line-height: 1.05;
            }

            .summary {
                font-size: clamp(14px, 1vw, 16px);
                line-height: 24px;
            }
        }
    }

    @media (min-width: 991px) and (max-height: 700px) {
        --cs-card-height: clamp(320px, calc(var(--cs-pin-height) - 220px), 400px);
        --cs-title-gap: 14px;

        .title-text-sec {
            .heading-3 {
                font-size: clamp(28px, 4.8svh, 44px);
            }
        }

        .cs-stack__card {
            .summary {
                line-height: 22px;
            }
        }
    }

    /* ================================================================
       MOBILE + TABLET CAROUSEL
       ================================================================ */

    @media (max-width: 990px) {
        --cs-card-pad: 8px;
        --cs-title-gap: 24px;
        --cs-radius: 24px;

        overflow-x: hidden;
        overflow-x: clip;
        padding-bottom: 160px;
        box-sizing: border-box;

        .cs-stack__pin {
            height: auto;
            overflow: visible;
            display: block;
        }

        .cs-stack__inner {
            display: block;
            height: auto;
            overflow: visible;
        }

        .title-text-sec {
            margin-bottom: var(--cs-title-gap);

            .heading {
                padding-bottom: 8px;
            }

            .heading-3 {
                font-size: clamp(30px, 8vw, 46px);
                line-height: 1.02;
            }
        }

        .cs-stack__stage--desktop {
            display: none;
        }

        .cs-stack__mobile-carousel {
            display: block;
        }

        .cs-stack__mobile-splide {
            height: auto;
            overflow: visible;
            padding-left: 16px;
            box-sizing: border-box;
        }

        .cs-stack__mobile-splide .splide__track {
            overflow: visible;
        }

        .cs-stack__mobile-splide .splide__slide {
            width: min(82vw, 420px);
            display: flex;
        }

        .cs-stack__mobile-card {
            position: relative;
            width: 100%;
            max-width: none;
            height: auto;
            min-height: clamp(400px, 68svh, 500px);
            max-height: none;
            display: flex;
            flex-wrap: nowrap;
            flex-direction: column;
            padding: var(--cs-card-pad);
            border-radius: var(--cs-radius);
            overflow: hidden;
            box-sizing: border-box;
            text-decoration: none;
            color: inherit;
            box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);

            &.cs-stack__card--1 {
                background: var(--cs-c1-bg);
            }

            &.cs-stack__card--2 {
                background: var(--cs-c2-bg);
            }

            &.cs-stack__card--3 {
                background: var(--cs-c3-bg);
            }

            img,
            .cs-stack__image {
                display: block;
                width: 100%;
                min-width: 0;
                max-width: 100%;
                height: clamp(170px, 30svh, 240px);
                max-height: none;
                object-fit: cover;
                object-position: center;
                border-radius: 18px;
                order: 1;
                flex-shrink: 0;
            }

            .content {
                order: 2;
                padding: 18px 18px 22px;
                flex: 1 1 auto;
                min-height: 0;
                overflow: visible;
                display: flex;
                flex-direction: column;
                gap: 12px;
                box-sizing: border-box;
            }

            h3 {
                font-size: clamp(20px, 5vw, 28px);
                line-height: 1.05;
                padding-bottom: 0;
                display: block;
                flex-shrink: 0;
            }

            .summary {
                flex: 1 1 auto;
                min-height: 0;
                overflow: visible;
                display: block;
                font-size: 14px;
                line-height: 21px;
            }
        }

        .cs-stack__mobile-nav {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 28px 16px 0;
            box-sizing: border-box;

            button {
                flex: 0 0 auto;
                background: none;
                border: none;
                padding: 0;
            }
        }
    }

    @media (min-width: 768px) and (max-width: 990px) {
        --cs-card-pad: 10px;
        --cs-title-gap: 32px;
        --cs-radius: 28px;

        .title-text-sec {
            .heading-3 {
                font-size: clamp(40px, 6vw, 56px);
                line-height: 1.05;
            }
        }

        .cs-stack__mobile-splide {
            padding-left: 40px;
        }

        .cs-stack__mobile-splide .splide__slide {
            width: min(62vw, 560px);
        }

        .cs-stack__mobile-card {
            min-height: clamp(480px, 62svh, 610px);

            img,
            .cs-stack__image {
                height: clamp(224px, 30svh, 320px);
                border-radius: 22px;
            }

            .content {
                padding: 22px 26px 26px;
            }

            h3 {
                font-size: clamp(24px, 3.8vw, 34px);
                line-height: 1.1;
            }

            .summary {
                font-size: 16px;
                line-height: 24px;
            }
        }
    }

    @media (max-width: 767px) and (max-height: 619px) {
        --cs-title-gap: 16px;

        .title-text-sec {
            .heading {
                padding-bottom: 4px;
            }

            .heading-3 {
                font-size: clamp(26px, 7vw, 38px);
                line-height: 1;
            }
        }

        .cs-stack__mobile-card {
            min-height: 350px;

            img,
            .cs-stack__image {
                height: clamp(120px, 26svh, 170px);
            }

            .content {
                padding: 14px 18px 18px;
            }
        }
    }

    /* ================================================================
       REDUCED MOTION
       ================================================================ */

    @media (min-width: 991px) and (prefers-reduced-motion: reduce) {
        .cs-stack__pin {
            height: auto;
            padding: 14vh 0;
            overflow: visible;
        }

        .cs-stack__stage {
            height: auto;
            perspective: none;
            transform-style: flat;
            display: block;
        }

        .cs-stack__list {
            display: grid;
            gap: 24px;
            width: 100%;
            max-width: 1008px;
            height: auto;
            transform-style: flat;
        }

        .cs-stack__card {
            position: relative;
            top: auto;
            left: auto;
            width: calc(100% - 32px);
            max-width: 1008px;
            height: auto;
            min-height: 0;
            max-height: none;
            margin: 0 auto;
            transform: none !important;

            img,
            .cs-stack__image {
                width: var(--cs-media-width);
                min-width: var(--cs-media-width);
                flex: 0 0 var(--cs-media-width);
                max-width: 100%;
                height: auto;
                min-height: 0;
                max-height: 336px;
            }
        }
    }
}