/*
 * 「本期推荐」区块（`.featured`）。
 *
 * 这段版式原本只写在 `prototype-about.css` 里 —— 这一节此前只出现在 about / st 两页。
 * 现在首页也要放同一节，而首页加载的是 `style.min.css` + `prototype-home.css` +
 * `prototype-inline.css`，**不含** about 那份样式表，所以把这一节用到的规则单独抄成一份。
 * 原型 `index.html` 与站点首页引的是**同一份文件**，像素对照才逐像素可比。
 *
 * 取值逐字抄自 `prototype-about.css`（about 仍用那一份，没动）。唯一的改写是两个 token：
 * `--line` 与 `--container` **只在 about 的样式表里有定义**，首页这几份都没有，
 * 直接写 `var(--line)` 会让整条声明失效（`border-block` 消失、`calc()` 那条内边距整条丢掉），
 * 所以这里带上了 about 里的同名取值做兜底。
 *
 * 已确认首页不存在同名元素（`eyebrow`/`featured`/`meta-item` 在首页原型与组件里都是 0 个），
 * 不会误伤别的区块。
 *
 * 改动注意：about 那边走 `prototype-about.css`，这里是它的副本，两处要一起改。
 */

/*
 * 按钮的基础样式。
 *
 * `.btn` / `.btn-primary` 在 about 那边由 `prototype-about.css` 提供（渐变胶囊按钮），
 * 首页用的是 `style.min.css` 里**另一套** `.btn` —— 同一个类名、两种外观。
 * 不补这一段的话，这一节复制到首页后会变成一个纯文本按钮（实测过）。
 *
 * 只作用于本节（`.featured-copy`），不碰首页别处的 `.btn`（例如顶部导航那两个）。
 * `--line-strong` 与前面 `--line` 同理：只在 about 的样式表里有定义，所以带 about 的取值兜底。
 *
 * **顺序有讲究**：基础规则在**前**，下面 `.featured-copy .btn { min-height: 38px … }` 的尺寸覆盖在**后** ——
 * 与 `prototype-about.css` 里的先后一致，反过来会把高度顶回 48px。
 */
.featured-copy .btn {
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--line-strong, rgba(190, 151, 255, .42));
  border-radius: 999px;
  background: rgba(13, 8, 29, .58);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.featured-copy .btn:hover {
  transform: translateY(-2px);
  border-color: rgba(218, 188, 255, .8);
}

.featured-copy .btn-primary {
  border-color: transparent;
  background: linear-gradient(110deg, #bc39f5 0%, #7557ff 52%, #32aeef 100%);
  box-shadow: 0 12px 34px rgba(125, 69, 255, .32);
}

.featured-copy .arrow { font-size: 20px; line-height: 1; }
.eyebrow {
  margin: 0 0 14px;
  color: #c77bff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .28em;
}

.featured { position: relative; overflow: hidden; border-block: 1px solid var(--line, rgba(184, 169, 255, .18)); background: #090516; }
.featured-grid { height: 320px; min-height: 0; display: grid; grid-template-columns: 41% 59%; align-items: stretch; }
.featured-copy { padding: 30px 38px 30px max(32px, calc((100vw - var(--container, 1320px)) / 2)); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.featured-copy .eyebrow { margin-bottom: 8px; font-size: 11px; }
.featured-copy h2 { margin: 0; font-size: 23px; line-height: 1.18; letter-spacing: -.02em; white-space: nowrap; }
.featured-copy > p { max-width: 560px; margin: 12px 0 18px; color: #bbb5c9; font-size: 13px; line-height: 1.7; }
.featured-copy .btn { min-height: 38px; padding: 0 22px; font-size: 13px; }
.featured-media { position: relative; height: 320px; min-height: 0; overflow: hidden; }
.featured-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% center; }
.featured-media::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, #090516 0%, rgba(9,5,22,.12) 32%, rgba(5,1,13,.5) 100%); }
.feature-note { position: absolute; z-index: 3; top: 20px; right: 26px; color: #df79ff; font-family: cursive; font-size: 16px; line-height: 1.35; text-align: center; transform: rotate(-6deg); }
.feature-meta { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; }
.meta-item { display: flex; gap: 8px; align-items: flex-start; min-width: 0; padding: 0 12px; border-left: 1px solid rgba(255,255,255,.2); }
.meta-item:first-child { border-left: 0; }
.meta-item img { width: 36px; height: 36px; flex: 0 0 auto; margin-top: 2px; filter: brightness(0) invert(1); }
.meta-item strong { display: block; font-size: 22px; white-space: nowrap; }
.meta-item span { display: block; margin-top: 3px; color: #c8c1d4; font-size: 18px; line-height: 1.45; }

@media (max-width: 1100px) {
  .featured-copy { padding-left: 32px; padding-right: 24px; }
}

@media (max-width: 860px) {
  .featured-grid { height: auto; grid-template-columns: 1fr; }
  .featured-copy h2 { white-space: normal; }
  .featured-media { height: 330px; min-height: 330px; order: -1; }
  .feature-meta { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .meta-item:nth-child(3) { border-left: 0; }
}

@media (max-width: 600px) {
  .featured-copy { padding: 54px 18px; }
  .featured-media { height: 300px; min-height: 300px; }
  .feature-meta { left: 10px; right: 10px; bottom: 14px; }
}