/* Parallax Styles for ACF Storytelling Block */
.storytelling-hero {
  position: sticky;
  top: 0;
  left: 0;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  margin-top: 0 !important;
}

.storytelling-hero .hero-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* z-index: 98; */
}

.storytelling-hero .hero-media img,
.storytelling-hero .hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.storytelling-hero .hero-content {
  position: relative;
  z-index: 2;
  padding: 4rem 2rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  /* max-width: 1200px; */
  margin: 0 auto;
}

.storytelling-content {
  margin: 0 !important;
}

.storytelling-block {
  position: relative;
  overflow: hidden;
  padding: 8rem 0;
  /* min-height: 100vh; */
}
.bg-white {
  background-color: #fff;
  color: #000;
  z-index: 18;
}

.storytelling-block > * {
  position: relative;
  z-index: 13;
  width: var(--content-width);
  max-width: var(--w-2xl);
  margin: 0 auto;
}

.storytelling-block > * + * {
  margin-top: max(var(--flow, 2.5rem), 4rem) !important;
}
.storytelling-block.bg-white .content-description > * + * {
  margin-top: 1.5rem;
}

.storytelling-block h2 {
  margin-left: auto;
  margin-right: auto;
}

.storytelling-block .content-image,
.storytelling-block .content-video {
  width: 100%;
  height: auto;
  display: block;
}
.content-with-alignment,
.storytelling-block .content-description {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.storytelling-block.bg-white .content-description {
  min-height: auto;
}
.storytelling-block .video {
  aspect-ratio: 16 / 9;
  position: relative;
}

.storytelling-block .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: none;
}
.content-description iframe {
  aspect-ratio: 16 / 9;
  height: 100%;
  width: 100%;
}

.storytelling-block .content-description {
  margin: 0 auto;
}

/* Parallax Background */

.storytelling-block .parallax-bg::after,
.storytelling-block .parallax-bg {
  background-attachment: fixed;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100%; /* Increase to simulate more parallax scrolling */
  z-index: 12;
  margin-top: 0 !important;
  background-size: cover;
}
.storytelling-block .parallax-bg::after {
  content: "";
  height: 100%;
  background-image: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.78) 15%,
    rgba(1, 177, 198, 0.5) 100%
  );
  z-index: 10;
}
.storytelling-block .video.parallax-bg::after {
  background-image: none;
}
.storytelling-block .parallax-bg img {
  position: sticky;
  top: 0;
  max-width: 100%;
  width: 100%;
  min-height: 100vh;
  z-index: -1;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  will-change: transform; /* Optimizes performance */
}

/* Ensure the parallax image takes the full width */
.storytelling-block .parallax-bg * {
  max-width: 100%;
}

.storytelling-block .parallax-bg img,
.storytelling-block .parallax-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Content position styles */
.storytelling-block .content-text-left,
.storytelling-block .content-text-right,
.storytelling-block .content-text-center {
  max-width: var(--w-sm);
  background-color: #fff;
  color: #000;
  padding: 1rem;
  border-radius: 0.25rem;
}

.storytelling-block .content-text-left {
  text-align: center;
  margin-right: auto;
  margin-left: 0;
}

.storytelling-block .content-text-right {
  text-align: center;
  margin-left: auto;
  margin-right: 0;
}

.storytelling-block .content-text-center {
  text-align: center;
  margin: 0 auto;
}

/* Gallery styles */
.storytelling-block .gallery {
  /* display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  grid-gap: 1rem;
  margin: 0 auto;
}
.storytelling-block .gallery a {
  flex: 1 1 calc((100% - 3rem) / 3);
  min-width: 150px; /* optional, avoid too small */
  max-width: 100%;
  box-sizing: border-box;
}

.storytelling-block .gallery img {
  width: 100%;
  height: auto;
  display: block;
}
.video-bg-parent {
  overflow: unset;
  padding: 0;
}
.video-bg-parent .parallax-bg {
  /* display: none; */
}
.video.parallax-bg.is_bg_video {
  display: block;
  height: 100vh;
  position: sticky;
  top: 0;
}

.lb-container img {
  opacity: 1;
}
body.gallery-open {
  overflow: hidden;
}
.split-content-with-alignment {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  gap: 2.5rem;
  align-items: center;
}
.split-content-with-alignment .content-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background-color: #fff;
  color: #000;
  padding: 1rem;
  border-radius: 0.25rem;
}
.split-content-with-alignment .content-text h2 {
  margin: 0;
}
@media (min-width: 980px) {
  .content-text.content-pos-left {
    order: -1;
  }
}