/**
 * ACC Image Carousel widget styles.
 *
 * Custom properties (set inline per-instance from the widget settings):
 *   --acc-carousel-ratio   aspect ratio of the main image (e.g. 16 / 9)
 *   --acc-thumb-ratio      aspect ratio of each thumbnail
 *   --acc-thumbs           number of thumbnails visible at once
 *   --acc-gap              gap between slides/thumbs
 *   --acc-radius           main image border radius
 *   --acc-thumb-radius     thumbnail border radius
 *   --acc-sel-color        selected thumbnail border colour
 *   --acc-sel-width        selected thumbnail border width (default 1px)
 *   --acc-arrow-color      arrow icon colour
 *   --acc-arrow-bg         arrow background colour
 *   --acc-arrow-size       arrow button width/height
 *   --acc-arrow-font       arrow icon (glyph) size
 *   --acc-arrow-pad        arrow button padding
 *   --acc-arrow-radius     arrow button border radius
 *   --acc-arrow-border-width / --acc-arrow-border-color   arrow button border
 *   --acc-arrow-*-hover    hover-state overrides (color, bg, border-color)
 */

.acc-carousel {
    --acc-carousel-ratio: 16 / 9;
    --acc-thumb-ratio: var(--acc-carousel-ratio);
    --acc-thumbs: 5;
    --acc-gap: 10px;
    --acc-radius: 0px;
    --acc-thumb-radius: 0px;
    --acc-sel-color: #fecb00;
    --acc-sel-width: 1px;
    --acc-arrow-color: #ffffff;
    --acc-arrow-bg: rgba(0, 0, 0, 0.45);
    --acc-arrow-size: 40px;
    --acc-arrow-font: 22px;
    --acc-arrow-pad: 0px;
    --acc-arrow-radius: 50%;
    --acc-arrow-border-width: 0px;
    --acc-arrow-border-color: transparent;
    --acc-arrow-color-hover: var(--acc-arrow-color);
    --acc-arrow-bg-hover: var(--acc-arrow-bg);
    --acc-arrow-border-color-hover: var(--acc-arrow-border-color);
    display: flex;
    flex-direction: column;
    gap: var(--acc-gap);
    width: 100%;
}

/* Main image */
.acc-carousel__main {
    position: relative;
}

.acc-carousel__viewport {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--acc-carousel-ratio);
    border-radius: var(--acc-radius);
    touch-action: pan-y;
}

.acc-carousel__slide img {
    -webkit-user-drag: none;
    user-select: none;
}

.acc-carousel__track {
    display: flex;
    height: 100%;
    transition: transform 0.4s ease;
    will-change: transform;
}

.acc-carousel__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.acc-carousel__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Arrows */
.acc-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--acc-arrow-size);
    height: var(--acc-arrow-size);
    padding: var(--acc-arrow-pad);
    border: var(--acc-arrow-border-width) solid var(--acc-arrow-border-color);
    border-radius: var(--acc-arrow-radius);
    background: var(--acc-arrow-bg);
    color: var(--acc-arrow-color);
    font-size: var(--acc-arrow-font);
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    z-index: 2;
}

.acc-carousel__arrow:hover {
    color: var(--acc-arrow-color-hover);
    background: var(--acc-arrow-bg-hover);
    border-color: var(--acc-arrow-border-color-hover);
}

.acc-carousel__arrow:focus,
.acc-carousel__arrow:active {
    box-shadow: none;
}

.acc-carousel__arrow:focus-visible {
    outline: 2px solid var(--acc-arrow-color);
    outline-offset: 2px;
    box-shadow: none;
}

.acc-carousel__arrow--prev {
    left: 12px;
}

.acc-carousel__arrow--next {
    right: 12px;
}

.acc-carousel--single .acc-carousel__arrow,
.acc-carousel--single .acc-carousel__thumbs {
    display: none;
}

/* Thumbnails */
.acc-carousel__thumbs {
    display: flex;
    gap: var(--acc-gap);
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.acc-carousel__thumbs::-webkit-scrollbar {
    height: 6px;
}

.acc-carousel__thumbs::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
}

.acc-carousel__thumb {
    flex: 0 0 calc((100% - (var(--acc-thumbs) - 1) * var(--acc-gap)) / var(--acc-thumbs));
    padding: 0;
    margin: 0;
    border: var(--acc-sel-width) solid transparent;
    border-radius: var(--acc-thumb-radius);
    background: none;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
    scroll-snap-align: center;
    opacity: 0.6;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

/*
 * Height is driven by the image's own aspect-ratio rather than the flex
 * item's, because aspect-ratio on a flex item with a percentage flex-basis
 * is unreliable on mobile Safari and can collapse the thumbnail height.
 */
.acc-carousel__thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--acc-thumb-ratio);
    object-fit: cover;
    border-radius: inherit;
}

.acc-carousel__thumb:hover {
    opacity: 0.85;
}

.acc-carousel__thumb.is-selected {
    opacity: 1;
    border-color: var(--acc-sel-color);
}

/* Editor placeholder */
.acc-carousel__placeholder {
    padding: 40px 20px;
    text-align: center;
    color: #777;
    background: #f3f4f5;
    border: 1px dashed #c4c4c4;
    border-radius: 6px;
}