/* KYA Group — service pages /ai-workflows/ and /cross-border-e-commerce/ (loaded after tokens.css and site.css)
 *
 * Layout from the tpl-service mock (design/templates/build_templates.py; U451 N4): breadcrumb, page heading with a
 * visual, and the services (the AI steps as cards, the cross-border guide groups; U475–U477 took out the questions
 * and the contact section). Every value comes from
 * tokens.css; the few dark tones of the cross-border picture's slab card are derived from --color-footer at the point
 * of use until they get tokens of their own (proposed in the U451 night report).
 */

/* ---------- Page heading ----------
   One column on phones and tablets: breadcrumb, heading and lead, then the visual (no button in the head since U467,
   U475, U477). From 1024px: words left, visual right, in the 7/5 split below. */

.service-head { padding-top: var(--hero-space-top); }
.service-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--block-gap); align-items: start; }   /* top-aligned, so the breadcrumb sits where it does on every page (U538) */
.service-copy-head h1 { margin-bottom: var(--gap-heading); }
.service-copy-head .text-lead { max-width: var(--container-lead); color: var(--color-muted); }
@media (width >= 64rem) {
  /* both service pages share one split (layout.md §3a one shared head; §4 no width math): 7/5 on a 12-column grid,
     an assistant pick from layout.md §4's example ratios, confirmed by York U558. Replaces the AI page's 5fr 6fr and the
     cross-border page's own 35% picture column (U551). The cross-border title takes 3 lines from 1024 to 1052px wide,
     2 lines from 1053; the right column is 353px at 1024, 460px at 1280 and 483px from 1440, and the picture card in it
     stops at its 28rem cap (448px) from 1280 (picture shown 338px at 1024, 432px from 1280) */
  .service-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--column-gap); }
}

/* the breadcrumb: site.css (one rule for every page, U538) */

/* ---------- Visual: picture A on a slab card (cross-border e-commerce; picture U512–U525, card U448, N7) ----------
   Picture A (U525): a shopper at home buying in a Douyin livestream, the parcel on the table. It sits on the homepage
   mock's "slab": a screen-like card with a dark bezel and a stacked edge, turned a little in 3D, with an outline
   shadow. Still here: no pointer tilt, no hover lift, no ring (N7). The picture is the full original, never cropped,
   faded or covered (U445): the box takes the image's own ratio. */

.slab { width: 92%; margin-inline: auto; perspective: 1400px; filter: drop-shadow(0 22px 32px oklch(from var(--color-ink) l c h / .45)); }
.slab-body { position: relative; transform-style: preserve-3d; transform: rotateY(-12deg) rotateX(5deg); }
.slab-face {
  position: relative; padding: calc(var(--spacing) * 1.5); border-radius: calc(var(--radius-2xl) + var(--spacing));
  /* bezel: lighter navy at the top left, deep navy at the bottom right (mock #3a5074 → #101d31 → #0a1322) */
  background: linear-gradient(150deg, oklch(from var(--color-footer) .43 c h), oklch(from var(--color-footer) .23 calc(c * .7) h) 55%, oklch(from var(--color-footer) .187 calc(c * .55) h));
}
.slab-face::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 oklch(from var(--color-background) l c h / .3), inset 0 0 0 1px oklch(from var(--color-background) l c h / .08);
}
.slab-face img { border-radius: calc(var(--radius-2xl) - var(--spacing) / 2); }
/* the edge: ten thin layers behind the face, each a step darker (mock #2c4163 → #0a1322) */
.slab-edge {
  position: absolute; inset: 0; border-radius: calc(var(--radius-2xl) + var(--spacing));
  transform: translateZ(calc(var(--d) * -1.2px));
  background: color-mix(in oklab, oklch(from var(--color-footer) .187 calc(c * .55) h) calc(var(--d) * 10%), oklch(from var(--color-footer) .374 c h));
}
@media (width >= 64rem) {
  .slab { width: 100%; }
}
/* U525: kept small, the picture only has to give the idea (at most 28rem, the assistant's pick, pending client review) */
.slab { max-width: 28rem; }

/* ---------- Visual: "How we work", the five steps in short (AI workflows head, U492–U495) ----------
   The steps are rows split by hairlines, not cards inside the panel (layout.md §2, no card in a card; York U555, U557:
   the boxed steps made the panel too tall; the closing line is gone). Step 4 keeps its teal band. The homepage has no
   copy of this panel since U573. */

.panel-label { margin-bottom: calc(var(--spacing) * 3); color: var(--color-faint); }
.flow-list { display: grid; margin: 0; padding: 0; list-style: none; }
.flow-step {
  display: flex; align-items: center; gap: calc(var(--spacing) * 4); padding: calc(var(--spacing) * 2) 0;
  border-top: 1px solid var(--color-line);
}
.flow-step:first-child,
.flow-step.highlighted,
.flow-step.highlighted + .flow-step { border-top-color: transparent; }
.flow-step > span { min-width: calc(var(--spacing) * 6); font-size: var(--text-title); font-variant-numeric: tabular-nums; color: var(--color-faint); }
.flow-step strong { display: block; font-weight: var(--font-weight-medium); }
.flow-step.highlighted {
  margin-inline: calc(var(--spacing) * -3); padding-inline: calc(var(--spacing) * 3);
  border-radius: var(--radius-lg); background: var(--color-accent); color: var(--color-on-accent);
}
.flow-step.highlighted > span { color: var(--color-on-accent); }

/* ---------- Services ---------- */

.service-scope { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
.service-scope li { padding: var(--card-pad); border: 1px solid var(--color-line); border-radius: var(--radius-2xl); background: var(--color-surface); }
.service-scope h3 { margin: 0; font-size: var(--text-title); line-height: var(--text-title--line-height); letter-spacing: var(--text-title--letter-spacing); font-weight: var(--text-title--font-weight); }
.service-scope p { margin-top: calc(var(--spacing) * 2); color: var(--color-muted); }
@media (width >= 48rem) {
  .service-scope.is-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width >= 64rem) {
  .service-scope.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Arrows between the cards of an ordered flow (src/components/FlowArrow.astro) ----------
   Decorative (aria-hidden): the <ol> gives the order. Each card but the last carries one, placed in the gap after it:
   pointing down where the cards stack, pointing right where they sit in a row. */
.flow-arrow {
  position: absolute; left: 50%; top: 100%; width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6);
  transform: translate(-50%, calc(var(--flow-gap) / 2 - 50%)) rotate(90deg);
  fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}

/* ---------- AI workflows: the process, five cards joined by arrows (U493) ----------
   Top to bottom on phones and tablets; from 1024px one row, left to right. */
.process { --flow-gap: calc(var(--spacing) * 10); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--flow-gap); margin: 0; padding: 0; list-style: none; }
.process-card {
  position: relative; display: flex; flex-direction: column; gap: calc(var(--spacing) * 2);
  padding: var(--card-pad-sm); border: 1px solid var(--color-line); border-radius: var(--radius-2xl); background: var(--color-surface);
}
.process-num {
  display: grid; place-items: center; width: calc(var(--spacing) * 7); height: calc(var(--spacing) * 7); margin-bottom: calc(var(--spacing) * 1);
  border-radius: var(--radius-full); background: var(--color-panel); color: var(--color-accent-hover);   /* 5.36:1 on the panel */
  font-size: var(--text-caption); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums;
}
.process-card h3 { font-size: var(--text-title); line-height: var(--text-title--line-height); letter-spacing: var(--text-title--letter-spacing); font-weight: var(--text-title--font-weight); }
.process-card p { font-size: var(--text-body); line-height: var(--text-body--line-height); color: var(--color-muted); }   /* running text of several lines: 16px (U540; typography.md §6) */
/* a link inside the sentence: underlined, not colour alone (WCAG 1.4.1); the accent is 4.5:1 or more on white */
.process-card a { color: var(--color-accent); text-decoration: underline; text-decoration-color: var(--color-accent-line); text-underline-offset: .2em; }
@media (hover: hover) { .process-card a:hover { text-decoration-color: currentColor; } }
@media (width >= 64rem) {
  .process { --flow-gap: calc(var(--spacing) * 8); grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .process .flow-arrow { left: 100%; top: 50%; transform: translate(calc(var(--flow-gap) / 2 - 50%), -50%); }
}

/* ---------- Cross-border: four groups of small cards, one guide article each (U494, U497) ----------
   Open your store: seven numbered cards joined by arrows (the only group with an order). Daily operations, short
   video, livestreams: cards without numbers or arrows. The groups are not joined to each other. From 1024px every group
   uses the same seven columns, so the small, near-square cards line up; below, the cards stack in one column. */
.guide-groups { display: grid; gap: var(--block-gap); }
.guide-group h3 { font-size: var(--text-title); line-height: var(--text-title--line-height); letter-spacing: var(--text-title--letter-spacing); font-weight: var(--text-title--font-weight); }
.guide-group h3 a span { color: var(--color-accent-hover); }   /* the arrow: 5.36:1 on the panel */
.guide-note { margin-top: calc(var(--spacing) * 1); font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-muted); }
.mini-cards { --flow-gap: calc(var(--spacing) * 3); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--flow-gap); max-width: var(--container-lead); margin: calc(var(--spacing) * 4) 0 0; padding: 0; list-style: none; }
.mini-cards.is-flow { --flow-gap: calc(var(--spacing) * 8); }
.mini-card {
  position: relative; display: flex; align-items: center; gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 4); border: 1px solid var(--color-line); border-radius: var(--radius-xl); background: var(--color-surface);
  font-size: var(--text-small); line-height: var(--text-small--line-height); font-weight: var(--font-weight-medium); color: var(--color-ink);
}
.mini-num {
  display: grid; flex: none; place-items: center; width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6);
  border-radius: var(--radius-full); background: var(--color-panel); color: var(--color-accent-hover);   /* 5.36:1 on the panel */
  font-size: var(--text-caption); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums;
}
/* Whole card clickable once its article is visible, as the skill cards (skills.css, U468): the link's ::after covers
   the card; hover gives the border the accent; the focus ring goes round the whole card where :has() works. */
.mini-card.has-link a::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) {
  .mini-card.has-link:hover { border-color: var(--color-accent); }
  .mini-card.has-link:hover a { text-decoration: underline; }
}
@supports selector(:has(*)) {
  .mini-card.has-link:has(a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 5px; }
  .mini-card.has-link a:focus-visible { outline: none; }
}
@media (width >= 64rem) {
  .mini-cards, .mini-cards.is-flow { --flow-gap: calc(var(--spacing) * 8); grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: none; }
  /* near-square: the number at the top and the title right under it, so the titles of a row start on one line
     whatever their length (U506: bottom-aligned titles of one to four lines started at different heights) */
  .mini-card { flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: calc(var(--spacing) * 32); }
  .mini-cards .flow-arrow { left: 100%; top: 50%; transform: translate(calc(var(--flow-gap) / 2 - 50%), -50%); }
}

/* ---------- Guide cards: colour (U506: all white read too plain; U508: fix it; three versions shown in the preview were the assistant's approach; U511 the client chose teal) ----------
   The seven store steps, the one path with an order (U497), are filled with the deep teal (white text 5.97:1, the
   number on white 5.97:1; on hover the fill lightens to the accent, white text 4.58:1, still above 4.5:1); the other
   groups keep white cards with a teal top edge. Only existing brand colours. */
.mini-cards.is-flow .mini-card { border-color: var(--color-accent-hover); background: var(--color-accent-hover); color: var(--color-on-accent); }
.mini-cards.is-flow .mini-num { background: var(--color-surface); }
.mini-cards:not(.is-flow) .mini-card { border-top: 4px solid var(--color-accent-hover); }
@media (hover: hover) {
  .mini-cards.is-flow .mini-card.has-link:hover { border-color: var(--color-accent); background: var(--color-accent); }
}