/* VENDORED from design-concepts/APPROVED/shared/sets/A2.css by scripts/gen/vendor-board.mjs. Do not edit: check-vendored-board.mjs
   re-derives this file and FAILS on drift. Transforms: board font folder -> /fonts/; board set assets -> /images/. */
/* APPROVED copy (TASK-CO1, 2026-10-16) of design-concepts/round-2/A2/modules/A2.css: the frozen design reference for Phase 2 ([R25], GATE 1.5 R-24). Edit nothing here; a change is a new ruling. */
/* A* "Four kinds of care, carousel" (R-20), module id A2, prefix r2a- (TASK-R2, GATE 1.5 round 2, 2026-10-16).
   Set A's section anatomy and type (the head, the formula H2s, the elevated three with the fan), with the images moved into an
   automatic, continuous carousel that emphasises the centre card. Three states, all CSS:
     JS off                         the static grid (set A's images as a gapless grid, every card visible)
     JS on, no motion (reduced)     a static scroll-snap row (keyboard and touch scroll; the viewport is focusable)
     JS on + .li-motion + .is-live  the GSAP loop (A2.js adds .is-live once the clones exist; transforms only)
   Every selector is scoped to [data-variant="A2"] (shared/CONTRACT.md section 4). No @keyframes, no animation. */

[data-variant="A2"].r2a-route { background: var(--cream); padding-block: var(--sp-open); overflow-x: clip; }
[data-variant="A2"]:is(.li-motion *) [data-r2a-reveal] { opacity: 0; }

/* ---------- head (set A's li1-hub-headL / headR) ---------- */
[data-variant="A2"] .r2a-top { display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, .6fr); column-gap: clamp(2rem, 4vw, 3.75rem); align-items: end; }
[data-variant="A2"] .r2a-hub-h { font-size: clamp(2.6rem, 1.8rem + 3.3vw, 4.3rem); line-height: 1.06; letter-spacing: -.012em; max-width: 11ch; margin-top: .9rem; }
[data-variant="A2"] .r2a-headR { max-width: 46rem; color: var(--ink-72); line-height: 1.8; }

/* ---------- the carousel ---------- */
[data-variant="A2"] .r2a-car { --r2a-w: clamp(268px, 34vw, 500px); --r2a-gap: clamp(1rem, 2vw, 1.75rem); margin-top: clamp(2.6rem, 4.6vw, 4rem); }
[data-variant="A2"] .r2a-car-bar { display: none; justify-content: flex-end; margin-bottom: 1.1rem; }
[data-variant="A2"] .r2a-ctl { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.05rem .5rem .55rem; border-radius: var(--r-pill);
  border: 1px solid var(--ink-16); background: var(--cream-hi); color: var(--ink); font: 600 .76rem/1 var(--f-b); letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .2s var(--ease); }
[data-variant="A2"] .r2a-ctl:hover { border-color: var(--bronze); }
[data-variant="A2"] .r2a-ctl:active { transform: scale(.98); }
[data-variant="A2"] .r2a-ctl:focus-visible { outline: 2px solid var(--bronze-dk); outline-offset: 3px; }
[data-variant="A2"] .r2a-ctl-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--cream-hi); }
[data-variant="A2"] .r2a-ctl-ic svg { width: 14px; height: 14px; grid-area: 1 / 1; }
[data-variant="A2"] .r2a-ic-play { display: none; }
[data-variant="A2"] .r2a-ctl[aria-pressed="true"] .r2a-ic-play { display: block; }
[data-variant="A2"] .r2a-ctl[aria-pressed="true"] .r2a-ic-pause { display: none; }

[data-variant="A2"] .r2a-viewport { outline: none; }
[data-variant="A2"] .r2a-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--bronze-dk); border-radius: var(--r-m); }
[data-variant="A2"] .r2a-track { list-style: none; margin: 0 auto; padding: 0 var(--gut); max-width: calc(var(--maxw) + 2 * var(--gut));
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r2a-gap); }
[data-variant="A2"] .r2a-card { position: relative; min-width: 0; }
[data-variant="A2"] .r2a-card-fig { margin: 0; }
[data-variant="A2"] .r2a-card-media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-l); overflow: hidden; background: var(--sand); z-index: 1; }
[data-variant="A2"] .r2a-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
[data-variant="A2"] .r2a-card:hover .r2a-card-img { transform: scale(1.04); }
[data-variant="A2"] .r2a-card-sh { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 3 / 2; border-radius: var(--r-l); box-shadow: var(--sh-2); opacity: .55; pointer-events: none; z-index: 0; }
[data-variant="A2"] .r2a-card-cap { display: grid; gap: .35rem; padding: 1.05rem .2rem 0; }
[data-variant="A2"] .r2a-card-k { font-size: var(--s--1); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-dk); }
[data-variant="A2"] .r2a-card-t { font-family: var(--f-d); font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); line-height: 1.2; color: var(--ink); }

/* JS on, motion off (reduced motion): a static scroll-snap row */
[data-variant="A2"]:is(.js *) .r2a-viewport { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin;
  scroll-padding-inline: var(--gut); padding-bottom: .9rem; }
[data-variant="A2"]:is(.js *) .r2a-track { display: flex; gap: var(--r2a-gap); width: max-content; max-width: none; margin: 0; }
[data-variant="A2"]:is(.js *) .r2a-card { flex: 0 0 var(--r2a-w); scroll-snap-align: start; }

/* JS on + motion: the loop (A2.js sets .is-live after it builds the clones; transforms and opacity only) */
[data-variant="A2"] .r2a-car.is-live .r2a-car-bar { display: flex; }
[data-variant="A2"] .r2a-car.is-live .r2a-viewport { overflow: hidden; scroll-snap-type: none; padding-block: 1.4rem 1rem; touch-action: pan-y; cursor: grab; }
[data-variant="A2"] .r2a-car.is-live .r2a-track { padding: 0; will-change: transform; }
[data-variant="A2"] .r2a-car.is-live .r2a-card { scroll-snap-align: none; transform-origin: 50% 40%; }
[data-variant="A2"] .r2a-car.is-live .r2a-card-sh { opacity: 0; }

/* ---------- the four hubs: static, server-rendered, always visible (the formula H2s) ---------- */
[data-variant="A2"] .r2a-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.6rem, 4.4vw, 3.8rem) clamp(2rem, 4.6vw, 4.5rem);
  margin-top: clamp(3rem, 5vw, 4.4rem); }
[data-variant="A2"] .r2a-hub { position: relative; padding-top: 1.5rem; border-top: 1px solid var(--ink-16); min-width: 0; }
[data-variant="A2"] .r2a-hub::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--bronze); transform: scaleX(0);
  transform-origin: left; transition: transform .7s var(--eout); }
[data-variant="A2"] .r2a-hub.is-current::before { transform: scaleX(1); }
[data-variant="A2"] .r2a-hub-n { font-size: var(--s--1); font-weight: 600; letter-spacing: .08em; color: var(--ink-40); transition: color .4s var(--ease); }
[data-variant="A2"] .r2a-hub.is-current .r2a-hub-n { color: var(--bronze-dk); }
[data-variant="A2"] .r2a-hub-title { margin-top: .55rem; font-size: clamp(2rem, 1.55rem + 1.6vw, 2.7rem); line-height: 1.12; letter-spacing: -.008em; }
[data-variant="A2"] .r2a-hub-title a { transition: color .3s var(--ease); }
[data-variant="A2"] .r2a-hub-title a:hover { color: var(--bronze-dk); }
[data-variant="A2"] .r2a-hub-body { margin-top: 1rem; font-size: var(--s-0); color: var(--ink-72); line-height: 1.8; max-width: 46rem; }
[data-variant="A2"] .r2a-items { margin-top: 1.3rem; }
[data-variant="A2"] .r2a-item-q { padding: 1rem .1rem; gap: 1rem; }
[data-variant="A2"] .r2a-item-h { font-family: var(--f-d); font-weight: 400; font-size: clamp(1.2rem, 1.1rem + .35vw, 1.4rem); line-height: 1.25; color: var(--ink); flex: 1 1 auto; transition: color .3s var(--ease); }
[data-variant="A2"] .r2a-item-q:hover .r2a-item-h { color: var(--bronze-dk); }
[data-variant="A2"] .r2a-item .li-acc-ic { width: 32px; height: 32px; }
[data-variant="A2"] .r2a-item-a { padding: 0 .1rem 1.2rem; font-size: .95rem; color: var(--ink-58); line-height: 1.7; }
[data-variant="A2"] .r2a-hub-learn { margin-top: 1.3rem; }

/* ---------- the elevated three (set A's li1-sol block, re-scoped) ---------- */
[data-variant="A2"] .r2a-sol { margin-top: clamp(5rem, 9vw, 8rem); }
[data-variant="A2"] .r2a-sol-head { text-align: center; max-width: 900px; margin: 0 auto; }
[data-variant="A2"] .r2a-sol-h { font-size: clamp(2.6rem, 1.85rem + 3.1vw, 4.4rem); line-height: 1.06; letter-spacing: -.012em; }
[data-variant="A2"] .r2a-sol-head p { color: var(--ink-72); margin: 1.3rem auto 0; max-width: 46rem; line-height: 1.7; }
[data-variant="A2"] .r2a-sol-stage { display: flex; justify-content: center; margin: clamp(2.6rem, 5vw, 4rem) 0; }
[data-variant="A2"] .r2a-sol-fan { position: relative; display: flex; align-items: center; justify-content: center; }
[data-variant="A2"] .r2a-sol-pic { width: clamp(170px, 20vw, 250px); aspect-ratio: 4 / 5; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-2); background: var(--sand); position: relative; }
[data-variant="A2"] .r2a-sol-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-variant="A2"] .r2a-sol-pic--l { transform: rotate(-9deg) translateX(24%); z-index: 1; }
[data-variant="A2"] .r2a-sol-pic--r { transform: rotate(9deg) translateX(-24%); z-index: 1; }
[data-variant="A2"] .r2a-sol-pic--c { z-index: 2; width: clamp(210px, 25vw, 310px); transform: translateY(-14px); }
[data-variant="A2"] .r2a-sol-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 1.6vw, 1.4rem); align-items: start; }
[data-variant="A2"] .r2a-sol-item { background: var(--cream-hi); border: 1px solid var(--ink-09) !important; border-radius: var(--r-m); overflow: hidden; transition: box-shadow .4s var(--ease); }
[data-variant="A2"] .r2a-sol-item:hover { box-shadow: var(--sh-1); }
[data-variant="A2"] .r2a-sol-q { padding: 1.2rem 1.3rem; gap: .9rem; justify-content: flex-start; }
[data-variant="A2"] .r2a-sol-ic { color: var(--teal); flex: none; display: flex; }
[data-variant="A2"] .r2a-sol-ic svg { width: 30px; height: 30px; }
[data-variant="A2"] .r2a-sol-qt { font-family: var(--f-d); font-size: 1.22rem; line-height: 1.25; color: var(--ink); flex: 1 1 auto; font-weight: 400; }
[data-variant="A2"] .r2a-sol-q .li-acc-ic { width: 32px; height: 32px; }
[data-variant="A2"] .r2a-sol-a { padding: 0 1.4rem 1.4rem; display: grid; gap: .9rem; justify-items: start; }
[data-variant="A2"] .r2a-sol-a p { color: var(--ink-58); font-size: .94rem; line-height: 1.65; }

@media (max-width: 1023.98px) {
  [data-variant="A2"] .r2a-top { grid-template-columns: minmax(0, 1fr); row-gap: 1.4rem; }
  [data-variant="A2"] .r2a-car { --r2a-w: clamp(268px, 52vw, 460px); }
  [data-variant="A2"] .r2a-sol-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  [data-variant="A2"] .r2a-car { --r2a-w: 78vw; --r2a-gap: .9rem; }
  [data-variant="A2"] .r2a-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-variant="A2"] .r2a-car-bar { justify-content: flex-start; }
  [data-variant="A2"] .r2a-index { grid-template-columns: minmax(0, 1fr); }
  [data-variant="A2"] .r2a-card-t { font-size: 1.25rem; }
  [data-variant="A2"] .r2a-sol-fan { width: 100%; height: clamp(250px, 70vw, 300px); }
  [data-variant="A2"] .r2a-sol-pic--l, [data-variant="A2"] .r2a-sol-pic--r { position: absolute; top: 50%; width: clamp(96px, 28vw, 130px); }
  [data-variant="A2"] .r2a-sol-pic--l { left: calc(50% - 150px); transform: translateY(-50%) rotate(-8deg); }
  [data-variant="A2"] .r2a-sol-pic--r { right: calc(50% - 150px); transform: translateY(-50%) rotate(8deg); }
  [data-variant="A2"] .r2a-sol-pic--c { width: clamp(170px, 52vw, 210px); transform: none; margin-inline: auto; }
  [data-variant="A2"] .r2a-sol-cards { grid-template-columns: minmax(0, 1fr); }
}