/* Carousel layout, scrolling, and variants */
/* ==========================================================================
 CAROUSEL SCROLLING INVARIANTS — READ BEFORE EDITING
 --------------------------------------------------------------------------
 This carousel MUST scroll horizontally inside a card with overflow:hidden.
 
 Required conditions (do not break these):
 1) .carousel-track MUST be the scroll container:
 - display: flex
 - flex-wrap: nowrap
 - overflow-x: auto
 - width / max-width: 100%
 - min-width: 0
 
 2) .carousel-slide MUST NOT shrink:
 - flex: 0 0 auto
 
 3) Images size by height + aspect ratio:
 - height: 25vh
 - width: auto
 - max-width: 80vw
 
 Common regression causes:
 - Removing width/max-width/min-width from .carousel-track
 - Changing flex-wrap to wrap
 - Changing .carousel-slide to flex: 1 1 auto
 - Using width: fit-content / max-content anywhere above the track
 
 If horizontal scrolling stops, check:
 track.scrollWidth > track.clientWidth
 --------------------------------------------------------------------------
 Version 2
 */

.carousel {
    position: relative;
    --carouselFadeEps: var(--carousel-fade-eps);
    margin: var(--space-half) 0 calc(var(--space-half) + var(--size-2)) 0;
    
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.carousel-track {
    /* Critical: be container-width so overflow becomes scrollable */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: calc(var(--space-half) + var(--size-3));  /* fixed spacing between images */
    overflow-x: auto;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scroll-padding-left: var(--size-2);
    scroll-padding-right: var(--size-2);
    padding: calc(var(--space-half) - var(--size-2)) var(--size-2);
    scrollbar-width: none;     /* Firefox */
    background: transparent;
}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-slide {
    flex: 0 0 auto;            /* width determined by image aspect ratio */
    scroll-snap-align: start;
    position: relative;        /* anchor ::after border overlay */
    border-radius: var(--radius-inner);
    overflow: hidden;
    isolation: isolate;
    
    /* Avoid showing a different background when lifted */
    background: var(--glass);
}

@media (hover: hover) {
    .carousel-slide:hover {
        box-shadow: 0 var(--size-10) var(--size-22) var(--border-light);
    }
    .carousel-slide:hover img {
        transform: scale(1.01);
    }
}

.carousel-slide:active {
    transform: translateY(0);
}

.carousel-slide img {
    height: var(--carousel-height);              /* fixed height (25% of viewport) */
    width: auto;               /* width follows aspect ratio */
    max-width: var(--carousel-max-width);           /* prevent ultra-wide images from dominating */
    object-fit: contain;
    display: block;
    background: inherit;
    
    transition: filter 140ms ease, transform 140ms ease;
}

@media (hover: hover) {
    .carousel-slide img {
        transition: filter 120ms ease-in-out, transform 140ms ease;
        will-change: filter;
        transform: translateZ(0);
    }
    
    .carousel-slide:hover img {
        filter: contrast(1.03) saturate(1.03);
    }
}

.carousel-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    border: var(--size-1) solid var(--border-soft);
    border-radius: var(--radius-inner);
    pointer-events: none;
}

/* Fallback spacing for browsers without flex gap support */
@supports not (gap: 1rem) {
    .carousel-track .carousel-slide { margin-right: calc(var(--space-half) + var(--size-3)); }
    .carousel-track .carousel-slide:last-child { margin-right: 0; }
}

/* ========================================================================== 
 Single-article page overrides (use class="carousel carousel-single")
 Goal: bigger, wider, more immersive without changing home-page sizing
 ========================================================================== */

.carousel-single {
    width: 100%;
    max-width: none;
}

.carousel-single .carousel-track {
    width: 100%;
    max-width: 100%;
}

/* Make each slide itself capable of expanding on the single-article page.
 (Otherwise the slide width stays driven by the image's intrinsic width.) */
.carousel-single .carousel-slide {
    flex: 0 0 auto;        /* do not shrink */
    width: auto;           /* let content (image) define slide width */
}

/* Single-article: keep the whole image visible (no cropping) while allowing a larger height. */
.carousel-single .carousel-slide img {
    height: var(--carousel-single-height);
    max-height: var(--carousel-max-height);
    width: auto;
    max-width: var(--carousel-max-width);
    object-fit: cover;
    background: inherit;
}

/* Edit-mode carousel variant (used on article edit page) */
.carousel-edit .carousel-slide {
    height: calc(var(--carousel-height) * 0.175);
    display: flex;
    align-items: center;
}

.carousel-edit .carousel-slide img {
    height: 100%;
    max-height: calc(var(--carousel-max-height) * 0.25);
    width: auto;
    max-width: calc(var(--carousel-max-width) * 0.25);
    object-fit: contain;
    background: inherit;
}

/* Drag handle for reorder (edit mode) */
.drag-handle {
    position: absolute;
    right: calc(var(--space-half) + var(--size-2));
    bottom: calc(var(--space-half) + var(--size-2));
    width: var(--size-18);
    height: var(--size-18);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--white);
    font-weight: 800;
    cursor: grab;
    user-select: none;
    z-index: 4;
    pointer-events: auto;
}

.carousel-slide.dragging {
    opacity: 0.6;
}

/* Subtle edge fades for carousel */
/* Subtle edge fades for carousel
 Hidden by default; shown only when JS adds can-scroll-left / can-scroll-right */

.carousel::before,
.carousel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(var(--space-half) + var(--size-2));  /* fade size */
    pointer-events: none;     /* don't block swipes/clicks */
    z-index: 3;
    opacity: 0;               /* default hidden */
    transition: opacity 120ms ease;
}

.carousel::before {
    left: 0;
    background: linear-gradient(to right, var(--glass), var(--overlay-fade));
}

.carousel::after {
    right: 0;
    background: linear-gradient(to left, var(--glass), var(--overlay-fade));
}

/* Only show fades when scrollable in that direction (classes set by JS) */
.carousel.can-scroll-left::before  { opacity: 0.7; }
.carousel.can-scroll-right::after  { opacity: 0.7; }