/* =========================================================
   24J. MEDIA / VIDEO / AUDIO
   ========================================================= */

.veralisio-article-media {
  width: 100%;

  margin: 30px 0 80px;
}

.veralisio-media-block {
  width: 100%;

  padding: 32px;

  overflow: hidden;

  border-radius: 18px;
}

.veralisio-media-video {
  color: #FFFFFF;
  background-color: #30275F;
}

.veralisio-media-audio {
  color: #24212D;
  background-color: #F3ECD7;
}

.veralisio-media-header {
  margin-bottom: 24px;
}

.veralisio-media-type {
  display: block;

  margin: 0 0 10px;

  color: #D8C99B;

  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.veralisio-media-audio .veralisio-media-type {
  color: #5946A8;
}

.veralisio-media-header h3 {
  margin: 0 0 8px;

  color: inherit;

  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.veralisio-media-header p {
  margin: 0;

  color: inherit;

  font-size: 1rem;
  line-height: 1.6;
}


/* YouTube */

.veralisio-video-embed,
.veralisio-youtube-embed {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 9;

  overflow: hidden;

  background-color: #24212D;

  border-radius: 12px;
}

.veralisio-video-embed iframe,
.veralisio-youtube-embed iframe {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  margin: 0;

  border: 0;
}


/* SoundCloud */

.veralisio-soundcloud-embed {
  width: 100%;

  overflow: hidden;

  border-radius: 12px;
}

.veralisio-soundcloud-embed iframe {
  display: block;

  width: 100%;
  max-width: 100%;
  height: 166px;

  margin: 0;

  border: 0;
}

/* =========================================================
   PROJECT MEDIA / PLAYLISTS
   ========================================================= */

/* Ruimte tussen YouTube en SoundCloud */

#project-media .veralisio-media-video {
  margin-bottom: 36px !important;
}


/* Playlist links */

#project-media .veralisio-media-block .veralisio-project-card-link {
  display: inline-flex !important;
  margin-top: 22px !important;
}

#project-media .veralisio-media-video .veralisio-project-card-link {
  color: #D8C99B !important;
}

#project-media .veralisio-media-video .veralisio-project-card-link:hover {
  color: #FFFFFF !important;
}

#project-media .veralisio-media-audio .veralisio-project-card-link {
  color: #5946A8 !important;
}

#project-media .veralisio-media-audio .veralisio-project-card-link:hover {
  color: #30275F !important;
}


@media (max-width: 767px) {

  #project-media .veralisio-media-video {
    margin-bottom: 24px !important;
  }

}

/* =========================================================
   PROJECT HUB MEDIA / PLAYLISTS
   ========================================================= */

/*
   Project pages reuse the article media blocks, but playlist embeds need
   their own spacing and, for SoundCloud sets, more vertical room than a
   single-track player.
*/

#project-media {
  margin-bottom: 56px;
}

#project-media .veralisio-current-projects-heading {
  margin-bottom: 30px;
}

#project-media .veralisio-article-content + .veralisio-article-content {
  margin-top: 28px;
}

#project-media .veralisio-soundcloud-embed iframe {
  height: 450px;
}

@media (max-width: 767px) {

  #project-media {
    margin-bottom: 36px;
  }

  #project-media .veralisio-current-projects-heading {
    margin-bottom: 24px;
  }

  #project-media .veralisio-article-content + .veralisio-article-content {
    margin-top: 20px;
  }