/*
 * SharEvent — Carosello recensioni. Il solo foglio del blocco: lo caricano il
 * sito, quando la pagina ha lo shortcode [sv_recensioni], e il canvas
 * dell'editor GrapesJS. Viene dal plugin SE SEO di sharevent.com; in fondo,
 * marcate, le aggiunte rispetto al disegno di partenza.
 */
.sv-rev {
    --sv-rev-ink: #082F49;
    --sv-rev-muted: #4C6479;
    --sv-rev-accent: #08A7E1;
    --sv-rev-line: #E5EEF3;
    --sv-rev-tint: #F1F7FA;
    --sv-rev-gap: 20px;
    --sv-rev-pad: 64px;
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: var(--sv-rev-ink);
    /* Niente sfondo: il colore lo dà la riga o la colonna che contiene il blocco. */
    background: transparent;
    overflow: hidden;
    -webkit-font-smoothing: antialiased
}

.sv-rev *,
.sv-rev *::before,
.sv-rev *::after {
    box-sizing: border-box
}

.sv-rev__inner {

    margin: 0 auto;
    padding: 0 var(--sv-rev-pad);
    display: flex;
    flex-direction: column;
    gap: 40px
}

.sv-rev__track {
    display: flex;
    gap: var(--sv-rev-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    margin: -10px calc(var(--sv-rev-pad) * -1);
    padding: 10px var(--sv-rev-pad);
    scroll-padding: 0 var(--sv-rev-pad);
    list-style: none
}

.sv-rev__track::-webkit-scrollbar {
    display: none
}

.sv-rev__card {
    flex: 0 0 390px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--sv-rev-line);
    border-radius: 15px;
    box-shadow: 0 4px 14px rgba(8, 47, 73, .06);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0
}

.sv-rev__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    flex-direction: column;
}

.sv-rev__stars {
    display: flex;
    gap: 3px
}

.sv-rev__stars svg {
    width: 22px;
    height: 22px;
    flex: none;
    fill: #FFC642
}

.sv-rev__tag {
    font-size: 12px;
    font-weight: 600;
    color: #0369A1;
    background: var(--sv-rev-tint);
    padding: 5px 10px;
    border-radius: 999px;
    display: none;
}

.sv-rev__text {
    margin: 0;
    flex: 1;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--sv-rev-ink);
    text-wrap: pretty
}

.sv-rev__author {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #EEF3F6;
    padding-top: 18px
}

.sv-rev__avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #E0F0FF;
    color: #0369A1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    overflow: hidden
}

.sv-rev__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sv-rev__who {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.sv-rev__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--sv-rev-ink)
}

.sv-rev__role {
    font-size: 13px;
    color: var(--sv-rev-muted)
}

.sv-rev__nav {
    display: flex;
    gap: 10px;
    justify-content: center
}

.sv-rev__btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid #D9E6EE;
    background: #fff;
    color: var(--sv-rev-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), opacity .15s
}

.sv-rev__btn:hover {
    border-color: var(--sv-rev-accent);
    color: var(--sv-rev-accent)
}

.sv-rev__btn:active {
    transform: scale(.98)
}

.sv-rev__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(8, 167, 225, .18);
    border-color: var(--sv-rev-accent)
}

.sv-rev__btn[disabled] {
    opacity: .4;
    cursor: default;
    border-color: #D9E6EE;
    color: var(--sv-rev-ink)
}

.sv-rev__btn svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

@media (max-width:767px) {
    .sv-rev {
        --sv-rev-pad: 20px
    }

    .sv-rev__inner {
        padding-top: 56px;
        padding-bottom: 56px;
        gap: 28px
    }

    .sv-rev__card {
        padding: 22px
    }
}

/* --- Aggiunte rispetto al riferimento ----------------------------------- */

/* Il voto sotto il cinque: le stelle che mancano restano, spente. */
.sv-rev__stars svg.sv-rev__star--off {
    fill: #D9E6EE
}

/* L'azienda col suo sito: si legge come il resto della riga, si capisce al passaggio. */
/* L'azienda in neretto, col suo link o senza. */
.sv-rev__company {
    font-weight: 700
}

.sv-rev__role a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #C9D9E3;
    text-underline-offset: 2px
}

.sv-rev__role a:hover {
    color: var(--sv-rev-accent);
    text-decoration-color: currentColor
}

/*
 * Temi e builder danno margini e rientri a ul, li e p: qui non devono arrivare.
 *
 * Ai lati il binario occupa anche il margine della sezione: lì spunta un pezzo
 * della scheda precedente e della successiva (il margine meno lo spazio fra le
 * schede, 44px su schermo largo), per dire che il carosello continua. Le
 * schede intere restano dentro il contenuto: la loro larghezza si calcola sul
 * 100% del binario, che non conta il margine.
 */
.sv-rev ul.sv-rev__track {
    margin: -10px calc(var(--sv-rev-pad) * -1);
    padding: 10px var(--sv-rev-pad);
    scroll-padding: 0 var(--sv-rev-pad)
}

.sv-rev li.sv-rev__card {
    list-style: none
}

.sv-rev li.sv-rev__card::marker {
    content: none
}

.sv-rev p.sv-rev__text {
    margin: 0;
    padding: 0
}

/*
 * Schede tutte della stessa altezza (400px; il riferimento era 480): il testo
 * che non ci sta finisce coi puntini, e con un clic sul testo la scheda si
 * allunga fino a mostrarlo tutto. Le righe del taglio le conta recensioni.js
 * sullo spazio che resta: un'etichetta su due righe ne toglie una al testo.
 */
.sv-rev ul.sv-rev__track {
    align-items: flex-start
}

/*
 * Quante schede per schermata: --sv-rev-n lo scrive la resa sulla sezione
 * (parametro del blocco, 4 se non dice altro). Sotto lo schermo largo se ne
 * tolgono: tre, poi due, poi una con l'inizio della successiva che si vede.
 */
.sv-rev {
    --sv-rev-n: 4
}

.sv-rev__card {
    --sv-rev-vis: var(--sv-rev-n);
    flex: 0 0 calc((100% - (var(--sv-rev-vis) - 1) * var(--sv-rev-gap)) / var(--sv-rev-vis));
    min-width: 0;
    --sv-rev-card-h: 400px;
    height: var(--sv-rev-card-h);
    overflow: hidden;
    transition: height .45s cubic-bezier(.4, 0, .2, 1)
}

.sv-rev p.sv-rev__text {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--sv-rev-righe, 9);
    line-clamp: var(--sv-rev-righe, 9)
}

/*
 * L'autore apre la scheda, sopra le stelle, coi colori del riferimento: la
 * linea che nel riferimento lo separa dal testo sopra qui lo separa da quello
 * che viene sotto.
 */
.sv-rev__card .sv-rev__author {
    margin: 0;
    padding: 0 0 18px;
    border-top: 0;
    border-bottom: 1px solid #EEF3F6
}

/* Sul .it tre schede già sotto i 1500px (l'originale: sotto i 1200px). */
@media (max-width:1499px) {
    .sv-rev__card {
        --sv-rev-vis: min(var(--sv-rev-n), 3)
    }
}

@media (max-width:1023px) {
    .sv-rev__card {
        --sv-rev-vis: min(var(--sv-rev-n), 2)
    }
}

/*
 * Da telefono una scheda sola, al centro, e un pezzo di 24px della precedente
 * e della successiva ai due lati.
 */
@media (max-width:767px) {
    .sv-rev__card {
        flex-basis: calc(100% - 48px);
        scroll-snap-align: center
    }
}

.sv-rev__card--aperta p.sv-rev__text {
    display: block;
    max-height: none !important;
    -webkit-line-clamp: unset;
    line-clamp: none
}

/*
 * Il richiamo. L'ultima riga del testo tagliato sfuma (una maschera sul testo
 * stesso: niente velo bianco sopra, che lasciava intravedere le lettere), e
 * subito sotto c'è una freccia che scende e risale piano. La freccia è fuori
 * dal flusso, così non toglie righe: la sua altezza la mette recensioni.js,
 * a 6px dalla fine del testo. Aperta la scheda va in fondo, girata verso
 * l'alto e ferma. Nelle recensioni che stanno tutte nella scheda non c'è.
 */
.sv-rev__card {
    position: relative
}

.sv-rev__card--lunga:not(.sv-rev__card--aperta) p.sv-rev__text {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), rgba(0, 0, 0, .08));
    mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), rgba(0, 0, 0, .08))
}

.sv-rev__more {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    display: none;
    align-items: center;
    justify-content: center;
    height: 24px;
    color: var(--sv-rev-accent);
    cursor: pointer
}

/* Il testo tagliato si apre col clic: lo dice anche il puntatore. */
.sv-rev__card--lunga p.sv-rev__text {
    cursor: pointer
}

.sv-rev__card--lunga .sv-rev__more {
    display: flex
}

.sv-rev__card--aperta .sv-rev__more {
    top: auto !important;
    bottom: 4px
}

.sv-rev__more svg {
    width: 24px;
    height: 24px;
    padding: 3px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--sv-rev-line), 0 2px 6px rgba(8, 47, 73, .1);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1)
}

.sv-rev__card--lunga:not(.sv-rev__card--aperta) .sv-rev__more svg {
    animation: sv-rev-richiamo 1.8s ease-in-out infinite
}

.sv-rev__card--aperta .sv-rev__more svg {
    transform: rotate(180deg)
}

@keyframes sv-rev-richiamo {

    0%,
    100% {
        transform: translateY(-1px);
        opacity: .6
    }

    50% {
        transform: translateY(2px);
        opacity: 1
    }
}

@media (prefers-reduced-motion:reduce) {
    .sv-rev__card {
        transition: none
    }

    .sv-rev__card--lunga:not(.sv-rev__card--aperta) .sv-rev__more svg {
        animation: none
    }
}

/*
 * Le frecce del carosello. Il tema dà ai button bordo rosso, angoli vivi e
 * rientri suoi, e vince sulle regole sopra: qui la selezione è più forte e
 * le proprietà che il tema tocca sono forzate. Blu del marchio, piene al
 * passaggio del mouse.
 */
.sv-rev .sv-rev__nav button.sv-rev__btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #0369A1 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #0369A1 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    text-transform: none !important
}

.sv-rev .sv-rev__nav button.sv-rev__btn:hover,
.sv-rev .sv-rev__nav button.sv-rev__btn:focus-visible {
    background: #0369A1 !important;
    border-color: #0369A1 !important;
    color: #fff !important
}

.sv-rev .sv-rev__nav button.sv-rev__btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(3, 105, 161, .25) !important
}

.sv-rev .sv-rev__nav button.sv-rev__btn[disabled],
.sv-rev .sv-rev__nav button.sv-rev__btn[disabled]:hover {
    background: #fff !important;
    border-color: #D9E6EE !important;
    color: #9FB3C2 !important;
    opacity: 1 !important;
    cursor: default !important
}

/*
 * Il trascinamento col mouse (recensioni.js). La mano aperta solo con un mouse
 * e solo se c'è qualcosa da scorrere; durante il tiro la mano chiusa, niente
 * selezione del testo e niente scatto sulle schede, che riporterebbe indietro
 * il binario a ogni movimento.
 */
@media (hover:hover) and (pointer:fine) {
    .sv-rev--scorre .sv-rev__track {
        cursor: grab
    }
}

.sv-rev--trascina .sv-rev__track {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    -webkit-user-select: none;
    user-select: none
}

.sv-rev--trascina .sv-rev__track * {
    cursor: grabbing !important
}