/* ==========================================================================
   mingcui.cn 案例墙页专属样式（pages/indie，仅该页模板引入）。
   设计 token 与共享原语见 static/css/portal/base.css；本文件只放案例页
   自己的封面（hero）与卡片样式，选择器必须以 .indie-/.status 开头。
   ========================================================================== */

/* ---------- Indie hero（案例页封面：夜色实拍 + 编辑部式排版） ----------
   构图取「杂志封面」而不是「落地页 hero」：照片满幅铺底，文案压在左侧压暗区，
   底部一条发丝线收口做版权行。
   压暗只用线性渐变（左侧重、右侧轻、底部重），刻意不做柔光斑与彩色渐变——
   那是「AI 生成页」最典型的气味；这张照片本身的冷暖光比就是全部的戏剧性，
   所以界面这一侧保持单色（只有白和白的透明度），把颜色让给照片。
   注：DESIGN.md 原本把深色「夜」岛留给工具页的纯色 hero-band；工具页已改为
   内容优先页头（见 pages/tool.html），这里的实拍封面就是全站唯一的深色 moment。 */
.indie-hero {
  position: relative;
  /* 自成层叠上下文：图与压暗层用负 z-index 垫底，内容自然压在它们上面 */
  isolation: isolate;
  overflow: hidden;
  /* 图片未解码 / 解码失败时的兜底底色，保证白字始终可读 */
  background-color: #0b0e14;
  color: var(--on-primary);
}
.indie-hero > picture {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.indie-hero-bg {
  width: 100%;
  height: 100%;
  /* 构图偏上：把画面里的城市与屏幕留在上半屏（那是这张图最亮、最值钱的部分），
     切掉底部前景的桌面杂物，底部正好留给文案 */
  object-fit: cover;
  object-position: 50% 10%;
  user-select: none;
  pointer-events: none;
}
/* 压暗层分两道：竖向「上轻下重」（上半屏的城市亮部不打光）、
   横向「左重右轻」（左侧压出文案落脚的暗底，右侧留住人与屏幕的光）。
   两者都是纯线性的明暗关系，没有柔光斑、没有彩色渐变。 */
.indie-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(7, 9, 14, .8) 0%, rgba(7, 9, 14, .34) 40%,
      rgba(7, 9, 14, .04) 76%, rgba(7, 9, 14, 0) 100%),
    linear-gradient(100deg, rgba(7, 9, 14, .72) 0%, rgba(7, 9, 14, .34) 40%,
      rgba(7, 9, 14, .05) 68%, rgba(7, 9, 14, 0) 86%);
}

/* 内容压到封面底部：上方留出干净的画面，像一张海报 */
.indie-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(440px, 44vw, 560px);
  padding-top: 88px;
  padding-bottom: 48px;
}

/* 栏目眉：等宽小字 + 一小段白色细线（不用贴纸色，把颜色全留给照片） */
.indie-hero-kicker {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .62);
}
.indie-hero-kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, .5);
}

.indie-hero-title {
  margin: var(--s-lg) 0 var(--s-md);
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -1.8px;
  color: var(--on-primary);
  /* 不是发光，是把字从照片的中间调里「拎」出来一档 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.indie-hero-sub {
  max-width: 500px;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(255, 255, 255, .74);
}

.indie-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-md) var(--s-lg);
  margin-top: var(--s-lg);
}
/* 深色封面上的主 CTA 换成纯白药丸 + 深色字。玻璃拟态（半透明 + 模糊 + 镜面高光）
   是最典型的「AI 生成页」材质，这一处刻意避开；白底黑字在实拍图上对比最高、也最
   克制——要的是海报上贴了张白色便签的实感，而不是一块悬浮玻璃。 */
.indie-hero-actions .btn-primary {
  background: #fff;
  color: #0b0e14;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .2),
    0 10px 28px rgba(0, 0, 0, .26);
}
.indie-hero-actions .btn-primary:hover {
  background: #f2f2f2;
  color: #0b0e14;
  border-color: #fff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .18),
    0 12px 32px rgba(0, 0, 0, .3);
}

.indie-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
}
.indie-hero-link:hover { color: var(--on-primary); }

/* 版权行：一条通栏发丝线 + 小字，杂志封底的做法 */
.indie-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-xs) var(--s-md);
  margin-top: 40px;
  padding-top: var(--s-sm);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .5);
}
.indie-hero-meta > span + span::before { content: "·"; margin-right: var(--s-xs); opacity: .6; }
.indie-hero-meta a {
  color: rgba(255, 255, 255, .74);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .3);
  text-underline-offset: 3px;
}
.indie-hero-meta a:hover { color: var(--on-primary); text-decoration-color: currentColor; }

/* ---------- 独立开发者卡 ---------- */
.indie-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-md);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  transition: box-shadow .15s, border-color .15s;
}
.indie-card:hover { border-color: var(--ink-faint); box-shadow: var(--shadow-1); }
.indie-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-xs); }
.indie-card-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.125px;
  color: var(--ink);
  min-width: 0;
}
.indie-card-name:hover { color: var(--primary); }
.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.33;
  white-space: nowrap;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; }
.status-online { background: #e8f7ea; color: #147a2c; }
.status-dev { background: #fdeee2; color: var(--accent-orange); }
.status-closed { background: #f1efee; color: var(--ink-muted); }
.indie-card-desc {
  margin: var(--s-xs) 0 var(--s-sm);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.indie-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-xs);
  margin-top: auto;
  padding-top: var(--s-sm);
  border-top: 1px solid var(--hairline);
}
.indie-card-dev { font-size: 13px; color: var(--ink-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.indie-card-dev a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.indie-card-location { color: var(--ink-faint); }
.indie-card-visit { flex-shrink: 0; font-size: 13px; font-weight: 500; color: var(--primary); white-space: nowrap; }
.indie-card-visit:hover { color: var(--primary-active); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  /* 封面：窄屏文案横向铺满，左侧压暗不再够用 → 整体压暗 + 底部加重
     （压暗两次叠加后顶部约 52%、底部约 9 成，白字始终在 4.5:1 以上） */
  .indie-hero-inner {
    justify-content: flex-start;
    min-height: auto;
    padding-top: 52px;
    padding-bottom: 36px;
  }
  .indie-hero-bg { object-position: 72% 44%; }
  .indie-hero::before {
    background:
      linear-gradient(to top, rgba(7, 9, 14, .8) 0%, rgba(7, 9, 14, .42) 56%, rgba(7, 9, 14, .34) 100%),
      linear-gradient(100deg, rgba(7, 9, 14, .5), rgba(7, 9, 14, .14));
  }
  .indie-hero-meta { margin-top: var(--s-xl); }
}

@media (max-width: 600px) {
  .indie-hero-title { letter-spacing: -1.2px; }
  .indie-hero-actions { gap: var(--s-sm) var(--s-md); }
}