/* 拾光·暗室 — 首页文章区（单列 / 两列封面在左 / 四列封面在上，列数后台可配）+ 站点看板弹窗（独立扩展样式，不修改 main-* 构建产物） */

/* ===== 首页文章区：最新文章 + 分类文章（列数由后台 theme.config.types.post_columns 决定：cols-1/2/4） ===== */
.home-types { width: 100%; }
.type-section { padding: 30px clamp(16px, 5vw, 52px); }
.type-section .col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}
.type-section .col-head h2 { font-size: clamp(24px, 3vw, 34px); margin: 0; }
.type-section .col-head .more {
  color: hsl(var(--accent-soft));
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.type-grid { display: grid; gap: 22px; }
.home-types.cols-1 .type-grid { grid-template-columns: 1fr; }
.home-types.cols-2 .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-types.cols-4 .type-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 响应式：窄屏自动降列（不依赖后台 cols-N，保证平板/手机不挤；不引入 max-width，保持满宽 0.919 屏占比） */
@media (max-width: 900px) {
  .home-types.cols-1 .type-grid,
  .home-types.cols-2 .type-grid,
  .home-types.cols-4 .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .home-types.cols-1 .type-grid,
  .home-types.cols-2 .type-grid,
  .home-types.cols-4 .type-grid { grid-template-columns: 1fr; }
}

/* 卡片：默认横排（封面在左，右侧为 分类/标题/摘要/时间）；cols-4 改为竖排（封面在上） */
.pcard {
  display: flex;
  gap: 18px;
  text-decoration: none;
  color: inherit;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s var(--ease-bounce), border-color 0.3s, box-shadow 0.3s;
}
.pcard:hover {
  border-color: hsl(var(--accent) / 0.6);
  box-shadow: 0 16px 40px hsl(var(--accent) / 0.18);
  transform: translateY(-4px);
}
.pcard .cover {
  flex: 0 0 40%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, hsl(var(--accent) / 0.5), transparent 55%),
    linear-gradient(135deg, hsl(var(--accent-deep) / 0.5), hsl(var(--bg-2)));
}
.pcard .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard .body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
}
.pcard .pcat { margin-bottom: 8px; }
.pcard .pcat span {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: hsl(var(--accent));
  border: 1px solid hsl(var(--accent) / 0.4);
  border-radius: 999px;
  padding: 2px 10px;
}
.pcard h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.4; color: hsl(var(--text)); }
.pcard .pexcerpt {
  margin: 0 0 10px;
  color: hsl(var(--text-dim));
  font-size: 13px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard .pmeta { margin-top: auto; color: hsl(var(--text-dim)); font-size: 12px; }
.pcard .cover img { transition: transform 0.4s var(--ease-smooth); }
.pcard:hover .cover img { transform: scale(1.05); }

/* 四列：竖排卡片（封面在上） */
.home-types.cols-4 .pcard { flex-direction: column; }
.home-types.cols-4 .pcard .cover { flex: none; width: 100%; aspect-ratio: 16 / 9; }

/* ===== 站点看板弹窗 ===== */
.dash-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.dash-modal.open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 20px;
}
.dash-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: dashFade 0.25s ease both;
}
.dash-panel {
  position: relative;
  width: min(1200px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: hsl(var(--bg-2));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: dashPop 0.28s var(--ease-smooth, ease) both;
}
.dash-close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--surface));
  color: hsl(var(--text-dim));
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.dash-close:hover { color: hsl(var(--text)); border-color: hsl(var(--accent)); transform: rotate(90deg); }

.dash-scroll { overflow-y: auto; padding: clamp(28px, 4vw, 48px); }

.dash-head { margin-bottom: 32px; }
.dash-head .kicker { color: hsl(var(--accent)); letter-spacing: 0.3em; font-size: 12px; }
.dash-head .display { font-size: clamp(28px, 4vw, 40px); margin: 8px 0 12px; }
.dash-head p { color: hsl(var(--text-dim)); max-width: 60ch; }

/* 统计条 */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 36px;
}
.stat {
  padding: 22px 18px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--surface));
  text-align: center;
}
.stat .num {
  display: block;
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 700;
  color: hsl(var(--text));
  line-height: 1;
}
.stat .lab { display: block; margin-top: 8px; color: hsl(var(--text-dim)); font-size: 13px; }

/* 分类 / 标签 双列 */
.dash-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 36px;
}
.dash-col h3 {
  font-size: 14px;
  letter-spacing: 0.2em;
  color: hsl(var(--accent));
  margin-bottom: 14px;
  text-transform: uppercase;
}
.dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dash-list li a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  color: hsl(var(--text));
  text-decoration: none;
  font-size: 14px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.dash-list li a:hover { border-color: hsl(var(--accent)); color: hsl(var(--accent)); }

/* 快捷入口 */
.board-entries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.board-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--surface));
  color: hsl(var(--text));
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.1em;
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.board-entry:hover { border-color: hsl(var(--accent)); color: hsl(var(--accent)); transform: translateY(-3px); }

@keyframes dashFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dashPop {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ===== 响应式 ===== */
@media (max-width: 900px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .dash-cols { grid-template-columns: 1fr; }
  .board-entries { grid-template-columns: 1fr; }
}

/* ===== 错误页（500 / 4xx / error）装饰字「残影 / 碎光」 =====
   问题：外部构建产物 main-*.css 把 .broken .fragment 定义成 9px 发光圆点
   （width/height 9px + background + border-radius），但模板把「残影/碎光」
   文字塞进了该元素——文字溢出圆点，且 absolute 未给偏移，落在居中位置，
   正好压在 .void 的 500 数字上。
   修法：改回可读的漂浮装饰字，并移到左/右侧四角，避开数字区域。
   注：main-*.css 是 vite 构建产物、会被覆盖，故只在此处叠加覆盖规则。 */
.broken .fragment {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  font-size: clamp(18px, 3.4vw, 30px);
  font-weight: 800;
  letter-spacing: 0.28em;
  line-height: 1;
  color: hsl(var(--accent-soft) / 0.5);
  text-shadow: 0 0 20px hsl(var(--accent) / 0.35);
  white-space: nowrap;
  pointer-events: none;
}
.broken .fragment:not(.f2) {
  top: 15%;
  left: 7%;
  transform: rotate(-8deg);
}
.broken .fragment.f2 {
  top: auto;
  bottom: 17%;
  left: auto;
  right: 7%;
  transform: rotate(7deg);
}
.broken .fragment:hover {
  transform: scale(1.06);
}