From 613428e0d7e0a5b4fdc64ca8e531235f445c69b1 Mon Sep 17 00:00:00 2001
From: doublex001 <16157008+doublex001@user.noreply.gitee.com>
Date: Mon, 3 Aug 2026 04:25:44 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BF=BB=E8=BD=AC=E5=8D=A1Grid=20Stack?=
 =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94=E9=AB=98=E5=BA=A6=EF=BC=88=E9=98=BF?=
 =?UTF-8?q?=E5=B8=83AI=E9=95=BF=E5=86=85=E5=AE=B9=E4=B8=8D=E6=BA=A2?=
 =?UTF-8?q?=E5=87=BA+=E7=9F=AD=E5=8D=A1=E6=AD=A3=E5=B8=B8=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Business.tsx |  8 ++++----
 src/styles/global.css       | 29 ++++++++++++++++++-----------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/Business.tsx b/src/components/Business.tsx
index e9031c3..3706bf0 100644
--- a/src/components/Business.tsx
+++ b/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))',
diff --git a/src/styles/global.css b/src/styles/global.css
index 5273a13..78e102f 100644
--- a/src/styles/global.css
+++ b/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 ===== */