/* AcSlider - front office */

.acsl-wrap {
    position: relative;
}

.acsl-wrap--full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.acsl {
    position: relative;
    overflow: hidden;
    border-radius: var(--acsl-radius, 0);
    background: #f3f3f3;
}

.acsl-viewport {
    position: relative;
    height: var(--acsl-h-desktop, 480px);
}

/* --- singola slide ---------------------------------------------------- */

.acsl-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    z-index: 0;
    overflow: hidden;
    backface-visibility: hidden;
    text-decoration: none;
}

.acsl-slide.is-active {
    opacity: 1;
    z-index: 2;
}

.acsl-slide.is-leaving {
    z-index: 1;
}

.acsl-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}

.acsl-velo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    pointer-events: none;
}

/* --- altezza automatica ------------------------------------------------
   La slide attiva torna nel flusso e detta l'altezza del contenitore;
   le altre restano sovrapposte e non occupano spazio. */

.acsl--auto .acsl-viewport { height: auto; }
.acsl--auto .acsl-slide.is-active { position: relative; }
.acsl--auto .acsl-img { height: auto; object-fit: unset; }

/* --- testo ------------------------------------------------------------ */

.acsl-testo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    padding: 6%;
    pointer-events: none;
}

.acsl-testo > .acsl-box {
    pointer-events: auto;
}

.acsl-testo--top-left { align-items: flex-start; justify-content: flex-start; }
.acsl-testo--top-center { align-items: flex-start; justify-content: center; }
.acsl-testo--top-right { align-items: flex-start; justify-content: flex-end; }
.acsl-testo--middle-left { align-items: center; justify-content: flex-start; }
.acsl-testo--middle-center { align-items: center; justify-content: center; }
.acsl-testo--middle-right { align-items: center; justify-content: flex-end; }
.acsl-testo--bottom-left { align-items: flex-end; justify-content: flex-start; }
.acsl-testo--bottom-center { align-items: flex-end; justify-content: center; }
.acsl-testo--bottom-right { align-items: flex-end; justify-content: flex-end; }

.acsl-box {
    border-radius: 4px;
}

.acsl-titolo {
    font-size: var(--acsl-fs, 44px);
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 10px;
}

.acsl-sottotitolo {
    font-size: var(--acsl-fs, 18px);
    line-height: 1.45;
    margin: 0;
}

.acsl-pulsante {
    display: inline-block;
    margin-top: 18px;
    padding: 12px 26px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
    background: var(--b-bg, #25b9d7);
    color: var(--b-fg, #fff);
    transition: background-color .2s ease, color .2s ease;
}

.acsl-pulsante:hover,
.acsl-pulsante:focus {
    background: var(--b-bg-h, #1c93ab);
    color: var(--b-fg-h, #fff);
    text-decoration: none;
}

/* --- frecce ----------------------------------------------------------- */

.acsl-freccia {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: var(--acsl-arrow-size, 44px);
    height: var(--acsl-arrow-size, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    cursor: pointer;
    color: var(--acsl-arrow-color, #fff);
    background: var(--acsl-arrow-bg, rgba(0, 0, 0, .35));
    border-radius: var(--acsl-arrow-radius, 50%);
    transition: filter .2s ease, opacity .2s ease;
}

.acsl-freccia:hover {
    filter: brightness(1.25);
}

.acsl-freccia svg {
    width: 55%;
    height: 55%;
}

.acsl-freccia--prec { left: 16px; }
.acsl-freccia--succ { right: 16px; }

.acsl-freccia[disabled] {
    opacity: .3;
    cursor: default;
}

/* --- punti ------------------------------------------------------------ */

.acsl-punti {
    position: absolute;
    z-index: 5;
    display: flex;
    gap: 8px;
    align-items: center;
}

.acsl-punti--bottom-center { bottom: 18px; left: 50%; transform: translateX(-50%); }
.acsl-punti--bottom-left { bottom: 18px; left: 24px; }
.acsl-punti--bottom-right { bottom: 18px; right: 24px; }
.acsl-punti--top-center { top: 18px; left: 50%; transform: translateX(-50%); }

.acsl-punti--under {
    position: static;
    justify-content: center;
    padding: 14px 0 0;
}

.acsl-punto {
    width: var(--acsl-dot-size, 12px);
    height: var(--acsl-dot-size, 12px);
    padding: 0;
    border: 0;
    cursor: pointer;
    background: var(--acsl-dot-color, #fff);
    opacity: .55;
    transition: opacity .2s ease, background-color .2s ease, width .2s ease;
}

.acsl-punti--circle .acsl-punto { border-radius: 50%; }
.acsl-punti--square .acsl-punto { border-radius: 2px; }
.acsl-punti--bar .acsl-punto {
    width: calc(var(--acsl-dot-size, 12px) * 2.6);
    height: calc(var(--acsl-dot-size, 12px) / 2.2);
    border-radius: 2px;
}

.acsl-punto.is-active {
    background: var(--acsl-dot-active, #25b9d7);
    opacity: 1;
}

.acsl-punti--under .acsl-punto {
    opacity: .35;
}

.acsl-punti--under .acsl-punto.is-active {
    opacity: 1;
}

/* --- barra di avanzamento --------------------------------------------- */

.acsl-avanzamento {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    z-index: 5;
    background: rgba(0, 0, 0, .15);
}

.acsl-avanzamento > span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--acsl-progress-color, #25b9d7);
}

/* --- effetto Ken Burns ------------------------------------------------ */

.acsl[data-effect="kenburns"] .acsl-slide.is-active .acsl-img {
    animation: acsl-kenburns 12s ease-out forwards;
}

@keyframes acsl-kenburns {
    from { transform: scale(1) translate(0, 0); }
    to { transform: scale(1.12) translate(-1.5%, -1.5%); }
}

.acsl[data-effect="flip"] .acsl-viewport {
    perspective: 1400px;
}

/* --- responsive ------------------------------------------------------- */

@media (max-width: 1024px) {
    .acsl-viewport { height: var(--acsl-h-tablet, 360px); }
    .acsl--auto .acsl-viewport { height: auto; }
    .acsl-freccia--prec { left: 10px; }
    .acsl-freccia--succ { right: 10px; }
}

@media (max-width: 767px) {
    .acsl-viewport { height: var(--acsl-h-mobile, 260px); }
    .acsl--auto .acsl-viewport { height: auto; }
    .acsl-nascondi-mobile { display: none !important; }
    .acsl-testo { padding: 7% 6%; }
    .acsl-titolo { font-size: var(--acsl-fs-m, 26px); }
    .acsl-sottotitolo { font-size: var(--acsl-fs-m, 14px); }
    .acsl-pulsante { margin-top: 12px; padding: 10px 20px; font-size: 14px; }
    .acsl-box { max-width: 92% !important; }
}

/* Chi ha chiesto meno animazioni non deve subirle. */
@media (prefers-reduced-motion: reduce) {
    .acsl-slide { transition: none !important; }
    .acsl[data-effect="kenburns"] .acsl-slide.is-active .acsl-img { animation: none; }
}