/* ==========================================================================
   resources.css · 精选资源库（resources.html 与首页 #resourceFeatured 共用）
   --------------------------------------------------------------------------
   只写资源库自己的东西：.resource-card / .resources-* / #resourceGrid / #resourceFeatured。
   不覆盖全局 .card、不写 body / .section 级选择器——index.html 也引了本文件，
   任何全局规则都会外溢到其它页面。

   颜色、间距、圆角一律走 css/tokens.css 的变量，不新建一套变量。
   卡片骨架（.site-card__head、.card-fav、.site-card__link 的拉伸点击）由
   components.css / layout.css 提供，这里只补资源卡片特有的排版。
   ========================================================================== */

/* ---------- 资源库搜索框 ----------
   外观与首页 .hero__search 一致，但它是真的输入框（直接过滤本页列表），
   不打开命令面板。最大宽度跟内容列一致，窄屏自动填满。 */
.resources-search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 560px;
  min-height: 48px;
  padding-inline: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.resources-search:hover { background: var(--surface-strong); border-color: var(--border-strong); }
.resources-search:focus-within {
  background: var(--surface-strong);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.resources-search__icon { font-size: var(--text-base); opacity: 0.75; }
.resources-search input {
  flex: 1;
  min-width: 0;
  padding-block: 0.85em;
  font-size: var(--text-base);
  color: var(--text);
  background: none;
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.resources-search input::placeholder { color: var(--text-faint); }
/* 焦点样式由外层 :focus-within 表达，输入框不再叠一圈描边 */
.resources-search input:focus-visible { outline: none; }
/* Safari 自带的清除按钮会挤掉右侧留白，统一去掉（Esc 可清空） */
.resources-search input::-webkit-search-cancel-button { display: none; }
@media (max-width: 480px) {
  .resources-search { min-height: 48px; padding-inline: var(--space-4); }
}

/* ---------- 资源网格列数 ----------
   和 #siteGrid 一样按断点写死列数，不用 auto-fit：
   宽度稍有变化就跳列会让卡片在手机上突然变成一条。
   320–360px 一列，390px 起两列，900px 起三列。 */
#resourceGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { #resourceGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #resourceGrid { grid-template-columns: minmax(0, 1fr); } }

/* 首页精选：最多 6 条，桌面一行三条，窄屏逐级降列 */
#resourceFeatured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { #resourceFeatured { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { #resourceFeatured { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 资源卡片 ----------
   卡片本身沿用 .card 的背景、边框与悬停位移，这里只负责：
   纵向撑满一行、文字不撑破卡片、元信息贴底对齐。
   .card 已经是 position: relative，所以 .site-card__link::after 的拉伸点击
   在本卡片内同样成立，不需要重复声明。 */
.resource-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;              /* 网格项默认 min-width:auto，长单词会把列顶宽 */
}

/* 头部沿用 .site-card__head（横向两端对齐）。但 layout.css 里
   .site-card__head .badge { margin-inline-start: auto } 是为「图标在左、
   徽章与收藏按钮都在右」的站点卡片写的；资源卡是「分类在左、收藏在右」，
   那条规则会把分类徽章推到按钮旁边，所以这里把它推回左边。
   选择器带 .resource-card 前缀，只影响资源卡片。 */
.resource-card .site-card__head .badge {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* 标题占两行高度，保证同一行卡片高度一致；资源名可能是
   "Motion Primitives" 这种较长的英文，两行足够。
   用途（.feature__desc）不截断：它是「我用它做什么」的正文，
   截掉就等于把这条资源最关键的信息藏起来了。 */
.resource-card .feature__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;   /* 极长的英文名不撑破卡片 */
  min-height: 2.36em;
}
.resource-card .feature__desc {
  overflow-wrap: anywhere;   /* 用途里出现长 URL 或英文串时不撑破卡片 */
}

/* 元信息与来源贴底：卡片高度不一时，底部两行仍然对齐 */
.resource-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  font-size: var(--text-xs);
  /* 用 --text-muted 而不是 --text-faint：核对日期与「授权 待确认」是这条资源的
     可信度信息，深色主题下 --text-faint(#6f7889) 对卡片底色只有约 4.35:1，
     不到正文 4.5:1 的门槛；--text-muted 两套主题都稳过 AA。 */
  color: var(--text-muted);
}
.resource-card__date,
.resource-card__license {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;   /* 日期与「待确认」宽度稳定，不随内容跳动 */
}

.resource-card__source {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}
/* 来源链接是卡片里除标题外唯一可点的地方，必须抬到拉伸点击层之上，
   否则点它会被整卡的 .site-card__link::after 抢走。 */
.resource-card__source a {
  position: relative;
  z-index: 2;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur) var(--ease-out);
}
.resource-card__source a:hover { color: var(--accent); }

/* 首页精选更紧凑：内边距与行距收一档，让 3–6 条卡片的区块不至于占满一屏。
   首页空间有限，这里才把用途截到两行；资源页保留全文。 */
.resource-card--compact { padding: var(--space-4); }
.resource-card--compact .feature__title { font-size: var(--text-lg); min-height: 0; }
.resource-card--compact .feature__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--text-sm);
}

/* ---------- 空结果 ----------
   .site-empty 已经在 layout.css 里铺满网格（grid-column: 1 / -1）并给了虚线框，
   这里只限制宽度、避免在宽屏上拉成一条长条。 */
.resources-empty { max-width: 560px; margin-inline: auto; }
.resources-empty strong { color: var(--text); font-size: var(--text-base); }

/* ---------- 页面底部的说明卡 ---------- */
.resources-notes {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.resources-notes li {
  position: relative;
  padding-left: var(--space-4);
}
.resources-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0.7;
}
.resources-notes code {
  padding: 0.1em 0.35em;
  color: var(--text);
  background: var(--surface-strong);
  border-radius: var(--radius-xs);
}

/* ---------- 减少动态效果 ----------
   卡片悬停位移由 .card--interactive 负责，这里只需保证本文件加的过渡也一起停掉。 */
@media (prefers-reduced-motion: reduce) {
  .resources-search,
  .resource-card__source a {
    transition: none;
  }
}