/**
 * retech/material-grid — 首页「Start With Your Material」材料网格。
 *
 * 原型:ret-ch/assets/css/retech.css §08「Start With Your Material(10 卡)」
 * (1216–1283)+ §17 响应式的 mat-grid 规则(1240 档 :1849 / 1080 档 :1942 /
 * 700 档 :1998–2003 / 420 档 :2032–2034)。第 11 张深色引导卡取自
 * solutions.css:549–558
 * (`.sol-card--ask` / `.sol-ask`)。
 *
 * 分工(见 block-authoring.md §CSS 分层):
 *   · @layer retech-block       本块的静态样式
 *   · @layer retech-responsive  本块的断点(1240 / 1080 / 700,以及原型自己
 *     用到的 420 —— 420 只在原型声明了 mat-grid 单列时才可引入)
 *   · 不再使用 retech-reset / retech-base —— 块文件只能用 block/responsive;
 *     共享类(.retech-x-section* / .retech-x-wrap / .retech-x-section-head /
 *     .retech-x-eyebrow / .retech-x-h2 / .retech-x-section-lead /
 *     .retech-x-btn* / .retech-x-link-arrow)的唯一属主是 blocks/style-index.css,
 *     本文件只消费:凡需改共享类的观感,都给本块元素再挂一个
 *     `retech-x-mat-grid__*` 修饰类,用层序(block 层晚于 base 层)覆盖,
 *     绝不写 `.retech-x-link-arrow { … }` 这种改别人属主的选择器。
 *   · 本文件出现的类全部以 `retech-x-mat-grid` 开头。
 *
 * ★ Possible output 的绿线 = 循环 / 产出语义(本站双色机制):
 *   绿(--retech-x-flow)= 循环 / 产出 / 正向结果;青(--retech-x-tech)= 工艺 /
 *   技术 / 参数 / 控制。原型里同一个词在系统卡 §06 `.sys-output` 上是**青**的
 *   (retech.css:1036「Output 用青色:技术/参数语义」),那是「系统技术参数」;
 *   材料卡说的是「这批料能变成什么」= 循环结果 → 绿。两者不可互换,本块绝不
 *   引入 cyan 的产出竖线,也不要照抄 §06 那条规则。
 *
 * ★ 展开行为:原型默认折叠、hover / :focus-within 展开(注释见 §08:1253),
 *   700px 以下常显(§17:1999「移动端不依赖 Hover:产出信息常显」)。折叠靠
 *   `grid-template-rows: 0fr → 1fr` + 唯一子元素 overflow:hidden(自动最小尺寸
 *   为 0)。因此 render.php 把标签与正文一起包进单个 `__output-inner`
 *   (原型直接放裸文本,裸文本是匿名 grid item、会落进隐式行,折叠不生效)。
 */

@layer retech-block {
  /* ── 栅格:桌面 5 列(原型 §08:1218)────────────────────────────────── */
  .retech-x-mat-grid__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
  }

  /* ── 卡片外壳 ─────────────────────────────────────────────────────────── */
  .retech-x-mat-grid__card {
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-lg);
    background: var(--retech-x-white);
    overflow: hidden;
    transition: border-color var(--retech-x-dur) var(--retech-x-ease-ui),
                box-shadow var(--retech-x-dur) var(--retech-x-ease-ui),
                transform var(--retech-x-dur) var(--retech-x-ease-ui);
  }
  /* hover 描边:原型写死 rgba(118,192,67,0.5) —— 用 flow 的 45% 档保持同一观感 */
  .retech-x-mat-grid__card:hover {
    border-color: var(--retech-x-flow-a45);
    box-shadow: var(--retech-x-sh-md);
    transform: translateY(-3px);
  }
  /* 整卡是链接(有 href)→ <a>;无 href → 同 class 的 <div>,布局一致 */
  .retech-x-mat-grid__link {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* ── 媒体框 ───────────────────────────────────────────────────────────── */
  .retech-x-mat-grid__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--retech-x-gray-light);
  }
  /* 无图(手填空值 / CPT 无 featured image):保留 3:2 框与编号徽标,
     只换成中性底色 —— 不拿 assets/placeholder.jpg 兜底(该文件由转换阶段放入,
     现在硬塞会得到一串 404 破图,sinopak/machine-grid 踩过同一个坑)。 */
  .retech-x-mat-grid__media--empty {
    background: linear-gradient(150deg, var(--retech-x-gray-light) 0%, var(--retech-x-line) 100%);
  }
  .retech-x-mat-grid__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--retech-x-ease-entry);
  }
  .retech-x-mat-grid__card:hover .retech-x-mat-grid__img {
    transform: scale(1.05);
  }
  .retech-x-mat-grid__no {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 8px;
    border-radius: var(--retech-x-r-xs);
    background: rgba(17, 23, 28, .6);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
  }

  /* ── 正文 ─────────────────────────────────────────────────────────────── */
  .retech-x-mat-grid__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 18px 22px;
  }
  .retech-x-mat-grid__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--retech-x-ink);
    letter-spacing: -.01em;
  }
  .retech-x-mat-grid__challenge {
    margin-top: 9px;
    color: var(--retech-x-ink-3);
    font-size: 13px;
    line-height: 1.6;
  }

  /* ── Possible output:绿线(循环 / 产出)+ 默认折叠 ──────────────────────── */
  .retech-x-mat-grid__output {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    padding-left: 13px;
    border-left: 2px solid var(--retech-x-flow);
    opacity: 0;
    overflow: hidden;
    color: var(--retech-x-ink-2);
    font-size: 13px;
    line-height: 1.55;
    transition: grid-template-rows var(--retech-x-dur) var(--retech-x-ease-ui),
                opacity var(--retech-x-dur) var(--retech-x-ease-ui),
                margin-top var(--retech-x-dur) var(--retech-x-ease-ui);
  }
  /* 唯一的 grid item:overflow:hidden 把自动最小尺寸压成 0,0fr 才能真正收起 */
  .retech-x-mat-grid__output-inner {
    display: block;
    overflow: hidden;
  }
  .retech-x-mat-grid__output-label {
    display: block;
    margin-bottom: 3px;
    color: var(--retech-x-flow-dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  /* hover / 键盘聚焦展开(原型 §08:1273–1279)。
     无链接卡没有 <a>,但卡片自身仍能 :focus-within/hover;有链接卡另给
     __link 的 :focus-visible,保证 Tab 到卡片时产出信息可见。 */
  .retech-x-mat-grid__card:hover .retech-x-mat-grid__output,
  .retech-x-mat-grid__card:focus-within .retech-x-mat-grid__output,
  .retech-x-mat-grid__link:focus-visible .retech-x-mat-grid__output {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 12px;
  }
  /* 卡片底部链接箭头:覆盖共享 .retech-x-link-arrow(§08:1280),
     用本块修饰类而不是改共享类的属主 */
  .retech-x-mat-grid__link-arrow {
    padding-top: 16px;
    color: var(--retech-x-flow-dark);
    font-size: 13px;
  }

  /* ── 第 11 张:深色引导卡(原型 solutions.css:548–558)─────────────────── */
  .retech-x-mat-grid__card--guide {
    border-color: transparent;
    background: linear-gradient(150deg, var(--retech-x-steel) 0%, var(--retech-x-graphite) 100%);
  }
  .retech-x-mat-grid__card--guide:hover {
    border-color: var(--retech-x-flow-a45);
  }
  .retech-x-mat-grid__guide {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 34px 28px;
  }
  /* 深色卡上的标题转白(卡片底色是深色渐变,继承下来的墨色会隐形)。
     选择器两个类都是本块的 → 不改共享属主。 */
  .retech-x-mat-grid__guide .retech-x-mat-grid__title {
    color: #fff;
    font-size: 20px;
  }
  .retech-x-mat-grid__guide-text {
    margin-top: 14px;
    margin-bottom: 26px;
    color: var(--retech-x-w60);
    font-size: 14px;
    line-height: 1.62;
  }
  /* CTA 沉到卡底(栅格行高对齐),与正文至少留 26px */
  .retech-x-mat-grid__guide-cta {
    margin-top: auto;
    align-self: flex-start;
  }
  /* 整段是深色带(tone=dark)时,透明描边的深色卡会糊在深底上 → 给一条浅描边 */
  .retech-x-mat-grid--dark .retech-x-mat-grid__card--guide {
    border-color: var(--retech-x-line-dark);
  }
}

@layer retech-responsive {
  /* ── Laptop:5 → 4 列(原型 §17:1849)──────────────────────────────── */
  @media (max-width: 1240px) {
    .retech-x-mat-grid__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* ── Tablet:4 → 3 列(原型 §17:1942)──────────────────────────────── */
  @media (max-width: 1080px) {
    .retech-x-mat-grid__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* ── Mobile:3 → 2 列 + 产出信息常显(原型 §17:1998–2003)─────────────── */
  @media (max-width: 700px) {
    .retech-x-mat-grid__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    /* 触摸端不依赖 hover:产出信息常显 */
    .retech-x-mat-grid__output {
      grid-template-rows: 1fr;
      opacity: 1;
      margin-top: 10px;
    }
    .retech-x-mat-grid__body {
      padding: 16px 14px 18px;
    }
    .retech-x-mat-grid__title {
      font-size: 15px;
    }
    .retech-x-mat-grid__link-arrow {
      padding-top: 12px;
    }
    /* ── 故意偏离(文档化):引导卡原型取自 solutions.css:549–558 ——
       base `.sol-ask { padding: 34px 28px }`(:554)、
       `.sol-card--ask .sol-card-title { font-size: 20px }`(:555),
       而 solutions.css 的响应式段对它**没有任何 ≤700 覆盖**(全文仅此一处)。
       原型里它是 solutions 总页的整行宽卡;本站首页把它收进 ≤700 的 2 列窄格,
       34/28 的内边距 + 20px 标题会把文案挤成一条,故改为与同排 __body 同一档
       节奏(原型 retech.css:2001 `padding: 16px 14px 18px`、:2002
       `font-size: 15px`):内边距 24px 18px、标题 17px。**这是故意偏离,不是漏抄**,
       不要按原型回改成 34/28 与 20px。 */
    .retech-x-mat-grid__guide {
      padding: 24px 18px;
    }
    .retech-x-mat-grid__guide .retech-x-mat-grid__title {
      font-size: 17px;
    }
  }

  /* ── 小屏手机:2 → 1 列(原型 §17:2032–2034)────────────────────────────
     原型在 ≤700 是 2 列(retech.css:1998 `repeat(2, minmax(0,1fr))`),
     **≤420 才塌成 1 列**(:2033 `grid-template-columns: 1fr`)。本项目断点约定
     允许 420,正是因为原型自己在这里用了它;差异在 320–420px 会真实显现
     (不是「420 并入 700 后看不出差别」),故照原型补这一档。 */
  @media (max-width: 420px) {
    .retech-x-mat-grid__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}