/* Yalla2x v4 section library (docs/motion/MOTION-AND-LAYOUT-SPEC.md, part C), sl- prefix. The pilot's patterns: SL-01
   sticky split, SL-02 bento tiles (row with a rail, quad, trio, five), SL-04 product bento with compact phone rows,
   SL-05 process rail, SL-11 CTA glow band, SL-12 marquee strip (SL-03 and SL-10 reuse site.css's .bento/.stat and
   .frame unchanged). The rest of part C lands page by page with the rollout. Every size is a site.css token or the
   type scale; colours are the brand tokens. Loaded after site.css and before motion.css and the page CSS, so a page
   rule that sets the same thing on the same element wins and is deleted when the library class is applied (B2).
   Bands: 1440 = 1200px and up, 1024 = 1024-1199, 768 = 768-1023, 390 = under 768. Grids of four drop to two below
   1200px; splits collapse below 1024px. Motion is set by data-motion attributes in the markup (css/motion.css). */

/* ---------- SL-01 sticky split: the heading column stays put while its own rows pass ---------- */
.sl-split {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(32px, 4vw, 48px);
  align-items: start;
}
.sl-split__head {
  grid-column: 1 / 6; position: sticky; top: calc(var(--hdr) + 32px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.sl-split__head > .tag { font-size: var(--t-cap); }
.sl-split__head > p:not(.tag) { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); max-width: 44ch; }
.dsec .sl-split__head > p:not(.tag) { color: var(--on-dark-2); }
.sl-split__body { grid-column: 6 / 13; position: relative; padding-left: clamp(20px, 2.4vw, 36px); }
/* the spine: a 2px deep-gold rule down the body's left edge, drawn top to bottom (M10, y axis) */
.sl-split__spine { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--gold-deep); }

/* ---------- SL-02 bento tiles ---------- */
.sl-bento, .sl-rail { --tile-pad: clamp(22px, 2.2vw, 32px); --tile-gap: 16px; }
.sl-bento { display: grid; gap: var(--tile-gap); }
.sl-bento--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-bento--quad, .sl-bento--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sl-bento--five { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.sl-bento--five > * { grid-column: span 4; }
.sl-bento--five > :nth-child(n + 4) { grid-column: span 6; }   /* row 2 is 6 / 6: no centred orphan */
.sl-tile {
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px;
  padding: var(--tile-pad); border-radius: var(--r-lg); min-height: clamp(200px, 18vw, 260px);
}
.sl-tile--plain { background: var(--panel); }
.sl-tile--tinted { background: #fdf3dc; background: color-mix(in srgb, var(--gold-light) 22%, #fff); }   /* a light gold tint (no blue: owner, 2026-10-22) */
.sl-tile--tinted :is(p, dd) { color: var(--ink-2); }
.sl-tile--gradient { background: linear-gradient(160deg, var(--dark), var(--dark-2)); color: var(--on-dark); }
.sl-tile--gradient :is(p, dd) { color: var(--on-dark-2); }
/* the gradient tile's glow (the M17 recipe), under the tile's content and inside its corners */
.sl-tile--gradient::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 70% at 0% 100%, rgba(246, 196, 83, 0.22), rgba(246, 196, 83, 0) 70%);
}
/* on a dark panel */
.dsec .sl-tile { color: var(--on-dark); }
.dsec .sl-tile :is(p, dd) { color: var(--on-dark-2); }
.dsec .sl-tile--plain { background: var(--dark-2); }
.dsec .sl-tile--gradient { background: linear-gradient(160deg, var(--dark-2), var(--dark)); }   /* Card into Midnight, the gold glow over it */
.dsec .sl-tile--gradient::before { background: radial-gradient(90% 70% at 0% 100%, rgba(246, 196, 83, 0.2), rgba(246, 196, 83, 0) 70%); }
.dsec .sl-tile--gold { background: linear-gradient(rgba(246, 196, 83, 0.08), rgba(246, 196, 83, 0.08)), var(--dark-2); }

/* ---------- SL-05 process rail (also the rail over an SL-02 row) ----------
   <div class="sl-rail"> holds one decorative .sl-rail__line and the <ol> (a <span> cannot be a child of an <ol>). The
   line runs from the first marker's centre to the last one's on the first row; each [data-motion-marker] step or tile
   carries its marker (::after), grey until the line passes it (css/motion.css, M10). --n is the number of columns,
   --pad the marker's inset from the item's left edge (the item's own padding, so it sits over the number). */
.sl-rail { position: relative; --n: 5; --pad: var(--tile-pad); --rail-top: 40px; --mark-ring: var(--bg); }
.dsec .sl-rail { --mark-ring: var(--dark); --m-mark-off: var(--dark); }
.sl-rail > ol { padding-top: var(--rail-top); }
.sl-rail > ol > li { position: relative; }
.sl-rail__list { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--tile-gap); }
.sl-rail [data-motion-marker]::after {
  content: ""; position: absolute; left: var(--pad); top: calc(6px - var(--rail-top)); width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--gold); background: var(--gold); box-shadow: 0 0 0 4px var(--mark-ring);
}
.sl-rail__line {
  position: absolute; top: 11px; height: 2px; border-radius: 2px; background: var(--gold-deep);
  left: calc(var(--pad) + 6px); right: calc((100% - (var(--n) - 1) * var(--tile-gap)) / var(--n) - var(--pad) - 6px);
}
.dsec .sl-rail__line { background: var(--gold-deep); }

/* ---------- SL-04 product bento ---------- */
.sl-products .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* three visible cards (or fewer): three across, at every width from 768px */
.sl-products .grid:not(:has(> :nth-child(4 of :not([hidden])))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* five visible cards or more: the first visible one is the feature card, 2 x 2, its picture filling its height (at least
   16:10) and its title one step up; a filtered grid never leaves a hole, the selectors count visible cards only */
.sl-products .grid:has(> :nth-child(5 of :not([hidden]))) > :nth-child(1 of :not([hidden])) { grid-column: span 2; grid-row: span 2; }
.sl-products .grid:has(> :nth-child(5 of :not([hidden]))) > :nth-child(1 of :not([hidden])) .mcard__img { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
.sl-products .grid:has(> :nth-child(5 of :not([hidden]))) > :nth-child(1 of :not([hidden])) :is(h3, h4) { font-size: var(--t-h3); }

/* ---------- SL-11 CTA glow band (M17): a soft gold glow behind the heading, under the content ---------- */
[data-motion="glow"] { position: relative; isolation: isolate; }
[data-motion="glow"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 30% 60%, rgba(246, 196, 83, 0.18), rgba(255, 214, 128, 0.08) 45%, rgba(255, 214, 128, 0) 70%);
}
.dsec[data-motion="glow"]::before { background: radial-gradient(60% 70% at 30% 60%, rgba(246, 196, 83, 0.16), rgba(246, 196, 83, 0) 70%); }
/* the band's links draw their underline (M10): a scaled pseudo-element in place of the border */
.cta[data-motion="glow"] .alink { border-bottom: 0; position: relative; }
.cta[data-motion="glow"] .alink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left center;
}

/* ---------- SL-12 marquee strip (M11, Home): the product names as text; without JS the list wraps, centred ---------- */
.sl-marquee {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  min-height: 96px; padding-right: var(--gutter); border-block: 1px solid var(--line);
}
.sl-marquee__viewport { overflow: hidden; }
.sl-marquee__track { display: flex; width: max-content; }
.sl-marquee__list {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 8px;
  max-width: 100vw; padding: 20px var(--gutter);
}
.sl-marquee__list > li {
  display: inline-flex; align-items: center; white-space: nowrap;
  font: 700 var(--t-h4)/1.2 var(--font-head); letter-spacing: -0.02em; color: var(--ink-3);
}
.sl-marquee__list > li + li::before, .m-on .sl-marquee__list > li::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-inline: clamp(20px, 2.4vw, 36px);
}
/* with motion on (html.m-on, set before first paint, so the strip never changes height): one line, the copies end to end
   (js/motion.js adds the second copy and .m-run, which starts it), the edges fade */
.m-on .sl-marquee__viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.m-on .sl-marquee__list { flex-wrap: nowrap; max-width: none; padding: 0; }
.sl-marquee__pause svg { width: 14px; height: 14px; }
.sl-marquee__pause .i-play, .sl-marquee__pause[aria-pressed="true"] .i-pause { display: none; }
.sl-marquee__pause[aria-pressed="true"] .i-play { display: inline; }

/* ---------- 1024 band (1024-1199px): fours become two by two; the row's rail and markers go ---------- */
@media (max-width: 1199px) {
  .sl-bento--quad, .sl-bento--row, .sl-bento--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-bento--five > *, .sl-bento--five > :nth-child(n + 4) { grid-column: auto; }
  .sl-bento--five > :nth-child(5) { grid-column: 1 / -1; }
  .sl-rail--tiles > .sl-rail__line, .sl-rail--tiles [data-motion-marker]::after { display: none; }
  .sl-rail--tiles > ol { padding-top: 0; }
  .sl-rail:has(> .sl-rail__list) { --n: 3; }   /* a process rail: three across, the line on the first row only */
  .sl-rail__list > [data-motion-marker]:nth-child(n + 4)::after { display: none; }   /* no marker without its line (row 2) */
  .sl-products .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the feature card spans the row, its picture left (6 of 12) and its text right */
  .sl-products .grid:has(> :nth-child(5 of :not([hidden]))) > :nth-child(1 of :not([hidden])) {
    grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 24px);
  }
  .sl-products .grid:has(> :nth-child(5 of :not([hidden]))) > :nth-child(1 of :not([hidden])) .mcard__img { grid-column: 1 / 7; aspect-ratio: 16 / 10; }
  .sl-products .grid:has(> :nth-child(5 of :not([hidden]))) > :nth-child(1 of :not([hidden])) .mcard__body { grid-column: 7 / 13; padding-left: 0; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .sl-products .grid:not(:has(> :nth-child(4 of :not([hidden])))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* a narrow card: the status chip goes under the name rather than squeezing it onto three lines */
  .sl-products .mcard__top { flex-wrap: wrap; justify-content: flex-start; gap: 6px 10px; }
}
/* ---------- 768 band: splits stack, the head is not sticky ---------- */
@media (max-width: 1023px) {
  .sl-split__head { grid-column: 1 / -1; position: static; }
  .sl-split__body { grid-column: 1 / -1; }
}
/* ---------- 390 band (under 768px) ---------- */
@media (max-width: 767px) {
  .sl-bento--trio, .sl-bento--quad, .sl-bento--row, .sl-bento--five { grid-template-columns: minmax(0, 1fr); }
  .sl-bento--five > :nth-child(5) { grid-column: auto; }
  .sl-tile { min-height: 0; }
  /* the process rail turns vertical: down the left, the markers on it beside each step's number; the last step
     covers the line below its own marker */
  .sl-rail:has(> .sl-rail__list) { --rail-top: 0px; }
  .sl-rail__list { grid-template-columns: minmax(0, 1fr); padding-left: 28px; }
  .sl-rail__list > [data-motion-marker]::after { left: -28px; top: calc(var(--pad) + 4px); }
  .sl-rail__list > li:last-child::before {
    content: ""; position: absolute; left: -28px; top: calc(var(--pad) + 18px); bottom: 0; width: 14px; background: var(--mark-ring);
  }
  .sl-rail > .sl-rail__line { top: calc(var(--pad) + 10px); bottom: 4px; left: 5px; right: auto; width: 2px; height: auto; transform-origin: center top; }
  .m-on .sl-rail > .sl-rail__line:not(.m-in) { transform: scaleY(0); }
  /* SL-04 compact rows: picture 88px square left, the same card text right; the whole card stays the link */
  .sl-products .grid, .sl-products .grid:not(:has(> :nth-child(4 of :not([hidden])))) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sl-products .mcard {
    display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: start;
    padding: 14px 0; background: none; border-radius: 0; border-bottom: 1px solid var(--line);
  }
  .sl-products .grid:has(> :nth-child(5 of :not([hidden]))) > :nth-child(1 of :not([hidden])) { display: grid; grid-column: auto; column-gap: 14px; grid-template-columns: 88px minmax(0, 1fr); }
  .sl-products .grid:has(> :nth-child(5 of :not([hidden]))) > :nth-child(1 of :not([hidden])) :is(.mcard__img, .mcard__body) { grid-column: auto; }
  .sl-products .grid:has(> :nth-child(5 of :not([hidden]))) > :nth-child(1 of :not([hidden])) :is(h3, h4) { font-size: var(--t-h5); }
  .sl-products .mcard__img, .sl-products .grid:has(> :nth-child(5 of :not([hidden]))) > :nth-child(1 of :not([hidden])) .mcard__img {
    width: 88px; aspect-ratio: 1; flex: none; border-radius: var(--r-sm);
  }
  .sl-products .mcard__body { padding: 0; gap: 6px; }
  .sl-products .mcard__top { flex-wrap: wrap; justify-content: flex-start; gap: 6px 10px; }
  .sl-products .card__foot { padding-top: 2px; }
  /* the glow centres on the heading block */
  [data-motion="glow"]::before { background: radial-gradient(120% 45% at 40% 35%, rgba(246, 196, 83, 0.18), rgba(255, 214, 128, 0.08) 45%, rgba(255, 214, 128, 0) 70%); }
  .dsec[data-motion="glow"]::before { background: radial-gradient(120% 45% at 40% 35%, rgba(246, 196, 83, 0.16), rgba(246, 196, 83, 0) 70%); }
  .sl-marquee { min-height: 80px; }
  .sl-marquee__list > li { font-size: var(--t-h5); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  [data-motion="glow"]::before { background: radial-gradient(80% 70% at 30% 60%, rgba(246, 196, 83, 0.18), rgba(255, 214, 128, 0.08) 45%, rgba(255, 214, 128, 0) 70%); }
}