/* =========================================================================
   Module · Cards / Image + Text — Figma 5495:35571 (page Global: Modules)
   variants 420 5508:36416 · 1024 5495:35530 · 1440 5495:35489 · 1920 5492:17575
   Home (Pages — Homepage 2.0 [09.30]): 7021:54687 · 7021:54676 · 7021:54665 · 7021:54622

   The section frame (.l-section): section-padding, page-margin,
   section-gap between the Section Header and "Body". Body: the cards in a
   column (420), a row from 1024, grid-gutter apart; the cards of a row are
   one height, so their captions line up at the foot (the block pushes its
   caption down).
   Raw in Figma: the 420 variant's Body gap, 32 (grid-gutter is 16 there).

   Ground: White, then the Module Background (Figma's two fills). The Home
   page puts an image over both (7021:54665's own fill, "ground" in the
   content: assets/home2/never/ground.jpg, the white folds). That ground
   is not painted on the section itself but on ::after, one seam-depth
   taller, so it can reach up into the seam wedge (seams.css): the wedge's
   plain `inherit` fill would cut the photo off at the join. Its top edge is
   the same grow bend, on the same scroll range, with the folds running on
   into it (owner's decision, CLAUDE.md). The photo covers that taller box
   (pinned to the bottom), so it is drawn a touch larger than Figma's.
   The template sets the image as the section's background-image (inline,
   so its path is the page's) and ::after inherits it.

   <br class="m-cards-image-text__break-large"> in a heading: a line break
   the 1920 variant makes by hand (Home: "Mission Control / Agent").
   ========================================================================= */
.m-cards-image-text {
  background: linear-gradient(var(--module-background), var(--module-background)), var(--color-white);
}
.m-cards-image-text > .b-section-header { align-self: stretch; }

.m-cards-image-text__body {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);                        /* Figma 420: raw 32 */
}
.m-cards-image-text__cell { display: flex; flex-direction: column; min-width: 0; }
.m-cards-image-text__cell > .b-card-image-text { flex: 1 1 auto; }

@media (min-width: 1024px) {
  .m-cards-image-text__body {
    flex-direction: row;
    gap: var(--spacing-grid-gutter);
  }
  .m-cards-image-text__cell { flex: 1 1 0; }
}

.m-cards-image-text__break-large { display: none; }
@media (min-width: 1920px) {
  .m-cards-image-text__break-large { display: inline; }
}

/* ── the ground image, running into the seam ──────────────────────── */
.m-cards-image-text--ground {
  overflow-x: clip;                            /* sideways only: the ground rises above the top */
  isolation: isolate;
}
.l-section + .l-section.m-cards-image-text--ground::before { content: none; }   /* ::after is its seam */
.m-cards-image-text--ground::after {
  --seam-top: calc(var(--seam-swing, 0px) + 1px);
  content: "";
  position: absolute;
  inset: calc(-1 * var(--seam-top)) 0 0;
  height: auto;
  pointer-events: none;
  clip-path: polygon(0 var(--seam-top), 68.8% var(--seam-top), 100% var(--seam-top), 100% 100%, 0 100%);
  animation: none;
}
.m-cards-image-text--ground::after {
  z-index: -1;
  background: inherit;                         /* the ground image, set on the section (content) */
  background-color: var(--color-white);
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
@supports (animation-timeline: view()) {
  .m-cards-image-text--ground::after {
    animation: m-cards-image-text-seam linear both;
    animation-timeline: view();
    /* seams.css runs from the join at the foot of the window to the join at
       its top; this box starts --seam-top above the join */
    animation-range: cover calc(var(--seam-top) + 1px) cover calc(100vh + var(--seam-top) + 1px);
  }
}
@keyframes m-cards-image-text-seam {
  from { clip-path: polygon(0 var(--seam-top), 68.8% var(--seam-top), 100% var(--seam-top), 100% 100%, 0 100%); }
  to   { clip-path: polygon(0 var(--seam-top), 68.8% 0%,              100% var(--seam-top), 100% 100%, 0 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .m-cards-image-text--ground::after { animation: none; }
}