/*
 * Parkland Homepage Card Carousel
 * Native CSS scroll-snap; no slider framework and no third-party dependency.
 * Apply `parkland-card-carousel` to the Kadence Row Layout that directly
 * contains the service/package cards.
 */

.parkland-card-carousel {
    --parkland-carousel-gap: 24px;
    --parkland-carousel-columns: 4;
    --parkland-carousel-peek: 0px;
    position: relative;
}

/* Kadence Row Layout normally renders this child as a CSS grid. */
.parkland-card-carousel > .kt-row-column-wrap,
.parkland-card-carousel > .kt-row-layout-inner > .kt-row-column-wrap,
.parkland-card-carousel .parkland-carousel-track {
    display: flex !important;
    grid-template-columns: none !important;
    gap: var(--parkland-carousel-gap) !important;
    align-items: stretch;
    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;
    padding-bottom: 2px;
}

.parkland-card-carousel > .kt-row-column-wrap::-webkit-scrollbar,
.parkland-card-carousel > .kt-row-layout-inner > .kt-row-column-wrap::-webkit-scrollbar,
.parkland-card-carousel .parkland-carousel-track::-webkit-scrollbar {
    display: none;
}

.parkland-card-carousel > .kt-row-column-wrap > *,
.parkland-card-carousel > .kt-row-layout-inner > .kt-row-column-wrap > *,
.parkland-card-carousel .parkland-carousel-track > * {
    flex: 0 0 calc(
        (100% - (var(--parkland-carousel-gap) * (var(--parkland-carousel-columns) - 1)) - var(--parkland-carousel-peek))
        / var(--parkland-carousel-columns)
    ) !important;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

/*
 * Equal-height cards without extra Gutenberg classes.
 * The track already uses align-items: stretch, so each direct slide adopts the
 * height of the tallest card in the current carousel. The Kadence inner column
 * is then turned into a vertical flex layout so the price/booking area can sit
 * consistently at the bottom even when titles/descriptions have different
 * lengths.
 */
.parkland-card-carousel .parkland-carousel-track > * {
    align-self: stretch !important;
    display: flex !important;
    height: auto !important;
}

.parkland-card-carousel .parkland-carousel-track > * > .kt-inside-inner-col {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    height: auto !important;
}

/* Fallback for a Group/Column card that is not a Kadence column. */
.parkland-card-carousel .parkland-carousel-track > *.parkland-carousel-card {
    flex-direction: column;
}

/*
 * Bottom-align the price + CTA pair without requiring any extra Gutenberg
 * classes. In the Parkland appointment cards the final two direct blocks are
 * the price paragraph and the booking shortcode/output. Making the
 * penultimate block consume all spare vertical space keeps both elements on
 * the same baseline across cards with different title/description lengths.
 *
 * The JS-added classes remain as a secondary/future-safe hook, but these
 * structural selectors are deliberately the primary rule because WordPress
 * shortcodes do not always preserve a .wp-block-shortcode wrapper on the
 * frontend.
 */
.parkland-card-carousel .parkland-carousel-track > * > .kt-inside-inner-col > :nth-last-child(2),
.parkland-card-carousel .parkland-carousel-price {
    margin-top: auto !important;
}

.parkland-card-carousel .parkland-carousel-track > * > .kt-inside-inner-col > :last-child,
.parkland-card-carousel .parkland-carousel-cta {
    margin-top: 12px !important;
}

/* Booking shortcode output can contain its own wrapper; keep it full width. */
.parkland-card-carousel .parkland-carousel-track > * > .kt-inside-inner-col > :last-child {
    width: 100%;
}

.parkland-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

.parkland-carousel-arrow {
    appearance: none;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: #fff;
    color: var(--global-palette1, #176b35);
    cursor: pointer;
    line-height: 1;
    transition: opacity .18s ease, background-color .18s ease, transform .18s ease;
}

.parkland-carousel-arrow:hover:not(:disabled),
.parkland-carousel-arrow:focus-visible:not(:disabled) {
    background: var(--global-palette8, #f3f8f1);
}

.parkland-carousel-arrow:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.parkland-carousel-arrow:disabled {
    opacity: .28;
    cursor: default;
}

.parkland-carousel-arrow svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.parkland-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.parkland-carousel-dot {
    appearance: none;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: currentColor;
    color: #777;
    opacity: .42;
    cursor: pointer;
}

.parkland-carousel-dot.is-active {
    opacity: 1;
    color: var(--global-palette1, #176b35);
}

.parkland-carousel-dot:focus-visible {
    outline: 2px solid var(--global-palette1, #176b35);
    outline-offset: 3px;
}

/* Tablet: two cards. */
@media (max-width: 1024px) {
    .parkland-card-carousel {
        --parkland-carousel-columns: 2;
        --parkland-carousel-gap: 20px;
    }
}

/* Mobile: one full card plus a small visible portion of the next one. */
@media (max-width: 767px) {
    .parkland-card-carousel {
        --parkland-carousel-columns: 1;
        --parkland-carousel-gap: 14px;
        --parkland-carousel-peek: 34px;
    }

    .parkland-carousel-controls {
        margin-top: 14px;
        gap: 12px;
    }

    /* Swipe is primary on touch devices; arrows stay available but compact. */
    .parkland-carousel-arrow {
        width: 36px;
        height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .parkland-card-carousel > .kt-row-column-wrap,
    .parkland-card-carousel > .kt-row-layout-inner > .kt-row-column-wrap,
    .parkland-card-carousel .parkland-carousel-track {
        scroll-behavior: auto;
    }
}