/*
 * Generic Slider section.
 *
 * An eyebrow, heading, and short intro above a horizontal slider of cards.
 * Each card holds a square photo, a heading, an optional subheading, an
 * optional description, and an optional link that also wraps the heading.
 * The slider is the Counselor Slider build: the track scrolls natively with
 * snap points and bleeds past the container edge; the controls hold a
 * draggable progress bar and previous/next arrows and only show when the
 * cards overflow the screen. Colors are component custom props with
 * light-surface defaults; the purple-surface overrides live in the central
 * page-sections stylesheet under the theme-dark wrapper.
 */

.acu-generic-slider {
  --acu-generic-slider-copy: var(--acu-midnight-purple);
  --acu-generic-slider-eyebrow: var(--acu-midnight-purple);
  --acu-generic-slider-heading: var(--acu-wildcat-purple);
  --acu-generic-slider-card-heading: var(--acu-wildcat-purple);
  --acu-generic-slider-card-heading-hover: var(--acu-vibrant-purple);
  --acu-generic-slider-link-arrow: var(--acu-mesquite-red);
  --acu-generic-slider-media-surface: rgba(33, 23, 75, 0.06);
  --acu-generic-slider-progress-track: rgba(33, 23, 75, 0.25);
  --acu-generic-slider-progress-thumb: var(--acu-horizon-red);
  --acu-generic-slider-nav-surface: var(--acu-white);
  --acu-generic-slider-nav-surface-hover: color-mix(in srgb, var(--acu-white) 92%, var(--acu-midnight-purple));
  --acu-generic-slider-nav-border: rgba(33, 23, 75, 0.12);
  --acu-generic-slider-nav-arrow: var(--acu-midnight-purple);
  --acu-generic-slider-card-gap: var(--space-xl);
  /* Three cards fill the container and the fourth peeks into the bleed. The
     percentage resolves against the track's content box, which already
     matches the container width, so only the gaps come off. */
  --acu-generic-slider-card-width: calc(
    (100% - (var(--acu-generic-slider-card-gap) * 2)) / 3
  );
  --acu-generic-slider-gutter: max(
    var(--space-xl),
    calc(((100% - var(--container-xl)) / 2) + var(--space-xl))
  );
  color: var(--acu-generic-slider-copy);
  padding: clamp(var(--space-3xl), 7.5vw, 7rem) 0;
  width: 100%;
}

.acu-generic-slider__inner {
  margin: 0 auto;
  max-width: var(--container-xl);
  padding: 0 var(--space-xl);
  width: 100%;
}

.acu-generic-slider__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 54rem;
}

.acu-generic-slider__eyebrow {
  align-items: center;
  color: var(--acu-generic-slider-eyebrow);
  display: flex;
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  gap: var(--space-sm);
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-snug);
  margin: 0;
  text-transform: uppercase;
}

.acu-generic-slider__eyebrow-icon {
  display: block;
  flex: 0 0 auto;
  height: 0.75rem;
  width: 1rem;
}

.acu-generic-slider__intro-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.acu-generic-slider__heading {
  color: var(--acu-generic-slider-heading);
  font-family: var(--font-serif);
  font-size: clamp(var(--text-4xl), 4.4vw, 3.5rem);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

.acu-generic-slider__description {
  font-family: var(--font-sans);
  font-size: clamp(var(--text-md), 1.6vw, var(--text-xl));
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
}

.acu-generic-slider__description p {
  margin: 0;
}

.acu-generic-slider__description p + p {
  margin-top: var(--space-sm);
}

.acu-generic-slider__slider {
  width: 100%;
}

/* Only an intro above the track pushes it down. */
.acu-generic-slider__inner + .acu-generic-slider__slider {
  margin-top: clamp(var(--space-2xl), 5.5vw, 5rem);
}

.acu-generic-slider__track {
  display: flex;
  gap: var(--acu-generic-slider-card-gap);
  list-style: none;
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0 var(--acu-generic-slider-gutter);
  scroll-padding-inline: var(--acu-generic-slider-gutter);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.acu-generic-slider__track::-webkit-scrollbar {
  display: none;
}

/* The track takes keyboard focus so arrow keys scroll it. The outline sits
   inside the box because the section clips overflow around it. */
.acu-generic-slider__track:focus-visible {
  outline: 0.1875rem solid var(--acu-sky-blue);
  outline-offset: -0.1875rem;
}

.acu-generic-slider__card {
  display: flex;
  flex: 0 0 var(--acu-generic-slider-card-width);
  flex-direction: column;
  gap: var(--space-lg);
  margin: 0;
  min-width: 0;
  scroll-snap-align: start;
  width: var(--acu-generic-slider-card-width);
}

.acu-generic-slider__media {
  background-color: var(--acu-generic-slider-media-surface);
  border-radius: var(--acu-section-photo-radius);
  overflow: hidden;
}

.acu-generic-slider__media-image {
  aspect-ratio: 1 / 1;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.acu-generic-slider__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-md);
}

.acu-generic-slider__title {
  display: flex;
  flex-direction: column;
}

.acu-generic-slider__card-heading {
  color: var(--acu-generic-slider-card-heading);
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

.acu-generic-slider__card-heading-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out);
}

.acu-generic-slider__card-heading-link:hover,
.acu-generic-slider__card-heading-link:focus-visible {
  color: var(--acu-generic-slider-card-heading-hover);
  text-decoration: underline;
  text-decoration-thickness: 0.125rem;
  text-underline-offset: var(--space-2xs);
}

.acu-generic-slider__card-heading-link:focus-visible {
  border-radius: 0.125rem;
  outline: 0.1875rem solid var(--acu-sky-blue);
  outline-offset: var(--space-2xs);
}

.acu-generic-slider__card-subheading {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  margin: 0;
}

.acu-generic-slider__card-description {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
}

.acu-generic-slider__card-description p {
  margin: 0;
}

.acu-generic-slider__card-description p + p {
  margin-top: var(--space-sm);
}

/* The arrow link sits at the bottom of the card, so links line up across a
   row of cards with different amounts of copy. */
.acu-generic-slider__card-link {
  align-items: center;
  align-self: flex-start;
  color: var(--acu-generic-slider-copy);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  gap: var(--space-xs);
  line-height: var(--leading-snug);
  margin-top: auto;
  text-decoration: none;
}

.acu-generic-slider__card-link-icon {
  background-color: var(--acu-generic-slider-link-arrow);
  display: block;
  flex: 0 0 auto;
  height: 1.5rem;
  -webkit-mask-image: url("assets/arrow-forward.svg");
  mask-image: url("assets/arrow-forward.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform var(--motion-fast) var(--ease-out);
  width: 1.5rem;
}

.acu-generic-slider__card-link:hover,
.acu-generic-slider__card-link:focus-visible {
  color: var(--acu-generic-slider-copy);
  text-decoration: none;
}

.acu-generic-slider__card-link:hover .acu-generic-slider__card-link-label,
.acu-generic-slider__card-link:focus-visible .acu-generic-slider__card-link-label {
  text-decoration: underline;
  text-decoration-thickness: 0.125rem;
  text-underline-offset: var(--space-2xs);
}

.acu-generic-slider__card-link:hover .acu-generic-slider__card-link-icon,
.acu-generic-slider__card-link:focus-visible .acu-generic-slider__card-link-icon {
  transform: translateX(var(--space-2xs));
}

.acu-generic-slider__card-link:focus-visible {
  border-radius: 0.125rem;
  outline: 0.1875rem solid var(--acu-sky-blue);
  outline-offset: var(--space-2xs);
}

.acu-generic-slider__controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  justify-content: space-between;
  margin: var(--space-2xl) auto 0;
  max-width: var(--container-xl);
  padding: 0 var(--space-xl);
  width: 100%;
}

.acu-generic-slider__slider.is-static .acu-generic-slider__controls {
  display: none;
}

.acu-generic-slider__progress {
  background-color: var(--acu-generic-slider-progress-track);
  border-radius: var(--radius-full);
  cursor: pointer;
  height: 0.5rem;
  position: relative;
  touch-action: none;
  width: min(9rem, 40vw);
}

.acu-generic-slider__progress-thumb {
  background-color: var(--acu-generic-slider-progress-thumb);
  border-radius: var(--radius-full);
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.acu-generic-slider__navigation {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-sm);
}

.acu-generic-slider__navigation-button {
  align-items: center;
  background-color: var(--acu-generic-slider-nav-surface);
  border: 1px solid var(--acu-generic-slider-nav-border);
  border-radius: 0.625rem;
  color: var(--acu-generic-slider-nav-arrow);
  cursor: pointer;
  display: flex;
  height: 3rem;
  justify-content: center;
  margin: 0;
  padding: 0;
  transition:
    background-color var(--motion-fast) var(--ease-out),
    opacity var(--motion-fast) var(--ease-out);
  width: 3rem;
}

.acu-generic-slider__navigation-icon {
  background-color: currentColor;
  display: block;
  height: 1.5rem;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  width: 1.5rem;
}

.acu-generic-slider__navigation-icon--previous {
  -webkit-mask-image: url("assets/arrow-back.svg");
  mask-image: url("assets/arrow-back.svg");
}

.acu-generic-slider__navigation-icon--next {
  -webkit-mask-image: url("assets/arrow-forward.svg");
  mask-image: url("assets/arrow-forward.svg");
}

.acu-generic-slider__navigation-button:hover:not(:disabled) {
  background-color: var(--acu-generic-slider-nav-surface-hover);
}

.acu-generic-slider__navigation-button:focus-visible {
  outline: 0.1875rem solid var(--acu-sky-blue);
  outline-offset: var(--space-2xs);
}

.acu-generic-slider__navigation-button:disabled {
  cursor: default;
  opacity: 0.4;
}

@media (max-width: 63.9375rem) {
  .acu-generic-slider {
    --acu-generic-slider-card-gap: var(--space-lg);
    /* Two cards fill the container on tablets. */
    --acu-generic-slider-card-width: calc(
      (100% - var(--acu-generic-slider-card-gap)) / 2
    );
    --acu-generic-slider-gutter: max(
      var(--space-lg),
      calc(((100% - var(--container-xl)) / 2) + var(--space-lg))
    );
  }

  .acu-generic-slider__inner {
    padding-inline: var(--space-lg);
  }

  .acu-generic-slider__controls {
    padding-inline: var(--space-lg);
  }
}

@media (max-width: 47.9375rem) {
  .acu-generic-slider {
    /* One card with a peek of the next, matching the mobile design. */
    --acu-generic-slider-card-width: min(18.75rem, 80vw);
    padding-block: var(--space-3xl);
  }

  .acu-generic-slider__intro {
    gap: var(--space-sm);
  }

  .acu-generic-slider__intro-content {
    gap: 1.25rem;
  }

  .acu-generic-slider__heading {
    font-size: var(--text-4xl);
  }

  .acu-generic-slider__description {
    font-size: var(--text-md);
  }

  .acu-generic-slider__inner + .acu-generic-slider__slider {
    margin-top: var(--space-2xl);
  }

  .acu-generic-slider__card {
    gap: 1.25rem;
  }

  .acu-generic-slider__content {
    gap: var(--space-sm);
  }

  .acu-generic-slider__card-heading {
    font-size: var(--text-xl);
  }

  .acu-generic-slider__card-subheading {
    font-size: var(--text-lg);
  }

  .acu-generic-slider__card-description {
    font-size: var(--text-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .acu-generic-slider__card-heading-link,
  .acu-generic-slider__card-link-icon,
  .acu-generic-slider__navigation-button {
    transition: none;
  }
}