/* Short Courses - Frontend */
.laba-portfolio-slider {
    --laba-ps-card-width: min(85vw, 420px);
    --laba-ps-gap: 20px;
    --laba-ps-overlay: rgba(0, 0, 0, 0.5);
    --laba-ps-overlay-hover: rgba(0, 0, 0, 0.25);
    --laba-ps-card-radius: 15px;
    --laba-ps-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --laba-ps-card-shadow-active: 0 4px 20px rgba(0, 0, 0, 0.12);
    --laba-ps-aspect-ratio: 2 / 1;
    --laba-ps-transition-duration: 0.35s;
    --laba-ps-dot-color: #ccc;
    --laba-ps-dot-active: #333;
    --laba-ps-text-color: #fff;
    --laba-ps-card-opacity-inactive: 0.75;
    --laba-ps-card-background-effect: opacity;
    --laba-ps-card-blur-inactive: 4px;
    --laba-ps-margin-top: 12px;
    --laba-ps-margin-bottom: 16px;
    --laba-ps-margin-vertical: 12px;
    --laba-ps-edge-blur: 0;
    --laba-ps-edge-width: 0;
    position: relative;
    width: 100%;
    overflow: visible;
    padding: var(--laba-ps-margin-top) 0 var(--laba-ps-margin-bottom);
    box-sizing: border-box;
}

.laba-ps-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: var(--laba-ps-margin-vertical) 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y pinch-zoom;
}
.laba-ps-viewport:active { cursor: grabbing; }

/* Maschere sfumatura + blur ai bordi (sinistra/destra) per evitare taglio netto */
.laba-ps-edge-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--laba-ps-edge-width);
    max-width: 100%;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.laba-ps-has-edge-mask .laba-ps-edge-mask {
    opacity: 1;
}
.laba-ps-edge-left {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95), transparent);
    -webkit-backdrop-filter: blur(var(--laba-ps-edge-blur));
    backdrop-filter: blur(var(--laba-ps-edge-blur));
}
.laba-ps-edge-right {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95), transparent);
    -webkit-backdrop-filter: blur(var(--laba-ps-edge-blur));
    backdrop-filter: blur(var(--laba-ps-edge-blur));
}

/* Evita che il browser trascini il link (URL) quando si trascina lo slider */
.laba-ps-viewport .laba-ps-card,
.laba-ps-viewport .laba-ps-card * {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Centratura: marginLeft impostato via JS al caricamento e al resize */
.laba-ps-track {
    display: flex;
    gap: var(--laba-ps-gap);
    transition: transform var(--laba-ps-transition-duration) ease-out;
    will-change: transform;
    padding: 0;
    box-sizing: border-box;
}
/* Mobile: una card per volta a tutta larghezza, slider orizzontale (swipe) */
@media (max-width: 768px) {
    .laba-portfolio-slider {
        --laba-ps-card-width: calc(100% - 32px);
        --laba-ps-gap: 16px;
    }
}

.laba-ps-slide {
    flex: 0 0 var(--laba-ps-card-width);
    scroll-snap-align: center;
    padding: 0;
    margin: 0;
}
/* Card in primo piano 100% opacità; in secondo piano: meno opache O blur (scelta in admin) */
.laba-ps-slide .laba-ps-card {
    opacity: var(--laba-ps-card-opacity-inactive, 0.75);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}
.laba-ps-slide.is-active .laba-ps-card {
    opacity: 1;
    filter: none;
}
/* Effetto "Blur leggero" per card in secondo piano */
.laba-portfolio-slider.laba-ps-effect-blur .laba-ps-slide:not(.is-active) .laba-ps-card {
    filter: blur(var(--laba-ps-card-blur-inactive, 4px));
}
/* Effetto "Meno opache": solo opacity, niente blur */
.laba-portfolio-slider.laba-ps-effect-opacity .laba-ps-slide:not(.is-active) .laba-ps-card {
    filter: none;
}

.laba-ps-card {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: var(--laba-ps-aspect-ratio);
    background-size: cover;
    background-position: center;
    background-color: #2a2a2a;
    border-radius: var(--laba-ps-card-radius, 15px);
    overflow: hidden;
    text-decoration: none;
    color: var(--laba-ps-text-color);
    box-shadow: var(--laba-ps-card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: scale(1);
}
/* Testo sempre bianco (o colore impostato), mai blu link in hover – sovrascrive tema */
.laba-portfolio-slider .laba-ps-card,
.laba-portfolio-slider .laba-ps-card:hover,
.laba-portfolio-slider .laba-ps-card:focus,
.laba-portfolio-slider .laba-ps-card:active,
.laba-portfolio-slider .laba-ps-card .laba-ps-content,
.laba-portfolio-slider .laba-ps-card .laba-ps-content * {
    color: var(--laba-ps-text-color) !important;
}
.laba-ps-card:hover {
    transform: scale(1.03);
    box-shadow: var(--laba-ps-card-shadow-active);
}
.laba-ps-slide.is-active .laba-ps-card {
    box-shadow: var(--laba-ps-card-shadow-active);
}
.laba-ps-card:focus-visible { outline: 2px solid var(--laba-ps-text-color); outline-offset: 2px; }

.laba-ps-overlay {
    position: absolute;
    inset: 0;
    background: var(--laba-ps-overlay);
    transition: background 0.3s ease;
    pointer-events: none;
}
.laba-ps-card:hover .laba-ps-overlay,
.laba-ps-slide.is-active .laba-ps-overlay { background: var(--laba-ps-overlay-hover); }

.laba-ps-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    pointer-events: none;
}
.laba-ps-title {
    display: block;
    font-size: var(--laba-ps-title-font-size, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.25em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.laba-ps-subtitle {
    display: block;
    font-size: var(--laba-ps-subtitle-font-size, 0.9rem);
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Dots */
.laba-ps-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 0;
}
.laba-ps-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--laba-ps-dot-color);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}
.laba-ps-dot:hover { filter: brightness(0.85); }
.laba-ps-dot.active {
    background: var(--laba-ps-dot-active);
    transform: scale(1.2);
}

/* Varianti stile dots */
.laba-ps-dots-style-circles-large .laba-ps-dot {
    width: 12px;
    height: 12px;
}
.laba-ps-dots-style-circles-large .laba-ps-dot.active { transform: scale(1.25); }
.laba-ps-dots-style-squares .laba-ps-dot {
    border-radius: 2px;
    width: 10px;
    height: 10px;
}
.laba-ps-dots-style-squares .laba-ps-dot.active { transform: scale(1.15); }
.laba-ps-dots-style-lines .laba-ps-dot {
    width: 24px;
    height: 4px;
    border-radius: 2px;
}
.laba-ps-dots-style-lines .laba-ps-dot.active { transform: scaleX(1.3); }
.laba-ps-dots-style-dashes .laba-ps-dot {
    width: 16px;
    height: 3px;
    border-radius: 2px;
}
.laba-ps-dots-style-dashes .laba-ps-dot.active { transform: scaleX(1.4); }

/* Loop infinito: hint invece dei punti */
.laba-ps-dots-infinite {
    list-style: none;
}
.laba-ps-infinite-hint {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--laba-ps-text-color, #fff);
    opacity: 0.75;
    letter-spacing: 0.05em;
}

/* Active slide: leggermente in evidenza (centro) */
.laba-ps-slide.is-active .laba-ps-card { transform: scale(1.03); }
.laba-ps-slide.is-active .laba-ps-card .laba-ps-overlay { background: var(--laba-ps-overlay-hover); }
