/* Guided Journey — tabs */
.guided-journey {
  padding: var(--section-padding) 0;
}

/* Tab navigation */
.guided-journey__nav {
  display: flex;
  max-width: fit-content;
  min-width: 45%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--spacing-xl);
  position: relative;
}

.guided-journey__nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--slider-left, 0);
  width: var(--slider-width, 0);
  height: 3px;
  background-color: var(--color-primary);
  transition: left var(--transition-base), width var(--transition-base);
}

.guided-journey__tab {
  flex: 1;
  padding: 0 0 12px 0;
  font-family: var(--font-family);
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-dark-blue);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
  text-align: center;
}

.guided-journey__nav:has(.guided-journey__tab:only-child) {
  min-width: 0;
}

.guided-journey__tab:only-child {
  text-align: center;
  padding-left: 24px;
  padding-right: 24px;
}

.guided-journey__tab:first-child:not(:only-child) {
  text-align: left;
  padding-left: 6px;
}

.guided-journey__tab:not(:first-child):not(:last-child) {
  padding-left: 6px;
  padding-right: 6px;
}

.guided-journey__tab:last-child:not(:only-child) {
  text-align: right;
  padding-right: 6px;
}

.guided-journey__tab:hover {
  color: var(--color-dark-blue);
}

.guided-journey__tab.is-active {
  color: var(--color-dark-blue);
}

/* Panels */
.guided-journey__panel {
  display: none;
}

.guided-journey__panel.is-active {
  display: block;
}

.guided-journey__panel-inner {
  display: flex;
  gap: var(--spacing-30);
  align-items: center;
}

.guided-journey__panel-content {
  flex: 1;
  max-width: 600px;
}

/* Caption */
.guided-journey__caption {
  display: block;
  font-size: var(--p-size);
  line-height: var(--details-lh);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

/* Panel title */
.guided-journey__panel-title {
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark-blue);
  margin: 0 0 var(--spacing-sm);
}

.guided-journey__body {
  font-size: var(--p-size);
  line-height: var(--p-lh);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}

/* Checklist — ul with orange pointer */
.guided-journey__checklist ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.guided-journey__checklist li {
  display: flex;
  align-items: center;
  gap: var(--spacing-30);
  font-size: var(--p-size);
  color: var(--color-text-dark);
}

.guided-journey__checklist li::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  background: url('../../images/orange-list-pointer.svg') no-repeat center / contain;
  flex-shrink: 0;
}

/* Panel image */
.guided-journey__panel-image {
  flex: 0 0 50%;
}

.guided-journey__panel-image img {
  width: 100%;
  height: 456px;
  border-radius: var(--radius-card);
  object-fit: cover;
}

/* Hide mobile nav on desktop */
.guided-journey__mobile-nav {
  display: none;
}

/* Blue style variant */
.guided-journey--blue {
  background-color: var(--color-blue-light);
  border-radius: 32px 32px 0 0;
  padding-top: 40px;
  margin-top: 40px;
}

.guided-journey--blue .section__title,
.guided-journey--blue .section__subtitle,
.guided-journey--blue .guided-journey__tab,
.guided-journey--blue .guided-journey__panel-title,
.guided-journey--blue .guided-journey__body,
.guided-journey--blue .guided-journey__checklist li,
.guided-journey--blue .guided-journey__panel-content {
  color: var(--color-background);
}

@media (max-width: 1023px) {
  .guided-journey__nav {
    gap: var(--spacing-lg);
  }
}

@media (max-width: 767px) {
  .guided-journey {
    padding: var(--spacing-xl) 0;
  }

  .guided-journey--blue {
    background-color: transparent;
    border-radius: 0;
    margin-top: 0;
    padding-top: var(--spacing-xl);
  }

  .guided-journey--blue .section__title,
  .guided-journey--blue .section__subtitle,
  .guided-journey--blue .guided-journey__panel-title,
  .guided-journey--blue .guided-journey__body,
  .guided-journey--blue .guided-journey__checklist li,
  .guided-journey--blue .guided-journey__panel-content {
    color: inherit;
  }

  /* Title — uppercase */
  .guided-journey .section__title {
    text-transform: uppercase;
  }

  /* Hide tab navigation */
  .guided-journey__nav {
    display: none;
  }

  /* Show only active panel */
  .guided-journey__panel {
    display: none;
  }

  .guided-journey__panel.is-active {
    display: block;
  }

  /* Panels — only active visible, animated via JS class */
  .guided-journey__panels {
    overflow: hidden;
    position: relative;
  }

  .guided-journey__panel {
    display: none;
  }

  .guided-journey__panel.is-active {
    display: block;
  }

  .guided-journey__panel.gj-animate-right {
    animation: gjSlideRight 250ms ease forwards;
  }

  .guided-journey__panel.gj-animate-left {
    animation: gjSlideLeft 250ms ease forwards;
  }

  @keyframes gjSlideRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes gjSlideLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
  }

  /* Dots indicator */
  .guided-journey__mobile-nav {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-md);
  }

  .guided-journey__mobile-dots {
    display: flex;
    gap: var(--spacing-xs);
  }

  .guided-journey__mobile-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-medium-gray);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background var(--transition-fast);
  }

  .guided-journey__mobile-dot.is-active {
    background: var(--color-primary);
  }

  /* Text align left on mobile */
  .guided-journey .section__header {
    text-align: left;
  }

  .guided-journey__panel-content {
    text-align: left;
    align-items: flex-start;
  }

  .guided-journey__checklist ul {
    align-items: flex-start;
    width: 100%;
  }

  .guided-journey__checklist li {
    justify-content: flex-start;
  }

  /* Image first, then text */
  .guided-journey__panel-inner {
    flex-direction: column-reverse;
    gap: 0;
    align-items: flex-start;
  }

  .guided-journey__panel-image {
    flex: none;
    width: 100%;
    margin-bottom: var(--spacing-30);
  }

  .guided-journey__panel-image img {
    height: auto;
  }
}