/* ===== 翻转卡片（与首页一致：桌面 hover 预览 / 点击锁定，触屏点按翻面）=====
   自包含：含首页 flip 所需的设计 token 兜底，页面无需重复定义。
   交互由 site.js 的 bindFlips() 统一处理。 */
:root {
  --band-blue: #16305a;
  --text-muted-light: #46525e;
}

.flip-card { perspective: 1200px; cursor: pointer; background: transparent; border: none; padding: 0; font: inherit; color: inherit; text-align: left; width: 100%; }
.flip-card-inner { position: relative; width: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,.2,.2,1); display: grid; }
.flip-face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: #fff; border: 1px solid rgba(11,29,51,0.10); border-top: 3px solid var(--band-blue); border-radius: 10px; padding: 22px 20px; min-height: 190px; display: flex; flex-direction: column; }
.flip-face--back { transform: rotateY(180deg); background: var(--bg-card); border-top-color: var(--accent-gold); color: var(--text-secondary); }
.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 4px; border-radius: 10px; }

.flip-area { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--band-blue); letter-spacing: 1px; line-height: 1.4; }
.flip-tag { display: inline-block; font-size: 12px; font-weight: 600; color: #fff; background: var(--band-blue); border-radius: 2px; padding: 2px 8px; margin-top: 8px; letter-spacing: 1px; align-self: flex-start; }
.flip-hook { font-size: 15px; color: var(--text-muted-light); margin-top: 12px; line-height: 1.75; flex: 1; }
.flip-q { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--band-blue); margin-top: 10px; }
.flip-hint { font-size: 12px; color: var(--text-muted-light); margin-top: auto; padding-top: 12px; letter-spacing: .5px; }

.flip-back-label { font-size: 12px; letter-spacing: 2px; color: var(--accent-gold); margin-bottom: 8px; }
.flip-back-text { font-size: 13.5px; line-height: 1.7; flex: 1; }
.flip-back-text strong { color: var(--text-primary); }
.flip-back-text ul { margin: 0; padding-left: 18px; }
.flip-back-text li { margin-bottom: 7px; line-height: 1.6; }
.flip-back-link { margin-top: 14px; }
.flip-face--back .pg-inline-link { color: var(--accent-gold-light); }

/* method.html 命盘五步：与首页 .ml-steps 同款微调 */
.ml-steps .flip-face { min-height: 205px; padding: 18px 14px; }
.ml-steps .flip-area { font-size: 17px; }
.ml-steps .flip-hook { font-size: 13px; }
.ml-steps .flip-back-text { font-size: 12.5px; }

/* key-moments.html 痛点卡：背面要点清单需更高的最小高度 */
.pain-grid .flip-face { min-height: 240px; }

/* 通用翻页网格（services / cases 等复用） */
.flip-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 8px; }
.flip-grid .flip-face { min-height: 235px; }
.flip-grid .flip-card-inner { height: 100%; }
.flip-grid .flip-face { height: 100%; }
.flip-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.flip-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.flip-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.flip-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.flip-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1080px) {
  .flip-grid.cols-5, .flip-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
  .flip-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .flip-grid.cols-3, .flip-grid.cols-4, .flip-grid.cols-5, .flip-grid.cols-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) { .flip-grid { grid-template-columns: 1fr !important; } }

/* 复用：内联链接（services / cases 等页面） */
.pg-inline-link { color: var(--accent-gold); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(201,169,97,.45); padding-bottom: 1px; transition: color .2s; }
.pg-inline-link:hover { color: var(--accent-gold-light); }

/* 首页全生命周期卡（.lc-grid）：删去第三句后，阶段名放大为主视觉（头两句字号加大） */
.lc-grid .flip-area { font-size: 28px; line-height: 1.32; }