/* CardRow — THE house pattern for laying out a card collection
   (PricingCard, BlogCard, TestimonialCard, …).

   DESKTOP: an N-column grid (default 3 — set --cardrow-cols to change).
   MOBILE (≤640px): the grid becomes a horizontal SWIPE CAROUSEL — CSS
   scroll-snap, no JS. Cards are ~85% of the row width so the next card peeks
   in from the right and invites the swipe.

   EXCEPTION — plan cards: a row of PricingCards STACKS into one column on
   mobile (read top → bottom in one scroll) instead of swiping, because plans
   must be comparable feature-by-feature and a half-visible plan reads as a
   hidden price. Automatic for any row containing .ds-pricecard; force the
   same behaviour on any other row with .ds-cardrow--stack.

   Autoplay: add data-cardrow-autoplay (optionally = ms, default 5000) and
   load components/core/cardrow-autoplay.js — the mobile carousel then advances
   one card to the left every 5s and wraps, until the user touches it. House
   default for the TESTIMONIAL row (it hints that more quotes exist).

   Full-bleed variant: add .ds-cardrow--bleed when the row sits inside a
   section padded with --padding-x; the carousel then runs edge-to-edge of the
   viewport while the first/last card still align to the section inset. */

.ds-cardrow {
  display: grid;
  grid-template-columns: repeat(var(--cardrow-cols, 3), 1fr);
  gap: var(--gap-24);
  align-items: stretch;
}

@media (max-width: 640px) {
  .ds-cardrow {
    display: flex;
    overflow-x: auto;
    gap: var(--gap-16);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* swipe affordance is the peeking card, not a scrollbar */
  }
  .ds-cardrow::-webkit-scrollbar { display: none; }
  .ds-cardrow > * {
    flex: 0 0 min(85%, 340px);
    scroll-snap-align: start;
  }
  .ds-cardrow--bleed {
    margin-inline: calc(-1 * var(--padding-x));
    padding-inline: var(--padding-x);
    scroll-padding-inline: var(--padding-x);
  }

  /* Stacked rows: single column, vertical scroll of the page. */
  .ds-cardrow--stack,
  .ds-cardrow:has(> .ds-pricecard) {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-16);
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .ds-cardrow--stack > *,
  .ds-cardrow:has(> .ds-pricecard) > * { flex: none; }
}