.why-esa {
    position: relative;
    background-color: var(--color-black);
    /* Mobile: no right padding so the slider peek bleeds to the screen edge */
    padding: 8rem 0rem 5rem 2.25rem;

    @media (min-width: 768px) {
        padding: 10rem 2.25rem 5rem 2.25rem;
    }

    /* Bricks' container styles (flex-row, no auto margins) don't suit
       hand-rendered markup: stack children and center the container. */
    .brxe-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 87.5rem;
        margin-inline: auto;
    }

    /* Mobile-first: heading stacked, full-width button */
    .head {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
        padding-bottom: 2.5rem;
        /* Compensate for the section's missing right padding on mobile */
        padding-right: 2.25rem;

        @media (min-width: 768px) {
            padding-right: 0;
        }

        .section-title {
            color: var(--color-white);
            font-size: var(--text-h4);
            line-height: 1.05;
            margin: 0;
        }

        .brxe-button {
            justify-content: center;
            text-align: center;
        }

        @media (min-width: 768px) {
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-end;
            justify-content: space-between;
            gap: 2rem;

            .section-title {
                max-width: 24ch;
            }

            .brxe-button {
                width: auto;
                /* Hug the right side of the section */
                margin-left: auto;
            }
        }
    }

    /* Desktop structure: plain grid, hidden on mobile */
    .cards-grid {
        display: none;

        @media (min-width: 768px) {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.625rem;
        }
    }

    /* Mobile structure: Splide slider, hidden on desktop */
    .why-slider {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 0; /* keep flex from sizing the slider to its slides */
        visibility: visible; /* override Splide's pre-init hiding */
        padding-bottom: 3.25rem;

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

    .splide__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .splide__slide {
        margin: 0;
        padding: 0;
    }

    /* Controls row below the slider: arrows at the edges, square dots centered */
    .splide__arrow {
        position: absolute;
        top: auto;
        bottom: 0;
        transform: none;
        width: auto;
        height: auto;
        padding: 0.25rem;
        background: none;
        border: 0;
        border-radius: 0;
        color: var(--color-white);
        opacity: 1;
        cursor: pointer;

        svg {
            fill: none;
            width: 1.25rem;
            height: 1.25rem;
        }
    }

    .splide__arrow--prev {
        left: 0;
        padding-left: 1rem;
        svg {
            transform: scale(1);
        }
    }

    .splide__arrow--next {
        right: 0;
        padding-right: 3rem;
    }

    .splide__pagination {
        position: absolute;
        left: 50%;
        transform: translateX(-55%);
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0;
        margin: 0;

        li {
            display: inline-flex;
            margin: 0;
        }
    }

    .splide__pagination__page {
        width: 0.5rem;
        height: 0.5rem;
        padding: 0;
        margin: 0;
        background: none;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 0;
        opacity: 1;
        transform: none;
        transition: background-color 0.2s ease, border-color 0.2s ease;

        &.is-active {
            background-color: var(--color-blue);
            border-color: var(--color-blue);
            transform: none;
        }
    }

}

.why-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-height: 600px;
    aspect-ratio: 449 / 600;
    overflow: hidden;
    background-color: var(--color-offblack);

    .image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(100%);
        transition: filter 0.45s ease, transform 0.45s ease;
    }

    /* Legibility gradient over the photo */
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 35%, rgba(0, 0, 0, 0.85) 100%);
        pointer-events: none;
        z-index: 1;
    }

    .content {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 1.5rem;
    }

    .num {
        display: block;
        color: var(--color-blue);
        padding-bottom: 0.5rem;
    }

    .card-title {
        color: var(--color-white);
        font-family: var(--font-heading);
        font-size: var(--text-h4);
        line-height: 1.15;
        margin: 0;
    }

    /* Hidden until hover: grid-rows 0fr -> 1fr expands and "raises" the title */
    .reveal {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.45s ease;

        .reveal-inner {
            overflow: hidden;
        }
    }

    .paragraph {
        color: var(--color-white);
        font-size: 0.875rem;
        line-height: 1.5;
        padding: 1rem 0 1rem 0;
        margin: 0;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .card-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--color-white);
        font-family: var(--font-buttons);
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        text-decoration: none;
        margin-top: 1.5rem;
        opacity: 0;
        transition: opacity 0.3s ease 0.1s;

        &:hover {
            color: var(--color-blue);
        }
    }

    &:hover,
    &:focus-within,
    &.is-active {
        .image {
            filter: grayscale(0%);
            transform: scale(1.03);
        }

        .reveal {
            grid-template-rows: 1fr;
        }

        .paragraph,
        .card-cta {
            opacity: 1;
        }
    }
}