/* Carousel style for the Group block */
.wp-block-group.is-style-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    width: 100%;
    gap: 0; /* No gap between slides */
    height: 52.5vw; /* Maintain your original height */
    scroll-behavior: smooth; /* Smooth transitions when programmatically scrolling */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    touch-action: pan-y; /* Allow vertical scrolling while enabling horizontal swipe/drag */
    cursor: grab; /* Cursor gives hint that it's draggable */
    -webkit-overflow-scrolling: touch; /* smoother scrolling on iOS */
}


/* Hide scrollbar for Webkit-based browsers */
.wp-block-group.is-style-carousel::-webkit-scrollbar {
    display: none;
}

/* When actively dragging, show grabbing cursor */
.wp-block-group.is-style-carousel.dragging {
    cursor: grabbing;
    /* Temporarily disable CSS snapping to allow free dragging
       If data-snap="css" is present on the element, JS will not snap
       programmatically and rely on this native CSS snap when released. */
    scroll-snap-type: none;
}

/* Style for child blocks (e.g., Cover blocks) inside the carousel */
.wp-block-group.is-style-carousel > .wp-block-cover {
    flex: 0 0 100vw; /* Each slide is full viewport width */
    height: 100%; /* Fill the Group's height */
    scroll-snap-align: start; /* Snap to the start of each slide */
    margin: 0; /* Override any default margins */
}

/* Optional: remove focus outline on child blocks but preserve accessibility: keep for keyboard users */
.wp-block-group.is-style-carousel > .wp-block-cover:focus {
    outline: none;
}

/* Small visual hint at the edges for more clear position (optional) */
.wp-block-group.is-style-carousel::before,
.wp-block-group.is-style-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12px;
    pointer-events: none;
}
.wp-block-group.is-style-carousel::before {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
}
.wp-block-group.is-style-carousel::after {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.08), transparent);
}

/* Mobile-specific override: fixed carousel height for small screens */
@media (max-width: 575.98px) {
    .wp-block-group.is-style-carousel {
        height: 529px; /* Use fixed 529px height on mobile as requested */
    }
    .wp-block-cover{
        padding: 1.5rem;
    }
}