/* ============================================================
   site-card-scroller.css  --  SITE-WIDE
   Base styling for the generic horizontal scroll-snap card strip
   (paired with js/site-card-scroller.js). Page-agnostic: layout,
   type and spacing live here, while the things that vary per page
   (accent colour, active-card tint, card width, ...) are exposed
   as CSS custom properties with sensible defaults. A page
   customises the component by SETTING A FEW VARIABLES on
   .card-scroller rather than restyling it.

   ASCII-clean (required by the SmarterASP.NET upload filter).

   Loaded per page (where a card-scroller exists) via:
     getVersionedFile('css/site-card-scroller.css')

   ------------------------------------------------------------
   Customisable variables (override these on .card-scroller per page):
     --cs-card-width    width of each card             (default 320px)
     --cs-card-bg       card background                (default #ffffff)
     --cs-active-tint   leading/active card tint       (default #f4f9f1)
     --cs-accent        quote bar + desc + active dot  (default #4a8b3f)
     --cs-text          title / quote / cite colour    (default #3b3b3b)
     --cs-border        outer border + in-card rule    (default #e2e8e3)
     --cs-divider       line between cards             (default #d4d4d4)
     --cs-dot           inactive dot colour            (default #e2e8e3)
     --cs-radius        strip corner radius            (default 20px)
     --cs-gap           strip -> dots gap              (default 10px)

   Optional affordance (sibling above .card-scroller, styled here so
   it is reusable; the page supplies the text):
     <p class="card-scroller-hint">Drag or click each panel ...</p>

   DOM contract (generic hooks; behaviour in the JS):
     .card-scroller            [data-card-scroller]
       .card-scroller__track   [data-card-scroller-track]  (scroll viewport)
         .card-scroller__card  [data-card-scroller-card]   (repeat)
       .card-scroller__dots
         button.card-scroller__dot [data-card-scroller-dot] (repeat)
   The JS adds .is-active to the leading card and its matching dot.

   Card-internal class names (filled by the page markup):
     __card-head  __title  __desc  __rule
     __quote  __quote-body  __quote-text  __cite
   ============================================================ */

.card-scroller {
  --cs-card-width:  320px;
  --cs-card-bg:     #ffffff;
  --cs-active-tint: #f4f9f1;
  --cs-accent:      #4a8b3f;
  --cs-text:        #3b3b3b;
  --cs-border:      #e2e8e3;
  --cs-divider:     #d4d4d4;
  --cs-dot:         #e2e8e3;
  --cs-radius:      20px;
  --cs-gap:         10px;

  display: flex;
  flex-direction: column;
  gap: var(--cs-gap);
}

/* Optional hint line shown above the strip (e.g. "Drag or click ..."). */
.card-scroller-hint {
  margin: 0;
  font-style: italic;
  font-size: 22px;
  line-height: 35px;
  color: var(--cs-text);
}

/* Scroll viewport: rounded, bordered, clips the card row. */
.card-scroller__track {
  position: relative;                 /* offset parent for the JS */
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;              /* Firefox: hide native bar */
  cursor: grab;                       /* draggable strip (mouse) */
  touch-action: pan-x;                /* horizontal swipe; vertical -> page */
  user-select: none;                  /* no text selection while dragging */
  -webkit-user-select: none;
}
.card-scroller__track::-webkit-scrollbar { display: none; }
/* While the mouse is dragging: closed-hand cursor and snap suspended
   so the free drag is smooth; the JS settles on a card on release. */
.card-scroller__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

/* Cards: fixed width, hairline-divided, snap to the left edge. */
.card-scroller__card {
  box-sizing: border-box;
  flex: 0 0 var(--cs-card-width);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background: var(--cs-card-bg);
  transition: background-color 0.25s ease;
}
.card-scroller__card + .card-scroller__card {
  border-left: 1px solid var(--cs-divider);
}
.card-scroller__card.is-active {
  background: var(--cs-active-tint);
}

.card-scroller__card-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-scroller__title {
  margin: 0;
  font-weight: 700;
  font-size: 25px;
  line-height: 35px;
  color: var(--cs-text);
}
.card-scroller__desc {
  margin: 0;
  font-style: italic;
  font-size: 20px;
  line-height: 30px;
  color: var(--cs-accent);
}
.card-scroller__rule {
  border: 0;
  height: 1px;
  margin: 0;
  background: var(--cs-border);
}

/* Quote: 2px accent bar (::before) + italic text and a bold cite. */
.card-scroller__quote {
  margin: 0;
  display: flex;
  gap: 8px;
}
.card-scroller__quote::before {
  content: "";
  flex: 0 0 2px;
  align-self: stretch;
  background: var(--cs-accent);
}
.card-scroller__quote-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-scroller__quote-text {
  margin: 0;
  font-style: italic;
  font-size: 20px;
  line-height: 30px;
  color: var(--cs-text);
}
.card-scroller__cite {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  color: var(--cs-text);
}

/* Dot indicators. Scoped under .card-scroller__dots so the dot
   styling keeps enough specificity to survive a host page's broad
   `button { background: none }` reset. */
.card-scroller__dots {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.card-scroller__dots .card-scroller__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--cs-dot);
  cursor: pointer;
  transition: width 0.25s ease, background-color 0.25s ease;
}
.card-scroller__dots .card-scroller__dot.is-active {
  width: 20px;
  background: var(--cs-accent);
}

/* ============================================================
   Vertical-axis variant  (data-card-scroller-axis="y")
   Generic mechanics only -- a page supplies card/arrow visuals and
   sets --cs-track-max for the strip's max height. The horizontal
   rules above are untouched (they key off the .card-scroller__*
   classes; these key off the data- attributes for the y variant).
   ============================================================ */
[data-card-scroller-axis="y"] [data-card-scroller-track] {
  display: flex;
  flex-direction: column;
  max-height: var(--cs-track-max, none);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox: hide native bar */
  touch-action: pan-y;              /* vertical swipe; horizontal -> page */
}
[data-card-scroller-axis="y"] [data-card-scroller-track]::-webkit-scrollbar { display: none; }
[data-card-scroller-axis="y"] [data-card-scroller-card] {
  flex: 0 0 auto;            /* keep each card's height so the strip overflows */
  scroll-snap-align: start;
}

/* Arrow controls (either axis). The disabled state at the start/end
   dims and de-activates the arrow -- matches the main carousel arrows. */
[data-card-scroller-prev].is-disabled,
[data-card-scroller-next].is-disabled {
  opacity: 0.35;
  pointer-events: none;
}