fix: 翻转卡Grid Stack自适应高度（阿布AI长内容不溢出+短卡正常）

src/components/Business.tsx

@@ -89,15 +89,15 @@ export default function Business({ locale }: { locale: Locale }) {
                 return (
                   <div
                     key={p.name}
-                    className="flip-card scroll-reveal h-[200px]"
+                    className="flip-card scroll-reveal"
                     tabIndex={0}
                     role="button"
                     aria-expanded="false"
                     aria-label={`${p.name} · ${p.slogan}`}
                   >
-                    <div className="flip-card-inner relative w-full h-full">
+                    <div className="flip-card-inner w-full">
                       {/* 正面：品牌名 + slogan 高亮 */}
-                      <div className="flip-card-front absolute inset-0 rounded-2xl card-surface p-5 flex flex-col">
+                      <div className="flip-card-front rounded-2xl card-surface p-5 flex flex-col">
                         <span className="icon-tile w-9 h-9 shrink-0">
                           {p.icon && <Icon name={p.icon} className="w-[18px] h-[18px]" />}
                         </span>
@@ -110,7 +110,7 @@ export default function Business({ locale }: { locale: Locale }) {
                       </div>
                       {/* 翻面：定位 / 人群 / 生态 / 价值 四行 */}
                       <div
-                        className="flip-card-back absolute inset-0 rounded-2xl border p-5 flex flex-col justify-center"
+                        className="flip-card-back rounded-2xl border p-5 flex flex-col"
                         style={cssVars({
                           borderColor: 'color-mix(in oklch, var(--brand-accent) 35%, transparent)',
                           background: 'color-mix(in oklch, var(--brand-accent) 7%, var(--bg-primary))',

src/styles/global.css

@@ -507,16 +507,25 @@ a, button {
 }
 
 /* ===== Flip Card (WCAG 2.1 AA 无障碍：支持键盘/触摸/点击) ===== */
+/* ===== Flip Card (WCAG 2.1 AA 无障碍：支持键盘/触摸/点击) ===== */
+/* Grid Stack 方案：两面叠在同一 grid-cell → 容器高度 = max(正面高, 背面高)
+   —— 彻底解决原 absolute inset-0 + 固定 h-[200px] 导致长内容截断的问题
+   翻转时使用 3D rotateY(180) + backface-visibility:hidden 隐藏背面，
+   不再额外设 visibility:hidden，避免与 3D 逻辑冲突。*/
 .flip-card {
   perspective: 1000px;
   cursor: pointer;
-  display: block;
-  /* D. 容器查询：卡片成为容器，内部可用 cqi 单位或 @container 查询 */
+  display: grid;
   container-type: inline-size;
 }
+.flip-card-inner {
+  display: grid;
+  grid-template-areas: 'stack';
+  transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
+  transform-style: preserve-3d;
+}
+.flip-card-inner > * { grid-area: stack; }
 
-/* D. 容器查询：卡片标题字号随容器宽度流体化（窄卡片紧凑，宽卡片舒展）
-   cqi = 容器内联尺寸的 1%，clamp 限制在 14.4-17.6px 范围 */
 .flip-card-front h3 {
   font-size: var(--fs-body);
 }
@@ -527,11 +536,6 @@ a, button {
   border-radius: var(--radius-sm);
 }
 
-.flip-card-inner {
-  transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
-  transform-style: preserve-3d;
-}
-
 /* 桌面：hover 或 .flipped 类翻转 */
 @media (hover: hover) and (pointer: fine) {
   .flip-card:hover .flip-card-inner {
@@ -547,12 +551,15 @@ a, button {
 .flip-card-front, .flip-card-back {
   backface-visibility: hidden;
   transform-style: preserve-3d;
+  /* Grid Stack：每面是独立 grid cell，按内容自然高度撑开 */
+  position: relative;
+  top: auto; left: auto; right: auto; bottom: auto;
+  inset: auto;
 }
 
 .flip-card-back {
+  /* 初始背面：与正面成 180°，backface-visibility 会隐藏它 */
   transform: rotateY(180deg);
-  position: absolute;
-  inset: 0;
 }
 
 /* ===== Page Enter ===== */