/*
  Careers intro — Franchise Development playlist carousel (alt 12 gallery chevron arrows).
 */

.careers-intro__media-stick {
  position: relative;
}

.careers-intro__featured {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: 0;
}

.careers-intro__featured.is-active {
  display: block;
}

.careers-intro__featured-iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.careers-intro__video.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* Mobile stack: after copy + featured video. Desktop: grid row 2 (careers-intro.css). */
.careers-franchise-carousel {
  order: 3;
  inline-size: 100%;
  max-inline-size: 100%;
  margin-block-start: var(--space-2xl);
  /* Match card width so nav chevrons align to thumbnail vertical center. */
  --cr-franchise-card-w: min(72vw, 17.5rem);
  --cr-franchise-nav-size: 2rem;
  --cr-franchise-thumb-h: calc(var(--cr-franchise-card-w) * 9 / 16);
}

.careers-franchise-carousel__heading {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-heading);
}

.careers-franchise-carousel__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

@media (max-width: 1023px) {
  .careers-franchise-carousel__row {
    container-type: inline-size;
    /* Card width = track viewport between arrows (matches thumb height for nav). */
    --cr-franchise-card-w: calc(
      100cqw - (2 * var(--cr-franchise-nav-size)) - (2 * var(--space-sm))
    );
    --cr-franchise-thumb-h: calc(var(--cr-franchise-card-w) * 9 / 16);
  }
}

@media (min-width: 1024px) {
  .careers-franchise-carousel__row {
    gap: 2.25rem;
  }
}

/* Alt 12 — gallery chevron tinted Shine red (prototype alternative 12) */
.careers-franchise-carousel__nav {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  margin-block-start: calc(
    var(--space-xs) + (var(--cr-franchise-thumb-h) / 2) - (var(--cr-franchise-nav-size) / 2)
  );
}

.careers-franchise-carousel__nav:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

.careers-franchise-carousel__nav-icon {
  display: block;
  inline-size: var(--cr-franchise-nav-size);
  block-size: var(--cr-franchise-nav-size);
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6679%) hue-rotate(343deg)
    brightness(92%) contrast(101%);
}

.careers-franchise-carousel__nav-icon--prev {
  transform: rotate(180deg);
}

@media (min-width: 768px) {
  .careers-franchise-carousel {
    --cr-franchise-card-w: 14.5rem;
  }
}

@media (min-width: 1024px) {
  .careers-franchise-carousel {
    --cr-franchise-nav-size: 3.25rem;
  }
}

.careers-franchise-carousel__viewport {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
}

.careers-franchise-carousel__track {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: var(--space-xs);
  scrollbar-width: none;
  touch-action: pan-y;
}

.careers-franchise-carousel__track::-webkit-scrollbar {
  display: none;
}

.careers-franchise-carousel__card {
  flex: 0 0 var(--cr-franchise-card-w);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  text-align: start;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.careers-franchise-carousel__thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
  background: #eee;
}

.careers-franchise-carousel__thumb {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.careers-franchise-carousel__card.is-active .careers-franchise-carousel__thumb-wrap {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.careers-franchise-carousel__title {
  margin: var(--space-sm) 0 0;
  min-block-size: calc(0.8125rem * 1.35 * 2);
  font-family: var(--font-body-alt);
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: var(--fw-medium);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.careers-franchise-carousel__dots {
  flex-wrap: wrap;
  max-inline-size: 36rem;
  margin-block-start: var(--space-xl);
  margin-inline: auto;
  row-gap: var(--space-sm);
}

.careers-franchise-carousel__dots .testimonials__dot {
  pointer-events: auto !important;
  cursor: pointer;
}

@media (max-width: 1023px) {
  .careers-franchise-carousel__dots {
    display: none;
  }
}

@media (min-width: 1024px) {
  .careers-franchise-carousel {
    order: unset;
    margin-block-start: 0;
  }

  .careers-franchise-carousel__heading {
    font-size: 1.125rem;
  }
}