/* ==========================================================================
   BB Coverflow
   Slider piano (striscia di foto) ritagliato ad arco tramite maschera CSS
   (mask-image). Fuori dall'arco l'elemento e' trasparente: si vede lo sfondo
   reale, anche non uniforme (immagine/gradiente). Le frecce, dentro l'elemento
   mascherato, vengono ritagliate ad arco.

   Variabili:
   --bb-cf-height   altezza striscia (impostata dal JS: larghezza card * rapporto)
   --bb-cf-radius   raggio bordi card (inline dal render)
   --bb-cf-expand   espansione orizzontale della maschera in px (inline dal render)
   NB: il path della maschera ha un arco "basso" (curve poco profonde) cosi' la
   fascia centrale visibile resta alta (~74% dell'altezza); gli archi restano
   ancorati agli angoli, quindi la curva attraversa con continuita' tutta la
   striscia.
   La larghezza della card e' impostata da Swiper (slidesPerView numerico).
   ========================================================================== */

.bb-coverflow {
    position: relative;
    width: 100%;
    height: var(--bb-cf-height, 340px);
    margin: 0 auto;

    /* Maschera ad arco (curva sup/inf trasparente). Il path e' lo stesso vettore
       fornito, usato come "buco" via fill-rule evenodd su un rettangolo pieno.
       L'espansione orizzontale spinge le estremita' curve oltre i bordi, cosi'
       ai margini non resta l'arrotondamento. */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,1582,337'%20preserveAspectRatio='none'%3E%3Cpath%20fill-rule='evenodd'%20d='M0,0H1582V337H0ZM1574.05,0C1582.42,0,1585.02,3.88916,1577.05,5.76205C1548.76,12.4075,1471.97,18.5861,1355.42,23.4229C1205.73,29.635,1002.7,40.0259,791,40.0259C579.301,40.0259,376.272,29.635,226.578,23.4229C110.025,18.5861,33.2391,12.4075,4.95171,5.76206C-3.02048,3.88918,-0.42301,0,7.95404,0L1574.05,0ZM1574.05,337C1582.42,337,1585.23,332.944,1577.32,330.9454C1549.25,323.8588,1472.35,317.269,1355.42,312.1132C1205.73,305.5126,998.635,290.7634,786.936,290.7634C575.236,290.7634,376.272,305.5126,226.578,312.1132C109.653,317.269,32.7491,323.8588,4.68221,330.9454C-3.2323,332.944,-0.423012,337,7.95404,337H1574.05Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,1582,337'%20preserveAspectRatio='none'%3E%3Cpath%20fill-rule='evenodd'%20d='M0,0H1582V337H0ZM1574.05,0C1582.42,0,1585.02,3.88916,1577.05,5.76205C1548.76,12.4075,1471.97,18.5861,1355.42,23.4229C1205.73,29.635,1002.7,40.0259,791,40.0259C579.301,40.0259,376.272,29.635,226.578,23.4229C110.025,18.5861,33.2391,12.4075,4.95171,5.76206C-3.02048,3.88918,-0.42301,0,7.95404,0L1574.05,0ZM1574.05,337C1582.42,337,1585.23,332.944,1577.32,330.9454C1549.25,323.8588,1472.35,317.269,1355.42,312.1132C1205.73,305.5126,998.635,290.7634,786.936,290.7634C575.236,290.7634,376.272,305.5126,226.578,312.1132C109.653,317.269,32.7491,323.8588,4.68221,330.9454C-3.2323,332.944,-0.423012,337,7.95404,337H1574.05Z'/%3E%3C/svg%3E");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: calc(100% + 2 * var(--bb-cf-expand, 0px)) 100%;
    mask-size: calc(100% + 2 * var(--bb-cf-expand, 0px)) 100%;
}

/* --- SLIDER (striscia) --- */
.bb-coverflow .bb-coverflow-swiper {
    position: absolute;
    inset: 0;
    height: 100%;
    z-index: 1;
}

.bb-coverflow .bb-coverflow-swiper .swiper-wrapper {
    height: 100%;
}

/* La larghezza e' impostata da Swiper (slidesPerView numerico); qui solo
   altezza piena, bordi e sfondo placeholder. */
.bb-coverflow .bb-coverflow-slide {
    height: 100%;
    border-radius: var(--bb-cf-radius, 0px);
    overflow: hidden;
    background: #ececec;
}

.bb-coverflow .bb-coverflow-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   FRECCE + OVERLAY (solo desktop in hover, ritagliate dalla maschera ad arco)
   Stesso linguaggio visivo del carosello projects.
   ========================================================================== */
.bb-coverflow .bb-coverflow-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto;
    margin-top: 0;
    width: 4rem;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    color: #fff;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition-property: opacity, transform;
    transition-duration: 300ms;
    z-index: 2;
}

/* Nasconde la glyph di default di Swiper: usiamo l'SVG nel markup */
.bb-coverflow .bb-coverflow-nav::after {
    display: none;
}

.bb-coverflow .bb-coverflow-nav svg {
    width: 2.5rem;
    height: 2.5rem;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
    transition: transform 300ms ease;
}

.bb-coverflow .swiper-button-prev {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) !important;
}

.bb-coverflow .swiper-button-next {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) !important;
}

/* Comparsa in hover solo su dispositivi con puntatore fine (desktop) */
@media (hover: hover) and (pointer: fine) {
    .bb-coverflow:hover .bb-coverflow-nav {
        opacity: 1;
    }

    .bb-coverflow .swiper-button-prev:hover svg {
        transform: translateX(-4px);
    }

    .bb-coverflow .swiper-button-next:hover svg {
        transform: translateX(4px);
    }
}

/* Su touch le frecce restano nascoste: si naviga in swipe */
@media (hover: none), (pointer: coarse) {
    .bb-coverflow .bb-coverflow-nav {
        display: none;
    }
}

/* Frecce disabilitate (loop off, ai capi) */
.bb-coverflow .swiper-button-disabled {
    opacity: 0 !important;
    pointer-events: none;
}

/* Avviso editor quando manca la selezione */
.bb-coverflow-empty {
    padding: 1rem;
    text-align: center;
    color: #888;
    font-style: italic;
}