/* /Components/Shared/ImageCarouselComponent.razor.rz.scp.css */
/* CSS for ImageCarouselComponent component */

.carousel[b-3ell4rnxq1] {
    --default-color: #594ae2;
    --carousel-accent: var(--carousel-border-color, var(--default-color, currentColor));
    --carousel-on-accent: #fff;
    --carousel-border-width: 0.25rem;
    --carousel-radius: 1rem;
    --carousel-caption-background: rgb(0 0 0 / 60%);
    --carousel-caption-color: #fff;
    --slides-per-view: 1;
    --slide-gap: 0.75rem;
    --control-size: 2.5rem;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--slide-gap);
}

/* Breakpoints mirror MudBlazor: sm = 600px, md = 960px */
@media (min-width: 600px) {
    .carousel[b-3ell4rnxq1] {
        --slides-per-view: 2;
        --control-size: 3rem;
    }
}

@media (min-width: 960px) {
    .carousel[b-3ell4rnxq1] {
        --slides-per-view: 3;
        --carousel-fade-size: 3rem;
    }
}

/* ---------- Viewport / slides ---------- */

.carousel__viewport[b-3ell4rnxq1] {
    --fade-start-size: 0px;
    --fade-end-size: 0px;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start-size), #000 calc(100% - var(--fade-end-size)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start-size), #000 calc(100% - var(--fade-end-size)), transparent 100%);
}

.carousel__viewport--fade-start[b-3ell4rnxq1] {
    --fade-start-size: var(--carousel-fade-size);
}

.carousel__viewport--fade-end[b-3ell4rnxq1] {
    --fade-end-size: var(--carousel-fade-size);
}

.carousel__container[b-3ell4rnxq1] {
    display: flex;
    margin-inline-start: calc(var(--slide-gap) * -1);
    touch-action: pan-y pinch-zoom;
}

.carousel__slide[b-3ell4rnxq1] {
    flex: 0 0 calc(100% / var(--slides-per-view));
    min-width: 0;
    padding-inline-start: var(--slide-gap);
}

/* ---------- Figure: border, radius, caption anchor ---------- */

.carousel__figure[b-3ell4rnxq1] {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    overflow: hidden;
    border: 0 solid var(--carousel-border-color, transparent);
    border-radius: var(--carousel-radius);
}

.carousel--bordered .carousel__figure[b-3ell4rnxq1] {
    border-width: var(--carousel-border-width);
}

.carousel__image[b-3ell4rnxq1] {
    display: block;
    width: 100%;
    aspect-ratio: var(--carousel-aspect-ratio);
    object-fit: var(--carousel-image-fit);
    user-select: none;
}

/* ---------- Caption ---------- */

.carousel__caption[b-3ell4rnxq1] {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 0.75rem 1rem;
    background: var(--carousel-caption-background);
    color: var(--carousel-caption-color);
}

.carousel__caption-title[b-3ell4rnxq1] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
}

.carousel__caption-description[b-3ell4rnxq1] {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* ---------- Controls ---------- */

.carousel__button[b-3ell4rnxq1] {
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: var(--control-size);
    block-size: var(--control-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--carousel-accent);
    color: var(--carousel-on-accent);
    cursor: pointer;
}

    .carousel__button svg[b-3ell4rnxq1] {
        inline-size: 60%;
        block-size: 60%;
    }

    .carousel__button:disabled[b-3ell4rnxq1] {
        opacity: 0.35;
        cursor: default;
    }

.carousel__button--prev[b-3ell4rnxq1] {
    grid-column: 1;
    grid-row: 1;
}

.carousel__button--next[b-3ell4rnxq1] {
    grid-column: 3;
    grid-row: 1;
}

    .carousel__button--next svg[b-3ell4rnxq1] {
        transform: scaleX(-1);
    }

.carousel__dots[b-3ell4rnxq1] {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.carousel__dot[b-3ell4rnxq1] {
    inline-size: 0.625rem;
    block-size: 0.625rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--carousel-accent);
    opacity: 0.3;
    cursor: pointer;
}

.carousel__dot--selected[b-3ell4rnxq1] {
    opacity: 1;
}

/* ---------- Hero layout: one slide, controls overlaid, no edge fade ---------- */
/* Must stay after the breakpoint rules so it wins at equal specificity. */

.carousel--hero[b-3ell4rnxq1] {
    --slides-per-view: 1;
    grid-template-columns: minmax(0, 1fr);
}

    .carousel--hero .carousel__viewport[b-3ell4rnxq1] {
        grid-column: 1;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .carousel--hero .carousel__dots[b-3ell4rnxq1] {
        grid-column: 1;
    }

    .carousel--hero .carousel__button[b-3ell4rnxq1] {
        grid-column: 1;
        box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 35%);
    }

    .carousel--hero .carousel__button--prev[b-3ell4rnxq1] {
        justify-self: start;
        margin-inline-start: 0.75rem;
    }

    .carousel--hero .carousel__button--next[b-3ell4rnxq1] {
        justify-self: end;
        margin-inline-end: 0.75rem;
    }