/* Shared carousel styles. Theme-agnostic structure with CSS variables
   for visual customisation. Themes set vars on `.cms-carousel` (or any
   ancestor) to restyle without overriding rules.

   Custom properties:
     --cms-carousel-gap         spacing between items (default 1rem)
     --cms-carousel-radius      item corner radius (default 0)
     --cms-carousel-arrow-bg    arrow button background (default #111)
     --cms-carousel-arrow-fg    arrow icon color (default #fff)
     --cms-carousel-arrow-size  arrow button diameter (default 2.5rem)
     --cms-carousel-dot-color   inactive dot color (default rgba(0,0,0,0.25))
     --cms-carousel-dot-active  active dot color (default rgba(0,0,0,0.75))
     --cms-carousel-aspect      item aspect-ratio (default 4/5)
*/
.cms-carousel {
    --cms-carousel-gap: 1rem;
    --cms-carousel-radius: 0;
    --cms-carousel-arrow-bg: #111;
    --cms-carousel-arrow-fg: #fff;
    --cms-carousel-arrow-size: 2.5rem;
    --cms-carousel-dot-color: rgba(0, 0, 0, 0.25);
    --cms-carousel-dot-active: rgba(0, 0, 0, 0.75);
    --cms-carousel-aspect: 4 / 5;

    position: relative;
}

.cms-carousel__track {
    position: relative;
}

.cms-carousel__track .field-gallery {
    display: flex;
    gap: var(--cms-carousel-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.cms-carousel__track .field-gallery::-webkit-scrollbar { display: none; }

.cms-carousel__track .field-gallery__item {
    flex: 0 0 80%;
    scroll-snap-align: start;
    overflow: hidden;
    border-radius: var(--cms-carousel-radius);
}
.cms-carousel__track .field-gallery__item img {
    display: block;
    width: 100%;
    aspect-ratio: var(--cms-carousel-aspect);
    object-fit: cover;
    transition: transform 0.7s ease;
}
.cms-carousel__track .field-gallery__item:hover img {
    transform: scale(1.03);
}

@media (min-width: 640px) {
    .cms-carousel__track .field-gallery__item { flex-basis: 48%; }
}
@media (min-width: 1024px) {
    .cms-carousel__track .field-gallery__item { flex-basis: 32%; }
}

/* Generic (non-gallery) carousels — the track element scrolls directly
   and holds [data-cms-carousel-item] slides (e.g. review cards). Slides
   size themselves (no forced image aspect-ratio); width is set via the
   --cms-carousel-slide custom property so themes can dial it per use.
   Scoped to tracks WITHOUT a .field-gallery so image carousels (whose
   inner .field-gallery is the scroller) are untouched. */
.cms-carousel__track:not(:has(.field-gallery)) {
    display: flex;
    gap: var(--cms-carousel-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.cms-carousel__track:not(:has(.field-gallery))::-webkit-scrollbar { display: none; }
.cms-carousel__track:not(:has(.field-gallery)) > [data-cms-carousel-item] {
    flex: 0 0 var(--cms-carousel-slide, 80%);
    scroll-snap-align: start;
}
@media (min-width: 640px) {
    .cms-carousel__track:not(:has(.field-gallery)) > [data-cms-carousel-item] {
        flex-basis: var(--cms-carousel-slide-sm, 48%);
    }
}
@media (min-width: 1024px) {
    .cms-carousel__track:not(:has(.field-gallery)) > [data-cms-carousel-item] {
        flex-basis: var(--cms-carousel-slide-lg, 32%);
    }
}

/* Arrow buttons — vertically centered, hidden when at edge. */
.cms-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--cms-carousel-arrow-size);
    height: var(--cms-carousel-arrow-size);
    border-radius: 999px;
    border: 0;
    background: var(--cms-carousel-arrow-bg);
    color: var(--cms-carousel-arrow-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.cms-carousel__arrow:hover { transform: translateY(-50%) scale(1.05); }
.cms-carousel__arrow:disabled {
    opacity: 0;
    pointer-events: none;
}
/* Arrows live OUTSIDE the track so they don't cover the imagery.
   Themes can override --cms-carousel-arrow-offset to dial it in. */
.cms-carousel { --cms-carousel-arrow-offset: 3rem; }
.cms-carousel__arrow--prev { left:  calc(-1 * var(--cms-carousel-arrow-offset)); }
.cms-carousel__arrow--next { right: calc(-1 * var(--cms-carousel-arrow-offset)); }
.cms-carousel__arrow svg { width: 50%; height: 50%; }

/* Hide arrows when there's only one item. */
.cms-carousel[data-cms-carousel-single="true"] .cms-carousel__arrow,
.cms-carousel[data-cms-carousel-single="true"] .cms-carousel__dots {
    display: none;
}

/* Dots — centered row beneath the track. */
.cms-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* On narrow viewports there's no room outside the track for absolute
   arrows. Switch the carousel to a grid where the track spans the top
   row and prev / dots / next sit inline on the row below — markup is
   unchanged, only positioning swaps. */
@media (max-width: 768px) {
    .cms-carousel {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            'track track track'
            'prev  dots  next';
        align-items: center;
    }
    .cms-carousel__track       { grid-area: track; }
    .cms-carousel__arrow--prev { grid-area: prev; }
    .cms-carousel__dots        { grid-area: dots; margin-top: 1rem; }
    .cms-carousel__arrow--next { grid-area: next; }
    .cms-carousel__arrow {
        position: static;
        transform: none;
        margin-top: 1rem;
    }
    .cms-carousel__arrow:hover { transform: scale(1.05); }
}
.cms-carousel__dot {
    width: 0.5rem;
    height: 0.5rem;
    border: 0;
    padding: 0;
    border-radius: 999px;
    background: var(--cms-carousel-dot-color);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.cms-carousel__dot:hover { transform: scale(1.2); }
.cms-carousel__dot--active {
    background: var(--cms-carousel-dot-active);
    transform: scale(1.2);
}