/* 主题色覆盖
 *
 * 只改浅色模式。深色模式（html[data-theme="dark"]）不在这里声明，
 * 所以仍然使用主题自带的青色 #2698ba。
 *
 * 主题默认的浅色强调色是紫红 #b509ac，这里换成 #cc2319。
 * 升级 al_folio_core 时本文件不受影响。
 */

:root {
  --global-theme-color: #cc2319;
  --global-hover-color: #cc2319;
  /* 代码块背景原本是主题色的 5% 透明度，跟着一起换，否则会残留紫色调 */
  --global-code-bg-color: rgba(204, 35, 25, 0.05);
}

/* 首页姓名后的中文名：字号略小，颜色与正文一致。
   这里用 --global-text-color 而不是写死黑色，
   否则深色模式下会变成黑字配深色背景、看不见。 */
.post-title .chinese-name {
  margin-left: 0.4em;
  font-size: 0.72em;
  font-weight: 400;
  color: var(--global-text-color);
  white-space: nowrap;
}

/* CV 页：去掉日期标签前的项目符号与上下灰线。
   这个构建用的是 Tailwind，没有加载 Bootstrap 的 .list-group 规则，
   所以 <ul class="list-group"> 会显示默认的圆点。 */
.card-text.list-group,
.card-text.list-group > .list-group-item {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* 日期徽章外面套了一层 <table class="table-cv">，
   但它不带 .table 类，因而命中了 table:not(.table) td 的 border-top，
   在标签上下各画出一条灰线。 */
.table-cv,
.table-cv td,
.table-cv th,
.table-cv tr {
  border: none !important;
  background-color: transparent;
}

/* CV 页：日期标签左对齐。
   日期列带 .text-center，徽章又有内联 min-width:75px，
   两者叠加使标签在列内居中。这里统一改为左对齐。 */
.date-column,
.date-column .table-cv,
.date-column .table-cv td {
  text-align: left !important;
}

.date-column .badge {
  min-width: 0 !important;
  display: inline-block;
  text-align: left;
}

/* 项目卡片封面图：正方形卡面 + 大留白。
   aspect-ratio: 1 让图框随卡片宽度自适应地保持正方形，
   比固定 height 更可靠（固定高度在窄屏下就不再是正方形）。
   padding 取 20%，在留白与图片可辨识度之间取平衡（25% 以上时
   HSC 宽幅图会明显偏小，因为 contain 按最长边适配）。
   object-fit: contain 保证宽幅图（HSC）与近方形图（H2M、PEGG）
   都完整显示、不被裁切。 */
.card .card-img-top {
  aspect-ratio: 1 / 1;
  height: auto;
  width: 100%;
  padding: 20%;
  box-sizing: border-box;
  object-fit: contain;
  background-color: var(--global-card-bg-color);
}

/* HSC 封面图是宽幅（约 2.5:1），contain 按最长边适配，
   同样的 padding 下它会比另外两张近方形的 logo 小很多。
   单独给它更小的留白，使三张卡片的视觉分量接近。
   用 src 属性选择器锁定文件，不依赖卡片顺序。 */
.card .card-img-top[src$="leukemia.jpg"] {
  padding: 10%;
}

/* 摄影页：等高行排版（justified rows）。
   每张图的 flex-grow 与 flex-basis 都与宽高比成正比，
   所以同一行里的图拉伸后高度一致，宽度按比例分配：
   横图（3:2）约是竖图（2:3）的 2.25 倍宽，视觉上占两列，且不裁切。
   宽高比由 _pages/photography.md 里每张图的 width/height 算出。
   ::after 占位吸收最后一行的剩余空间，避免末行被拉得过大。 */
.photo-grid {
  --photo-row-height: 240px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.photo-grid::after {
  content: "";
  flex-grow: 10;
}

.photo-grid-item figure {
  margin: 0;
}

.photo-grid-item img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 576px) {
  .photo-grid {
    --photo-row-height: 160px;
    gap: 0.5rem;
  }
}