/* --------------------------------------------------- */
/* ------------- CUSTOM GALLERY v6 START --------------- */
/* --------------------------------------------------- */
#cms-gallery {
    .position, 
    .right-arrow.button-action, 
    .left-arrow.button-action,
    .text {
      display: none;
    }
    .right-arrow.button-action, .left-arrow.button-action {
        z-index: 2;
        bottom: 10px;
        top: auto;
        border-radius: 50vw;
        transform: none;

        svg {
            border-radius: 50vw;
            width: var(--arrows-btn-size, 55px);
            height: var(--arrows-btn-size, 55px);
        }
    }
    .left-arrow.button-action {
        left: var(--side-margin);
        right: auto;
    }
    .right-arrow.button-action {
        left: calc(var(--side-margin) + var(--arrows-btn-size, 55px) + 10px);
        right: auto;
    }
    .position {
        z-index: 2;
        left: calc(var(--side-margin) + var(--arrows-btn-size, 55px) + var(--arrows-btn-size, 55px) + 20px);
        right: auto;
        bottom: 10px;
        top: auto;
        transform: translateY(-10px);

        @media (width < 600px) {
            left: var(--side-margin);
             transform: none;
        }

        .button-action {
            border-radius: 50vw;
        }
    }
}
#cms-gallery #g2:has(.gallery-text-arrows .title > span:empty):has(.gallery-text-arrows .description p > span:first-child:empty):has(.gallery-text-arrows .button > span:empty) {
    .gallery-text-arrows {
        display: none !important;
    }
}
#cms-gallery:has(.gallery-text-arrows) #g2:not(:has(.gallery-text-arrows .title > span:empty):has(.gallery-text-arrows .description p > span:first-child:empty):has(.gallery-text-arrows .button > span:empty)) {

    .position, 
    .right-arrow.button-action, 
    .left-arrow.button-action,
    .text {
        display: none;
    }
}
#cms-gallery {
    --text-bg-color: #000;
    --gradient-color: linear-gradient(180deg, color-mix(in srgb, var(--text-bg-color) 0%, transparent) 0%, color-mix(in srgb, var(--text-bg-color) 70%, transparent) 80.73%);
    --side-margin: 24px;
    --bottom-margin: clamp(3.125rem, 2.974rem + 0.864vw, 4rem);
    --svg-arrow: url("data:image/svg+xml,%3Csvg width='64' height='63' viewBox='0 0 64 63' fill='none' xmlns='http://www.w3.org/2000/svg' data-v-49b348f6=''%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M38.5191 31.209L26.1659 43.8414L27.5668 45.265L41.2995 31.2222L27.3874 17L26 18.4104L38.5191 31.209Z' fill='%23252A2F'%3E%3C/path%3E%3C/svg%3E");

    @media (width > 600px) {
        &:has(.position > div:nth-child(2), .gallery-pagination .swiper-pagination-bullet:nth-child(2)) {
            --bottom-margin: clamp(5.25rem, 4.645rem + 3.457vw, 8.75rem);
        }
    }   

    @media (width > 1400px) {
        --side-margin: 40px;
    }

    @media (width > 1600px) {
        --side-margin: 77px;
    }
}

#cms-gallery #g2 {    
    position: relative;
    z-index: 1;

    .slide {
        position: relative;
        isolation: isolate;

        &::after {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            content: '';
            background: linear-gradient(270deg, color-mix(in srgb, var(--text-bg-color) 1%, transparent) 28.37%, var(--text-bg-color) 100%);
            opacity: 0.7;
        }
    }
    .gallery-text-overflow .image-wrapper > div:first-child {
        &, & > *:not(.gallery-text-arrows), img {
            min-height: var(--gallery-text-height, unset);
        } 
    }
    @media (width < 500px) {
        .slide {
            .text, .gallery-text-arrows {
                position: relative;
                inset: 0;
                padding: 20px;
                padding-bottom: 40px;
                
                .description {
                    margin-top: 0;
                }
            }
            .play.button-action, 
            .pause.button-action {
                --play-pause-btn-size: 45px;
                bottom: 5px;
                left: auto;
                right: 5px;
            }
            .position {
                left: 5px;
                right: auto;
                bottom: 5px;
                max-width: calc(100% - var(--play-pause-btn-size, 45px) -10px);

                .button-action {
                    width: 18px;
                    height: 18px;
                }
            }
        }
        .gallery-text .title, #galleryheading {
            font-size: 30px;
        }
        .gallery-arrows-buttons {

            .gallery-pagination {
                max-width: 100%;
            }
        }
    }
    
}

#cms-gallery .text,
#cms-gallery .gallery-text-arrows {
    padding-left: var(--side-margin);
    padding-right: calc(var(--side-margin) + var(--play-pause-btn-size, 45px) + 20px);
    padding-top: 40px;
    padding-bottom: var(--bottom-margin);
    left: 0;
    box-sizing: border-box;    
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 100%;
    transform: none;

    @media (width >= 500px) {
        background: var(--gradient-color) !important;
    }

    & > * {
        margin-inline: 0;
    }
}

#cms-gallery .text .description p>a:only-child,
#cms-gallery .gallery-text-arrows .button a {
    background-color: var(--gallery-button-bg-color, var(--secondary-color, #ccc));
    color: var(--gallery-button-text-color, var(--secondary-color-contrast, #000));
    text-decoration: none;
    padding: 6px 20px;
    border-radius: 4px;
    display: inline-flex;
    gap: 2px;
    align-items: center;
    font-weight: 700;
    transition: background-color .3s, color .3s, border-color .3s;
    text-shadow: none;

    @media (width > 980px) {
        padding: 12px 40px;
    }
}

#cms-gallery .text .description p>a:only-child:hover,
#cms-gallery .text .description p>a:only-child:focus,
#cms-gallery .gallery-text-arrows .button a:hover,
#cms-gallery .gallery-text-arrows .button a:focus {
    background-color: var(--gallery-button-bg-hover-color,  #FFF);
    color: var(--gallery-button-text-hover-color,  var(--primary-color));
}
#cms-gallery .play.button-action,
#cms-gallery .pause.button-action {
  bottom: var(--bottom-margin);
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  right: var(--side-margin);
  left: auto;
  width: var(--play-pause-btn-size, 55px);
  height: var(--play-pause-btn-size, 55px);
  border-radius: 50vw; 
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.1);
  }

  svg {
    border-radius: 50vw;
    width: var(--play-pause-btn-size, 55px);
     height: var(--play-pause-btn-size, 55px);
  }
}
#cms-gallery:has(.position > div:nth-child(2), .gallery-pagination .swiper-pagination-bullet:nth-child(2)) {
    .play.button-action,
    .pause.button-action {
        bottom: 10px;
    }
}
/* custom gallery text slider */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#home .gallery-text-arrows {
    display: none;    

     & > .hide-on-cms:not(.gallery-arrows-buttons) {
        display: none !important;
    }

    .description {
        margin-bottom: 20px;
        max-width: 880px;
    }
    .button { 
        font-size: var(--gallery-description-font-size, clamp(1.125rem, 0.592rem + 0.87vw, 1.375rem));
        line-height: 1.3;
        font-weight: 500;
    }
}
#view-theme .gallery-text-arrows:not(:has(.title > span:empty):has(.description p > span:first-child:empty):has(.button > span:empty)) {
  & > .hide-on-cms {
    display: none !important;

    &.update {
      display: block !important;
    }
  }
}
#cms-gallery .gallery-text-arrows {
    display: block !important; 
    animation: fadeIn 0.4s ease-out;    
}

#view-theme .gallery-text-wrapper {
    flex-direction: column;
    gap: 20px;
}

#cms-gallery .video-wrapper:has(.gallery-text-arrows) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#cms-gallery .only-in-cms,
#home .gallery-text-arrows .only-in-cms {
    display: none !important;
}
 

#cms-gallery .gallery-text .title,
#cms-gallery .gallery-text p,
#cms-gallery .gallery-text p a {
    color: var(--custom-gallery-text-color, var(--link-color));
}

#cms-gallery .gallery-text .title,
#cms-gallery #galleryheading {
    font-size: var(--gallery-title-font-size, clamp(2.5rem, -3.5rem + 7.5vw, 4rem));
    line-height: 1.1;
    font-weight: 900;
    text-shadow: 0px 0px 10px #0000008e;
    margin-bottom: 15px;
    text-wrap: balance;
    max-width: 880px;
}

#cms-gallery .description p {
    font-size: var(--gallery-description-font-size, clamp(1.125rem, 0.592rem + 0.87vw, 1.375rem));
    line-height: 1.3;
    font-weight: 500;
    text-shadow: 0px 0px 5px #0000008e;
    margin-bottom: 30px;
    text-wrap: balance;

    &:last-child {
        margin-bottom: 0;
    }
}

.gallery-arrows-buttons {
    position: absolute;
    bottom: 10px;
    left: var(--side-margin);
    display: flex;
    align-items: center;
    gap: 10px;
}

.gallery-swiper-button-prev,
.gallery-swiper-button-next {
    text-indent: -999px;
    font-size: 0;
    overflow: hidden;
    width: 30px;
    height: 30px;
    position: relative;
    inset: 0;
    margin: 0;
    border-radius: 50vw;
    background-color: var(--button-bg-color);
    width: var(--arrows-btn-size, 50px);
    height: var(--arrows-btn-size, 50px);

    @media (width <= 600px) {
        display: none;
    }
}

.gallery-swiper-button-prev::after,
.gallery-swiper-button-next::after {
    content: "";
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: var(--button-color);
    mask-image: var(--svg-arrow);
    mask-repeat: no-repeat no-repeat;
    mask-position: center center;
    mask-size: contain;
}

.gallery-swiper-button-prev::after {
    transform: rotate(180deg);
}

#cms-gallery .gallery-pagination {
    width: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    max-width: calc(100vw - 2 * var(--arrows-btn-size, 50px));
}

.gallery-pagination span {
    cursor: pointer;
    width: 14px;
    height: 14px;
    background-color: var(--gallery-pagination-color, var(--custom-gallery-text-color, #FFF));
    opacity: 1;
    display: block;
    margin: 0;

    @media (width > 1280px) {
        width: 24px;
        height: 24px;
    }
}

.gallery-pagination span.swiper-pagination-bullet-active {
    background-color: var(--gallery-pagination-active-color, var(--secondary-color));
}

/* --------------------------------------------------- */
/* ------------- CUSTOM GALLERY v6 END --------------- */
/* --------------------------------------------------- */