/* ═══ CAROUSEL DOTS — position indicator under each carousel ══════════════════════════

   app/index/js/carousel-dots.js builds one <button class="carousel-dot"> per REAL
   `.carousel-card` it finds in the track, at the moment the page loads — this file only styles
   whatever count that script hands it. carousel.css's own note on the scrollbar affordance
   worried a dot row is a second thing that can drift from the card count; reading the count off
   the DOM instead of writing it twice is what keeps that from being true here.

   ── A PACKED GROUP, IN TAP-TARGETS.CSS'S OWN VOCABULARY ──
   That file reserves the invisible-::after-overlay trick for ISOLATED controls with open space
   around them, and says explicitly why packed neighbours (.tf-btn, .council-chip) cannot use it:
   the overlay would sit on the control beside it, and a target that steals a neighbour's tap is
   worse than a smaller one that does not. Three to five dots a few px apart is exactly that
   case, so each button below takes a real 28px box — not 44, and honest about it — with the
   VISIBLE dot just 6px, centred inside. */

.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    /* tucks up under the track's own 1rem bottom padding rather than stacking a second gap
       under it. */
    margin-top: -0.25rem;
    padding-bottom: 0.25rem;
}

.carousel-dot {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.carousel-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(192, 192, 192, 0.35);
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* the hover law from app/system/css/modals.css §7.1 applies here too: iOS Safari latches
   :hover on the last-tapped element, so a hover paint has to sit behind the capability query or
   one tap leaves a dot lit that is not the active one. */
@media (hover: hover) and (pointer: fine) {
    .carousel-dot:hover::before {
        background: rgba(212, 175, 55, 0.6);
    }
}

/* [class] not [:hover] — a FACT the script sets ("this is the card centred right now"), so it
   paints on every device, same rule the nav and the bench strip already follow. */
.carousel-dot.is-active::before {
    background: var(--accent-gold);
    box-shadow: var(--glow-gold);
    transform: scale(1.35);
}

@media (prefers-reduced-motion: reduce) {
    .carousel-dot::before { transition: none; }
}