/* =============================================================================
   细节打磨（需在 style.css / feat-console.css 之后加载）
   1. 首屏标题：修复窄屏 / 英文等长文案下第二行溢出、图标被裁
   2. 能力演示抽屉：悬浮圆角面板 + 清晰的顶栏层级
   ============================================================================= */

/* ---------- 1. 首屏标题 ---------------------------------------------------- */

/* 拉丁文字（en / es / it / fr / de / ru）比中日韩长得多：字号按语言收敛，
   否则第二行（white-space: nowrap）会溢出容器，右侧图标压到文字上 */
html:not([lang^="zh"]):not([lang^="ja"]):not([lang^="ko"]) .page-screen--hero .hero-title {
  font-size: clamp(1.7rem, 3.3vw + 0.1rem, 3.2rem);
}

@media (max-width: 640px) {
  /* keep-all 会禁止在汉字之间换行，窄屏下整行既放不下又断不开 */
  .hero-title-line {
    word-break: normal;
    line-break: auto;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  /* 左右装饰图标原本绝对定位在容器两侧，容器一窄就跑出视口；窄屏改为行内跟随文字。
     必须用 relative 而不是 static：内部的圆盘 / 粒子是 absolute，要靠它们的外层当定位基准 */
  .hero-title-line--result .hero-title-mark-wrap,
  .hero-title-line--result .hero-title-pair {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: inline-flex;
    vertical-align: middle;
    transform: none;
  }

  .hero-title-line--result .hero-title-mark-wrap {
    margin: 0 0.3em 0 0;
  }

  .hero-title-line--result .hero-title-pair {
    margin: 0 0 0 0.3em;
  }
}

/* 长文案语言（德 / 西 / 俄 / 意 / 法）第二行太长，字号收紧也放不下：
   允许换行，并给两侧装饰图标预留空间，不再把图标挤出视口 */
html:not([lang^="zh"]):not([lang^="ja"]):not([lang^="ko"]) .hero-title-line {
  white-space: normal;
  text-wrap: balance;
}

@media (min-width: 641px) {
  html:not([lang^="zh"]):not([lang^="ja"]):not([lang^="ko"]) .page-screen--hero .hero-title {
    max-width: calc(100vw - 3.4em - 2rem);
    margin-inline: auto;
  }
}

/* 极窄屏（≤359px）+ 德语等长词：再收一档，避免被挤成十来行 */
@media (max-width: 359px) {
  html:not([lang^="zh"]):not([lang^="ja"]):not([lang^="ko"]) .page-screen--hero .hero-title {
    font-size: 1.35rem;
  }
}

/* ---------- 1b. 首屏三张卡片：960–1199px 不再溢出 ----------------------------
   原样式在 960–1599px 把左/中/右卡片写死为 21.3 / 27.6 / 21.4rem（合计约 1172px），
   容器不足 1175px 时左卡跑出屏幕左侧、右卡溢出右侧，页面出现横向滚动。
   这一档改成：中间卡片按视口流式定宽，两侧卡片填满各自的轨道。 */
@media (min-width: 960px) and (max-width: 1199px) {
  .page-screen--hero .landing-panel .proof-metrics--cards {
    --proof-center-w: clamp(18rem, 29vw, 27.6rem);
    gap: 2.25rem 1.25rem;
  }

  .page-screen--hero .landing-panel .proof-metric--card.proof-card--left,
  .page-screen--hero .landing-panel .proof-metric--card.proof-card--left:hover,
  .page-screen--hero .landing-panel .proof-metric--card.proof-card--right,
  .page-screen--hero .landing-panel .proof-metric--card.proof-card--right:hover {
    width: 100%;
    max-width: 21.4rem;
    justify-self: center;
  }
}

/* ---------- 2. 能力演示抽屉 ------------------------------------------------ */

/* 宽屏：从贴边整高面板，改为四周留白的悬浮圆角面板 */
@media (min-width: 721px) {
  .feat-cap-modal {
    padding: 12px;
  }

  .feat-cap-panel {
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 0.06),
      0 28px 80px -12px rgba(12, 25, 41, 0.34);
    /* 容器有 12px 内边距，滑出距离要把它算进去，否则会露出一条边 */
    transform: translateX(calc(100% + 24px));
  }

  .feat-cap-modal.is-open .feat-cap-panel {
    transform: none;
  }
}

/* 顶栏：能力名是主角，说明是次要，进度条收成底边细线 */
.feat-cap-panel .demo-bar {
  position: relative;
  padding: 0.95rem 1.15rem 0.85rem;
  gap: 0.6rem 1rem;
  background: #fff;
}

.feat-cap-panel .demo-bar-lead {
  gap: 0.2rem;
}

.feat-cap-panel .demo-bar-kicker {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #0c1929;
}

.feat-cap-panel .demo-bar-desc {
  max-width: 36rem;
  font-size: 0.82rem;
  line-height: 1.55;
}

.feat-cap-panel .demo-bar-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: auto;
  height: 2px;
  border-radius: 0;
  background: transparent;
}