/*
 * ==========================================================
 * PROGETTO:    Corsi
 * FILE:        slider.css
 * Path:        css/site/slider.css
 * ==========================================================
 * DESCRIZIONE:
 * Stili dello slider fotografico della home pubblica.
 * ==========================================================
 */

.slider-container {
    position: relative;
    width: 100%;
    height: 670px;
    overflow: hidden;
    margin: 20px 0;
    border-radius: var(--radius-large);
    background: var(--color-on-dark);
    z-index: 1;
}

.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider-wrapper::-webkit-scrollbar {
    display: none; 
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 1;
}

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

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(0.8);
}

/* Font self-hosted per le didascalie (slogan) dello slider, non caricato da
 * Google Fonts per lo stesso motivo di privacy documentato in
 * DEVELOP_02_SICUREZZA.md per Material Icons: file serviti localmente da
 * public/assets/fonts/. */
@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/poppins/poppins-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/poppins/poppins-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Didascalia (slogan) sovrapposta alla foto. La posizione e' definita da una
 * classe dedicata per slide (slide-caption-01..10), scelta in base allo
 * spazio libero della singola foto: sono contenuto del cliente come le
 * foto, quindi stanno nel suo captions.css accanto alle foto
 * (public/assets/images/site/home/captions.css, non versionato), caricato
 * dopo questo file. Questa regola base ne definisce aspetto e
 * leggibilità, comuni a tutte, e una posizione predefinita (in alto a
 * sinistra) per le slide che il cliente non posiziona.
 *
 * Il fade-in e' un effetto ulteriore, ritardato rispetto al cambio slide:
 * la classe .visible (assegnata via JS in home.js dopo che la dissolvenza
 * dell'immagine e' gia' completata) la porta a piena opacita' con una
 * propria transizione più rapida. Il fade-out invece non ha un timer
 * dedicato: non essendo definita alcuna opacita' di base sull'elemento, la
 * didascalia segue semplicemente la dissolvenza della slide che la contiene
 * (.slide { transition: opacity 1.5s }), sparendo insieme all'immagine. */
.slide-caption {
    position: absolute;
    top: 10px;
    left: 10px;
    max-width: 60%;
    margin: 0;
    padding: 25px 70px 45px;
    color: var(--color-on-primary);
    font-family: var(--font-family-slogan);
    font-weight: normal;
    font-size: clamp(1.9rem, 3vw + 0.9rem, 3.2rem);
    line-height: 1.25;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    background: color-mix(in srgb, #000 10%, transparent);
    /* 50% e non var(--radius-large): l'ellisse sul box di testo e'
       l'aspetto voluto per lo slogan, non un difetto da smussare (vedi
       commit b90511dd del 2026-07-27, che lo aveva cambiato per errore
       durante un giro sistematico di eliminazione radius hardcoded). */
    border-radius: 50%;
    z-index: 2;
    visibility: hidden;
    opacity: 0.8;
    text-align: center;

    /* --from-x/--from-y: offset di partenza dell'animazione di arrivo (vedi
     * @keyframes sotto), quanto la caption deve viaggiare dal centro della
     * slide fino al proprio punto di ancoraggio (top/left). NON impostati
     * qui in CSS: calcolati in px reali da setCaptionCenterOffset() in
     * home.js con getBoundingClientRect(), appena prima di ogni fade-in.
     * Necessario perche' in puro CSS una % dentro transform: translate() si
     * risolve sempre rispetto alle dimensioni dell'elemento stesso (questo
     * box), mai rispetto al genitore (la slide) - quindi un calcolo
     * calc(50% - left) scritto qui non rappresenterebbe affatto "50% della
     * slide", ma "50% del box stesso", un valore diverso e sbagliato per
     * questo scopo (era esattamente il bug delle versioni precedenti). Il
     * default 0px qui sotto si applica solo se lo script non e' ancora
     * girato per qualche motivo (nessun salto visibile: senza .visible la
     * caption resta comunque invisibile). */
    --from-x: 0px;
    --from-y: 0px;
}

.slide-caption.visible {
    visibility: visible;
    animation: caption-fade-in 2.8s ease-in-out;
}

/* Fade-in (opacita'), ingrandimento (scale) e arrivo dal centro della slide
 * (translate, via --from-x/--from-y) nella stessa animazione, stessa
 * durata: il punto di arrivo (to) e' sempre translate(0,0), lasciando
 * l'elemento esattamente dove lo posiziona top/left della propria classe
 * slide-caption-NN (o la posizione predefinita di .slide-caption). */
@keyframes caption-fade-in {
    from {
        opacity: 0;
        transform: translate(var(--from-x), var(--from-y)) scale(0.6);
    }
    to {
        opacity: 0.8;
        transform: translate(0, 0) scale(1);
    }
}

/* Sotto questa soglia il posizionamento/dimensionamento della didascalia
 * (calcolato in px assoluti da setCaptionCenterOffset() in home.js, vedi
 * commento su --from-x/--from-y sopra) diventa instabile: l'immagine
 * scala con object-fit: cover ma la didascalia no, quindi a finestra
 * stretta il font non si aggiorna senza refresh (clamp() con vw non
 * ricalcolato dall'animazione gia' avviata) e gli ovali a destra si
 * deformano verticalmente. Rifare il posizionamento per reggere ogni
 * larghezza sarebbe un lavoro a parte; nascondere la didascalia sotto
 * soglia è la scelta più semplice, l'immagine da sola resta comunque
 * presentabile. display: none invece di solo opacity/visibility: home.js
 * (scheduleCaption()) salta comunque il calcolo se siamo sotto soglia,
 * ma questo evita anche che una didascalia già .visible resti nel DOM
 * a occupare spazio se la finestra si restringe dopo il fade-in. */
@media (max-width: 1500px) {
    .slide-caption {
        display: none;
    }
}

@media (max-width: 720px) {
    .slide-caption {
        max-width: 85%;
        padding: 10px 14px;
    }
}

.slider-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}

.dot {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.5);
    border-radius: var(--radius-round);
    cursor: pointer;
    transition: background 0.3s;
    pointer-events: auto;
}

.dot.active {
    background: var(--color-primary-light);
}