/*
 * OLEA Stories carousel.
 *
 * Smartphone: one large card with a visible continuation.
 * Tablet: two complete cards.
 * Desktop: unchanged WordPress Query Loop grid.
 */

/* JavaScript clones must never appear outside an active carousel layout. */
ul.wp-block-post-template.olea-stories-carousel > .olea-stories-carousel-clone {
    display: none;
}

@media (max-width: 1199px) {
    ul.wp-block-post-template.olea-stories-carousel {
        display: flex !important;
        grid-template-columns: none !important;
        align-items: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        list-style: none;
        box-sizing: border-box;
    }

    ul.wp-block-post-template.olea-stories-carousel::-webkit-scrollbar {
        display: none;
    }

    ul.wp-block-post-template.olea-stories-carousel > li {
        min-width: 0;
        margin: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    ul.wp-block-post-template.olea-stories-carousel > .olea-stories-carousel-clone {
        display: block;
    }

    /*
     * Image, overlay and content share one grid cell. The natural image
     * height therefore continues to determine the card height.
     */
    ul.wp-block-post-template.olea-stories-carousel > li .wp-block-cover {
        display: grid !important;
        grid-template: 1fr / 1fr;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        overflow: hidden;
        padding: 0;
    }

    ul.wp-block-post-template.olea-stories-carousel > li .wp-block-cover__image-background {
        position: relative !important;
        inset: auto !important;
        grid-area: 1 / 1;
        display: block;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        object-fit: contain !important;
    }

    ul.wp-block-post-template.olea-stories-carousel > li .wp-block-cover__background,
    ul.wp-block-post-template.olea-stories-carousel > li .wp-block-cover__inner-container {
        grid-area: 1 / 1;
    }

    ul.wp-block-post-template.olea-stories-carousel > li .wp-block-cover__background {
        position: relative;
        inset: auto;
        z-index: 1;
    }

    ul.wp-block-post-template.olea-stories-carousel .wp-block-cover__inner-container {
        position: relative;
        z-index: 2;
        align-self: stretch;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    ul.wp-block-post-template.olea-stories-carousel .wp-block-cover__inner-container > .wp-block-group {
        width: 100%;
        height: 100%;
        min-height: 0 !important;
        margin: 0;
        padding: 0.75rem 6.5% 1rem !important;
        box-sizing: border-box;
        justify-content: space-between !important;
    }

    ul.wp-block-post-template.olea-stories-carousel .wp-block-post-title {
        margin: 0;
    }

    ul.wp-block-post-template.olea-stories-carousel .wp-block-post-excerpt {
        margin-top: auto;
        margin-bottom: 0;
    }

    ul.wp-block-post-template.olea-stories-carousel .wp-block-post-excerpt__excerpt {
        margin: 0;
    }
}

@media (max-width: 599px) {
    ul.wp-block-post-template.olea-stories-carousel {
        --olea-stories-card-width: 72vw;
        --olea-stories-gap: 6vw;
        gap: var(--olea-stories-gap) !important;
        width: 100vw;
        max-width: none !important;
        margin-right: calc(50% - 50vw) !important;
        margin-left: calc(50% - 50vw) !important;
        padding-top: 0 !important;
        padding-right: calc(100vw - var(--olea-stories-card-width)) !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
    }

    ul.wp-block-post-template.olea-stories-carousel > li {
        flex: 0 0 var(--olea-stories-card-width);
        width: var(--olea-stories-card-width);
    }
}

@media (min-width: 600px) and (max-width: 1199px) {
    ul.wp-block-post-template.olea-stories-carousel {
        --olea-stories-tablet-gap: clamp(1rem, 2.5vw, 2rem);
        --olea-stories-tablet-card-width: calc((100% - var(--olea-stories-tablet-gap)) / 2);
        gap: var(--olea-stories-tablet-gap) !important;
        width: 100%;
        max-width: none !important;
        padding: 0 !important;
        scroll-padding-inline: 0;
    }

    ul.wp-block-post-template.olea-stories-carousel > li {
        flex: 0 0 var(--olea-stories-tablet-card-width);
        width: var(--olea-stories-tablet-card-width);
    }
}

/* Continue the wrapper spacing proportionally on tablets. */
@media (min-width: 782px) and (max-width: 1199px) {
    .story-outer {
        margin-left: clamp(1.5rem, 6vw, 4rem) !important;
        margin-right: clamp(1.5rem, 6vw, 4rem) !important;
    }
}

/* Preserve the existing desktop wrapper spacing exactly. */
@media (min-width: 1200px) {
    .story-outer {
        margin-left: 126px !important;
        margin-right: 126px !important;
    }
}

@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
    ul.wp-block-post-template.olea-stories-carousel {
        scroll-behavior: auto;
    }
}