/* Swiper Styles */
.split-content .swiper {
  --swiper-theme-color: #006a53;
  --swiper-navigation-size: 1.5rem;
}

.split-content .swiper-button-prev,
.split-content .swiper-button-next {
  @apply bg-white w-10 h-10 rounded-full shadow-lg;
}

.split-content .swiper-button-prev {
  @apply left-1 md:left-[10px];
}

.split-content .swiper-button-next {
  @apply right-1 md:right-[10px];
}

.split-content .swiper-button-prev:hover,
.split-content .swiper-button-next:hover {
  @apply bg-gray-200;
}

/* Content Styles */
.split-content .description,
.split-content .description-two {
  ul {
    @apply ml-6 list-disc list-outside mb-8;
  }

  li {
    @apply mb-1 text-gray-500;
  }

  p {
    @apply text-gray-500;
  }
}

/* Layout Specific Styles */

/*$image_classes = 'aspect-[3/2] md:aspect-[10/9] object-cover w-[490px] max-w-full mx-auto max-h-[250px] md:max-h-full img-primary';*/
/*$image_classes .= ' -order-1';*/
.split-content .text-image {
  @apply xl:grid-cols-[600px_490px];
}

.split-content .image-text {
  @apply xl:grid-cols-[490px_600px];
}

.split-content .text-video {
  @apply xl:grid-cols-[600px_490px];
}

.split-content .video-text {
  @apply xl:grid-cols-[490px_600px];
}

/* Full Bleed Styles */
.split-content.full-bleed {
  .text-image {
    @apply xl:grid-cols-[1fr_1fr] gap-4;

    .text {
      @apply xl:max-w-[600px] xl:ml-auto md:mr-8 md:py-14 md:pl-8;
    }

    img.img-primary {
      @apply md:w-full md:aspect-auto md:h-full md:ml-0 md:max-w-2xl py-6;
    }
  }

  .image-text {
    @apply xl:grid-cols-[1fr_1fr] gap-4;

    .text {
      @apply xl:max-w-[600px] xl:mr-auto md:ml-8 md:py-14 md:pr-8;
    }

    img.img-primary {
      @apply md:w-full md:aspect-auto md:h-full md:mr-0 md:max-w-2xl py-6;
    }
  }
}

/* Video Embed Styles */
.split-content .video-embed iframe {
  @apply max-w-full max-h-[250px] md:max-h-full w-full h-full;
}

/* Typography Styles */
.split-content .title-1 {
  @apply mb-6 text-brand-navy;
}

.split-content .title-2 {
  @apply mb-6 text-brand-navy;
}

.split-content .title-3 {
  @apply text-brand-coral font-bold text-[17px] uppercase mb-2;
}

.split-content .description {
  @apply text-lg font-figtree text-gray-500 leading-8 mb-0 sm:mb-8 mt-8;
}

.split-content .description p {
  margin-bottom: 1rem;
}

/* Button Styles */
.split-content .buttons a {
  @apply uppercase text-[15px] font-figtree font-medium py-3;
}

/* Inner Blocks Styles */
.split-content .inner-blocks-wrapper {
  @apply mt-8 relative;
  min-height: 50px;
}

/* Editor-specific styles */
.block-editor-block-list__layout .split-content .inner-blocks-wrapper {
  @apply border border-dashed border-gray-300 p-4 bg-gray-50;
}

/* Hide empty state in frontend */
.split-content .inner-blocks-wrapper .wp-block-acf-split-content__placeholder {
  display: none;
}

/* Gallery Layout Specific */
.split-content .gallery-text .swiper-container,
.split-content .text-gallery .swiper-container {
  @apply -order-1;
}

.split-content .text-gallery .swiper-container {
  @apply md:order-2;
}

/* Container Width Modifiers */
.split-content .content {
  @apply max-w-7xl mx-auto;
}

.split-content.container-full-width .content {
  @apply max-w-none;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .split-content .video-embed,
  .split-content img.img-primary {
    @apply order-first;
  }

  .split-content .content {
    @apply px-4;
  }
}

/* Virtual Tour Styles */
.split-content .virtual-tour-embed {
  @apply w-full h-full min-h-[400px];
}

.split-content .virtual-tour-embed iframe {
  @apply w-full h-full;
}

/* Additional Layout Helper Classes */
/*.split-content .order-first {
  @apply order-first;
}*/

/*.split-content .order-last {
  @apply order-last;
}*/

.split-content .buttons-component {
  @apply flex justify-center;
}

.split-content {
  &.align-text-left {
    .text {
      @apply text-left;

      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .description {
        @apply text-left;
      }

      .molecule-buttons {
        @apply flex justify-start;
      }
    }
  }

  &.align-text-center {
    .text {
      @apply text-center;

      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .description {
        @apply text-center;
      }

      .molecule-buttons {
        @apply flex justify-center;
      }
    }
  }

  &.align-text-right {
    .text {
      @apply text-right;

      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .description {
        @apply text-right;
      }

      .molecule-buttons {
        @apply flex justify-end;
      }
    }
  }
}