/* =========================================
   LAYOUT A DUE COLONNE CON SIDEBAR "STICKY"
   ========================================= */

.page-wrapper {
    display: flex;
    flex-wrap: nowrap;
    /* Mantiene le colonne affiancate */
    gap: 35px;
    max-width: 1650px;
    /* Spazio largo abbastanza per testo + banner */
    margin: 60px auto 120px auto;
    padding: 0 3%;
    align-items: flex-start;
    /* Fondamentale per l'effetto sticky */
}

/* Colonna principale */
.main-column {
    flex: 1;
    /* Prende tutto lo spazio a sinistra */
    min-width: 0;
    /* Evita che il contenuto sfori su piccoli schermi */
}

/* Colonna laterale per i banner (fissa a 300px e fluttuante) */
.sidebar-column {
    width: 300px;
    flex-shrink: 0;
    /* Impedisce che i banner vengano schiacciati */
    /* EFFETTO STICKY: La colonna ti segue mentre scorri! */
    position: sticky;
    top: 100px;
    /* Distanza dall'alto quando scorri (sotto la navbar) */

    display: flex;
    flex-direction: column;
    gap: 25px;
}

.sidebar-banner {
    display: block;
    width: 100%;
    background-color: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee;
    text-align: center;
}

.sidebar-banner:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(19, 67, 149, 0.15);
}

.sidebar-banner img {
    width: 100%;
    height: auto;
    display: block;
}

.sidebar-title {
    font-family: 'Barmeno', sans-serif;
    color: var(--csi-blue);
    font-size: 1.2rem;
    margin-bottom: -10px;
    border-bottom: 2px solid var(--csi-orange);
    padding-bottom: 5px;
    display: inline-block;
}

/* Su schermi piccoli (tablet e smartphone), sposta i banner in fondo in griglia */
@media (max-width: 1050px) {
    .page-wrapper {
        flex-wrap: wrap;
    }

    .sidebar-column {
        position: static;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        /* NOVITÀ: Impedisce ai banner di stirarsi in verticale e creare il vuoto bianco */
        margin-top: 40px;
        gap: 20px;
    }

    /* NOVITÀ: Costringe il titolo a stare su una riga tutta sua e centrata */
    .sidebar-title {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    .sidebar-banner {
        width: 300px;
    }
}