/* =========================================================================
   Roadmap milestones slider (Figma 208:771)
   Horizontal carousel of milestone cards (year + title + description +
   benchmark list per card). 3 cards visible at desktop, 2 at tablet,
   1 at mobile. Pager below: prev arrow + dots + next arrow + status text.

   In production the cards will be driven by a Roadmap custom post type
   (one CPT entry per milestone). The HTML preview ships 5 hard-coded
   milestones to demonstrate slider behavior.
   ========================================================================= */

.milestone-slider {
  padding-block: var(--section-padding-block);
  padding-inline: var(--space-inline);
  /* Suppresses the focus-visible outline on the region itself — focus
     management is handled by the buttons inside. The tabindex=0 lets
     the region receive focus for arrow-key navigation. */
  outline: none;
}

.milestone-slider__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7); /* 32px between viewport and pager (Figma) */
}

/* ----------- Viewport: clips overflow + carries the outer border ----------- */
.milestone-slider__viewport {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  /* Define the visible cards count as a custom property so JS can read
     it. Media queries override per breakpoint; the JS resize handler
     watches viewport width to know which value applies. */
  --milestone-slider-visible: 3;
}

/* Mobile: one card at a time. Tablet + desktop stay at 3 visible. */
@media (max-width: 767px) {
  .milestone-slider__viewport {
    --milestone-slider-visible: 1;
  }
}

/* ----------- Track: holds all cards in one row, translates on update ----------- */
.milestone-slider__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  transition: transform 0.4s ease-out;
  /* `will-change` hints the GPU; safe here because the only transform
     is the translate during slider navigation. */
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .milestone-slider__track {
    transition: none;
  }
}

.milestone-slider__slide {
  /* Each slide takes 1/visible of the viewport width — at 3 visible
     each slide is 33.333%, 2 visible 50%, 1 visible 100%. */
  flex: 0 0 calc(100% / var(--milestone-slider-visible));
  min-width: 0; /* allow shrink */
}

/* ----------- Card ----------- */
.milestone-slider__card {
  background-color: var(--color-background);
  /* Internal seams between cards: right border on every card. The last
     card's right border lines up with the viewport's own right border
     — to avoid the double-thickness we set border-right to 0 on the
     last-of-type below. */
  border-right: 1px solid var(--color-card-border);
  padding: var(--space-7); /* 32px per Figma */
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 24px between header → divider → benchmarks */
}

.milestone-slider__slide:last-of-type .milestone-slider__card {
  border-right: 0;
}

/* ----------- Card header: year + milestone (title + description) ----------- */
.milestone-slider__card-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 24px between year and milestone block */
}

.milestone-slider__year {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-h3); /* clamp(24, 30) — Figma is 30 */
  line-height: 1.2;
  color: var(--color-navy); /* #131A5D per Figma */
}

.milestone-slider__milestone {
  display: flex;
  flex-direction: column;
  gap: var(--space-4_5); /* 16px between title and description */
}

.milestone-slider__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-h3); /* 30px to match year */
  line-height: 1;
  color: var(--color-navy-blue);
}

.milestone-slider__description {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body); /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: 26px; /* Figma exact */
  color: var(--color-body-copy);
}

/* ----------- Divider between description and benchmarks ----------- */
.milestone-slider__divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-card-border);
}

/* ----------- Benchmarks: dt left / dd right rows ----------- */
.milestone-slider__benchmarks {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4_5); /* 16px between rows */
}

.milestone-slider__benchmark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Reset the dl margin from browser defaults. */
  margin: 0;
}

.milestone-slider__benchmark dt {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  color: var(--color-navy-blue);
}

.milestone-slider__benchmark dd {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-h3); /* 30px-ish per Figma "leading-[32px]" + bold weight */
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  color: var(--color-navy-blue);
}

/* ----------- Pager: prev arrow + dots + next arrow ----------- */
.milestone-slider__pager {
  display: flex;
  align-items: center;
  gap: 18px; /* Figma gap between arrows and dots cluster */
}

.milestone-slider__arrow {
  width: 70px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-navy-blue);
  border-radius: 40px;
  color: var(--color-navy-blue);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.milestone-slider__arrow:hover:not(:disabled),
.milestone-slider__arrow:focus-visible:not(:disabled) {
  background-color: var(--color-navy-blue);
  color: var(--color-text-on-dark);
}

.milestone-slider__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.milestone-slider__arrow-icon {
  display: block;
}

/* ----------- Dots ----------- */
.milestone-slider__dots {
  display: flex;
  align-items: center;
  gap: 16px; /* Figma: 14 dot + 16 gap = 30 stride */
}

.milestone-slider__dot {
  width: 14px;
  height: 14px;
  padding: 0;
  background-color: #A0F0E8; /* Figma "Teal 50%" — TODO: token? */
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.milestone-slider__dot:hover,
.milestone-slider__dot:focus-visible {
  outline: none;
  transform: scale(1.15);
}

/* Active dot — emphasized with the brand teal. JS toggles
   aria-current="true" on the active dot. */
.milestone-slider__dot[aria-current="true"] {
  background-color: var(--color-teal);
}

/* ----------- Status text ----------- */
.milestone-slider__status {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm); /* 14px */
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  color: var(--color-body-copy);
  text-align: center;
}

/* ----------- Swipe affordance: grab cursor on the viewport ----------- */
.milestone-slider__viewport {
  cursor: grab;
  /* Prevent the browser from interpreting touch as page-scroll on the
     X axis — gives us pointer events for swipe. */
  touch-action: pan-y;
}

.milestone-slider__viewport:active {
  cursor: grabbing;
}