<style>
:root {
  --columns-mobile: 2;
  --columns-desktop: 5;
  --img-height-mobile: 300px;
  --img-height-desktop: 450px;
  --img-gap: 30px;
  --img-round: 0px;
  --nav-bg: rgba(255, 255, 255, 1);
  --nav-bg-hover: rgba(255, 255, 255, 1);
  --nav-width: 28px;
  --nav-height: 28px;
  --nav-round: 50%;
  --nav-font-size: 1.2rem;
  --nav-box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  --nav-space: 0.5rem;
}
div.markdown-block:has(.tp-markdown-wrapper) .sqs-block-content {
  display: none !important;
}
div.tp-markdown-carousel-track img {
  width: auto !important;
}
.tp-markdown-wrapper {
  display: flex;
  justify-content: center;
}
.tp-markdown-carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.tp-markdown-carousel-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
}
.tp-markdown-carousel-track {
  display: flex;
  gap: var(--img-gap);
  transition: transform 0.5s ease;
}
.tp-markdown-carousel-track img {
  flex-shrink: 0;
  object-fit: cover;
  height: var(--img-height-mobile);
  border-radius: var(--img-round);
  transition: transform 0.3s ease;
}
.tp-markdown-carousel-track img:hover {
  transform: scale(1.05);
}
.tp-markdown-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--nav-bg);
  border: none;
  font-size: var(--nav-font-size);
  cursor: pointer;
  z-index: 1;
  padding: var(--nav-space);
  border-radius: var(--nav-round);
  width: var(--nav-width);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  box-shadow: var(--nav-box-shadow);
}
.tp-markdown-nav:hover {
  background-color: var(--nav-bg-hover);
}
.tp-markdown-nav.tp-left {
  left: 10px;
}
.tp-markdown-nav.tp-right {
  right: 10px;
}
.tp-lightbox-counter {
    display: none !important;
}
button.tp-markdown-nav {
    background-color: transparent !important;
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent !important;
}
button.tp-markdown-nav.tp-left {
    background-image: url(https://static1.squarespace.com/static/67db76703b2759638a900208/t/68dcca66cca0e1015f6e532f/1759300198204/Orb_Parchment.png);
}
button.tp-markdown-nav.tp-right {
    background-image: url(https://static1.squarespace.com/static/67db76703b2759638a900208/t/68dcca66cca0e1015f6e532f/1759300198204/Orb_Parchment.png);
} 
@media (max-width: 767px) {
  .tp-markdown-carousel-track img {
    width: calc((100% - (var(--img-gap) * (var(--columns-mobile) - 1))) / var(--columns-mobile));
    height: var(--img-height-mobile);
  }
}
@media (min-width: 768px) {
  .tp-markdown-carousel-track img {
    width: calc((100% - (var(--img-gap) * (var(--columns-desktop) - 1))) / var(--columns-desktop));
    height: var(--img-height-desktop);
  }
}
</style>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<style>
  .tp-markdown-carousel-wrapper {
    --img-height-mobile: 300px;
    --img-height-desktop: 450px;
    --columns-mobile: 2;
    --columns-desktop: 5;
    --img-gap: 30px;
  }
  .tp-markdown-carousel-wrapper {  
    position: relative;
    width: 100%;
    margin: 40px 0;
    overflow: hidden;
  }
  .tp-markdown-carousel {
    width: 100%;
    height: var(--img-height-mobile);
  }

  @media (min-width: 768px) {
    .tp-markdown-carousel {
      height: var(--img-height-desktop);
    }
  }

  .tp-markdown-carousel .swiper-slide {
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .tp-markdown-carousel .swiper-slide-active,
  .tp-markdown-carousel .swiper-slide-next,
  .tp-markdown-carousel .swiper-slide-prev {
    opacity: 1;
  }

  .tp-markdown-carousel .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
    cursor: zoom-in;
  }

  .tp-markdown-carousel .swiper-slide img:hover {
    transform: scale(1.05);
        transition: transform 0.3s ease;
  }

  .tp-markdown-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
  }

  .tp-markdown-nav:hover {
    background: rgba(0, 0, 0, 0.8);
  }

  .tp-markdown-nav.tp-left {
    left: 10px;
  }

  .tp-markdown-nav.tp-right {
    right: 10px;
  }

  .tp-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    align-items: center;
    justify-content: center;
  }

  .tp-lightbox.active {
    display: flex;
  }

  .tp-lightbox-content {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .tp-lightbox-swiper {
    width: 100%;
    height: 100%;
  }

  .tp-lightbox-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tp-lightbox-swiper .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .tp-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: white;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    z-index: 10001;
    transition: transform 0.3s ease;
  }

  .tp-lightbox-close:hover {
    transform: scale(1.2);
  }

  .tp-lightbox .tp-markdown-nav {
    background: rgba(255, 255, 255, 0.2);
  }

  .tp-lightbox .tp-markdown-nav:hover {
    background: rgba(255, 255, 255, 0.4);
  }

  section[id*="markdown-carousel"] .sqs-block-content {
    display: none;
  }
  .swiper-slide {
  width: auto !important;
  }
</style>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
const tpCarouselConfig = {
  autoplay: false,
  autoplayDelay: 3000,
  speed: 600,
  loop: true
};

document.addEventListener('DOMContentLoaded', function() {
  initMarkdownCarousel();
});

document.addEventListener('mercury:load', function() {
  initMarkdownCarousel();
});

function initMarkdownCarousel() {
  const section = document.querySelector('section[id*="markdown-carousel"]');
  if (!section) return;
  
  const markdownBlock = section.querySelector('.sqs-block-markdown');
  if (!markdownBlock || markdownBlock.querySelector('.tp-markdown-carousel-wrapper')) return;

  const links = markdownBlock.querySelectorAll('.sqs-block-content a');
  if (!links.length) return;

  const imageUrls = Array.from(links).map(link => link.href);

  const carouselHTML = `
    <div class="tp-markdown-carousel-wrapper">
      <div class="swiper tp-markdown-carousel">
        <div class="swiper-wrapper">
          ${imageUrls.map((url, index) => `
            <div class="swiper-slide">
              <img src="${url}" alt="Image ${index + 1}" data-index="${index}">
            </div>
          `).join('')}
        </div>
      </div>
      <button class="tp-markdown-nav tp-left">❮</button>
      <button class="tp-markdown-nav tp-right">❯</button>
    </div>
  `;

  const lightboxHTML = `
    <div class="tp-lightbox">
      <div class="tp-lightbox-content">
        <div class="swiper tp-lightbox-swiper">
          <div class="swiper-wrapper">
            ${imageUrls.map((url, index) => `
              <div class="swiper-slide">
                <img src="${url}" alt="Image ${index + 1}">
              </div>
            `).join('')}
          </div>
        </div>
        <button class="tp-markdown-nav tp-left">❮</button>
        <button class="tp-markdown-nav tp-right">❯</button>
        <button class="tp-lightbox-close">×</button>
      </div>
    </div>
  `;

  markdownBlock.insertAdjacentHTML('beforeend', carouselHTML);
  
  if (!document.querySelector('.tp-lightbox')) {
    document.body.insertAdjacentHTML('beforeend', lightboxHTML);
  }

  const wrapper = markdownBlock.querySelector('.tp-markdown-carousel-wrapper');
  const styles = getComputedStyle(wrapper);
  const columnsMobile = parseInt(styles.getPropertyValue('--columns-mobile')) || 2;
  const columnsDesktop = parseInt(styles.getPropertyValue('--columns-desktop')) || 5;
  const imgGap = parseInt(styles.getPropertyValue('--img-gap')) || 30;

  const mainSwiper = new Swiper(markdownBlock.querySelector('.tp-markdown-carousel'), {
    slidesPerView: columnsMobile,
    spaceBetween: imgGap,
    centeredSlides: true,
    loop: tpCarouselConfig.loop,
    speed: tpCarouselConfig.speed,
    navigation: {
      nextEl: markdownBlock.querySelector('.tp-right'),
      prevEl: markdownBlock.querySelector('.tp-left')
    },
    autoplay: tpCarouselConfig.autoplay ? {
      delay: tpCarouselConfig.autoplayDelay,
      disableOnInteraction: false
    } : false,
    breakpoints: {
      768: {
        slidesPerView: columnsDesktop,
        spaceBetween: imgGap
      }
    }
  });

  const lightboxSwiper = new Swiper('.tp-lightbox-swiper', {
    slidesPerView: 1,
    loop: tpCarouselConfig.loop,
    speed: tpCarouselConfig.speed,
    navigation: {
      nextEl: '.tp-lightbox .tp-right',
      prevEl: '.tp-lightbox .tp-left'
    },
    keyboard: {
      enabled: true
    }
  });

  const lightbox = document.querySelector('.tp-lightbox');
  const closeBtn = document.querySelector('.tp-lightbox-close');

  markdownBlock.querySelectorAll('.tp-markdown-carousel img').forEach(img => {
    img.addEventListener('click', function() {
      const index = parseInt(this.dataset.index);
      lightboxSwiper.slideToLoop(index);
      lightbox.classList.add('active');
      document.body.style.overflow = 'hidden';
    });
  });

  closeBtn.addEventListener('click', closeLightbox);
  lightbox.addEventListener('click', function(e) {
    if (e.target === lightbox) {
      closeLightbox();
    }
  });

  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && lightbox.classList.contains('active')) {
      closeLightbox();
    }
  });

  function closeLightbox() {
    lightbox.classList.remove('active');
    document.body.style.overflow = '';
  }
}
</script>
<style>
.tp-lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 7;
  transition: opacity 0.3s ease;
}
.tp-lightbox-overlay.active {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
}
.tp-lightbox-container {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-lightbox-image {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  cursor: default;
  transform: scale(0.9);
  transition: transform 0.4s ease;
}
.tp-lightbox-overlay.active .tp-lightbox-image {
  transform: scale(1);
}
.tp-lightbox-close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: white;
  font-size: 40px;
  font-weight: 300;
  cursor: pointer;
  background: none;
  border: none;
  transition: transform 0.3s ease;
  z-index: 100000;
  line-height: 0;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-lightbox-nav { 
    background-color: transparent !important; 
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center; 
    color: transparent !important;
    border: none !important;
} 
.tp-lightbox-nav.prev {
    background-image: url(https://static1.squarespace.com/static/67db76703b2759638a900208/t/68dcca66cca0e1015f6e532f/1759300198204/Orb_Parchment.png) !important;
} 
.tp-lightbox-nav.next { 
    background-image: url(https://static1.squarespace.com/static/67db76703b2759638a900208/t/68dcca66cca0e1015f6e532f/1759300198204/Orb_Parchment.png) !important;
}
.tp-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 30px;
  cursor: pointer;
  padding: 14px 14px;
  border-radius: 50%;
  transition: all 0.3s ease;
  z-index: 100000;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-lightbox-close:hover {
  transform: scale(1.2);
}
.tp-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}
.tp-lightbox-nav.prev {
  left: 28px;
}
.tp-lightbox-nav.next {
  right: 28px;
}  
.tp-markdown-carousel-track img {
  cursor: zoom-in;
 }   
button.tp-lightbox-nav, button.tp-markdown-nav {
    border-radius: 0 !important;
}
@media (max-width: 767px) {
  .tp-lightbox-nav {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
  
  .tp-lightbox-nav.prev {
    left: 10px;
  }
  
  .tp-lightbox-nav.next {
    right: 10px;
  }
  
  .tp-lightbox-close {
    top: 10px;
    right: 20px;
    font-size: 30px;
  }
}
</style>
<script>
(function() {
  let lightboxOverlay = null;
  let currentLightboxIndex = 0;
  let allImages = [];
  function createLightbox() {
    if (document.getElementById('tp-lightbox')) return;
    
    const lightboxHTML = `
      <div id="tp-lightbox" class="tp-lightbox-overlay">
        <button class="tp-lightbox-close">&times;</button>
        <button class="tp-lightbox-nav prev">&#10094;</button>
        <div class="tp-lightbox-container">
          <img class="tp-lightbox-image" src="" alt="">
        </div>
        <button class="tp-lightbox-nav next">&#10095;</button>
        <div class="tp-lightbox-counter">
          <span class="current">1</span> / <span class="total">1</span>
        </div>
      </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', lightboxHTML);
    
    lightboxOverlay = document.getElementById('tp-lightbox');
    const closeBtn = lightboxOverlay.querySelector('.tp-lightbox-close');
    const prevBtn = lightboxOverlay.querySelector('.tp-lightbox-nav.prev');
    const nextBtn = lightboxOverlay.querySelector('.tp-lightbox-nav.next');
    const lightboxImage = lightboxOverlay.querySelector('.tp-lightbox-image');
    
    closeBtn.addEventListener('click', closeLightbox);
    
    lightboxOverlay.addEventListener('click', function(e) {
      if (e.target === lightboxOverlay || e.target.classList.contains('tp-lightbox-container')) {
        closeLightbox();
      }
    });
    
    prevBtn.addEventListener('click', function(e) {
      e.stopPropagation();
      navigateLightbox(-1);
    });
    
    nextBtn.addEventListener('click', function(e) {
      e.stopPropagation();
      navigateLightbox(1);
    });
    
    document.addEventListener('keydown', function(e) {
      if (!lightboxOverlay.classList.contains('active')) return;
      
      switch(e.key) {
        case 'Escape':
          closeLightbox();
          break;
        case 'ArrowLeft':
          navigateLightbox(-1);
          break;
        case 'ArrowRight':
          navigateLightbox(1);
          break;
      }
    });
  }
  function openLightbox(imageSrc, index, images) {
    if (!lightboxOverlay) createLightbox();
    
    currentLightboxIndex = index;
    allImages = images;
    
    const lightboxImage = lightboxOverlay.querySelector('.tp-lightbox-image');
    const currentSpan = lightboxOverlay.querySelector('.current');
    const totalSpan = lightboxOverlay.querySelector('.total');
    
    lightboxImage.src = imageSrc;
    currentSpan.textContent = index + 1;
    totalSpan.textContent = images.length;
    
    setTimeout(() => {
      lightboxOverlay.classList.add('active');
    }, 10);
    
    document.body.style.overflow = 'hidden';
  }
  function closeLightbox() {
    lightboxOverlay.classList.remove('active');
    document.body.style.overflow = '';
  }
  function navigateLightbox(direction) {
    currentLightboxIndex += direction;
    
    if (currentLightboxIndex < 0) {
      currentLightboxIndex = allImages.length - 1;
    } else if (currentLightboxIndex >= allImages.length) {
      currentLightboxIndex = 0;
    }
    
    const lightboxImage = lightboxOverlay.querySelector('.tp-lightbox-image');
    const currentSpan = lightboxOverlay.querySelector('.current');
    
    lightboxImage.style.opacity = '0';
    lightboxImage.style.transform = 'scale(0.9)';
    
    setTimeout(() => {
      lightboxImage.src = allImages[currentLightboxIndex];
      currentSpan.textContent = currentLightboxIndex + 1;
      
      setTimeout(() => {
        lightboxImage.style.opacity = '1';
        lightboxImage.style.transform = 'scale(1)';
      }, 50);
    }, 200);
  }
  if (window.MarkdownCarousel) {
    window.MarkdownCarousel.addHook('afterCarouselCreate', function(data) {
      const { markdownBlock, imageUrls } = data;
      const images = markdownBlock.querySelectorAll('.tp-markdown-carousel-track img');
      
      images.forEach((img, index) => {
        img.addEventListener('click', function(e) {
          e.preventDefault();
          openLightbox(img.src, index, imageUrls);
        });
      });
    });
  }
  createLightbox();
})();
</script>