/* ============================================================
   项目矩阵 · 独立列表页
   依赖 styles.css 中的 :root 变量与基础样式
   ============================================================ */

/* --- 页头 --- */
.p-hero{
  background:#f6f6f7;border-bottom:1px solid var(--border);
  padding:148px 0 52px;
}
.p-crumb{font-size:12.5px;color:var(--gray-3);letter-spacing:.08em;margin-bottom:22px}
.p-crumb a:hover{color:var(--red)}
.p-crumb span{margin:0 8px;opacity:.5}
.p-hero .section-eyebrow{margin-bottom:14px}
.p-hero h1{
  font-size:clamp(34px,4.4vw,58px);font-weight:900;letter-spacing:-.025em;line-height:1.1;
}
.p-hero h1 em{color:var(--red);font-style:normal}
.p-hero-sub{font-size:16px;color:var(--gray-4);line-height:1.85;max-width:680px;margin-top:18px}
.p-hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin-top:44px;padding-top:32px;border-top:1px solid var(--border);
}
.p-hero-stats b{
  display:block;font-family:"Inter",sans-serif;font-weight:900;font-size:38px;
  letter-spacing:-.03em;line-height:1;color:#111;
}
.p-hero-stats b small{font-size:16px;font-weight:700;margin-left:2px}
.p-hero-stats span{
  display:block;margin-top:8px;font-size:12.5px;color:var(--gray-3);letter-spacing:.06em;
}

/* --- 组合特征 --- */
.p-feature{background:#fff}
.p-feature .loc-summary{padding:44px 0 0;border-bottom:0;margin-bottom:0}

/* --- 列表主体 --- */
.p-main{padding:0 0 96px}
.p-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding:64px 0 20px;border-bottom:1px solid var(--border);
}
.p-count{font-size:12.5px;color:var(--gray-3);letter-spacing:.08em;padding-bottom:6px}
.p-count b{font-family:"Inter",sans-serif;font-size:15px;font-weight:800;color:#111;margin-right:2px}

/* --- 类型筛选 --- */
.p-filters{display:flex;gap:10px;flex-wrap:wrap;padding:28px 0 0}
.p-filter{
  padding:9px 18px;border-radius:999px;border:1px solid var(--border);background:#fff;
  font-size:13.5px;font-weight:600;color:var(--gray-4);cursor:pointer;
  font-family:inherit;transition:all .2s ease;
}
.p-filter:hover{border-color:var(--red);color:var(--red)}
.p-filter.is-active{background:#111;color:#fff;border-color:#111}

/* --- 项目卡片 --- */
.p-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-top:34px;
}
.p-card{
  background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.p-card:hover{
  transform:translateY(-5px);box-shadow:0 24px 54px rgba(0,0,0,.08);border-color:#e0e2e8;
}
.p-card[hidden]{display:none}
.p-card-media{position:relative;aspect-ratio:16/11;overflow:hidden;background:#ececef}
.p-card-media img{
  width:100%;height:100%;object-fit:cover;transition:transform .65s ease;
}
.p-card:hover .p-card-media img{transform:scale(1.06)}
.p-card-tag{
  position:absolute;left:16px;top:16px;z-index:2;
  padding:5px 12px;border-radius:999px;
  background:rgba(13,13,15,.62);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.1em;
  backdrop-filter:blur(6px);
}
.p-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:7px;flex:1}
.p-card-no{
  font-family:"Inter",sans-serif;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--red);
}
.p-card h3{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.35}
.p-card-loc{font-size:12.5px;color:var(--gray-3);line-height:1.6}
.p-card-specs{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin:12px 0 0;padding:16px 0 0;border-top:1px solid var(--border);
}
.p-card-specs b{
  display:block;font-family:"Inter",sans-serif;font-size:20px;font-weight:800;
  letter-spacing:-.02em;line-height:1.1;color:#111;
}
.p-card-specs span{display:block;margin-top:3px;font-size:11px;color:var(--gray-3);letter-spacing:.02em}
.p-card-foot{
  margin-top:auto;padding-top:18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:11.5px;color:var(--gray-3);
}
.p-card-foot em{
  font-style:normal;font-weight:700;color:var(--red);white-space:nowrap;
  opacity:0;transform:translateX(-4px);transition:opacity .25s ease, transform .25s ease;
}
.p-card:hover .p-card-foot em{opacity:1;transform:none}

/* --- 响应式 --- */
@media (max-width:1024px){
  .p-grid{grid-template-columns:repeat(2,1fr)}
  .p-hero{padding:132px 0 44px}
  .p-hero-stats{grid-template-columns:repeat(2,1fr);gap:28px 20px}
}
@media (max-width:720px){
  .p-grid{grid-template-columns:1fr}
  .p-hero h1{font-size:30px}
  .p-hero-stats b{font-size:30px}
  .p-head{flex-direction:column;align-items:flex-start;gap:8px;padding-top:48px}
  .p-feature .loc-summary{padding-top:36px}
}