/* Asli Nakli - Mobile First */
.asli-nakli {
  /* Background variables */
  --before-image-bg: linear-gradient(180deg, rgb(241 241 241 / 0%) -3.57%, rgb(57 139 215 / 15%) 100%);
  --after-image-bg: linear-gradient(180deg, rgb(241 241 241 / 0%) -6.43%, rgb(210 63 65 / 15%) 100%);
  --mobile-bg-before: linear-gradient(180deg, rgb(57 139 215 / 20%) 0%, rgb(255 255 255 / 20%) 100%);
  --mobile-bg-after: linear-gradient(180deg, #ffe7e7 0%, #fff 100%);

  margin: 0;
  padding: 44px 20px 24px;
  width: 100%;
  background: var(--mobile-bg-before);
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: background 0.3s ease;

  @media (width >= 768px) {
    color: var(--neutrals-sub-texts-paragraphs);
    background: transparent;
    margin: 0 auto;
    padding: 32px 20px;
    min-height: auto;
  }

  @media (width >= 1024px) {
    padding: 50px var(--container-margin);

    &.homepage-template {
      margin-top: 64px;
    }
  }

  /* Mobile background states */
  &.mobile-bg-before {
    background: var(--mobile-bg-before);
  }

  &.mobile-bg-after {
    background: var(--mobile-bg-after);
  }

  /* Reset background changes on desktop */
  @media (width >= 768px) {
    &.mobile-bg-before,
    &.mobile-bg-after {
      background: transparent;
    }
  }
}

/* Tab Navigation */
.asli-nakli-tab-nav {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  gap: var(--sizing-s);
  border-bottom: var(--shape-border-width-1) solid rgb(0 0 0 / 10%);
  width: 100%;

  @media (width >= 768px) {
    justify-content: center;
    align-self: center;
    gap: 16px;
    width: 320px;
    min-width: 540px;
    align-items: center;
    padding-top: 0;
  }

  @media (width >= 1024px) {
    min-width: 608px;
    padding-top: 16px;
  }

  .tab-button {
    padding: var(--spacing-xsmall) 0 var(--sizing-s);
    border: none;
    background: none;
    color: #212121;
    cursor: pointer;
    font-size: var(--fs-xsmall);
    position: relative;
    white-space: nowrap;
    font-weight: var(--fw-400);
    line-height: 1.6rem;
    width: 70px;
    text-transform: uppercase;

    &.active {
      font-weight: var(--fw-700);
      color: var(--primary-color);
      border-bottom: 2px solid var(--primary-color);
    }

    @media (width >= 768px) {
      min-width: 122px;
      min-height: 36px;
    }

    @media (width >=1024px) {
      font-size: var(--fs-small);
      line-height: var(--lh-small);
      min-height: 38px;
      min-width: 140px;
    }
  }
}

/* Content Layout */
.asli-nakli-content {
  display: grid;
  gap: var(--spacing-big);
  margin-bottom: var(--grid-gutter-width);

  /* min-height: 358px; */

  @media (width >= 768px) {
    padding: 0;
    margin: 12px 0 0;
  }

  @media (width >= 1024px) {
    margin-top: var(--spacing-3xl);
  }

  /* Image Comparison */
  .image-comparison {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    width: calc(100% + var(--spacing-xxbig));
    min-height: 358px;
    display: flex;
    flex-direction: column;
    gap: 24px;

    @media (width >= 768px) {
      margin: 0;
      width: 100%;
      aspect-ratio: 1366 / 326;
      min-height: 331px;
    }

    @media (width >= 1024px) {
      height: auto;
    }
  }

  /* Mobile Toggle */
  .mobile-toggle {
    display: flex;
    align-self: center;
    gap: 0;
    position: relative;
    background: var(--ui-surface-glass-regular);
    border-radius: 50px;
    padding: 4px;
    max-width: 260px;

    @media (width >= 768px) {
      display: none;
    }
  }

  .toggle-button {
    padding: var(--sizing-s) var(--spacing-medium);
    border: none;
    background: transparent;
    color: #424242;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 80px;
    font-size: var(--fs-small);
    font-weight: var(--fw-500);
    line-height: var(--lh-medium);
    letter-spacing: 0.14px;
    display: flex;
    height: 32px;
    justify-content: center;
    align-items: center;

    &.active {
      background: var(--color-neutral-50);
      color: var(--primary-color);
    }
  }

  /* Image States */
  .before-image,
  .after-image {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease;
    clip-path: none !important;

    @media (width >= 768px) {
      position: absolute;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .asli-nakli-image-heading {
      display: none;
      margin: 0;
      flex-shrink: 0;
      font-size: var(--fs-medium);
      font-weight: var(--fw-600);
      line-height: var(--lh-medium);
      text-transform: uppercase;
      position: absolute;
      padding: 10px;
      max-width: 300px;
      min-width: 150px;
      text-align: center;

      &.tag-before {
        bottom: 0;
        color: var(--color-asli);
        background: var(--asli-gradient);
      }

      &.tag-after {
        right: 0;
        bottom: 0;
        color: var(--color-nakli);
        background: var(--nakli-gradient);
      }

      @media (width > 768px) {
        display: block;
      }
    }

    .img-wrapper {
      height: auto;
    }

    /* Dual-layer (primary + secondary) for smooth desktop crossfade on slider */
    .img-wrapper--dual-layer {
      .img-layer-stack {
        position: relative;
        width: 100%;
      }

      .img-layer {
        width: 100%;
      }

      .img-layer--secondary {
        display: none;
      }

      @media (width >= 768px) {
        position: relative;
        height: 100%;

        .img-layer-stack {
          position: relative;
          width: 100%;
          height: 100%;
          min-height: 215px;
        }

        .img-layer {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          transition: opacity 0.1s cubic-bezier(0.2, 0, 0.1, 1);
        }

        .img-layer--primary {
          z-index: 1;
          opacity: 1;
        }

        .img-layer--secondary {
          display: block;
          z-index: 2;
          opacity: 0;
          pointer-events: none;
        }

        picture,
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }

    img {
      width: 100%;
      min-height: 215px;
      height: auto;
      object-fit: cover;
      display: block;

      @media (width >= 768px) {
        height: 100%;
      }
    }
  }

  .before-image {
    @media (width>768px) {
      background: var(--before-image-bg);
    }
  }

  .after-image {
    @media (width>768px) {
      background: var(--after-image-bg);
    }
  }

  .slider-handle {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;

    @media (width >= 768px) {
      z-index: 10;
    }
  }

  /* Mobile Image States */
  .image-comparison.mobile-before .before-image,
  .image-comparison.mobile-after .after-image {
    opacity: 1;
    clip-path: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .image-comparison.mobile-before .after-image,
  .image-comparison.mobile-after .before-image {
    opacity: 0;
    clip-path: none;
  }

  /* Desktop Slider */
  .desktop-slider {
    position: relative;
    width: 100%;
    height: 100%;

    .slider,
    .slider-line,
    .slider-button,
    .slider-button-hit {
      display: none;
    }

    @media (width >= 768px) {
      --position: 50%;

      .slider-button {
        display: grid;
        place-items: center;
        position: absolute;
        top: 50%;
        left: var(--position);
        transform: translate(-50%, -50%);
        background-image: url('../../icons/slider-icon.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 30px 30px;
        border-radius: 50%;
        pointer-events: none;
        width: 30px;
        height: 30px;
      }

      .slider {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
        z-index: 9;

        &:focus-visible ~ .slider-handle .slider-button {
          outline: 5px solid black;
          outline-offset: 3px;
        }
      }

      .slider-button-hit {
        display: block;
        position: absolute;
        top: 50%;
        left: var(--position);
        transform: translate(-50%, -50%);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        cursor: ew-resize;
        touch-action: none;
        pointer-events: auto;
        z-index: 1;
      }

      .slider-line {
        display: block;
        position: absolute;
        inset: 0;
        width: 1.5px;
        height: 100%;
        background-color: var(--color-primary-blue);
        left: var(--position);
        transform: translateX(-50%);
        pointer-events: none;
        box-shadow: 0 0 10px rgb(0 0 0 / 30%);
      }
    }

    @media (width >= 1024px) {
      .slider-button,
      .slider-button-hit {
        width: 48px;
        height: 48px;
      }

      .slider-button {
        background-size: 48px 48px;
      }
    }
  }
}

/* Reset mobile states on desktop */
@media (width >= 768px) {
  .image-comparison.mobile-before .before-image,
  .image-comparison.mobile-before .after-image,
  .image-comparison.mobile-after .before-image,
  .image-comparison.mobile-after .after-image {
    opacity: 1;
    clip-path: none;
  }

}

/* Desktop Image States */
@media (width >= 768px) {
  .image-comparison.desktop-slider-active {
    .before-image,
    .after-image {
      opacity: 1;
      transition: none;
    }

    .after-image {
      clip-path: inset(0 0 0 var(--position, 50%)) !important;
    }

    .before-image {
      clip-path: inset(0 calc(100% - var(--position, 50%)) 0 0) !important;
    }
  }
}

/* Content Section Styles */
.asli-nakli-main-content {
  display: flex;
  text-align: center;

  @media (width >= 768px) {
    display: flex;
    padding: 0;
    text-align: start;
    align-items: center;
    justify-content: space-between;
    color: var(--color-neutral-50);
  }

  .asli-nakli-title,
  .asli-nakli-title * {
    color: var(--neutrals-sub-texts-paragraphs);
    text-align: center;
    font-size: 20px;
    line-height: normal;

    @media (width >= 768px) {
      font-size: 1.6rem;
      line-height: 1.76rem;
      letter-spacing: -0.24px;
      text-transform: none;
    }

    @media (width >= 1024px) {
      font-size: var(--fs-xxlarge);
      line-height: 2.64rem;
      letter-spacing: -0.36px;
    }
  }

  .asli-nakli-description,
  .asli-nakli-description * {
    color: var(--neutrals-sub-texts-grey);
    text-align: center;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6rem;

    @media (width >= 768px) {
      margin-top: 4px;
      line-height: 1.68rem;
    }

    @media (width >= 1024px) {
      font-size: 1.4rem;
      line-height: 1.64rem;
    }
  }

  .asli-nakli-text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
}

/* Side by Side Mode Styles */
.asli-nakli-content[data-display-mode='side-by-side'] {
  .image-comparison.side-by-side-mode {
    aspect-ratio: auto;
    min-height: auto;
    width: 100%;

    .side-by-side-container {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xxsmall);
      width: 100%;

      @media (width >= 768px) {
        flex-direction: row;
      }

      .content-left-side,
      .content-right-side {
        position: relative;
        width: 100%;

        .content-image-wrapper {
          position: relative;
          width: 100%;

          .before-image,
          .after-image {
            position: relative;
            opacity: 1;
            display: block;
            width: 100%;
            height: auto;

            picture,
            img {
              width: 100%;
              height: auto;
              aspect-ratio: 350 / 252;
              display: block;

              @media (width >= 768px) {
                aspect-ratio: 681 / 513;
              }
            }
          }
        }

      }
    }
  }

  /* Hide mobile toggle and desktop slider in side-by-side mode */
  .mobile-toggle,
  .desktop-slider {
    display: none;
  }
}