/*
 * Carosello Sessioni AVC
 *
 * Tutti i selettori iniziano con .swcs-sezione: così sono più specifici degli stili
 * di Astra/Elementor per h2, h3, p, a, button e ul.
 */

/*
 * SPECIFICHE FIGMA
 * Valori presi dal file Figma. Dove Figma non li indica (interlinee, spazi interni)
 * sono ricavati dallo screenshot di reference e segnati con "(da immagine)".
 *
 * 1. Sezione
 *    sfondo #E9F7FF · padding 20px · raggio 28px · larghezza 1738px (usata come larghezza massima)
 *
 * 2. Titolo e sottotitolo della sezione
 *    Titolo:      Work Sans 38px, peso 400, colore #027EC7 · interlinea 38px (da immagine)
 *    Sottotitolo: Work Sans 16px, peso 400, colore #000000 · interlinea 1.2 (da immagine)
 *    Spazio tra i due: 5px
 *    Spazio tra sottotitolo e card: 34px (da immagine)
 *
 * 3. Card
 *    4 per riga · altezza 202px · raggio 16px · bordo 2px #027EC7 · nessuna ombra
 *    gap 5px in Figma, ma nell'immagine le card distano circa 20px: per ora 20px (da verificare)
 *
 * 4. Fascia data e orario
 *    sfondo #027EC7 · padding 11px · Work Sans 18px, peso 500, colore #FFFFFF · interlinea 21px (da immagine)
 *    Icone 15×16px: calendario (fa-calendar-days) e orologio (fa-clock). Il separatore "|" resta.
 *
 * 5. Titolo del corso
 *    Work Sans 21px, peso 500, colore #000000 · interlinea 24px (da immagine)
 *    Icona pettorina (fa-vest) 18×24px, a 5px dal testo (da immagine)
 *
 * 6. Pulsante "Vai al corso"
 *    sfondo #F7791B · padding 10px · raggio 100px · Work Sans 16px, peso 400, colore #FFFFFF
 *    Largo quanto il testo, subito sotto il titolo (12px, da immagine).
 *    Hover non definito in Figma: leggero scurimento (approvato).
 *
 * 6b. Banner "IN PROMOZIONE!" (solo sessioni in sconto)
 *    In cima alla card, sopra la fascia data e orario · sfondo #B91C1C · altezza 40px (padding 10px sopra e sotto)
 *    Work Sans 16px, peso 600, colore #FFFFFF, maiuscolo, centrato · testo fisso
 *    Bordo inferiore 2px #FFFFFF che lo separa dalla fascia blu · angoli superiori arrotondati come la card
 *    Non allunga la card: l'altezza resta 202px come le altre
 *
 * 7. Frecce
 *    Riquadro 20×20px, 15×15px da 2 card in giù (la freccia disegnata ha circa il 13% di margine interno), tratto 3.5px con estremità arrotondate, ai lati delle card e centrate in verticale, senza cerchio di sfondo, colore #000000
 *    Area cliccabile allargata di 5px per lato (30×30px) senza cambiare l'ingombro; da 2 card in giù coincide con il riquadro
 *    Distanza dalle card: 5px dal riquadro (circa 7-8px dalla freccia visibile); da 2 card in giù 3px (circa 5px)
 *
 * 8. Mobile e tablet
 *    Da definire: per ora 3 card su tablet, 2 su mobile (senza frecce), 1 e un pezzo sotto i 480px.
 */

.swcs-sezione {
    /* Colori: dalle impostazioni globali di Elementor; i valori dopo la virgola sono quelli di Figma
       e vengono usati solo se il CSS globale di Elementor non è caricato */
    --swcs-colore-principale: var(--e-global-color-primary, #027EC7);
    --swcs-colore-secondario: var(--e-global-color-secondary, #E9F7FF);
    --swcs-colore-testo: var(--e-global-color-text, #000000);
    --swcs-colore-arancione: var(--e-global-color-cc0d25f, #F7791B);
    --swcs-colore-bianco: var(--e-global-color-94f73a5, #FFFFFF);
    --swcs-colore-promozione: #B91C1C; /* non è tra i colori globali di Elementor */

    --swcs-font: "Work Sans", sans-serif;

    --swcs-card-visibili: 4;
    --swcs-spazio-tra-card: 20px;
    --swcs-larghezza-card: calc(
        (100% - (var(--swcs-card-visibili) - 1) * var(--swcs-spazio-tra-card)) / var(--swcs-card-visibili)
    );

    max-width: 1738px;
    margin-inline: auto;
    padding: 20px;
    background: var(--swcs-colore-secondario);
    border-radius: 28px;
}

/* Bordi e padding inclusi nella larghezza: senza, il bordo delle card si somma al calcolo e l'ultima card esce */
.swcs-sezione,
.swcs-sezione * {
    box-sizing: border-box;
}

/* Icone Font Awesome: centrate in un riquadro di dimensioni fisse, sia come webfont (<i>) sia come SVG */
.swcs-sezione .swcs-icona {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}


/* Intestazione della sezione ------------------------------------------- */

.swcs-sezione .swcs-sezione-titolo {
    margin: 0;
    color: var(--swcs-colore-principale);
    font-family: var(--swcs-font);
    font-size: 38px;
    font-weight: 400;
    line-height: 38px;
}

.swcs-sezione .swcs-sezione-sottotitolo,
.swcs-sezione .swcs-vuoto {
    margin: 0;
    color: var(--swcs-colore-testo);
    font-family: var(--swcs-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
}

.swcs-sezione .swcs-sezione-titolo + .swcs-sezione-sottotitolo {
    margin-top: 5px;
}

.swcs-sezione .swcs-vuoto {
    margin-top: 34px;
}


/* Carosello: [freccia] [traccia scorrevole] [freccia] ------------------- */

.swcs-sezione .swcs-carosello {
    display: flex;
    align-items: center;
    gap: 5px; /* dal riquadro della freccia: la freccia disegnata ha circa 2,6px di margine interno */
    margin-top: 34px;
}

.swcs-sezione .swcs-traccia {
    flex: 1;
    min-width: 0; /* un elemento flex non si restringe sotto il suo contenuto: senza, la traccia non scorre */
    display: flex;
    gap: var(--swcs-spazio-tra-card);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* a fine scorrimento la traccia si allinea all'inizio di una card */
    scroll-behavior: smooth;       /* rende animato anche lo scrollBy() delle frecce in carosello.js */
    scrollbar-width: none;
}

.swcs-sezione .swcs-traccia::-webkit-scrollbar {
    display: none;
}


/* Card ------------------------------------------------------------------ */

/* min-height e non height: un titolo più lungo del previsto allunga la card invece di uscire */
.swcs-sezione .swcs-card {
    flex: 0 0 var(--swcs-larghezza-card);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    min-height: 202px;
    margin: 0;
    overflow: hidden;
    background: var(--swcs-colore-secondario);
    border: 2px solid var(--swcs-colore-principale);
    border-radius: 16px;
}


/* Gli angoli superiori li arrotonda già la card (overflow: hidden), seguendo il raggio interno al bordo */
.swcs-sezione .swcs-promozione {
    padding: 10px;
    background: var(--swcs-colore-promozione);
    border-bottom: 2px solid var(--swcs-colore-bianco);
    color: var(--swcs-colore-bianco);
    font-family: var(--swcs-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
}

.swcs-sezione .swcs-intestazione {
    padding: 11px;
    background: var(--swcs-colore-principale);
    color: var(--swcs-colore-bianco);
    font-family: var(--swcs-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
}

.swcs-sezione .swcs-data,
.swcs-sezione .swcs-orario {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 5px;
}

/* Separatore "|" visibile solo se data e orario stanno sulla stessa riga: è il ::before dell'orario,
   spostato a sinistra della sua larghezza nello spazio lasciato dalla data. Quando l'orario va a capo
   il separatore esce dal bordo sinistro del contenitore e viene tagliato dall'overflow. */
.swcs-sezione .swcs-intestazione-righe {
    --swcs-spazio-separatore: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
    overflow: hidden;
}

.swcs-sezione .swcs-intestazione-righe > .swcs-data {
    margin-right: var(--swcs-spazio-separatore);
}

.swcs-sezione .swcs-orario::before {
    content: "|";
    flex: 0 0 var(--swcs-spazio-separatore);
    margin-left: calc(-1 * var(--swcs-spazio-separatore));
    margin-right: -5px; /* annulla il gap dell'inline-flex */
    text-align: center;
}

.swcs-sezione .swcs-intestazione .swcs-icona {
    width: 15px;
    height: 16px;
    font-size: 15px;
}

.swcs-sezione .swcs-corpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* il pulsante resta largo quanto il suo testo */
    gap: 12px;
    padding: 10px 14px 14px;
}

.swcs-sezione .swcs-titolo {
    display: flex;
    align-items: flex-start; /* l'icona resta sulla prima riga quando il titolo va a capo */
    gap: 5px;
    margin: 0;
    color: var(--swcs-colore-testo);
    font-family: var(--swcs-font);
    font-size: 21px;
    font-weight: 500;
    line-height: 24px;
}

/* Alta quanto una riga del titolo, così è centrata sulla prima riga */
.swcs-sezione .swcs-titolo .swcs-icona {
    width: 18px;
    height: 24px;
    font-size: 18px;
}

/* Stesso link del pulsante "Vai al corso" */
.swcs-sezione .swcs-titolo-link {
    color: inherit;
    text-decoration: none;
}

.swcs-sezione .swcs-titolo-link:hover,
.swcs-sezione .swcs-titolo-link:focus-visible {
    text-decoration: underline;
}

.swcs-sezione .swcs-pulsante {
    padding: 10px;
    background: var(--swcs-colore-arancione);
    border-radius: 100px;
    color: var(--swcs-colore-bianco);
    font-family: var(--swcs-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    text-decoration: none;
    transition: filter .2s;
}

/* Hover non definito in Figma: leggero scurimento */
.swcs-sezione .swcs-pulsante:hover,
.swcs-sezione .swcs-pulsante:focus-visible {
    color: var(--swcs-colore-bianco);
    filter: brightness(.92);
}

/* Frecce ---------------------------------------------------------------- */

/* Selettore ".swcs-carosello button.swcs-freccia" volutamente più specifico di ".elementor-kit-N button:hover/:focus",
   che altrimenti darebbe alle frecce lo sfondo, il colore e il raggio dei pulsanti globali di Elementor */
.swcs-sezione .swcs-carosello button.swcs-freccia {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--swcs-colore-testo);
    cursor: pointer;
    position: relative;
}

/* Area cliccabile più grande dell'icona (20px + 2×5px): non occupa spazio, quindi la distanza dalle card non cambia */
.swcs-sezione .swcs-carosello button.swcs-freccia::after {
    content: "";
    position: absolute;
    inset: -5px;
}

.swcs-sezione .swcs-carosello button.swcs-freccia:hover,
.swcs-sezione .swcs-carosello button.swcs-freccia:focus,
.swcs-sezione .swcs-carosello button.swcs-freccia:active {
    background: none;
    box-shadow: none;
}

.swcs-sezione .swcs-carosello button.swcs-freccia:disabled {
    opacity: .25;
    cursor: default;
}

.swcs-sezione .swcs-freccia .swcs-icona {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Responsive ------------------------------------- */

@media (max-width: 1366px) {
    .swcs-sezione {
        --swcs-card-visibili: 2;
        padding: 20px 16px;
    }
    .swcs-sezione .swcs-carosello {
        gap: 3px;
    }
    .swcs-sezione .swcs-carosello button.swcs-freccia {
        width: 15px;
        height: 15px;
    }
    .swcs-sezione .swcs-freccia .swcs-icona {
        width: 15px;
        height: 15px;
    }
    .swcs-sezione .swcs-carosello button.swcs-freccia::after {
        inset: 0;
    }
}

@media (max-width: 767px) {
    .swcs-sezione {
        --swcs-card-visibili: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .swcs-sezione .swcs-traccia {
        scroll-behavior: auto;
    }
}