/*
 * Post Carousel
 * Layout for the [post_carousel] shortcode. Card visuals come from the shared
 * post-lift / post-scroller classes (theme.css, query-loop-block.css,
 * scroller-base.css); this file only handles the Swiper layout of the
 * .post-carousel-scroller container so it can coexist with the theme's
 * .post-scroller instances on the same page.
 */
@media only screen and (min-width: 320px) {
    .post-carousel {
        position: relative;
        margin: 40px 0;
    }
    .post-carousel-title {
        margin-bottom: 20px;
    }

    /* Swiper container */
    .post-carousel-scroller {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .post-carousel-scroller .gb-grid-wrapper {
        flex-wrap: nowrap;
        margin: 0;
        width: 100%;
    }
    .post-carousel-scroller .swiper-wrapper > .gb-grid-column {
        padding: 0;
        flex-shrink: 0;
        width: 100%;
        height: auto;
        position: relative;
        transition-property: transform;
        display: block;
    }
    .post-carousel-scroller .post-lift {
        height: 100%;
    }
    /* Inside article content GP/GB heading and figure rules are more specific
       than the shared post-lift classes, so re-assert the card typography. */
    .post-carousel .post-carousel-scroller figure.post-carousel-image {
        margin: 0;
    }
    .post-carousel .post-carousel-scroller h3.post-lift-title {
        font-size: 16px;
        line-height: 1.3;
        margin: 10px 0;
        min-height: 0;
        overflow-wrap: anywhere;
    }
    .post-carousel .post-carousel-scroller p.post-lift-date {
        font-size: 12px;
        margin: 0 0 5px;
    }
    .post-carousel-scroller .post-carousel-image img {
        object-fit: cover;
        height: var(--post-list-item-image-height);
        width: 100%;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        margin-bottom: 0;
    }
    .post-carousel-scroller .swiper-pagination {
        width: 100%;
        text-align: center;
        position: relative;
        bottom: auto;
        left: auto;
        top: auto;
        margin: 0;
    }
    .post-carousel-scroller .swiper-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    /* Swipe hint sits in the flow above the cards so it never covers an image */
    .post-carousel .post-carousel-hint {
        position: static;
        margin-bottom: 10px;
        min-height: 24px;
    }
}

@media only screen and (min-width: 768px) {
    .post-carousel-scroller {
        overflow: visible;
    }
}

@media only screen and (min-width: 1024px) {
    .post-carousel-hint {
        display: none;
    }
}