/* /for-venues/integrations/ - page-specific styles.
   House rules: brand tokens only (var(--green/--cream/--paper/--ink/
   --highlight/--dark), see base.css); prefix every new class in this file
   with `intg-`; shared components (.sect, .icards/.icard, .pill, .vchapter,
   .ph ...) live in base.css/page.css and are reused, never edited. Any
   animation must be wrapped so prefers-reduced-motion gets a static end
   state.

   2026-09-11 evening (founder's brief): the stack diagram became a three
   step flow - scan, the layer, routed to the pos - white cards joined by
   green connectors on the hero's paper, then a green chapter (the stage
   how-it-runs' product chapter uses) whose title is the promise and whose
   floor is the three systems the layer never touches, in cream with no
   card. The card is page.css's .icard and is never restyled here; this
   file places the flow, draws the connectors and builds the floor. */

/* ---------- per-row art ratios ----------
   The component's default lives on .icards (page.css); each row carries
   its own crop. The flow's 01 and 02 art is 674x444 (1.52); 03 is the
   till from how-it-runs' route A (1400x667), which object-fit trims to
   the same box with both screens still in frame. */

.intg-flow { --icard-ratio: 1.52; }
.intg-qs { --icard-ratio: 1.74; }             /* art is 936x538 */

/* ---------- 1 - the flow ----------

   Three .icard steps on the .icards grid, joined by connectors drawn as
   the cards' own pseudo-elements in the grid gap, so the <ol> holds
   exactly three items (role="list" stays on it: Safari drops list
   semantics under list-style: none). The middle card is green because it
   IS the layer; either side of it are the guest's phone and the till. */

/* the section has no visible title, so the hero's sub-line is what the
   flow sits under: .sect's 9svh top padding and .icards' 6svh title gap
   both come down (founder, 2026-09-11 - the cards sat a full screen-
   quarter below the copy). The hero's own 10svh bottom padding stays, so
   copy to cards is 12svh; the green chapter below keeps its own air. */
.intg-how { padding-top: 2svh; }

.intg-flow {
  --flow-gap: clamp(30px, 3.4vw, 52px);
  list-style: none;
  gap: var(--flow-gap);
  margin-top: 0;
}

.intg-step { position: relative; }

/* the 01/02/03 are the card's quiet top line (.icard__label, page.css),
   exactly as how-it-runs' three steps carry theirs */

/* connectors: a 2px line across the gap ending in a chevron, on the right
   of steps 01 and 02. Geometry (founder saw the first cut "broken": the
   line ran 5px past the chevron's tip): the line stops --tip short of the
   next card; the chevron is a 10px square rotated 45deg, whose point
   sits 7px (half its diagonal) right of its centre, so the square is
   placed with its centre 7px inside the line's end and the two meet at
   the point. Both are aria-free by nature; the <ol> order already says
   the direction. */
.intg-step:not(:last-child)::after {
  --tip: 5px;
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: calc(var(--flow-gap) - var(--tip));
  height: 2px;
  margin-top: -1px;
  background: var(--green-deep);
}

.intg-step:not(:last-child)::before {
  --tip: 5px;
  content: '';
  position: absolute;
  z-index: 1;
  top: calc(50% - 5px);
  left: calc(100% + var(--flow-gap) - var(--tip) - 12px);
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--green-deep);
  border-right: 2px solid var(--green-deep);
  transform: rotate(45deg);
}

/* ---------- 2 - the floor (green chapter) ----------

   The chapter's title is the promise (.sect__title, cream via page.css)
   and under it the three systems the layer never touches, straight on
   the chapter with no card: on this page the card is the product's
   shape, and these are not the product. Everything here runs FULL cream -
   the green chapter rule in page.css - with hierarchy carried by size,
   not by dimming. */

.intg-floor {
  color: var(--cream);
  text-align: center;
}

/* the row sits under the title at the same 6svh .icards uses */
.intg-floor__row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  margin-top: 6svh;
}

.intg-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intg-item__art { width: 100%; max-width: 320px; }

/* the same panel as .icard__art (page.css): the illustrations' own cream */
.intg-item__art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.82;
  object-fit: cover;
  border-radius: 16px;
  background: #F5F0E8;
}

.intg-item__title {
  margin-top: 14px;
  font-size: clamp(17px, 1.3vw, 22px);
  line-height: 1.15;
}

.intg-item__text {
  margin-top: 4px;
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.4;
}

.intg-floor__note {
  max-width: 44em;
  margin: clamp(20px, 2.4vw, 36px) auto 0;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.45;
}

/* ---------- 2 - three common questions ---------- */

/* ---------- closer ---------- */

.intg-closer__cta { margin-top: 5svh; }

/* ---------- tablet and mobile ---------- */

@media (max-width: 900px) {
  /* the flow stays three-up to the phone break: .icards' two-up here
     would orphan step 03 on its own row and point a connector at nothing */
  .intg-flow {
    grid-template-columns: repeat(3, 1fr);
    --flow-gap: clamp(22px, 3vw, 30px);
  }
}

@media (max-width: 640px) {
  /* one step per line; the connectors turn to run down the middle */
  .intg-flow {
    grid-template-columns: 1fr;
    --flow-gap: 40px;
  }

  /* the same geometry turned through 90deg: the line runs down from the
     card's foot and stops --tip short of the next card; the chevron's
     point is 7px below its centre once rotated to point down */
  .intg-step:not(:last-child)::after {
    top: 100%;
    left: calc(50% - 1px);
    width: 2px;
    height: calc(var(--flow-gap) - var(--tip));
    margin-top: 0;
  }

  .intg-step:not(:last-child)::before {
    top: calc(100% + var(--flow-gap) - var(--tip) - 12px);
    left: calc(50% - 5px);
    transform: rotate(135deg);
  }

  .intg-floor__row {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .intg-item__art { max-width: 240px; }
}

/* No animation or transition is declared in this file, so there is no
   reduce branch to write: every reveal on the page is the generic [data-vm]
   layer in venues-motion.css, which venues.js never arms under reduced
   motion and which carries its own reduce branch. */