/* =========================================================================
   Module · Cards / Tiles — Figma 5495:34578 (page Global: Modules)
   420 5508:36276 · 1024 5495:34554 · 1440 5495:34530 · 1920 5492:17570
   Home: 420 7021:54683 · 1024 7021:54672 · 1440 7021:54661 · 1920 7021:54618

   The section frame (.l-section): a Section Header, section-gap, then the
   tiles (Card / Tile, size=auto) grid-gutter apart.
     420 variant: a rail of 320 × 400 tiles running to the window's right
       edge, Pagination under it (space/24), both inset by page-margin;
       home2.js drives it (two pages: start and end).
     1024 up: three squares sharing the content width.
   The ground is Module Background (data-bg), over White.

   Raw in Figma: the 420 tiles' fixed 320 × 400; the rail's gap to its
   Pagination (space/24, a primitive).
   ========================================================================= */
.m-cards-tiles { background: linear-gradient(var(--module-background), var(--module-background)), var(--color-white); }
.m-cards-tiles > .b-section-header { align-self: stretch; }

/* ── the rail (420 variant) ────────────────────────────────────────────
   Full-bleed: the tiles run to the window's edge, so the rail takes the
   section's side padding back and the track puts the first inset in again
   (below 1024 --gutter is the page margin). */
.m-cards-tiles__rail {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  margin-inline: calc(-1 * var(--spacing-page-margin));
  max-width: none;          /* .l-section caps children at 100%, which would cut the bleed */
}
/* The rail clips sideways, and `overflow` clips both axes: the padding is
   room for the tiles' 1px hover line inside the clip, the negative margin
   gives it back to the layout. */
.m-cards-tiles__viewport {
  --rail-air: 20px;
  overflow: hidden;
  padding-block: var(--rail-air);
  margin-block: calc(-1 * var(--rail-air));
}
.m-cards-tiles__track {
  display: flex;
  align-items: center;
  gap: var(--spacing-grid-gutter);
  padding-left: var(--spacing-page-margin);   /* left only: home2.js clamps the last page against it */
  transition: transform .7s var(--e-zoom);
  cursor: grab;
  touch-action: pan-y;
}
.m-cards-tiles__rail.is-dragging .m-cards-tiles__track { transition: none; cursor: grabbing; }
.m-cards-tiles__rail.is-static .m-cards-tiles__track { cursor: auto; }
/* nothing to page through once all three fit (≈1017–1023): no dots */
.m-cards-tiles__rail.is-static .m-cards-tiles__dots { display: none; }
.m-cards-tiles__dots { padding-inline: var(--spacing-page-margin); }

.m-cards-tiles__tile {
  flex: none;
  width: 320px;             /* Figma: fixed 320 × 400 on the 420 variant */
  height: 400px;
}
.m-cards-tiles__tile > .b-card-tile { width: 100%; height: 100%; }

/* ── 1024 up: a row of three squares ───────────────────────────────── */
@media (min-width: 1024px) {
  .m-cards-tiles__rail { margin-inline: 0; gap: 0; }
  .m-cards-tiles__viewport { overflow: visible; padding-block: 0; margin-block: 0; }
  .m-cards-tiles__track { padding-left: 0; cursor: auto; }
  .m-cards-tiles__dots { display: none; }
  .m-cards-tiles__tile {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    aspect-ratio: 1;        /* Figma: the tiles are drawn square from 1024 */
  }
}

@media (prefers-reduced-motion: reduce) {
  .m-cards-tiles__track { transition: none; }
}