/* Carousel - ported from the mock (kit.css .carousel*). Free horizontal scroll (touch, drag and
   trackpad for free), prev/next buttons and an auto-advance in carousel.js. No scroll-snap: on a
   padded flex scroller Chromium opens already scrolled past the leading padding. */
.ddc-sc.carousel { position: relative; }
.ddc-sc .carousel__track {
  display: flex; gap: var(--gap-20); overflow-x: auto; scroll-behavior: smooth;
  padding-bottom: var(--gap-10); scrollbar-width: none;
}
.ddc-sc .carousel__track::-webkit-scrollbar { display: none; }
.ddc-sc .carousel__track > * { flex: 0 0 auto; }
.ddc-sc .carousel__nav { display: flex; justify-content: flex-end; gap: var(--gap-10); margin-top: var(--gap-20); }
.ddc-sc .carousel__btn {
  display: grid; place-items: center; width: var(--icon-circle); height: var(--icon-circle); padding: 0;
  border-radius: var(--r-pill); border: var(--hair) solid var(--line); background: var(--white); color: var(--ddc-purple);
  cursor: pointer; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ddc-sc .carousel__btn:hover { background: var(--ddc-green); color: var(--on-green); border-color: var(--ddc-green); }
.ddc-sc .carousel__btn:disabled { opacity: .35; cursor: not-allowed; }
.ddc-sc .carousel__btn svg { width: var(--icon); height: var(--icon); }
/* The disc stays the mock's 36px (Richard asked for the mock's buttons); an invisible ring takes the tap
   target to 44px. Rings do not overlap across the 10px gap. */
.ddc-sc .carousel__btn { position: relative; }
.ddc-sc .carousel__btn::before { content: ""; position: absolute; inset: calc(var(--gap-4) * -1); border-radius: inherit; }
@media (width <= 640px) {
  .ddc-sc .carousel__track > * { scroll-snap-stop: always; } /* one whole card per swipe */
}


/* Alignment (Richard, 30 Sept - replaces the 29 Sept right-hand bleed): a carousel never touches the
   edges of its card. It sits on the card's content edges on both sides, in line with the heading, and
   shows whole cards only (3 / 2 / 1 across), snapping card by card. The arrows end on the same edge. */
.ddc-sc.carousel { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); } /* capped: on the shell rail above 1620px too */
.ddc-sc .carousel__track { margin-right: 0; padding-inline: 0; scroll-snap-type: x mandatory; scroll-padding-inline: 0; }
.ddc-sc .carousel__track > * { scroll-snap-align: start; }
.ddc-sc .carousel__nav { padding-inline: 0; }
.ddc-sc.carousel :is(.need, .project) { width: calc((100% - 2 * var(--gap-20)) / 3); }
@media (max-width: 1024px) { .ddc-sc.carousel :is(.need, .project) { width: calc((100% - var(--gap-20)) / 2); } }
@media (max-width: 640px) { .ddc-sc.carousel :is(.need, .project) { width: 100%; } }

/* Hello's reset gives buttons a pink focus/hover fill; keep the mock's white disc. */
.ddc-sc .carousel__btn:focus { background: var(--white); color: var(--ddc-purple); outline: none; }
.ddc-sc .carousel__btn:hover { background: var(--ddc-green); color: var(--on-green); border-color: var(--ddc-green); }
.ddc-sc .carousel__btn:focus-visible { outline: var(--mark-w) solid var(--white); outline-offset: var(--focus-offset); box-shadow: var(--focus-halo); }