/* p3.38 阶段三:关于页(about.php,导航"关于"新落点)——block 化卡片
   风格,参照 Collin 现博客"关于我/兴趣/信仰"各自一张卡片的布局思路,配
   色/圆角/玻璃感沿用本主题自己的 --glass/--radius/--space token 和
   .glass/.card-depth 基类,不是照搬参照站的视觉。

   桌面:多列网格自适应(卡片够宽就多列,内容多时自然换行)。
   手机(<700px):单列堆叠。 */

.about-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 var(--space-page) var(--space-section);
}
@media (min-width: 700px) {
  .about-blocks {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    max-width: var(--container-desktop);
    margin-inline: auto;
    padding: 0 24px var(--space-section);
  }
}

.about-block {
  padding: 20px;
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-block__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.about-block__emoji {
  font-size: 26px;
  line-height: 1;
}

.about-block__title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.about-block__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-line;
}

.about-block__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* p3.38③:标签胶囊直接复用既有 .chip 视觉(components.css),不重新定
   义一份颜色/圆角——本主题"标签/胶囊"统一长这样,不是关于页专属风格。 */
.about-block__tags .chip {
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
}

.about-empty {
  text-align: center;
  padding: 40px var(--space-page);
  color: var(--text-secondary);
}