.works-header-link {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: inline-block;
}
.works-header-link .cta-underline {
  background-color: currentColor;
  width: 0;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: width 0.4s ease;
}
.works-header-link:hover .cta-underline {
  width: 100%;
}
.media-headings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1.5em;
  justify-content: center;
  align-items: baseline;
}
/* Loading / placeholder state for gallery + video thumbnails */
.media-grid .media-image-wrapper { position: relative; background-color: #e9e9ec; border-radius: 4px; overflow: hidden; }
.media-grid .media-image-wrapper::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 25%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 75%);
  background-size: 220% 100%;
  animation: media-shimmer 1.3s ease-in-out infinite;
}
.media-grid .media-image-wrapper.is-loaded::after { display: none; }
.media-grid .media-image-wrapper > img { position: relative; z-index: 1; opacity: 0; transition: opacity .45s ease; }
.media-grid .media-image-wrapper.is-loaded > img { opacity: 1; }
@keyframes media-shimmer { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
@media (prefers-reduced-motion: reduce) { .media-grid .media-image-wrapper::after { animation: none; } }

@media (max-width: 767px) {
  .media-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: .7rem !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: .7rem !important;
    padding-right: .7rem !important;
    box-sizing: border-box;
  }
}

@media (min-width: 992px) {
  #media-hero { transform: translateX(6.8%); }
}

@media (max-width: 991px) {
  .media-hero-scaler { position: relative; width: 100%; overflow: visible; }
  #media-hero {
    display: block !important;
    position: relative;
    width: 100% !important;
    max-width: 520px;
    margin: 0 auto !important;
    aspect-ratio: 1 / 1.34;
    transform: none !important;
  }
  #media-hero > div,
  #media-hero .perspective,
  #media-hero .transform-positive,
  #media-hero .transform-negative,
  #media-hero .image-wrapper,
  #media-hero .overlap-image-wrapper,
  #media-hero .trigger-parallax {
    transform: none !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }
  #media-hero .image-overlay { display: none !important; }
  /* de drie nodes absoluut positioneren */
  #media-hero > div { position: absolute !important; height: auto !important; }
  #media-hero > #w-node-media-third { left: 2%; top: -3%; width: 41% !important; z-index: 1; }                                  /* Flight: verder naar linksboven (Gabe) */
  #media-hero > #w-node-fe1dc324-d761-ad6f-ac5c-16b17e920fd0-b6eb91ef { left: 13%; top: 19%; width: 68% !important; z-index: 2; }  /* RODE foto: primair, groot, midden (top vast, groeit naar onder) */
  #media-hero > #w-node-fe1dc324-d761-ad6f-ac5c-16b17e920fd7-b6eb91ef { left: 63%; top: 34%; width: 35% !important; z-index: 3; }  /* Crash: verder naar rechts (Gabe), overlapt rechterrand rode foto */
  /* vaste verhouding per foto zodat ze hoogte krijgen; foto vult het kader */
  #media-hero .image-wrapper,
  #media-hero .overlap-image-wrapper {
    position: relative !important; height: auto !important; overflow: hidden; border-radius: 2px;
  }
  #media-hero > #w-node-media-third .overlap-image-wrapper { aspect-ratio: 5 / 7; }   /* Flight 1053x1474 */
  #media-hero > #w-node-fe1dc324-d761-ad6f-ac5c-16b17e920fd0-b6eb91ef .image-wrapper { aspect-ratio: 2 / 3; }   /* Fledermaus 1335x2000 */
  #media-hero > #w-node-fe1dc324-d761-ad6f-ac5c-16b17e920fd7-b6eb91ef .overlap-image-wrapper { aspect-ratio: 3 / 4; }   /* Crash 1150x1534 */
  #media-hero img.image-cover {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; object-fit: cover !important;
  }
}

  #media-nav { padding-top: 6em; padding-bottom: 6em; }
  @media (max-width: 767px) {
    #media-nav .title-grid { grid-template-columns: 1fr; grid-row-gap: .05em; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; }
    #media-nav .title-xl { font-size: 2.3rem !important; line-height: 1.02; white-space: nowrap; }
    #media-nav .title-grid > div { justify-self: start !important; }
    #media-nav .title-grid > div:nth-child(1) { margin-left: 16%; }   /* Gallery */
    #media-nav .title-grid > div:nth-child(2) { margin-left: 42%; }   /* Videos, rechts */
    #media-nav .title-grid > div:nth-child(3) { margin-left: 24%; }   /* Audio */
  }

.media-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-lightbox-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  cursor: pointer;
}

.media-lightbox-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

.media-lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  font-size: 2.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.3s;
}

.media-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.media-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  font-size: 3rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.3s;
}

.media-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.media-lightbox-prev {
  left: 2rem;
}

.media-lightbox-next {
  right: 2rem;
}

.media-lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.media-lightbox-img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
}

.media-lightbox-video {
  max-width: 100%;
  max-height: 85vh;
}

.media-lightbox-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.9);
  border-radius: 50%;
  animation: media-lb-spin 0.8s linear infinite;
  display: none;
  z-index: 3;
}
.media-lightbox-spinner.is-active { display: block; }
@keyframes media-lb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .media-lightbox-spinner { animation: none; } }

.media-lightbox-info {
  margin-top: 1.5rem;
  text-align: center;
  color: white;
}

.media-lightbox-production {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.media-lightbox-counter {
  font-size: 0.9rem;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .media-lightbox-nav {
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
  }
  .media-lightbox-prev {
    left: 1rem;
  }
  .media-lightbox-next {
    right: 1rem;
  }
  .media-lightbox-close {
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 2rem;
  }
}