/* Full-width viewport clipping boundary. */
.single-post-news-carousel-section {
    --news-carousel-gap: 26px;
    --news-carousel-left-offset: 0px;
    --news-carousel-slide-width: 400px;
    position: relative;
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    overflow: hidden;
}

/* Start the carousel at the inner-container edge and extend it to the right viewport edge. */
.single-post-news-carousel {
    position: relative;
    width: calc(100% - var(--news-carousel-left-offset));
    margin-left: var(--news-carousel-left-offset);
}

/* Clip content against the inner-container edge on the initial position. */
.single-post-news-carousel .splide__track {
    overflow: hidden;
    cursor: grab;
    transform: translateX(0);
    transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Allow the previous card to appear toward the left viewport edge after moving. */
.single-post-news-carousel.has-moved .splide__track {
    overflow: visible;
}

/* Move the track left at the final position to create equal right-side space. */
.single-post-news-carousel.is-at-end .splide__track {
    transform: translateX(calc(0px - var(--news-carousel-left-offset)));
}

/* Use the grabbing cursor while dragging. */
.single-post-news-carousel.is-dragging .splide__track {
    cursor: grabbing;
}

/* Use the JavaScript-calculated card width. */
.single-post-news-carousel__slide {
    flex: 0 0 auto;
    width: var(--news-carousel-slide-width) !important;
}

/* Post card. */
.single-post-news-carousel__card {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Featured-image area. */
.single-post-news-carousel__media {
    position: relative;
    display: block;
    width: 100%;
    min-height: 365px;
    overflow: hidden;
       border-radius: 11px;
    background-color: #d8d8d8;
    color: #ffffff;
    aspect-ratio: 1.35 / 1;
    text-decoration: none !important;
}

/* Featured image and fallback placeholder. */
.single-post-news-carousel__image,
.single-post-news-carousel__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 700ms ease;
}

/* Fallback background when a post has no featured image. */
.single-post-news-carousel__placeholder {
    background: linear-gradient(135deg, #555555, #202020);
}

/* Enlarge the featured image slightly on hover. */
.single-post-news-carousel__media:hover .single-post-news-carousel__image {
    transform: scale(1.025);
}

/* Dark gradient over the featured image. */
.single-post-news-carousel__gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 35%, rgba(0, 0, 0, 0.2) 62%, rgba(0, 0, 0, 0.82) 100%);
}

/* Position the post information over the featured image. */
.single-post-news-carousel__content {
    position: absolute;
    z-index: 2;
    right: 24px;
    bottom: 23px;
    left: 24px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

/* Post title. */
.single-post-news-carousel__title {
    display: block;
    max-width: 380px;
    margin-bottom: 13px;
    color: #ffffff;
    font-family: "Rajdhani", sans-serif;
    font-size: clamp(21px, 1.5vw, 27px);
    font-weight: 600;
    line-height: 1.12;
}

/* Discover more link. */
.single-post-news-carousel__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-family: "Rajdhani", sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
}

/* Discover more arrow icon. */
.single-post-news-carousel__link svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 200ms ease;
}

/* Move the Discover more arrow on hover. */
.single-post-news-carousel__media:hover .single-post-news-carousel__link svg {
    transform: translateX(4px);
}

/* Prevent the arrow wrapper from blocking carousel interaction. */
.single-post-news-carousel__arrows {
    pointer-events: none;
}

/* Previous and next navigation buttons. */
.single-post-news-carousel__arrow {
    position: absolute;
    z-index: 10;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    background: rgba(24, 24, 25, 0.65);
    color: #ffffff;
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(-50%);
    transition: opacity 180ms ease, visibility 180ms ease, background-color 180ms ease;
}

/* Navigation button hover and keyboard focus state. */
.single-post-news-carousel__arrow:hover,
.single-post-news-carousel__arrow:focus-visible {
    background: rgba(24, 24, 25, 0.92);
}

/* Navigation arrow icons. */
.single-post-news-carousel__arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Position the previous arrow against the far-left viewport edge. */
.single-post-news-carousel__arrow--prev {
    left: calc(14px - var(--news-carousel-left-offset));
}

/* Position the next arrow against the far-right viewport edge. */
.single-post-news-carousel__arrow--next {
    right: 14px;
}

/* Hide unavailable navigation buttons. */
.single-post-news-carousel__arrow:disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Center the pagination across the full viewport width. */
.single-post-news-carousel .splide__pagination {
    position: relative;
    right: auto;
    bottom: auto;
    left: calc(0px - var(--news-carousel-left-offset));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: calc(100% + var(--news-carousel-left-offset));
    margin: 80px 0 0;
    padding: 0;
    list-style: none;
    transform: none;
}

/* Remove inherited pagination list-item spacing. */
.single-post-news-carousel .splide__pagination li {
    display: flex;
    margin: 0;
    padding: 0;
}

/* Individual pagination dot. */
.single-post-news-carousel .splide__pagination__page {
    display: block;
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(24, 24, 25, 0.25);
    box-shadow: none;
    cursor: pointer;
    transform: scale(1);
    transition: width 200ms ease, border-radius 200ms ease, background-color 200ms ease, transform 200ms ease;
}

/* Pagination dot hover state. */
.single-post-news-carousel .splide__pagination__page:hover {
    background-color: rgba(24, 24, 25, 0.6);
}

/* Active pagination dot. */
.single-post-news-carousel .splide__pagination__page.is-active {
    width: 24px;
    border-radius: 10px;
    background-color: #181819;
    transform: scale(1);
}

/* Pagination dot keyboard focus state. */
.single-post-news-carousel .splide__pagination__page:focus-visible {
    outline: 2px solid #181819;
    outline-offset: 3px;
}

/* Increase the card height on very large desktop screens. */
@media (min-width: 1921px) {
    .single-post-news-carousel-section {
        --news-carousel-gap: 26px;
    }

    .single-post-news-carousel__media {
        min-height: 390px;
    }
}

/* Adjust carousel sizing for tablet screens. */
@media (max-width: 1024px) {
    .single-post-news-carousel-section {
        --news-carousel-gap: 18px;
    }

    .single-post-news-carousel__media {
        min-height: 330px;
    }

    .single-post-news-carousel__content {
        right: 20px;
        bottom: 20px;
        left: 20px;
    }
}

/* Adjust carousel sizing for mobile screens. */
@media (max-width: 767px) {
    .single-post-news-carousel-section {
        --news-carousel-gap: 14px;
    }

    .single-post-news-carousel__media {
        min-height: 360px;
        border-radius: 10px;
        aspect-ratio: 0.92 / 1;
    }

    .single-post-news-carousel__title {
        font-size: 21px;
    }

    .single-post-news-carousel__link {
        font-size: 16px;
    }

    .single-post-news-carousel__arrow {
        width: 40px;
        height: 40px;
    }

    .single-post-news-carousel__arrow--prev {
        left: calc(8px - var(--news-carousel-left-offset));
    }

    .single-post-news-carousel__arrow--next {
        right: 8px;
    }

    .single-post-news-carousel .splide__pagination {
        gap: 7px;
        margin-top: 18px;
    }

    .single-post-news-carousel .splide__pagination__page {
        width: 7px;
        height: 7px;
    }

    .single-post-news-carousel .splide__pagination__page.is-active {
        width: 21px;
    }
}

/* Disable decorative motion when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
    .single-post-news-carousel .splide__track,
    .single-post-news-carousel__image,
    .single-post-news-carousel__link svg {
        transition: none;
    }
}