/* Swiper Styles */
.split-content .swiper {
  --swiper-theme-color: rgb(var(--color-brand-tertiary, 54 121 190));
  --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-[14px] text-neutral-dark-gray;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span {
    @apply mb-5;
  }

  strong {
    @apply font-bold;
  }
}

.split-content .description.gradient-light::before {
  content: "";
  display: block;
  border-radius: 1000px;
  /* light gradient */
  @apply bg-gradient-brand;
  height: 8px;
  width: 160px;
  margin-bottom: 40px;
}

.split-content .description.gradient-dark::before {
  content: "";
  display: block;
  border-radius: 1000px;
  /* dark gradient */
  @apply bg-gradient-brand;
  height: 8px;
  width: 160px;
  margin-bottom: 40px;
}

/* 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_540px];
}

.split-content.home-split-content-1 .text-image {
  @apply items-start;
}

.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-0 max-w-none;

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

    img.img-primary {
      @apply lg:w-full lg:aspect-auto lg:h-full lg:ml-0 lg:max-w-none lg:max-h-none lg:rounded-none;
      object-fit: cover;
      min-height: 100%;
      /* Curved inner edge (right side) */
      clip-path: ellipse(100% 100% at 100% 50%);
    }
  }

  .image-text {
    @apply xl:grid-cols-[1fr_1fr] gap-0 max-w-none;

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

    img.img-primary {
      @apply md:w-full md:aspect-auto md:h-full md:mr-0 md:max-w-none md:max-h-none md:rounded-none;
      object-fit: cover;
      min-height: 100%;
      /* Curved inner edge (left side) */
      clip-path: ellipse(100% 100% at 0% 50%);
    }
  }

  @media screen and (max-width: 1023px) {
    .text-image img.img-primary,
    .image-text img.img-primary {
      clip-path: none;
      max-height: 350px;
    }
  }

  @media screen and (max-width: 767px) {
    .text-image img.img-primary,
    .image-text img.img-primary {
      max-height: 250px;
    }
  }
}

/* Circular Image Styles */
.split-content.circular {
  .text-image,
  .image-text {
    img.img-primary {
      @apply rounded-full;
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }
  }

  @media (max-width: 1023px) {
    .text-image,
    .image-text {
      img.img-primary {
        @apply rounded-full;
        /* Re-assert the aspect ratio on small screens */
        aspect-ratio: 1 / 1;
        height: auto;
        max-height: none;
        max-width: 85%;
      }
    }
  }
}

/* Rectangular Image Styles */
.split-content.rectangular {
  .content {
    padding: 40px 64px;
    gap: 0;
  }

  .text-image {
    @apply grid-cols-[520px_570px] gap-16 items-start;
  }

  .image-text {
    @apply grid-cols-[570px_520px] gap-16 items-start;
  }

  .text-image,
  .image-text {
    .text {
      max-width: 520px;
    }

    img.img-primary {
      @apply rounded-none;
      width: 570px;
      height: 355px;
      max-width: 570px;
      max-height: 355px;
      aspect-ratio: auto;
      object-fit: cover;
    }
  }

  .description {
    margin-bottom: 0;

    p:nth-last-child(1) {
      margin-bottom: 0;
    }
  }

  .image-text {
    .text {
      justify-self: end;
    }
  }

  @media (max-width: 1200px) {
    .content {
      padding: 40px 32px;
    }

    .text-image,
    .image-text {
      @apply grid-cols-1 gap-8;

      .text {
        max-width: 100%;
      }

      img.img-primary {
        /* Maintain rectangular dimensions on mobile, but allow it to scale down */
        width: 100%;
        max-width: 570px;
        height: auto;
        aspect-ratio: 570 / 355;
      }
    }
  }

  @media (max-width: 767px) {
    .content {
      padding: 40px 24px;
    }
  }
}

/* Image Overlap Styles */
.split-content.image-overlap {
  .text-image,
  .image-text {
    .img-overlap {
      @apply relative;
      min-height: 600px;

      .img-overlap-primary {
        @apply absolute w-[65%] h-auto;
        bottom: 0;
        left: 0;
        z-index: 1;
        aspect-ratio: 3 / 4;
      }

      .img-overlap-secondary {
        @apply absolute;
        top: 0;
        right: 0;
        z-index: 2;
        max-width: 310px;
        max-height: 310px;
        width: auto;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
      }
    }
  }

  /* Responsive adjustments */
  @media (max-width: 480px) {
    .text-image,
    .image-text {
      .img-overlap {
        min-height: 450px;

        .img-overlap-primary {
          @apply w-full max-w-[250px];
        }

        .img-overlap-secondary {
          max-width: 250px;
          max-height: 250px;
        }
      }
    }
  }
}

/* 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;
}

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

.split-content .title-3 {
  @apply mb-2;
}

.split-content .description {
  @apply text-label font-primary-light text-[#1e1e1e] leading-8 mb-0 sm:mb-6 mt-6;
}

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

/* Button Styles */
.split-content .buttons a {
  @apply uppercase text-[15px] font-primary-light 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,
.split-content .text-gallery .swiper {
  @apply -order-1;
}

.split-content .text-gallery .swiper {
  @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: 1023px) {
  .split-content .video-embed,
  .split-content img.img-primary {
    @apply order-first;
  }

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

/* 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;
      }
    }
  }
}

.split-content .buttons-component {
  @apply sm:mt-0 mt-8;
}

@media screen and (max-width: 1023px) {
  .split-content h2 {
    @apply text-[36px] leading-[48px];
  }

  .split-content h3 {
    @apply text-[28px] leading-[36px];
  }
}

@media screen and (max-width: 767px) {
  .split-content h2 {
    @apply text-[28px] leading-[36px];
  }

  .split-content h3 {
    @apply text-[18px] leading-[26px];
  }

  .split-content h4 {
    @apply text-[14px];
  }

  .split-content .description p {
    @apply leading-[30px];
  }

  .split-content .description li {
    @apply mb-[14px];
  }
}