/* ===============================
   CAROUSEL STYLES FOR HOME PAGE index.html — MOBILE FIRST
   =============================== */

/* Carousel container */
.carousel-wrapper {
  position: relative;
  display: block;
  height: 250px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* Carousel slide items */
.carousel-event {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: all 1s ease-in-out;
}

/* Text overlay (title on image) */
.textbox h3 {
  margin: 0;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--main-white-color);
  text-align: center;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 10px 0px;
  border-radius: 0.5em;
  width: 80%;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.textbox h3:hover {
  color: var(--main-black-color);
  background-color: var(--main-orange-transparent);
  transform: translateX(-50%) scale(1.1);
}

/* CAROUSEL ARROWS - PREVIOUS AND NEXT */
.arrow {
  border: solid #eee;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 6px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.arrow:hover {
  border-color: var(--main-orange-color);
  border-width: 0 7px 7px 0;
}

/* Previous arrow */
.arrow-prev-container {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  opacity: 1;
  position: absolute;
  top: 45%;
  left: 30px;
  z-index: 3;
}

.arrow-prev {
  left: -10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(135deg);
}

/* Next arrow */
.arrow-next-container {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  opacity: 1;
  position: absolute;
  top: 45%;
  right: 30px;
}

.arrow-next {
  right: -10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* Hide all targets by default */
[id^="event"] {
  display: none;
}

[id^="exhibition"] {
  display: none;
}

[id^="explore"] {
  display: none;
}

/* Shared image settings for all slides */
.event-1,
.event-2,
.event-3,
.exhibition-1,
.exhibition-2,
.exhibition-3,
.exhibition-4,
.exhibition-5,
.explore-1,
.explore-2,
.explore-3 {
  background-size: cover;
  background-position: center;
}

/* ===================================
   Special Events Carousel
=================================== */

.event-1 {
  z-index: 2;
  opacity: 1;
  background-image: url("../images/special_events/aeroneutics/aeroneutics_lecture.jpg");
}

.event-2 {
  background-image: url("../images/special_events/night_in_the_museum/sleep_over_event.jpg");
}

.event-3 {
  background-image: url("../images/special_events/energetica/energetica_event.jpg");
}

/* Hide event-1 when another event is targeted */
*:target ~ .event-1 {
  opacity: 0;
}

/* Show specific event slide when targeted */
#event-1:target ~ .event-1 {
  opacity: 1;
}

#event-2:target ~ .event-2,
#event-3:target ~ .event-3 {
  z-index: 3;
  opacity: 1;
}

/* ===================================
   Exhibitions Carousel
=================================== */

.exhibition-1 {
  z-index: 2;
  opacity: 1;
  background-image: url("../images/exhibitions/cosmology/planets.jpg");
}

.exhibition-2 {
  background-image: url("../images/exhibitions/evolution/skeleton.jpg");
}

.exhibition-3 {
  background-image: url("../images/exhibitions/biology_medicine/heart.jpg");
}

.exhibition-4 {
  background-image: url("../images/exhibitions/robotics_ai/samuel_zeller.jpg");
}

.exhibition-5 {
  background-image: url("../images/exhibitions/ecology/ant.jpg");
}

/* Hide exhibition-1 when another event is targeted */
*:target ~ .exhibition-1 {
  opacity: 0;
}

/* Show specific event slide when targeted */
#exhibition-1:target ~ .exhibition-1 {
  opacity: 1;
}

#exhibition-2:target ~ .exhibition-2,
#exhibition-3:target ~ .exhibition-3,
#exhibition-4:target ~ .exhibition-4,
#exhibition-5:target ~ .exhibition-5 {
  z-index: 3;
  opacity: 1;
}

/* ===================================
   Explore Carousel
=================================== */

.explore-1 {
  z-index: 2;
  opacity: 1;
  background-image: url("../images/explore/kids/girl_learning.jpg");
}

.explore-2 {
  background-image: url("../images/explore/teachers/teacher.jpg");
  background-position: top;
}

.explore-3 {
  background-image: url("../images/explore/researchers/lab_drawing.jpg");
}

/* Hide explore-1 when another event is targeted */
*:target ~ .explore-1 {
  opacity: 0;
}

/* Show specific event slide when targeted */
#explore-1:target ~ .explore-1 {
  opacity: 1;
}

#explore-2:target ~ .explore-2,
#explore-3:target ~ .explore-3 {
  z-index: 3;
  opacity: 1;
}

/* ===============================
   MEDIA QUERIES
   =============================== */

/* TABLET 768px - 1024px */
@media (min-width: 768px) {
  .carousel-wrapper {
    height: 400px;
  }

  .textbox h3 {
    padding: 15px 0px;
    width: 50%;
  }

  .arrow {
    border-width: 0 7px 7px 0;
    padding: 10px;
  }

  .arrow:hover {
    border-width: 0 9px 9px 0;
  }
}

/* DESKTOP (1024px - 1200px) */
@media (min-width: 1024px) {
  .carousel-wrapper {
    height: 450px;
    width: 900px;
    margin: 50px auto;
    border-radius: 10px;
  }

  .carousel-event {
    border-radius: 10px;
  }
}

/* LARGE DESKTOP (1024px and up) */
@media (min-width: 1200px) {
  .carousel-wrapper {
    height: 550px;
    width: 1100px;
  }
}