.pts {
    background-image:
        url('../images/navy-accent.svg'),
        linear-gradient(to bottom, var(--color-blue) 50%, var(--color-white) 50%);
    background-repeat: no-repeat, no-repeat;
    background-position: center center, top left;
    background-size: cover, auto;
    padding: 0 1rem;

    @media (max-width: 767px) {
        padding-top: 0;
    }

    & .pts__inner {
        max-width: var(--container-max-width);
        margin: 0 auto;
        background-color: var(--color-navy);
        border-radius: 20px;
        overflow: hidden;
        padding: 1.5rem;
    }

    /* Slider row: arrow — track — arrow */

    & .pts__slider {
        display: flex;
        align-items: center;
        gap: 1.5rem;

        @media (max-width: 767px) {
            flex-wrap: wrap;
            justify-content: center;
        }
    }

    & .pts__track {
        flex: 1;
        min-width: 0;

        @media (max-width: 767px) {
            flex: 0 0 100%;
        }
    }

    /* Slides */

    & .pts__slide {
        display: none;

        &.is-active {
            display: block;
        }
    }

    & .pts__slide-inner {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        min-height: 320px;

        @media (max-width: 767px) {
            flex-direction: column-reverse;
            align-items: center;
            text-align: center;
        }

        @media (min-width: 768px) {
            flex-direction: row;
            align-items: center;
            gap: 3.5rem;
            min-height: 360px;
        }
    }

    /* Image column */

    & .pts__image-col {
        @media (max-width: 767px) {
            width: 100%;
        }

        @media (min-width: 768px) {
            flex: 0 0 38%;
        }
    }

    & .pts__post-link {
        display: block;
        text-decoration: none;
        color: inherit;

        &:hover .pts__image-box::after {
            opacity: 0;
        }

        &:hover .pts__post-title {
            text-decoration: underline;
        }
    }

    & .pts__image-box {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 15px;
            background: linear-gradient(0deg, rgba(115, 140, 189, 0.50) 0%, rgba(115, 140, 189, 0.50) 100%);
            pointer-events: none;
            z-index: 1;
            transition: opacity 0.2s ease;
        }
    }

    & .pts__image-wrap {
        width: 100%;
        aspect-ratio: 16 / 10;
        border-radius: 15px;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        background-color: var(--color-navy);

        &.pts__image-wrap--blurred {
            position: relative;

            &::before {
                content: '';
                position: absolute;
                inset: -10%;
                background: inherit;
                filter: blur(20px);
            }

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                background-color: rgba(115, 140, 189, 0.5);
                z-index: 0;
            }
        }
    }

    & .pts__image {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        border-radius: 15px;
        transition: opacity 0.2s ease;

        &.pts__image--contained {
            position: absolute;
            inset: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            aspect-ratio: unset;
            border-radius: 0;
            object-fit: contain;
        }
    }

    & .pts__image-placeholder {
        width: 100%;
        aspect-ratio: 16 / 10;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 15px;

        &.pts__image-placeholder--empty {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    & .pts__no-posts {
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.5);
        font-style: italic;
        margin: 0;
        text-align: center;
        padding: 1rem;
    }

    & .pts__post-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--color-white);
        margin: 0.75rem 0 0;
        line-height: 1.4;
        text-align: center;
        transition: color 0.2s ease;

        @media (min-width: 1024px) {
            min-height: 45px;
        }
    }

    /* Content column */

    & .pts__content {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;

        @media (max-width: 767px) {
            align-items: center;
            text-align: center;
        }

        @media (min-width: 768px) {
            flex: 1;
        }
    }

    & .pts__subhead {
        font-size: 18px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: #D8AF5B;
        margin: 0;
    }

    & .pts__title {
        font-family: 'Domine', serif;
        font-size: clamp(1.5rem, 3vw, 2.25rem);
        font-weight: 700;
        color: var(--color-white);
        margin: 0;
        line-height: 1.2;
    }

    & .pts__copy {
        font-size: 1rem;
        line-height: 1.75;
        color: rgba(255, 255, 255, 0.75);
        margin: 0;
    }

    & .pts__read-all {
        align-self: flex-start;

        @media (max-width: 767px) {
            align-self: center;
        }

        &:hover {
            background-color: var(--color-white);
            border-color: var(--color-white);
            color: var(--color-gold);
        }
    }

    /* Arrows */

    & .pts__arrow {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--color-white);
        cursor: pointer;
        padding: 0;
        transition: color 0.2s ease;

        @media (max-width: 767px) {
            display: none;
        }

        &:hover:not(:disabled) {
            color: var(--color-gold);
        }

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

        &:disabled {
            opacity: 0.25;
            cursor: not-allowed;
        }
    }
}