@import url('../../../commons/blocks/services/view-gallery/view-gallery.css');

.view-gallery {
  background-color: transparent;
  .view-gallery__container{
    padding: var(--space-24px) 1.25rem 2.5rem;

    @media (width >=1024px) {
      padding: 2.125rem  3.5rem 5rem;
      
    }
  }
  .view-gallery__header {
  :is(h1,h2,h3,h4,h5,h6) {
    color: var(--primary-black);
    font-family: var(--body-font-arena);
    font-size: var(--heading-font-15-mob-sub-heading);
    font-weight: var(--fw-700);
    line-height: normal;
    letter-spacing: normal;

    @media (width >=1024px) {
      color: var(--secondary-black);
      font-size: var(--heading-font-6-mob);
      line-height: var(--heading-lh-16-des-display);
    }
  }
  }

  .gallery-splide__track {
    padding: var(--space-16px) var(--space-16px) var(--space-16px) var(--space-16px);
    margin-top: var(--space-24px);
    @media (width >=1024px) {
      padding: var(--space-24px) var(--space-24px) var(--space-24px) var(--space-24px);
    }

  }
  .view-gallery__header-wrapper{
    gap: .5rem;
    display: flex;
    align-items: center;
    margin-bottom: 2.25rem;
    @media (width >=1024px) {
      margin-bottom: 3.875rem;
      
    }

    .back-btn{
      margin: 0;
      width: 1.5rem;
      height: 1.5rem;
      padding: 0;
      background-position: center;
      background-size: 11px 11px;
      @media (width >=1024px) {
        background-size: 1.5rem 1.5rem;   
      }    
  }
}
  .view-gallery__item-header_wrapper {
    width: 100%;
    padding-bottom:var(--space-16px);
    border-bottom: 0.214px solid;
    border-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000, rgba(0, 0, 0, 0)) 1;
    @media (width >=1024px) {
      padding-bottom:var(--space-24px);
      border-bottom: 1px solid;
      
    }
  }

  .view-gallery__item-header{
  
    color: var(--primary-black);
    font-family: var(--body-font-arena);
    font-size: var(--heading-font-4-mob);
    font-weight: var(--fw-700);
    line-height: var(--heading-lh-5--mob);
    flex-grow: 1;

    @media (width >=1024px) {
      font-size: var(--heading-font-15-mob-sub-heading);
      line-height: var(--heading-lh-19-mob-text-small);
    }
  
  }

  .live-img-accordion-btn {
    width: 24px;
    height: 24px;
    background: url(/icons/add-blue.svg) no-repeat center;
    background-size: contain;
    display: block;
    transition: transform 0.3s ease-in-out;
    margin: 0;
  }

  [open] .live-img-accordion-btn {
    background: url(/icons/minus-blue.svg);
  }

  .live-img-accordion-btn::after {
    background: url(/icons/arrow-down.svg) no-repeat center;
  }

  .splide__arrows{
    padding-top: var(--space-24px);
  }
  .splide__arrow {
    /* background-color: transparent; */
    height: 2rem;
    width: 2rem;
    padding: 0.5rem;
    border: 0.667px solid var(--primary-blue-700);
    background: url(/icons/arrow-left-blue.svg) center / 1rem 1rem no-repeat;
    transform: rotate(360deg);
    margin: 0;

    &:disabled {
      opacity: .5;
      transform: rotate(0deg);
    }

    @media (width>=1024px) {
      height: 3rem;
      width: 3rem;
      background-size: 1.5rem 1.5rem;
      padding: 0.75rem;
    }
  }

  .dialog-container {
    clip-path: none;
    padding: 50px 16px 16px;

    @media (width >=1024px) {
      padding: 73px 24px 97px;
    }

    .close-button-container{
      top: 1rem;
      @media (width >=1024px) {
        top: 1.5rem;
        right: 1.5rem;
        
      }

      .close-btn{
        width: 1.5rem;
        height: 1.5rem;  
        
      }
    }
  }

  .dialog-slider_wrapper {
    padding: 0px;

    .nav-button-wrapper {
      position: relative;
      margin: 0px;
      transform: none;
    }

    .splide__arrows--ltr {
      justify-content: flex-end;
      padding: 0px;
    }

    .splide__pagination {
      display: none;
    }

    .gallery_slider-item {
      width: 100%;
    }

    .slider_img {
      width: 100%;

      @media (width >=768px) {
        max-width: 1024px;
      }
    }
  }

    .dialog-slider_wrapper {
      .splide__arrows {
        display: flex;
        gap: 0.5rem;

        .icon-size {
          margin: 0;
          width: 1.5rem;
          height: 1.5rem;
          background-image: url('/icons/arrow-left-blue.svg');
          transform: rotate(360deg);
          @media (width >=1024px) {
            width: 3rem;
            height: 3rem;
            
            
          }
        }

      }
    }


  .dialog_img-container{
    .dialog-title{
      color: var(--primary-black);
      font-size: var(--heading-font-1-mob);
      font-weight: var(--fw-700);
      line-height: var(--heading-lh-5--mob);

      @media (width>=1024px) {
        font-size: var(--heading-font-12-des);
        line-height: var(--heading-lh-9-des-sub-heading);
        margin-top: 0;
        margin-bottom: var(--space-24px);
        
      }
    }
    .slider_img_container{
      .slider_img{
        aspect-ratio: 278/414;
        @media (width >=1024px) {
          aspect-ratio: 922/378;
          
        }
      }
      margin-bottom: var(--space-16px);
      @media (width >=1024px) {
        margin-bottom: var(--space-24px);
        
      }
    }
  }
}