/*  ============================================================
    CG Slider — lightweight, dependency-free image slider.

    Reusable, site-wide component intended to replace Slider
    Revolution across charles-gate.com. Namespaced `.cg-slider`;
    theme it per-context with the CSS var --cg-accent.

    SEO-safe by design: every slide is a real <img> in the HTML —
    JS only toggles which one is visible (opacity), so search
    engines and image search see all slides with their alt text.
    Autoplay honours prefers-reduced-motion.
    ============================================================ */

.cg-slider {
  position: relative;
  aspect-ratio: 4 / 3;      /* self-sizing by default; override per context */
  overflow: hidden;
  background: #e9ece9;
}
.cg-slider__viewport { position: absolute; inset: 0; }

.cg-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  will-change: opacity;
}
.cg-slider__slide.is-active { opacity: 1; }
.cg-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Branded rectangular pagination bars (echo the CG line motif) */
.cg-slider__dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 3;
  display: flex;
  gap: 7px;
}
.cg-slider__dot {
  width: 26px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;   /* sharp rectangular bars, echoing the CG line motif */
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.3s ease;
}
.cg-slider__dot:hover { background: rgba(255, 255, 255, 0.85); }
.cg-slider__dot.is-active { background: var(--cg-accent, #2a9453); }
.cg-slider__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }