/* Custom page CSS
-------------------------------------------------- */
/* Container op kleine schermen schermbreed maken */
@media (max-width: 576px) {
  .layout-mobile-full {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Compactere hero/info-balk op mobiel (bovenste grijze blok) */
@media (max-width: 576px) {
  section.py-4.grey-background.border-bottom {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  section.py-4.grey-background.border-bottom h1.h3 {
    font-size: 1.35rem;
    margin-bottom: 0.25rem;
  }

  section.py-4.grey-background.border-bottom h2.h5 {
    font-size: 1.0rem;
    margin-bottom: 0.75rem;
  }

  section.py-4.grey-background.border-bottom p {
    margin-bottom: 0.25rem;
  }
}

/* Intro-blok voorbeeld */
#intro-example {
  margin-top: 1rem;
  height: 200px;
}

/* Height voor devices groter dan 992px */
@media (min-width: 992px) {
  #intro-example {
    height: 400px;
  }
}

/* Afbeeldingen nooit uitrekken */
img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Layout en footer
-------------------------------------------------- */
main > .container {
  padding: 50px 15px 0;
}

.footer {
  background-color: #f5f5f5;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

/* Statuskleuren
-------------------------------------------------- */
.grey-background {
  background-color: #cccccc;
}

.blue-background {
  background-color: #D7E5F0;
}

/* Open */
.green-background {
  background-color: #d4edda;
}

/* Storing / in onderhoud */
.orange-background {
  background-color: #ffe3b3;
}

/* Gesloten */
.red-background {
  background-color: #f7bec0;
}

/* Neutrale lichte achtergrond (bijvoorbeeld voor blokken) */
.light-background {
  background-color: #e9eae0;
}

/* Shows en tijden
-------------------------------------------------- */
/* Oudere variant showtime (laat staan voor compatibiliteit) */
.showtime {
  display: inline-block;
  margin: 0 2px;
}

.showtime.past {
  text-decoration: line-through;
  opacity: 0.6;
}

.showtime.upcoming {
  font-weight: 500;
}

/* Alternatieve naamgeving show-time (ook legacy) */
.show-time {
  display: inline-block;
  margin-right: 4px;
  font-size: 0.85rem;
}

.show-time.past {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Huidige variant gebruikt in shows.php */
.past-show {
  text-decoration: line-through;
  opacity: 0.6;
}

.next-show {
  font-weight: bold;
  text-decoration: underline;
}

.future-show {
  opacity: 0.9;
}

/* Carousel
-------------------------------------------------- */
.carousel {
  margin-bottom: 1rem;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 2rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 18rem;
  background-color: #777;
}

.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 18rem;
}

/* Kleine pijltjes (up/down) bijvoorbeeld bij tabellen
-------------------------------------------------- */
.up-arrow {
  width: 0;
  height: 0;
  border: solid 5px transparent;
  background: transparent;
  border-bottom: solid 7px black;
  border-top-width: 0;
  cursor: pointer;
}

.down-arrow {
  width: 0;
  height: 0;
  border: solid 5px transparent;
  background: transparent;
  border-top: solid 7px black;
  border-bottom-width: 0;
  margin-top: 1px;
  cursor: pointer;
}

/* Compactere header-infobalk op kleine schermen */
@media (max-width: 576px) {
  section.grey-background.border-bottom {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  section.grey-background.border-bottom h1.h3 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
  }

  section.grey-background.border-bottom h2.h5 {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
  }

  section.grey-background.border-bottom p {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
  }
}