/* ==================================================
= GLOBAL STYLING FOR EVENT ARTICLE
================================================== */

article.event {
  background: var(--blue);
  color: #fff;
  overflow: hidden;
}

article.event.good-times {
  background: var(--red);
}
article.event.la-boite {
  background: var(--orange);
}
article.event.holy-sunday {
  background: var(--yellow);
}
article.event.blue-night {
  background: var(--light-blue);
}
article.event.the-note {
  background: var(--green);
}
article.event.taste {
  background: var(--purple);
}

article.event section.maps {
  background: var(--footer-blue);
  color: var(--blue);
}

/* Scrollable Content Panel */
article.event .scroll {
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  top: 0;
  right: 0;
  width: 33%;
  background: var(--blue);
  padding: 175px 50px 50px 50px;
  border-left: 4px solid #fff;
  height: auto;
  min-height: max-content;
}
article.event .scroll::-webkit-scrollbar {
  display: none;
}

article.event .scroll-container:hover {
  pointer-events: auto;
}

article.event .scroll-container {
  gap: 75px;
}

article.event .scroll-container .event_card {
  height: auto;
  overflow: visible;
}

@media (max-width: 1199px) {
  article.event .scroll {
    max-width: 330px;
  }
}
@media (max-width: 991.98px) {
  article.event .scroll {
    display: none;
  }
}

/* Main Content Details */
article.event .main-content .event-details ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
}
article.event .main-content .event-details ul li {
  padding: 20px 0;
  border-top: 1px solid #fff;
  display: flex;
  justify-content: space-between;
}
article.event .main-content .event-details ul li:last-of-type {
  border-bottom: 1px solid #fff;
}
article.event .main-content .event-details ul li span:first-of-type {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Buttons and Forms */
article.event section.event .buttons {
  gap: 25px;
}

article.event section.maps form label {
  font-size: 12px;
}

article.event section.maps form input {
  border: 1px solid var(--blue);
  border-radius: 3px;
  padding: 10px 7.5px 12px 8px;
  color: var(--blue);
}

article.event section.maps .btn-secondary {
  color: var(--blue);
  border-color: var(--blue);
  flex-shrink: 0;
}

article.event section.maps .btn-secondary:hover {
  border-color: #034883 !important;
}

@media (max-width: 1199px) {
  article.event .scroll .event_card .buttons {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 767px) {
  article.event section.maps form {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  article.event section.maps form .form_field {
    width: 100% !important;
  }
}

article.event .event-image {
  overflow: hidden;
  position: relative;
  padding: 0;
  max-height: 100%;
}

@media (max-width: 992px) {
  article.event .event-image {
    max-height: 300px;
  }
}

/* No filter */
article.event .event-image.no-filter img {
    width: 100%;
    filter: none !important;
  }
  
  article.event .event-image.no-filter .blend-overlay {
    position: absolute;
    display: none;
  }
  
  article.event .event-image.no-filter .blend-overlay.top {
    mix-blend-mode: normal;
  }

/* Filter */

article.event .event-image img {
  width: 100%;
  filter: grayscale(1) contrast(130%) !important;
}

article.event .event-image .blend-overlay {
  position: absolute;
  inset: 0;
  background: #034883;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

article.event .event-image .blend-overlay.top {
  mix-blend-mode: screen;
}

article.event .event_card.simple .image_wrapper {
  max-height: 300px;
}

@media (max-width: 992px) {
  article.event .event_card.simple .image_wrapper {
    max-height: 450px;
  }
}

/* ==================================================
    = CATEGORY COLORS + TICKETS STYLES
    ================================================== */

/* TASTE */

article.event.taste .event-image .blend-overlay,
article.event.taste .event-image .blend-overlay.top {
  background: var(--purple);
}

article.taste section.event .buttons .btn-tickets,
article.taste section.event .buttons .btn-tickets:hover,
article.taste section.event .buttons .btn-tickets svg path {
  color: var(--purple) !important;
  fill: var(--purple);
}

/* BLUE NIGHT */

article.event.blue-night .event-image .blend-overlay,
article.event.blue-night .event-image .blend-overlay.top {
  background: var(--light-blue);
}
article.blue-night section.event .buttons .btn-tickets,
article.blue-night section.event .buttons .btn-tickets:hover,
article.blue-night section.event .buttons .btn-tickets svg path {
  color: var(--light-blue) !important;
  fill: var(--light-blue);
}

/* THE NOTE */

article.event.the-note .event-image .blend-overlay,
article.event.the-note .event-image .blend-overlay.top {
  background: var(--green);
}
article.the-note section.event .buttons .btn-tickets,
article.the-note section.event .buttons .btn-tickets:hover,
article.the-note section.event .buttons .btn-tickets svg path {
  color: var(--green) !important ;
  fill: var(--green);
}

/* GOOD TIMES */

article.good-times .event-image .blend-overlay,
article.good-times .event-image .blend-overlay.top {
  background: var(--red);
}
article.good-times section.event .buttons .btn-tickets,
article.good-times section.event .buttons .btn-tickets:hover,
article.good-times section.event .buttons .btn-tickets svg path {
  color: var(--red) !important;
  fill: var(--red);
}

/* LA BOITE */

article.la-boite .event-image .blend-overlay,
article.la-boite .event-image .blend-overlay.top {
  background: var(--orange);
}
article.la-boite section.event .buttons .btn-tickets,
article.la-boite section.event .buttons .btn-tickets:hover,
article.la-boite section.event .buttons .btn-tickets svg path {
  color: var(--orange) !important;
  fill: var(--orange);
}

/* HOLY SUNDAY */

article.holy-sunday .event-image .blend-overlay,
article.holy-sunday .event-image .blend-overlay.top {
  background: var(--yellow);
}
article.holy-sunday section.event .buttons .btn-tickets,
article.holy-sunday section.event .buttons .btn-tickets:hover,
article.holy-sunday section.event .buttons .btn-tickets svg path {
  color: var(--yellow) !important;
  fill: var(--yellow);
}