/* ------------------------------------------------------------------
   Carosello Progetti — mockup "2a Progetti"

   Qui c'è solo il carosello: occhiello, titolo e spaziature della sezione
   stanno nel template. Tutte le regole sono scoped su .psp per non
   collidere con Bootstrap / Oxygen / tema.
------------------------------------------------------------------- */

.psp {
    --psp-pad: 64px;
    --psp-gap: 20px;
    --psp-card: 432px;
    position: relative;
}

.psp *,
.psp *::before,
.psp *::after {
    box-sizing: border-box;
}

/* ---------- frecce ---------- */
.psp-nav {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 var(--psp-pad);
    margin-bottom: 18px;
}

.psp-navbtn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(16, 16, 24, .18);
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background .2s, border-color .2s, opacity .2s;
}

.psp-navbtn:hover {
    background: rgba(16, 16, 24, .06);
    border-color: rgba(16, 16, 24, .35);
}

.psp-navbtn[disabled] {
    opacity: .3;
    cursor: default;
    background: transparent;
}

/* nascoste finché il JS non verifica che ci sia davvero da scorrere */
.psp-nav:not(.is-ready) {
    display: none;
}

/* ---------- filtri (modalità griglia) ---------- */
.psp-filtri {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 34px;
    padding: 0 var(--psp-pad);
}

.psp-fchip {
    height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1.5px solid #D2D2DC;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #101018;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.psp-fchip:hover {
    border-color: #101018;
}

.psp-fchip.is-attivo {
    background: #101018;
    color: #fff;
    border-color: #101018;
}

.psp-vuoto {
    padding: 0 var(--psp-pad);
    color: #5A5A66;
    font-size: 15px;
}

/* ---------- carosello ---------- */
.psp-row {
    display: flex;
    gap: var(--psp-gap);
    overflow-x: auto;
    padding: 4px var(--psp-pad) 26px;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    outline-offset: 4px;
}

.psp-row::-webkit-scrollbar {
    display: none;
}

.psp-row.is-dragging {
    scroll-behavior: auto;
    cursor: grabbing;
    user-select: none;
}

.psp-row.is-dragging .psp-card {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .psp-row {
        scroll-behavior: auto;
    }
}

/* ---------- card ---------- */
.psp-card {
    width: var(--psp-card);
    flex: none;
    scroll-snap-align: start;
    border-radius: 24px;
    padding: 30px 30px 26px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: #fff;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    transition: transform .35s ease, box-shadow .35s ease;
}

a.psp-card:hover,
a.psp-card:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(16, 16, 24, .18);
    color: #fff;
    text-decoration: none;
}

a.psp-card.psp-card--lav:hover,
a.psp-card.psp-card--lav:focus-visible {
    color: #241058;
}

a.psp-card.psp-card--gry:hover,
a.psp-card.psp-card--gry:focus-visible {
    color: #1A1A22;
}

.psp-card--blue { background: #1E1EF0; }
.psp-card--vio  { background: #7C10E8; }
.psp-card--mag  { background: #E00C8A; }
.psp-card--ink  { background: #101018; }
.psp-card--lav  { background: #EFEBFB; color: #241058; }
.psp-card--gry  { background: #F5F5F1; color: #1A1A22; }

.psp-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(128, 0, 255, .5), transparent 70%);
    right: -130px;
    top: -130px;
    pointer-events: none;
}

.psp-cardhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: relative;
}

.psp-chiprow {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.psp-chip {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .42);
    white-space: nowrap;
}

.psp-card--lav .psp-chip,
.psp-card--gry .psp-chip {
    border-color: rgba(36, 16, 88, .3);
}

.psp-arr {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .42);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease;
}

.psp-card--lav .psp-arr,
.psp-card--gry .psp-arr {
    border-color: rgba(36, 16, 88, .3);
}

a.psp-card:hover .psp-arr {
    background: rgba(255, 255, 255, .16);
}

a.psp-card--lav:hover .psp-arr,
a.psp-card--gry:hover .psp-arr {
    background: rgba(36, 16, 88, .08);
}

.psp-cardtitle {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 4px 0 0;
    position: relative;
    color: inherit;
}

.psp-cardtext {
    font-size: 14.5px;
    line-height: 1.5;
    margin: 0;
    opacity: .88;
    max-width: 420px;
    position: relative;
    color: inherit;
}

.psp-shot {
    width: 100%;
    height: 236px;
    margin-top: auto;
    display: block;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, .1);
}

.psp-card--lav .psp-shot,
.psp-card--gry .psp-shot {
    background: rgba(36, 16, 88, .08);
}

.psp-shot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}

/* ------------------------------------------------------------------
   Modalità griglia — mockup "PR Lista" (pagina Progetti)
------------------------------------------------------------------- */
.psp--griglia .psp-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 22px;
    overflow: visible;
    padding: 0 var(--psp-pad);
    scroll-snap-type: none;
}

.psp--griglia .psp-card {
    width: auto;
    grid-column: span 2;   /* un terzo di riga */
}

.psp--griglia .psp-card--grande {
    grid-column: span 3;   /* mezza riga */
}

.psp--griglia .psp-card--grande .psp-shot {
    height: 300px;
}

.psp--griglia .psp-card[hidden] {
    display: none;
}

/* risultati (KPI) */
.psp-risultati {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    position: relative;
    margin-top: 2px;
}

.psp-rnum {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0;
}

.psp-rlab {
    font-size: 12.5px;
    opacity: .72;
    margin: 2px 0 0;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .psp {
        --psp-pad: 40px;
        --psp-card: 380px;
    }

    /* 6 colonne diventano 4: le grandi prendono tutta la riga,
       le altre restano a metà */
    .psp--griglia .psp-row {
        grid-template-columns: repeat(4, 1fr);
    }

    .psp--griglia .psp-card { grid-column: span 2; }
    .psp--griglia .psp-card--grande { grid-column: span 4; }
    .psp--griglia .psp-card--grande .psp-shot { height: 260px; }
}

@media (max-width: 782px) {
    .psp {
        --psp-pad: 22px;
        --psp-gap: 15px;
        --psp-card: 270px;
    }

    /* su touch si scorre col dito */
    .psp-nav { display: none !important; }

    .psp-row {
        scroll-snap-type: x mandatory;
        padding-bottom: 18px;
    }

    .psp-card {
        border-radius: 22px;
        padding: 24px 22px 22px;
        gap: 13px;
    }

    .psp-chiprow { gap: 6px; }

    .psp-chip {
        font-size: 10px;
        letter-spacing: .08em;
        padding: 5px 10px;
    }

    .psp-cardtitle { font-size: 23px; margin-top: 2px; }
    .psp-cardtext { font-size: 13.5px; max-width: none; }
    .psp-shot { height: 170px; }

    /* griglia: una card per riga, niente scorrimento orizzontale */
    .psp--griglia .psp-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .psp--griglia .psp-card,
    .psp--griglia .psp-card--grande {
        grid-column: span 1;
    }

    .psp--griglia .psp-card--grande .psp-shot {
        height: 200px;
    }

    .psp-filtri {
        gap: 8px;
        margin-bottom: 24px;
        /* i filtri scorrono a dito invece di andare a capo su tre righe */
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: calc(var(--psp-pad) * -1);
        padding-inline: var(--psp-pad);
    }

    .psp-filtri::-webkit-scrollbar { display: none; }

    .psp-fchip {
        height: 40px;
        padding: 0 16px;
        font-size: 13px;
        flex: none;
    }

    .psp-risultati { gap: 20px; }
    .psp-rnum { font-size: 19px; }
}

/* ------------------------------------------------------------------
   Oxygen incapsula lo shortcode in un .oxy-shortcode. Dentro un container
   flex con align-items:center quel wrapper si dimensiona sul contenuto:
   con una pista orizzontale diventa largo migliaia di px e tutta la pagina
   scrolla in orizzontale. Il selettore usa il discendente e non il figlio
   diretto perche' a volte a gonfiarsi e' un container piu' in alto.
------------------------------------------------------------------- */
.oxy-shortcode:has(.psp),
.oxy-container:has(.psp) {
    align-self: stretch;
    min-width: 0;
    max-width: 100%;
}

.psp {
    max-width: 100%;
    min-width: 0;
}