/* ARCHIVE */
.event-toggle-buttons{
    margin: 0 1px 5vh 1px;
    display: flex;
    justify-content: flex-start;
    gap: 50px;
    font-size: 1.5em;
}

#show-upcoming{
    color: white;
    background-color: var(--main-background-color);
    border: 0;
    font-family: 'TTChocolate', sans-serif;
    letter-spacing: var(--main-uppercase-spacing);
    text-transform: uppercase;
    padding: 0;
    display: block;
    outline: none;
    cursor: pointer;
    transition: color var(--transition-time-fast) ease;
  }

#show-upcoming::-moz-focus-inner {
    border: 0;
  }

#show-upcoming:focus {
    outline: none;
    box-shadow: none;
}

#show-upcoming:hover {
    color: var(--main-red-color) !important;
}


#show-past{
    color: rgb(63, 63, 63);
    background-color: var(--main-background-color);
    border: 0;
    font-family: 'TTChocolate', sans-serif;
    letter-spacing: var(--main-uppercase-spacing);
    text-transform: uppercase;
    padding: 0;
    display: block;
    outline: none;
    cursor: pointer;
    transition: color var(--transition-time-fast) ease;
}

#show-past::-moz-focus-inner {
    border: 0;
  }

#show-past:focus {
    outline: none;
    box-shadow: none;
}

#show-past:hover {
    color: var(--main-red-color) !important;
}


.events-archive-items-container{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5vh;
}

.event-date-archive{
    color: rgb(104, 104, 104);
}

.event-title-archive{
    text-transform: uppercase;
    letter-spacing: var(--main-uppercase-spacing);
    font-size: 1.5em;
}

.event-title-archive a{
    color: white;
    text-decoration: none;
    transition: color var(--transition-time-fast) ease;
}

.event-title-archive a:hover {
  color: var(--main-red-color);
}

.event-club-archive{
    color: rgb(104, 104, 104);
}

.event-artists-archive{
    font-size: 1.15em;
    text-transform: uppercase;
    letter-spacing: var(--main-uppercase-spacing);
}



/* EVENTS */
.page-container-event-title{
    font-size: 2.8rem !important;
}


.events-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.event-entry{
    display: flex;
    flex-direction: column;
    gap: 150px;
}

/* FIRST ROW */
.event-meta{
    display: flex;
    flex-direction: row;
    gap: 30px;
}


/* DATE TIME */
.event-date-time{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.event-date-time-title{
    color: rgb(104, 104, 104);
    font-size: 1em;
}
.event-date-time-date-content{
    font-size: 1.5em;
;
}
.event-date-time-time-content{
    font-size: 1em;
}



/* VENUE */
.event-venue{
    width: 50%;
    display: flex;
    flex-direction: column;
}


.event-venue-title{
    color: rgb(104, 104, 104);
    font-size: 1em;
}

.event-venue-content{
    font-size: 1.5em;
}

.event-venue-address{
    font-size: 1em;
}

.event-venue-address a{
    color: white;
    text-decoration: none;
    transition: color var(--transition-time-fast) ease;
}

.event-venue-address a:hover {
  color: var(--main-red-color);
}



/* Artists */
.event-artists{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.event-artists-title{
    font-size: 1.6em;
    letter-spacing: var(--main-uppercase-spacing);
    color: rgb(132, 132, 132);
}

.event-artists-content{
    font-size: 2em;
    letter-spacing: var(--main-uppercase-spacing);
    text-transform: uppercase;
}


/* BIO */
.event-bio{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem; /* Initial margin between items */
}
/* Image container: 40% width, square */
.event-flyer {
    
    flex: 1 1 300px;           /* Grow/Shrink but never below 300px */
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-flyer img {
    width: 100%;
    object-fit: cover;
}

.event-description {
    font-size: 0.8em !important;
    letter-spacing: var(--main-long-description-spacing);
    font-weight: 100;
    flex: 1 1 300px;           /* Grow/Shrink but never below 300px */
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: pre-wrap;
    font-size: 1rem;
}




/* EXTERNAL LINKS */

/* Menu items */
.event-external-link{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  letter-spacing: var(--main-uppercase-spacing);
  font-size: 1.1vw;
  color: #ffffff;
  text-transform: uppercase;
}

/* Menu links */
.event-external-link a {
  color: white;
  margin-left: 3vw;
  margin-right: 3vw;
  text-decoration: none;
  transition: color var(--transition-time-fast) ease;
}

.event-external-link a:hover {
  color: var(--main-red-color);
}

.event-external-link a:first-child {
  margin-left: 0;
}

.event-external-link a:last-child {
  margin-right: 0;
}


@media (max-width: 1150px) {
    .event-bio{
        flex-direction: column;
        gap: 150px;
        flex-wrap: nowrap;
    }

    .event-flyer .event-description{
        flex: 0 0 auto; /* reset flex */
    }

    .event-flyer img{
        width: 60%;
    }
}



@media (max-width: 1000px) {

    /* ARCHIVE */
    .event-date-archive{
        font-size: 0.8em;
    }
    .event-title-archive{
        font-size: 1em;
    }

    .event-club-archive{
        font-size: 0.8em;
    }

    .event-artists-archive{
        font-size: 0.7em;
    }


    .event-date-time-title{
        font-size: 0.9em;
    }
    .event-date-time-date-content{
        font-size: 1.2em;
    ;
    }
    .event-date-time-time-content{
        font-size: 0.7em;
    }



    /* VENUE */
    .event-venue-title{
        font-size: 0.9em;
    }

    .event-venue-content{
        font-size: 1.2em;
    }

    .event-venue-address{
        font-size: 0.7em;
    }



    /* Artists */

    .event-artists-title{
        font-size: 1em;
    }

    .event-artists-content{
        margin-left: 0;
        font-size: 1em;
        text-transform: uppercase;
    }

    .event-flyer img{
        width: 100%;
    }




    .event-external-link {
        flex-direction: column;
        align-items: flex-start;
        font-size: 0.9rem;            /* Increase font size, adjust as needed */
        margin: 20px 6px;
    }

    /* Menu items full width with padding */
    .event-external-link a {
        width: 100%;
        margin: 2px 0;
        width: 100%;
        display: block;
    }

    .page-container-event-title{
        font-size: 1.8rem !important;
    }

}