/* =========================================================================
   06-cardoverview — "Spirit One Card" product section.
   Centered tag + h2 claim, hero card visual, h3 + feature chips + CTA.
   Every rule scoped under ._card-overview. Utilities (.g-row, .flex,
   .title-3 …) come from base.css and are not restyled here.
   ========================================================================= */

/* Section gap: Jeton's my-180-64 rhythm (fluid 64px mobile → 180px desktop,
   source root: "jeton-card-overview my-180-64") with a +10% top boost —
   a touch more air after Unify than the reference. */
._card-overview {
  margin-top: calc(var(--180-64) * 1.1);
}

/* ---- Responsive column spans (16-col grid) ------------------------------ */
._card-overview .g-col {
  width: 100%;
  flex: 0 0 auto;
}
._card-overview .xxl-8  { max-width: 50%; }   /* 8 / 16 */
._card-overview .xxl-10 { max-width: 62.5%; } /* 10 / 16 */

@media (max-width: 1290px) {
  ._card-overview .md-10 { max-width: 62.5%; }
  ._card-overview .md-12 { max-width: 75%; }
}
@media (max-width: 1023px) {
  ._card-overview .sm-12 { max-width: 75%; }
  ._card-overview .sm-14 { max-width: 87.5%; }
}

/* Desktop: the .stick-slot wrappers vanish from layout entirely — the rows
   participate in the section's flow exactly as before. */
._card-overview .stick-slot { display: contents; }

@media (max-width: 743px) {
  ._card-overview .xs-16 { max-width: 100%; }

  /* ---- Jeton assemble on mobile — pure CSS, no JS ------------------------ */
  /* The 11-addsend taglines mechanic: three STATIC objects spaced apart in
     the flow, each inside a full-viewport sticky box (.stick-slot) whose
     padding-top is the row's attach point. A row rides up 1:1 with the
     scroll (it IS the scroll), sticks when its slot tops out, holds, and
     releases in arrival order when its slot box ends. Tuning knobs:
       --arrive : scroll distance between consecutive arrivals;
       --dwell  : how long the finished assembly holds before the first row
                  releases (slot box = 100svh + dwell);
       --slot   : each row's attach point, from the viewport top. */
  ._card-overview {
    --arrive: 40svh;
    --dwell: 25svh;
  }
  ._card-overview .stick-slot {
    display: block;
    position: sticky;
    top: 0;
    height: 100svh;
    padding-top: var(--slot, 40svh);
  }
  ._card-overview .stick-slot + .stick-slot {
    margin-top: calc(var(--arrive) - 100svh);
  }
  /* Tail spacer (Jeton's empty last <li>): extends the shared container so
     the finished assembly HOLDS for --dwell before all three rows release —
     together, as one block (slots share the section as sticky container, so
     release is inherently simultaneous). */
  ._card-overview::after {
    content: "";
    display: block;
    height: var(--dwell);
  }
  ._card-overview .slot-heading { --slot: 14svh; }
  ._card-overview .slot-card    { --slot: 30svh; }
  ._card-overview .slot-info    { --slot: 64svh; }

  /* The slot padding alone positions each row — neutralise the rows' own
     flow margins on mobile so --slot values are exact. (.stick-slot in the
     selector out-specifies the utility definitions at the end of this file.) */
  ._card-overview .stick-slot .my-96-48,
  ._card-overview .stick-slot .card-row {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* The card visual keeps its full top margin but only half the bottom one —
   pulls the "Contactless…" info block up and shortens the section. */
._card-overview .card-row { margin-bottom: calc(var(--96-48) * .5); }

/* ---- Hero card stage ---------------------------------------------------- */
._card-overview ._card-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  perspective: 1200px;
}
._card-overview ._hero-card {
  /* +30% vs. the original clamp(280,…,440) */
  --w: clamp(364px, 286px + 100vw * .234, 572px);
  width: var(--w);
  max-width: 100%;
  height: auto;
  display: block;
}
._card-overview ._hero-card .number {
  font-size: calc(var(--w) * .05);
}
._card-overview ._hero-card .brand {
  margin-top: 6px;
  font-size: calc(var(--w) * .06);
}
._card-overview ._card-contactless {
  width: calc(var(--w) * .09);
  height: calc(var(--w) * .09);
  color: rgba(255, 255, 255, .9);
}

/* gap-32-24 utility used on the footer column (not in base.css) */
._card-overview .gap-32-24 { gap: var(--32-24); }

/* my-96-48 spacing for the card row (not in base.css) */
._card-overview .my-96-48 {
  margin-top: var(--96-48);
  margin-bottom: var(--96-48);
}