/* ============================================================
   Anikeola Schools Child — hero carousel
   The single, theme-owned implementation (v1.1.0). Values are
   carried over unchanged from the original snippet version;
   what changed is ownership: styles live here, not inline in
   the page content, and only this file styles the carousel.
   Markup contract (in the homepage hero block):
   .ak-carousel > .ak-slides > figure.ak-slide (+ .is-active),
   .ak-arrow.ak-prev / .ak-arrow.ak-next, .ak-dots > .ak-dot
   ============================================================ */

.ak-carousel { position: relative; overflow: hidden; }
.ak-slides { position: absolute; inset: 0; }
.ak-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity .6s ease;
  pointer-events: none;
}
.ak-slide.is-active { opacity: 1; pointer-events: auto; }
.ak-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  background: rgba(36, 72, 110, .82); color: #fff;
  font: 600 14px/1.4 'Plus Jakarta Sans', Inter, Arial, sans-serif;
  text-align: left;
}
.ak-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: rgba(36, 72, 110, .85); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer;
}
.ak-arrow:hover { background: #24486e; }
.ak-prev { left: 10px; }
.ak-next { right: 10px; }
.ak-dots {
  position: absolute; left: 0; right: 0; bottom: 44px;
  z-index: 3; display: flex; gap: 8px; justify-content: center;
}
.ak-dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(255, 255, 255, .45);
  padding: 0; cursor: pointer;
}
.ak-dot[aria-current="true"] { background: #69a7e2; border-color: #69a7e2; }

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