/* =========================================================================
   Module · Cards / Resources — Figma 5949:25466 (page Global: Modules)
   420 5949:25619 · 1024 5949:25569 · 1440 5949:25518 · 1920 5949:25467
   The section frame (.l-section) with a Section Header and a row of three
   Card / Item, spacing/grid-gutter apart, as tall as the tallest.
   420 variant: a rail of 306-wide cards bleeding off the right edge, the
   Pagination under it in a 30-high band above and below (raw in Figma);
   home2.js drives it up to 1023 ([data-carousel-max]).
   ========================================================================= */
.m-cards-resources { background: var(--module-background); }
.m-cards-resources > .b-section-header { align-self: stretch; }

/* ── the rail (up to 1023) ───────────────────────────────────────────
   Full-bleed: it takes the section's side padding back and the track puts
   the first inset in again. */
.m-cards-resources__rail {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  margin-inline: calc(-1 * var(--gutter));
  max-width: none;                 /* .l-section caps children at 100% */
}
/* room for the cards' 1px hover outline inside the clip, given back */
.m-cards-resources__viewport {
  --rail-air: var(--space-20);
  overflow: hidden;
  padding-block: var(--rail-air);
  margin-block: calc(-1 * var(--rail-air));
}
.m-cards-resources__cards {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-grid-gutter);
  padding-left: var(--gutter);     /* left only: home2.js clamps the last page against it */
  transition: transform .7s var(--e-zoom);
  cursor: grab;
  touch-action: pan-y;
}
.m-cards-resources__rail.is-dragging .m-cards-resources__cards { transition: none; cursor: grabbing; }
.m-cards-resources__rail.is-static .m-cards-resources__cards { cursor: auto; }
.m-cards-resources__card { flex: none; display: flex; width: 306px; }   /* Figma 420: 306, raw */
.m-cards-resources__card > .b-card-item { flex: 1 1 auto; min-width: 0; }
.m-cards-resources__dots { padding: 30px var(--gutter); }              /* Figma: 30, raw */
/* nothing to page through once all three fit: no dots */
.m-cards-resources__rail.is-static .m-cards-resources__dots { visibility: hidden; }

/* ── 1024 up: a row of three ─────────────────────────────────────────── */
@media (min-width: 1024px) {
  .m-cards-resources__rail { margin-inline: 0; }
  .m-cards-resources__viewport { overflow: visible; padding-block: 0; margin-block: 0; }
  .m-cards-resources__cards { padding-left: 0; cursor: auto; }
  .m-cards-resources__card { flex: 1 1 0; min-width: 0; width: auto; }
  .m-cards-resources__dots { display: none; }
}