/*
 * Groups TOP (templates/Groups/index.php)
 * Slick slider margin override: remove extra space under dotted slider.
 */

.js-new-groups-slider.slick-dotted.slick-slider {
    margin-bottom: 0 !important;
}

/*
 * New groups slider (TOP)
 * - Align slider flush to the frame edges (cancel .app-gutter px-4)
 * - Keep centerMode peeking slides, while removing visual side gutters
 */

/* Cancel .app-gutter (px-4 = 1rem) so the slider touches the frame edges. */
.js-new-groups-slider {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
}

/*
 * Spacing between slides
 * - Use margin (not padding) so the gap is visible even when slide width is fixed.
 * - Keep outer edges flush by pulling the list back with negative margins.
 */
.js-new-groups-slider .slick-slide {
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

.js-new-groups-slider .slick-list {
    overflow: hidden;
    margin: 0 -8px;
    padding: 0;
    z-index: 0;
}

.js-new-groups-slider .slick-track {
    overflow: hidden;
    z-index: 0;
}

@media (max-width: 480px) {
    .js-new-groups-slider {
        overflow: hidden;
        touch-action: pan-y;
    }

    .js-new-groups-slider .slick-list {
        overflow: hidden;
        touch-action: pan-y;
    }

    .js-new-groups-slider .slick-track {
        overflow: hidden;
        touch-action: pan-y;
    }
}

/* Center emphasis: main slide is larger, side slides are slightly smaller + dimmed. */
.js-new-groups-slider .slick-slide > div {
    transition: transform 220ms ease, opacity 220ms ease;
    transform: scale(0.7);
    opacity: 0.28;
}

.js-new-groups-slider .slick-center > div {
    transform: scale(1.02);
    opacity: 1;
}

/* Height tweak: keep the slider card square (1:1) */
.js-new-groups-slider .aspect-square {
    aspect-ratio: 1 / 1;
}