/* Car Category Tab - Mobile First */
.car-category-tab {
  background: var(--neutrals-sub-texts-paragraphs);
  color: var(--color-neutral-50);
  margin: 0;
  padding: 0;
  width: 100%;

  @media (width >= 768px) {
    background: linear-gradient(180deg, var(--neutrals-sub-texts-paragraphs) 0%, var(--primary-variations-hover) 100%);
    color: var(--neutrals-sub-texts-paragraphs);
    margin: 0 auto;
    padding: 0 20px 32px;
    min-height: auto;
  }

  @media (width >= 1024px) {
    padding: 0 56px 50px;
  }
}

/* Tab Navigation */
.car-category-tab-nav {
  display: flex;
  background: var(--neutrals-sub-texts-paragraphs);
  padding-top: var(--spacing-xsmall);
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
  gap: var(--sizing-s);
  border-bottom: var(--shape-border-width-1) solid rgb(255 255 255 / 40%);
  width: 320px;

  @media (width >= 768px) {
    justify-content: center;
    gap: 16px;
    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: var(--color-neutral-50);
    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);
      border-bottom: 2px solid var(--color-neutral-50);
    }

    @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 */
.car-category-content {
  display: grid;
  gap: var(--spacing-big);
  margin-bottom: var(--grid-gutter-width);

  /* min-height: 358px; */

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

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

  /* Image Comparison */
  .image-comparison {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    aspect-ratio: 4/3;
    width: calc(100% + var(--spacing-xxbig));
    min-height: 358px;

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

    @media (width >= 1024px) {
      aspect-ratio: 209 / 89;
      height: auto;
    }
  }

  /* Mobile Toggle */
  .mobile-toggle {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 67px auto 35px;
    position: relative;
    background: var(--ui-surface-glass-regular);
    border-radius: 50px;
    padding: 4px;
    width: 180px;

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

  .toggle-button {
    padding: var(--sizing-s) var(--spacing-medium);
    border: none;
    background: transparent;
    color: var(--color-neutral-50);
    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 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    clip-path: none !important;

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

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

  /* Mobile Image States */
  .image-comparison.mobile-before .before-image,
  .image-comparison.mobile-after .after-image {
    opacity: 1;
    clip-path: none;
  }

  .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 {
      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-button {
          outline: 5px solid black;
          outline-offset: 3px;
        }
      }

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

    @media (width >= 1024px) {
      .slider-button {
        width: 48px;
        height: 48px;
        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 */
.car-category-main-content {
  padding: 0 var(--container-margin) var(--spacing-medium);
  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);
  }

  .car-category-title {
    font-size: 1.2rem;
    font-weight: var(--fw-500);
    line-height: 1.44rem;
    letter-spacing: -0.18px;
    text-transform: uppercase;

    @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-xlarge);
      font-weight: var(--fw-600);
      line-height: 2.64rem;
      letter-spacing: -0.36px;
    }
  }

  .car-category-subtitle {
    margin: 8px 0 4px;
    font-size: var(--fs-medium);
    font-weight: var(--fw-600);
    line-height: 1.76rem;
    letter-spacing: -0.24px;

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

  .car-category-description {
    font-size: var(--fs-small);
    font-weight: var(--fw-300);
    line-height: 1.54rem;
    letter-spacing: -0.21px;
    align-self: stretch;

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

    @media (width >= 1024px) {
      margin-top: 7.5px;
      font-size: 1.4rem;
      line-height: 1.64rem;
      letter-spacing: -0.225px;
    }
  }

  .car-category-text-content {
    flex: 1;
    min-width: 0;

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

  .car-category-buttons-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xsmall);
    margin-top: 25px;
    justify-content: center;

    @media (width >= 768px) {
      gap: 16px;
      margin-top: 0;
      flex-shrink: 0;
      width: fit-content;
    }

    @media (width >= 1024px) {
      gap: 24px;
    }
  }

  .car-category-primary-button,
  .car-category-secondary-button {
    display: flex;
    justify-content: center;
    margin-top: 0;

    .button {
      display: inline-block;
      padding: var(--spacing-xsmall) var(--grid-gutter-width);
      text-decoration: none;
      border: var(--shape-border-width-1) solid var(--color-neutral-50);
      transition: background-color 0.3s ease;
      font-weight: var(--fw-400);
      font-size: var(--fs-small);
      min-width: 146px;
      text-align: center;
      width: 100%;
      line-height: var(--lh-small);
      color: var(--color-neutral-50);

      @media (width >= 768px) {
        padding: 8px 16px;
      }

      @media (width >= 1024px) {
        padding: 11px 22px;
      }
    }
  }

  .car-category-secondary-button{
    display: none;
  }
}