/* Three-card queue variant. The original card slider styles remain the base. */
.card-slider--queue {
    --csgs-queue-card-width: 30vw;
    --csgs-queue-side-scale: 0.72;
    --csgs-queue-gap-ratio: 0.06;
    --csgs-queue-half-gap: 3%;
    --csgs-stage-width: 100%;
    --csgs-overview-width: 97vw;
}

@media (min-width: 981px) {
    .card-slider--queue .csgs-layout {
        width: 97vw;
        max-width: 97vw;
    }

    .card-slider--queue .csgs-heading-row,
    .card-slider--queue .csgs-info {
        width: var(--csgs-queue-card-width);
        max-width: var(--csgs-queue-card-width);
    }

    .card-slider--queue .csgs-view-toggle {
        right: calc(50% - (var(--csgs-queue-card-width) / 2) + var(--csgs-control-inset));
    }

    .card-slider--queue .csgs-stage {
        width: 100%;
        height: calc(var(--csgs-queue-card-width) * 4 / 3);
        aspect-ratio: auto;
    }

    .card-slider--queue .csgs-card-visual {
        inset: 0 auto 0 50%;
        width: var(--csgs-queue-card-width);
        transform: translateX(-50%);
    }

    .card-slider--queue .csgs-overview {
        width: 97vw;
        max-width: 97vw;
    }

    .card-slider--queue .csgs-nav--prev {
        left: calc(50% - (var(--csgs-queue-card-width) / 2) - var(--csgs-queue-half-gap) - 1.55rem);
    }

    .card-slider--queue .csgs-nav--next {
        right: calc(50% - (var(--csgs-queue-card-width) / 2) - var(--csgs-queue-half-gap) - 1.55rem);
    }
}

@media (max-width: 980px) {
    .card-slider--queue .csgs-layout {
        width: 90%;
        max-width: 99%;
    }

    .card-slider--queue {
        --csgs-stage-width: min(100%, var(--csgs-card-width));
        --csgs-overview-width: var(--csgs-stage-width);
    }

    .card-slider--queue .csgs-heading-row {
        width: 95%;
        max-width: 99%;
    }

    .card-slider--queue .csgs-info {
        width: 95%;
        max-width: 99%;
    }

    .card-slider--queue .csgs-stage {
        width: var(--csgs-stage-width);
        height: auto;
        aspect-ratio: var(--csgs-card-ratio-width) / var(--csgs-card-ratio-height);
    }

    .card-slider--queue .csgs-card-visual {
        inset: 0;
        width: auto;
        transform: none;
    }

    .card-slider--queue .csgs-overview {
        width: var(--csgs-overview-width);
        max-width: var(--csgs-overview-width);
    }
}

@media (min-width: 981px) and (hover: none), (min-width: 981px) and (pointer: coarse) {
    .card-slider--queue .csgs-nav {
        display: inline-flex;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(-50%) scale(1);
    }
}

@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
    .card-slider--queue .csgs-trigger:hover .csgs-nav,
    .card-slider--queue .csgs-trigger:focus-within .csgs-nav {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%) scale(0.88);
    }

    .card-slider--queue.is-csgs-queue-nav-revealed .csgs-trigger .csgs-nav,
    .card-slider--queue.is-csgs-queue-nav-revealed .csgs-trigger .csgs-nav:focus-visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(-50%) scale(1);
    }

    .card-slider--queue.is-csgs-overview .csgs-trigger .csgs-nav,
    .card-slider--queue.is-csgs-overview-closing .csgs-trigger .csgs-nav {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%) scale(0.88);
    }
}