/* ===========================================================
   列表型区块：紧凑版式（.pb-compact* / .pb-strip* / .pb-tiles* / .pb-tags*）

   活动 / 分类 / 手记 / 资讯这几种列表区块原本各自用多列网格铺开
   （.activity-grid / .cat-tags / .note-grid / .article-list），一屏放不下几个，
   在首页这种长页面上特别占高度。这里提供四种紧凑版式：

     strip  —— 横排一行方形卡片，超出宽度横向滚动
     tiles3 —— 长方形卡片，一行 3 个（网格，不滚动）
     tiles4 —— 长方形卡片，一行 4 个（网格，不滚动）
     tags   —— 标签形式，自动换行，不出现滚动条

   命名空间独立：本文件所有规则都挂在 .pb-compact* / .pb-strip* / .pb-tiles* / .pb-tags* 下，
   不改动任何既有类名，因此其它页面与既有卡片样式不受影响。
   由 block-compact.blade.php 使用，用哪种版式由 PageBlockLayout::resolveVariant() 决定。
   =========================================================== */

/* ---------- 区块外壳 ---------- */
.pb-compact-block {
  margin: 20px 0;
}

.pb-compact-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pb-compact-head h2 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

.pb-compact-empty {
  padding: 18px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* 角标（活动状态）—— strip 与 tiles 共用 */
.pb-tile-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: var(--fs-xs);
  line-height: 20px;
  white-space: nowrap;
  z-index: 1;
}

.pb-tile-badge.is-live {
  background: var(--color-primary);
}

.pb-tile-badge.is-ended {
  background: rgba(0, 0, 0, 0.4);
}

/* ===========================================================
   A. 长方形卡片网格（一行 3 个 / 一行 4 个）
   铺满即换行，不滚动
   =========================================================== */
.pb-tiles {
  display: grid;
  gap: 18px 14px;
}

.pb-tiles-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pb-tiles-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pb-tile {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.pb-tile-thumb {
  position: relative;
  display: block;
  width: 100%;
  /* 长方形封面（宽高比 16:10） */
  aspect-ratio: 16 / 10;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface-2);
  transition: border-color 0.18s ease;
}

.pb-tile-thumb img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.pb-tile:hover .pb-tile-thumb {
  border-color: var(--color-primary);
}

.pb-tile:hover .pb-tile-thumb img {
  transform: scale(1.04);
}

.pb-tile-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.pb-tile:hover .pb-tile-title {
  color: var(--color-primary);
}

.pb-tile-meta {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===========================================================
   B. 标签（自动换行，绝不出现滚动条）
   =========================================================== */
.pb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
  /* 有意不设 overflow：靠换行消化宽度，而不是产生滚动条 */
  overflow: visible;
}

.pb-tag {
  /* flex 允许收缩，超长名字由自身的 ellipsis 截断，不会把容器撑破 */
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 32px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.pb-tag:hover {
  color: var(--color-primary);
  background: var(--color-primary-bg);
  border-color: rgba(231, 75, 59, 0.3);
}

/* ===========================================================
   C. 横排一行方形卡片（横向滚动）
   =========================================================== */
.pb-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.pb-strip::-webkit-scrollbar {
  height: 6px;
}

.pb-strip::-webkit-scrollbar-track {
  background: transparent;
}

.pb-strip::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 999px;
}

.pb-strip::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-light);
}

.pb-strip-tile {
  flex: 0 0 auto;
  width: 152px;
  display: block;
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
}

.pb-strip-thumb {
  position: relative;
  display: block;
  width: 100%;
  /* 方形封面 */
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface-2);
  transition: border-color 0.18s ease;
}

.pb-strip-thumb img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

/* 横向滚动容器会裁掉 y 轴，所以悬停只改描边 + 图片缩放，不做位移与阴影 */
.pb-strip-tile:hover .pb-strip-thumb {
  border-color: var(--color-primary);
}

.pb-strip-tile:hover .pb-strip-thumb img {
  transform: scale(1.04);
}

.pb-strip-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.pb-strip-tile:hover .pb-strip-title {
  color: var(--color-primary);
}

.pb-strip-meta {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===========================================================
   响应式
   4 列 / 3 列在窄屏降为 2 列；标签本来就换行，不需要特殊处理
   =========================================================== */
@media (max-width: 820px) {
  .pb-tiles-3,
  .pb-tiles-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pb-tiles {
    gap: 14px 10px;
  }
}

@media (max-width: 768px) {
  .pb-compact-block {
    margin: 14px 0;
  }

  .pb-compact-head {
    margin-bottom: 10px;
  }

  .pb-compact-head h2 {
    font-size: var(--fs-base);
  }

  .pb-tags {
    gap: 8px;
  }

  .pb-tag {
    height: 28px;
    padding: 0 12px;
    font-size: var(--fs-xs);
  }

  .pb-strip {
    gap: 10px;
  }

  .pb-strip-tile {
    width: 124px;
  }
}