/* =====================================================================
 * motion-slider.css
 * Agent 09 — touch + keyboard slider styling (paired with js/slider.js).
 *
 * The track uses translateX. JS computes the sign per dir (RTL/LTR).
 * Tokens consumed from css/tokens.css.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * Container — clip overflow, position relative for absolute children.
 * Focus ring sits on the root for keyboard users (tabindex=0 set by JS).
 * ------------------------------------------------------------------- */
[data-slider] {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  /* Reserve a stable height when items load asynchronously. */
  contain: layout paint;
}

[data-slider]:focus-visible {
  outline: 3px solid var(--accent);   /* container roving-focus outline */
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------------
 * Track — flex row, each item full width. JS drives translateX.
 *
 * RTL caveat: in `dir="rtl"` flex-direction: row reverses visually.
 *   - We keep flex-direction: row (no override).
 *   - JS uses sign +1 in RTL for translateX, -1 in LTR.
 * ------------------------------------------------------------------- */
[data-slider-track] {
  display: flex;
  flex-direction: row;
  inline-size: 100%;
  will-change: transform;
  /* Touch action: pan-y allows vertical page scroll, JS handles horizontal. */
  touch-action: pan-y;
  /* Disable text selection during drag — prevents long-press surprises. */
  user-select: none;
  -webkit-user-select: none;
}

/* Each slide takes the full track width. */
[data-slider-item] {
  flex: 0 0 100%;
  inline-size: 100%;
  min-inline-size: 0;
  /* Ensure inner media never spills. */
  overflow: hidden;
}

/* ---------------------------------------------------------------------
 * Prev / Next buttons — neutral skeleton; section-specific styling lives
 * in the consuming section's CSS. Default places them at the inline edges.
 * Uses logical inset properties so RTL flips automatically.
 * ------------------------------------------------------------------- */
[data-slider-prev],
[data-slider-next] {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: var(--z-content, 10);
  inline-size: 3rem;
  block-size: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;          /* LINE-LANGUAGE rev: no box — glyph only */
  color: var(--brass-deep, #8b6f46);
  border: 0;
  cursor: pointer;
  font-size: 1.5rem;
  transition: color var(--dur-base, 240ms) var(--ease-out-cinema, cubic-bezier(0.2, 0.8, 0.2, 1)),
              transform var(--dur-base, 240ms) var(--ease-out-cinema, cubic-bezier(0.2, 0.8, 0.2, 1));
}

[data-slider-prev] {
  inset-inline-start: var(--space-4, 1rem);
}

[data-slider-next] {
  inset-inline-end: var(--space-4, 1rem);
}

[data-slider-prev]:hover,
[data-slider-next]:hover {
  color: var(--brass, #cfae83);
  transform: translateY(-50%) scale(1.15);
}

[data-slider-prev]:focus-visible,
[data-slider-next]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);   /* unified offset ring (2026-06-15) */
}

/* In RTL, mirror inline arrow icons inside the buttons (chevrons etc.). */
[dir="rtl"] [data-slider-prev] svg,
[dir="rtl"] [data-slider-next] svg {
  transform: scaleX(-1);
}

/* ---------------------------------------------------------------------
 * Dots — built programmatically by JS into [data-slider-dots].
 * Each dot is a <button>. Active dot grows + uses brass accent.
 * ------------------------------------------------------------------- */
[data-slider-dots] {
  position: absolute;
  inset-block-end: var(--space-4, 1rem);
  inset-inline-start: 0;
  inset-inline-end: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  z-index: var(--z-content, 10);
}

[data-slider-dots] [data-slider-dot] {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill, 9999px);
  background: color-mix(in srgb, var(--ivory) 50%, transparent);
  cursor: pointer;
  transition: inline-size var(--dur-base, 240ms) var(--ease-out-cinema, cubic-bezier(0.2, 0.8, 0.2, 1)),
              background var(--dur-base, 240ms) var(--ease-out-cinema, cubic-bezier(0.2, 0.8, 0.2, 1));
}

[data-slider-dots] [data-slider-dot].is-active {
  background: var(--accent, #b89766);
  inline-size: 1.5rem;
}

[data-slider-dots] [data-slider-dot]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);   /* unified offset ring (2026-06-15) */
}

/* ---------------------------------------------------------------------
 * Reduced motion — kill all transitions; JS already skips animation.
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-slider-track],
  [data-slider-prev],
  [data-slider-next],
  [data-slider-dots] [data-slider-dot] {
    transition: none !important;
  }
}