/*
 * carousel.css — Statistics content carousel
 *
 * Full-width bar below the filter row. One slide visible at a time.
 * Slide content: section title (top-left) + two stat columns with vertical divider.
 * Navigation: left/right arrow buttons at edges.
 * Matches APRIL mill production screenshot layout.
 */

/* ── Section wrapper ──────────────────────────────────────────── */

#carousel {
  width: 100%;
  background-color: var(--color-bg-grey);
  border-top: 1px solid var(--color-border-light);
  position: relative;
  overflow: hidden;
}

/* ── Viewport (clips the sliding track) ──────────────────────── */

.carousel__viewport {
  overflow: hidden;
  width: 100%;
}

/* ── Track (holds all slides side-by-side) ────────────────────── */

.carousel__track {
  display: flex;
  transition: transform 300ms ease-out;
  will-change: transform;
}

/* ── Individual slide ─────────────────────────────────────────── */

.carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  min-height: 140px;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
}

/* Inner container — same max-width + padding as nav and filter */
.carousel__slide-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
}

/* ── Slide title (left column) ────────────────────────────────── */

.carousel__title {
  flex: 0 0 200px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-dark);
  line-height: var(--line-height-tight);
}

/* ── Stats block ──────────────────────────────────────────────── */

.carousel__stats {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}

/* ── Individual stat ──────────────────────────────────────────── */

.carousel__stat {
  flex: 1;
  padding: 0 var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.carousel__stat:first-child {
  padding-left: 0;
}

/* Vertical divider between stats */
.carousel__stat + .carousel__stat {
  border-left: 1px solid var(--color-border-light);
}

.carousel__stat-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-navy);
  line-height: 1;
}

.carousel__stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-mid);
  line-height: var(--line-height-base);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Navigation arrows ────────────────────────────────────────── */

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-text-mid);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  transition: color var(--transition-fast),
              border-color var(--transition-fast),
              background-color var(--transition-fast);
  z-index: 1;
}

.carousel__arrow:hover:not(:disabled) {
  color: var(--color-navy);
  border-color: var(--color-navy);
  background-color: var(--color-bg-grey-mid);
}

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

.carousel__arrow--prev {
  left: var(--space-md);
}

.carousel__arrow--next {
  right: var(--space-md);
}

/* ── Dot indicators ───────────────────────────────────────────── */

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
}

.carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--color-border-light);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.carousel__dot--active {
  background-color: var(--color-orange);
  transform: scale(1.3);
}