/* ==========================================================================
   FAP Case Gallery — slider with pagination dots
   Default aspect ratio 3:2; one slide visible at a time.
   ========================================================================== */

.fap-case-gallery {
    --fap-gallery-ratio: 3 / 2;
    --fap-gallery-radius: 10px;
    --fap-gallery-dot: 12px;
    --fap-gallery-dot-gap: 10px;
    --fap-gallery-dot-color: #d6dcde;
    --fap-gallery-dot-active: #73C0DB;

    position: relative;
    width: 100%;
}

.fap-case-gallery__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.fap-case-gallery__track::-webkit-scrollbar { display: none; }

.fap-case-gallery__tile {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    background: #f0f2f3;
}

.fap-case-gallery__media {
    width: 100%;
    aspect-ratio: var(--fap-gallery-ratio);
    overflow: hidden;
}
.fap-case-gallery__media img,
.fap-case-gallery__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sensitive blur — removed when tile gets .is-revealed */
.fap-case-gallery__tile.is-sensitive .fap-case-gallery__media img,
.fap-case-gallery__tile.is-sensitive .fap-case-gallery__media video {
    filter: blur(22px);
    transform: scale(1.05);
    transition: filter .25s ease;
}
.fap-case-gallery__tile.is-sensitive.is-revealed .fap-case-gallery__media img,
.fap-case-gallery__tile.is-sensitive.is-revealed .fap-case-gallery__media video {
    filter: none;
    transform: none;
}

.fap-case-gallery__reveal {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: transparent;
    color: #fff;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    transition: background .2s ease, opacity .25s ease, visibility .25s ease;
}
.fap-case-gallery__reveal:hover {
    background: rgba(0, 0, 0, .35);
}
.fap-case-gallery__reveal-label {
    background: rgba(0, 0, 0, .55);
    padding: 8px 14px;
    border-radius: 999px;
}
.fap-case-gallery__tile.is-revealed .fap-case-gallery__reveal {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Pagination dots */
.fap-case-gallery__dots {
    display: flex;
    justify-content: center;
    gap: var(--fap-gallery-dot-gap);
    margin-top: 14px;
}
.fap-case-gallery__dot {
    width: var(--fap-gallery-dot);
    height: var(--fap-gallery-dot);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--fap-gallery-dot-color);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.fap-case-gallery__dot.is-active {
    background: var(--fap-gallery-dot-active);
    transform: scale(1.15);
}
.fap-case-gallery__dot:focus-visible {
    outline: 2px solid var(--fap-gallery-dot-active);
    outline-offset: 2px;
}