/**
 * retech/knowledge-cards 块样式 —— 移植自原型 assets/css/retech.css
 * §13「Knowledge & Support(深色,4 卡紧凑排布)」= 1544–1607
 * (`.kn-grid` / `.kn-card` / `.kn-title` / `.kn-desc` / `.kn-links` /
 *  `.kn-faq` details/summary/::after 雪佛龙 / [open] 旋转),
 * 响应式取 §17 = 1956(1080 档 `.kn-grid` 单列)/ 2019(700 档 `.kn-card` 内距)。
 *
 * 层纪律:块文件只允许 retech-block / retech-responsive 两层(不含 reset/base);
 * 所有 @media(含 prefers-reduced-motion)都写在 retech-responsive 内;
 * 全文无 !important。断点只用原型的 1240 / 1080 / 700(本块只命中后两档)。
 *
 * ★ 深色底配色(本块的关键):原型这一段恒为 `sec sec--dark`,所以 §13 的
 *   `.kn-*` 取值全部按深底写死 —— 标题 #fff、正文 w60、链接 w90、分隔线 w08、
 *   卡片描边 line-dark + 一层极淡的白色渐变。tone 是块属性(默认 dark),
 *   浅底分支用 `[data-header="light"]` 补一套换色(与 faq-block 用
 *   `[data-header="dark"]` 反向着色同一手法),否则白字 + w90 链接在浅底上不可见。
 *
 * ★ 卡内 FAQ 是**原生 <details>/<summary>,CSS-only**:summary 去掉浏览器默认
 *   三角(list-style:none + ::-webkit-details-marker + ::marker 三件套),
 *   自绘 ::after 雪佛龙(border-right + border-bottom 旋转 45°,[open] 转 -135°,
 *   与原型逐值一致)。不要给它加 data-retech-faq-toggle —— view.js 那套是独立块
 *   retech/faq-block 的方案,会和原生折叠打架。
 *
 * 本文件只定义本块属主类 .retech-x-kn-*(保留原型 kn- 词干),锚定属主唯一。
 * section / wrap / section-head / eyebrow / h2 / section-lead / section--light /
 * section--dark / link-arrow 的唯一属主是 blocks/style-index.css,此处只消费:
 * 箭头链接复用共享 .retech-x-link-arrow 的 ::after 箭头画法,行距/配色/分隔线
 * 由本块的 .retech-x-kn-links__link 在 retech-block 层收口(层序高于 base)。
 */
@layer retech-block {
  /* ── 4 卡紧凑栅格:桌面 2×2 ───────────────────────────────────────────── */
  .retech-x-kn-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .retech-x-kn-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 30px;
    border: 1px solid var(--retech-x-line-dark);
    border-radius: var(--retech-x-r-lg);
    /* 深底上的卡片:极淡的白色斜向渐变,靠描边而不是阴影分层 */
    background: linear-gradient(135deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, .015) 100%);
    transition: border-color var(--retech-x-dur) var(--retech-x-ease-ui),
                background-color var(--retech-x-dur) var(--retech-x-ease-ui);
  }
  /* 悬停描边转青 = 「工艺 / 控制」语义(原型 24,175,196 @ .42) */
  .retech-x-kn-card:hover {
    border-color: rgba(24, 175, 196, .42);
  }

  .retech-x-kn-title {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
  }
  .retech-x-kn-desc {
    margin-top: 11px;
    color: var(--retech-x-w60);
    font-size: 14px;
    line-height: 1.66;
  }

  /* ── 文章链接列表:每行一个箭头链接(原型 .kn-links 的行距/分隔线 + 共享箭头)── */
  .retech-x-kn-links {
    display: grid;
    gap: 2px;
    margin-top: 22px;
  }
  .retech-x-kn-links li {
    border-bottom: 1px solid var(--retech-x-w08);
  }
  .retech-x-kn-links li:last-child {
    border-bottom: 0;
  }
  /* 共享 .retech-x-link-arrow 是给「卡片底部单个 CTA」用的(inline-flex + 上内距 18px
     + margin-top:auto);这里要在行内左右分栏,所以用本块类把它收成整行行高。 */
  .retech-x-kn-links__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 0;
    padding: 9px 0;
    color: var(--retech-x-w90);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    transition: color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                padding-left var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  /* 悬停:文字转绿 + 整行右移(原型 .kn-links a:hover 的 padding-left: 5px) */
  .retech-x-kn-links__link:hover {
    color: var(--retech-x-flow);
    padding-left: 5px;
  }

  /* ── 卡内 FAQ:原生 <details>,无 JS ──────────────────────────────────── */
  .retech-x-kn-faq {
    display: grid;
    gap: 0;
    margin-top: 20px;
  }
  .retech-x-kn-faq details {
    border-bottom: 1px solid var(--retech-x-w08);
  }
  .retech-x-kn-faq summary {
    position: relative;
    padding: 13px 26px 13px 0;
    color: var(--retech-x-w90);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    /* 去掉浏览器默认三角:list-style 管 Firefox/标准,::-webkit-* 管 WebKit/Blink,
       ::marker 兜住还在用 marker 伪元素的实现 —— 三件套缺一就会露出原生三角。 */
    list-style: none;
  }
  .retech-x-kn-faq summary::-webkit-details-marker {
    display: none;
  }
  .retech-x-kn-faq summary::marker {
    content: "";
  }
  /* 自绘雪佛龙:9px 方块的两条边旋转 45°(原型逐值) */
  .retech-x-kn-faq summary::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 1.6px solid var(--retech-x-w60);
    border-bottom: 1.6px solid var(--retech-x-w60);
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--retech-x-dur) var(--retech-x-ease-ui);
  }
  .retech-x-kn-faq details[open] summary::after {
    transform: translateY(-30%) rotate(-135deg);
  }
  .retech-x-kn-faq summary:hover {
    color: var(--retech-x-flow);
  }
  .retech-x-kn-faq-a {
    padding: 0 20px 15px 0;
    color: var(--retech-x-w60);
    font-size: 13px;
    line-height: 1.6;
  }

  /* ── tone="light" 换色分支 ───────────────────────────────────────────────
     原型没有浅底版本(这一段恒为深色带),但 tone 允许 light:白字 + w90 链接
     在浅底上不可读,所以补一套等价语义的浅底取值(描边 line / 正文 ink-2 /
     链接 ink / 分隔线 b08 / 悬停转 flow-dark,浅底上绿要压深一档)。 */
  [data-header="light"] .retech-x-kn-card {
    border-color: var(--retech-x-line);
    background: var(--retech-x-white);
    box-shadow: var(--retech-x-sh-sm);
  }
  [data-header="light"] .retech-x-kn-card:hover {
    border-color: var(--retech-x-tech-a50);
  }
  [data-header="light"] .retech-x-kn-title {
    color: var(--retech-x-ink);
  }
  [data-header="light"] .retech-x-kn-desc {
    color: var(--retech-x-ink-2);
  }
  [data-header="light"] .retech-x-kn-links li,
  [data-header="light"] .retech-x-kn-faq details {
    border-bottom-color: var(--retech-x-b08);
  }
  [data-header="light"] .retech-x-kn-links__link {
    color: var(--retech-x-ink);
  }
  [data-header="light"] .retech-x-kn-links__link:hover {
    color: var(--retech-x-flow-dark);
  }
  [data-header="light"] .retech-x-kn-faq summary {
    color: var(--retech-x-ink);
  }
  [data-header="light"] .retech-x-kn-faq summary:hover {
    color: var(--retech-x-flow-dark);
  }
  [data-header="light"] .retech-x-kn-faq summary::after {
    border-right-color: var(--retech-x-ink-3);
    border-bottom-color: var(--retech-x-ink-3);
  }
  [data-header="light"] .retech-x-kn-faq-a {
    color: var(--retech-x-ink-2);
  }
}

@layer retech-responsive {
  /* 平板:4 卡收成单列(原型 §17 1080 档) */
  @media (max-width: 1080px) {
    .retech-x-kn-grid {
      grid-template-columns: 1fr;
    }
  }

  /* 手机:卡片内距收紧(原型 §17 700 档) */
  @media (max-width: 700px) {
    .retech-x-kn-card {
      padding: 24px;
    }
  }

  /* 减弱动效:卡片描边过渡 / 链接位移 / 雪佛龙旋转全部关掉,保留终态 */
  @media (prefers-reduced-motion: reduce) {
    .retech-x-kn-card,
    .retech-x-kn-links__link,
    .retech-x-kn-faq summary::after {
      transition: none;
    }
  }
}