/* 外层 figure：间距、对齐、宽度控制 */
.image-figure {
  margin-block: 2rem;
  margin-inline: 0;
  display: block;
  max-width: 100%;
}

/* 图片容器：圆角、阴影、溢出裁切，hover 轻微上浮 */
.image-wrap {
  position: relative;
  display: block;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* 若启用灯箱，指针样式 */
.image-figure[data-lightbox-enabled="true"] .image-wrap {
  cursor: zoom-in;
}

/* 图片：自适应缩放 */
.image-wrap img,
.image-wrap picture,
.image-wrap source {
  display: block;
  width: 100%;
  height: auto;
}

/* 悬停效果（非触屏设备更明显） */
@media (hover:hover) {
  .image-wrap:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  }
}

/* 标题说明 */
.image-caption {
  margin-top: .6rem;
  color: #6b7280;             /* 中性灰 */
  font-size: .95rem;
  line-height: 1.5;
  text-align: center;
}

/* 深色模式微调 */
@media (prefers-color-scheme: dark) {
  .image-wrap {
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  }
  .image-wrap:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  }
  .image-caption {
    color: #9aa3af;
  }
}

/* 可选：兼容你内容区域里可能存在的默认排版样式（如果之前用了 Tailwind 的 prose） */
.image-figure .image-caption p {
  margin: 0;
}

/* 可选：图片加载中的占位（如果后续要做 blur-up，可以在模板里加 class 再配样式） */
/*
.image-wrap.is-loading img { filter: blur(8px); }
.image-wrap.is-loaded  img { filter: none; transition: filter .3s ease; }
*/


/* 以下美化 figure 包装表格和标题 */
.table-figure {
  margin: 1.5em 0;
  width: 100%;
  overflow-x: auto;
  display: block;
}

.table-figure table {
  border-collapse: collapse;
  width: 100%;
}

.table-figure th,
.table-figure td {
  border: 1px solid #ffffff;
  padding: 0.6em;
  text-align: left;
}

.table-figure th {
  font-weight: bold;
  border-bottom: 1px solid #999;
}

.table-figure figcaption {
  margin-top: 0.4em;
  font-size: 0.95em;
  color: #555;
  text-align: center;
}

/* 如果你想让 caption 宽度跟表格对齐，可用以下方式： */
.table-figure {
  display: table;
}

.table-figure figcaption {
  display: table-caption;
  caption-side: top;
}

/* 外层语义容器，便于整体排版与响应式 */
.tikz-figure {
  margin: 1.25rem 0;
  display: block;
}

/* 顶部标题，若不需要可在 render hook 里去掉 figcaption */
.tikz-caption {
  font-size: .7rem;
  color: #555;
  margin-bottom: .5rem;
  text-align: center;
}

/* TikZJax 会把 <script type="text/tikz"> 替换为 <svg>。
   这里允许 SVG 在容器内自适应缩放并横向滚动 */
.tikz-figure svg {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.tikz-source {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}
/* 初次渲染前的占位提示；TikZJax 将插入 SVG 后，脚本节点会被替换，保留这个 fallback 以便渐进增强 */
.tikz-fallback {
  text-align: center;
  font-size: .9rem;
  color: #777;
}

/* 暗色主题微调（可选） */
@media (prefers-color-scheme: dark) {
  .tikz-caption { color: #aaa; }
  .tikz-fallback { color: #aaa; }
}