/* S3 — 核心解決方案 carousel.
   Geometry from spec/section-solutions-carousel.json and spec/slide-*.json.
   The six slide frames share slide 1's card box (1:64847 → 188.13,2519 · 1351.33×589.29)
   and are laid out on a track at the Figma pitch (1:65067 − 1:64847 = 1425.57 px). */

/* ---- tab pills -------------------------------------------------------- */
/* The pill artwork is a filled SVG per tab; it is used as a mask so the fill can
   swap between the inactive #f2f2f2 and the active #ff8036 that Figma draws on
   1:64889 without redrawing the shape. */
.s3-tabs { position: static; }
.s3-tab {
  position: absolute;
  color: #54565b;
  border-radius: 26px;                  /* focus-ring shape only; the pill is the mask */
  transition: color .25s ease;
}
.s3-pill {
  position: absolute; inset: 0;
  background-color: #f2f2f2;
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: background-color .25s ease;
}
.s3-tab.is-active { color: #ffffff; }
.s3-tab.is-active .s3-pill { background-color: #ff8036; }
.s3-tab .t { position: absolute; pointer-events: none; }

/* ---- carousel --------------------------------------------------------- */
.s3-viewport { overflow: hidden; }
.s3-track {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  transition: transform .4s ease;
  will-change: transform;
}
.s3-slide {
  position: absolute;
  border-radius: 45.02px;                     /* 1:64847 corner radius */
  overflow: hidden;
  /* 1:64847 fill — the gradient reads as a border because the artwork below is
     inset 18.8 px at the top (mask 1:64855) and flush on the other three sides. */
  background-image: linear-gradient(90deg, #ff7f36 0%, #ff5760 50%, #9056bc 100%);
}
.s3-art {
  position: absolute; left: 0; top: 0; width: 1351.33px; height: 589.29px;
  clip-path: inset(18.8px 0 0 0);
}
.s3-art > *, .s3-screen > *, .s3-fill > * { position: absolute; }
/* a Figma image fill with a non-identity imageTransform: the element is the fill
   rect, the <img> inside it is the image placed by that matrix (1:65347). */
.s3-fill { position: absolute; }
.s3-art .t { position: absolute; }
.s3-screen {                                   /* Figma screen clippath */
  position: absolute; overflow: hidden;
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* ---- pagination dots -------------------------------------------------- */
/* Six dots, one per tab — see docs/FIGMA-FIDELITY.md ledger row 1. The
   diameter (9.974), pitch (38.342) and colours come from 1:64878; the row is
   re-centred on that group's centre x (864.05). */
.s3-dots { position: absolute; }
.s3-dot {
  position: absolute;
  border-radius: 50%;
  background: #606060;
  transition: background-color .25s ease;
}
/* The drawn dot is 9.974 px; the tappable area is a transparent 44x44 box centred
   on it (WCAG 2.5.5). Geometry of the dot itself is untouched, so the row still
   measures 9.974 px dots on a 38.342 px pitch centred on x 864.05. */
.s3-dot::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.s3-dot.is-active { background: #ff8036; }

/* ---- states (not drawn in Figma — ledger row 6) ----------------------- */
.s3-tab:hover:not(.is-active) .s3-pill { background-color: #e8e8e8; }
.s3-dot:hover:not(.is-active) { background: #8a8a8a; }
.s3-tab:focus-visible, .s3-dot:focus-visible { outline: 2px solid #895ab7; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .s3-track { transition: none; }
}

/* 1:65160 sits on one line in Figma at exactly its 712 px box; browser metrics
   for Noto Sans HK run a hair wider, so keep it unwrapped and centred. */
.s3-nowrap { white-space: nowrap; }

/* Figma blend modes carried on the phone highlight groups and the lens vectors
   (spec `blend`); the mix-blend-mode inside the exported SVG only composites
   within its own root, so it is re-applied on the element. */
.s3-art .blend-screen   { mix-blend-mode: screen; }
.s3-art .blend-multiply { mix-blend-mode: multiply; }

/* Figma does not trim the side bearings of full-width CJK punctuation; Chrome
   does by default, which shortens every line with a 「」（）。 in it and moves the
   wrap. `space-all` restores Figma's advance widths, so 1:65182's line break
   lands after 「(Human」 exactly as the render does. */
#s3 .t { text-spacing-trim: space-all; }