/* Carousel — shared component styles.
   Split out of site.css 2026-08-23 (Session 206) per Conventions 5.4: these rules are used by more
   than one page, so they belong in shared/ rather than in any one page's file.

   CONSUMERS (verified 2026-08-23): Views/Home/Dashboard.cshtml (Raider and Raid Leader sections),
   Views/Home/Index.cshtml — a DIFFERENT page from the dashboard, which is what makes this shared —
   Views/Home/_TrialsCard.cshtml, and wwwroot/js/dashboard.js which drives the track, slides and
   dots. Views/Blogs/_BlogPublication.cshtml mentions the word "carousel" but uses none of these
   classes.

   REFERENCED FROM _Layout.cshtml, alongside shared/roster.css. Conventions 5.3 says the layout is
   for assets most pages use, and this is not that — the reference is there anyway because these
   rules were in site.css, which every page loads, so keeping them global is behaviour-preserving.
   Per-page references would mean editing every consumer and silently breaking any that was missed.

   .carousel-slide-cards is used by the dashboard alone, but stays with its family: the grid inside
   a slide is carousel structure, and splitting one rule of a component across two files to satisfy
   a prefix rule costs more than it buys. */

.carousel-track { position: relative; }
.carousel-slide { display: none; flex-direction: column; gap: 0.5rem; }
.carousel-slide.active { display: flex; }
.carousel-slide-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.carousel-btn {
    /* background: none; — .btn */
    /* border: 1px solid var(--line); — .btn */
    /* border-radius: 0.25rem; — .btn */
    /* cursor: pointer; — .btn */
    /* line-height: 1; — .btn */
    color: var(--ink-3);
    font-size: 1rem;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
}
.carousel-btn:hover { color: var(--accent); border-color: var(--accent); }
.carousel-dots { display: flex; gap: 0.375rem; align-items: center; }
.carousel-dot {
    width: 0.438rem;
    height: 0.438rem;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
    transition: background 0.15s;
}
.carousel-dot.active { background: var(--accent); }