/**
 * Piotnet Grid Slider — generic 3D pop-out styles.
 * All values are driven by --pgs-* custom properties set per grid
 * (see the pgs_sliders filter); the fallbacks here are the reference design.
 */

/* Container */
.pgs-slider.piotnetgrid-grid {
    position: relative;
    padding: var(--pgs-container-padding, 20px 0 100px 0);
    margin-bottom: 0 !important;
    overflow: hidden;
}

/* Track & list */
.pgs-slider .slick-track {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding-bottom: var(--pgs-track-pad-bottom, 60px);
}

.pgs-slider .slick-list {
    overflow: visible !important;
}

/* Default (side) slide state */
.pgs-slider.piotnetgrid-grid .piotnetgrid-card {
    margin: 0 !important;
    position: relative;
    z-index: 1;
    transition: all var(--pgs-speed, 0.4s) var(--pgs-ease, cubic-bezier(0.25, 1, 0.5, 1)) !important;
    opacity: var(--pgs-side-opacity, 0.5);
    filter: grayscale(var(--pgs-side-grayscale, 100%));
    transform: scale(var(--pgs-side-scale, 0.75));
}

/* Active center slide */
.pgs-slider.piotnetgrid-grid .piotnetgrid-card.slick-center {
    opacity: 1;
    filter: none;
    z-index: 10;
    transform: scale(var(--pgs-center-scale, 1.15));
    box-shadow: var(--pgs-center-shadow, 0 20px 50px rgba(0, 0, 0, 0.25));
    border-radius: var(--pgs-center-radius, 8px);
}

/* The squeeze: pull the flanking cards toward the popped-out center.
   :has() covers modern browsers; .is-left/.is-right are applied by the JS
   on beforeChange so the squeeze animates in sync with the slide. */
.pgs-slider.piotnetgrid-grid .piotnetgrid-card:has(+ .piotnetgrid-card.slick-center),
.pgs-slider.piotnetgrid-grid .piotnetgrid-card.is-left {
    transform: scale(var(--pgs-side-scale, 0.75)) translateX(var(--pgs-squeeze, 18%));
}

.pgs-slider.piotnetgrid-grid .piotnetgrid-card.slick-center + .piotnetgrid-card,
.pgs-slider.piotnetgrid-grid .piotnetgrid-card.is-right {
    transform: scale(var(--pgs-side-scale, 0.75)) translateX(calc(-1 * var(--pgs-squeeze, 18%)));
}

/* Arrows */
.pgs-slider.piotnetgrid-grid .slick-arrow {
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 50%;
    background: var(--pgs-arrow-bg, #0a2342) !important;
    border: 2px solid var(--pgs-arrow-color, #fff);
    cursor: pointer;
    box-shadow: none !important;
    z-index: 20;
    transition: background 0.3s;
    font-size: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.pgs-slider.piotnetgrid-grid .slick-arrow:hover {
    background: var(--pgs-arrow-hover-bg, #1e457a) !important;
    transform: translateY(-50%) !important;
}

.pgs-slider.piotnetgrid-grid .slick-arrow::before {
    font-size: 16px !important;
    color: var(--pgs-arrow-color, #ffffff) !important;
    line-height: 1;
    opacity: 1;
    font-family: sans-serif;
    display: block;
}

.pgs-slider.piotnetgrid-grid .slick-prev::before { content: "\2190"; }
.pgs-slider.piotnetgrid-grid .slick-next::before { content: "\2192"; }

.pgs-slider.piotnetgrid-grid .slick-prev { left: var(--pgs-arrow-offset, 20%); }
.pgs-slider.piotnetgrid-grid .slick-next { right: var(--pgs-arrow-offset, 20%); }

/* Mobile */
@media (max-width: 767px) {
    .pgs-slider.piotnetgrid-grid .piotnetgrid-card {
        transform: scale(var(--pgs-m-side-scale, 0.95)) !important;
        opacity: 1;
        filter: none;
        margin-bottom: 20px !important;
    }
    .pgs-slider.piotnetgrid-grid .piotnetgrid-card.slick-center {
        transform: scale(var(--pgs-m-center-scale, 1)) !important;
        box-shadow: none;
    }
    .pgs-slider.piotnetgrid-grid .slick-arrow {
        top: auto !important;
        bottom: -20px !important;
        transform: none !important;
    }
    .pgs-slider.piotnetgrid-grid .slick-arrow:hover {
        transform: none !important;
    }
    .pgs-slider.piotnetgrid-grid .slick-prev { left: var(--pgs-m-arrow-offset, 35%); }
    .pgs-slider.piotnetgrid-grid .slick-next { right: var(--pgs-m-arrow-offset, 35%); }
}