/* =========================================
   DELFT JAZZ PROGRAMMA PAGINA
   ========================================= */


/* =========================================
   CONTAINER
   ========================================= */

.dj-programma {

    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 80px;

}


/* =========================================
   FILTERS
   ========================================= */

.dj-filters {

    display: flex;
    flex-wrap: wrap;
    gap: 15px;

    margin-bottom: 60px;
    padding: 20px;

    background: #f7f3ec;
    border-radius: 25px;

}



#dj-dag-filter,
#dj-locatie-filter,
#dj-genre-filter {

    flex: 1 1 0;

    min-height: 52px;

    padding: 0 22px;

    border-radius: 30px;

    border: 2px solid #ddd;

    background: #fff;

    color: #333;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

}



#dj-dag-filter:hover,
#dj-locatie-filter:hover,
#dj-genre-filter:hover {

    border-color: #f28c28;

}



#dj-dag-filter:focus,
#dj-locatie-filter:focus,
#dj-genre-filter:focus {

    outline: none;

    border-color: #f28c28;

}



/* =========================================
   DAG TITELS
   ========================================= */

.dj-dag-titel {

    margin-top: 70px;
    margin-bottom: 25px;

    padding-bottom: 10px;

    font-size: 34px;

    font-weight: 700;

    color: #1d1d1d;

    border-bottom: 4px solid #f28c28;

}



/* =========================================
   TIJD
   ========================================= */

.dj-tijd {

    margin-top: 35px;

    margin-bottom: 15px;

    font-size: 20px;

    font-weight: 700;

    color: #f28c28;

}



/* =========================================
   KAARTEN
   ========================================= */

.dj-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

}



.dj-kaart {

    display: block;

    overflow: hidden;

    border-radius: 20px;

    background: #fff;

    box-shadow: 0 8px 25px rgba(0,0,0,.12);

    transition: .3s ease;

}



.dj-kaart:hover {

    transform: translateY(-5px);

}



.dj-kaart img {

    width: 100%;

    height: auto;

    display: block;

}



/* =========================================
   TABLET
   ========================================= */

@media (max-width:980px) {


    .dj-grid {

        grid-template-columns: repeat(3,1fr);

    }


}



/* =========================================
   MOBIEL
   ========================================= */

@media (max-width:767px) {


    .dj-programma {

        padding:25px 15px 50px;

    }


    .dj-filters {

        gap:12px;

        padding:15px;

    }


    #dj-dag-filter,
    #dj-locatie-filter,
    #dj-genre-filter {

        width:100%;

        flex:0 0 100%;

    }



    .dj-grid {

        grid-template-columns:repeat(2,1fr);

        gap:15px;

    }



    .dj-dag-titel {

        font-size:26px;

        margin-top:45px;

    }
    /* Alleen mobiel: dagtitels kleiner */

@media only screen and (max-width: 600px) {

    .dj-dag-titel {
        font-size: 22px !important;
    }

}



    .dj-tijd {

        font-size:18px;

    }


}

/* =====================================
   FILTERS RESPONSIVE
===================================== */


/* Desktop */
.dj-filters {
    display:flex;
    flex-wrap:nowrap;
    gap:15px;
}


.dj-filters select {
    flex:1;
    min-width:0;
}



/* Tablet */
@media (min-width:768px) and (max-width:980px) {

    .dj-filters {
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
    }


    .dj-filters select {
        width:33.333%;
        flex:1 1 33.333%;
    }

}



/* Mobiel */
@media (max-width:767px) {

    .dj-filters {
        display:flex;
        flex-direction:column;
    }


    .dj-filters select {
        width:100%;
        flex:0 0 auto;
    }

}

@media (min-width:768px) and (max-width:980px) {

    .dj-programma {
        width:100% !important;
    }

    .dj-filters {
        width:100% !important;
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
    }

    .dj-filters select {
        width:33.333% !important;
        max-width:none !important;
        display:block !important;
    }

}
/* =====================================
   Programma intro
   ===================================== */

.dj-intro {
    margin-bottom: 10px;
}

@media (min-width:981px) {

    .dj-intro {
        margin-bottom: 20px;
    }

}
.dj-intro h1 {
    font-size: 42px;
    font-weight: 700;
    color: #1d1d1d;
    margin-bottom: 15px;
}

.dj-intro p {
    font-size: 20px;
    line-height: 1.6;
    max-width: none;
    color: #555;
}


/* Mobiel */

@media (max-width:767px) {

    .dj-intro h1 {
        font-size: 30px;
    }

    .dj-intro p {
        font-size: 16px;
    }

}
/* Programma intro mobiel titel */
@media (max-width: 767px) {

    .dj-intro h1 {
        font-size: 21px;
        white-space: nowrap;
    }

}

/* =====================================
   Sticky filters onder mobiel menu
   ===================================== */

/* Divi mobiel menu boven filters */

.et_mobile_menu,
.et_pb_menu__wrap,
.et_pb_menu .et_mobile_menu {
    z-index: 9999 !important;
}

/* =====================================
   Divi menu boven programma filters
   ===================================== */

.dj-filters {
    position: relative !important;
    z-index: 1 !important;
}


.et-l--header {
    position: relative !important;
    z-index: 9999 !important;
}


.et_pb_section_0_tb_header {
    z-index: 9999 !important;
}
/* Ruimte tussen filters en eerste programma dag */

.dj-filters {
    margin-bottom: 100px !important;
}
/* =====================================
   Desktop programma filters corrigeren
   ===================================== */

@media (min-width:981px) {

    .dj-filters {
        position: relative !important;
        top: auto !important;
        z-index: 1 !important;
        margin-bottom: 40px !important;
    }

}
.dj-filters {
    position: sticky !important;
    top: 160px !important;
    z-index: 999 !important;
}
/* =====================================
   Programma titel responsive
   ===================================== */

/* Desktop */
@media (min-width: 981px) {

    .dj-intro h1 {
        font-size: 42px !important;
    }

}


/* Tablet */
@media (min-width: 768px) and (max-width: 980px) {

    .dj-intro h1 {
        font-size: 50px !important;
    }

}


/* Mobiel */
@media (max-width: 767px) {

    .dj-intro h1 {
        font-size: 22px !important;
        white-space: nowrap;
    }

}
/* Delft Jazz knoppen */

.dj-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}


.dj-link-button {

    display: inline-flex;
    align-items: center;

    padding: 12px 22px;

    background: #f28c28;
    color: white !important;

    border-radius: 30px;

    font-weight: 600;
    text-decoration: none;

    transition: .3s ease;

}


.dj-link-button:hover {

    background: #1d1d1d;
    color: white !important;

}


/* Mobiel */

@media (max-width: 767px) {

    .dj-links {
        flex-direction: column;
    }

    .dj-link-button {
        justify-content: center;
        width: 100%;
    }

}