/*
 * posts.css — 文章列表 / 归档列表（Posts、Archive Posts 两个组件共用）的自有实现。
 *
 * 替代 elementor-pro/assets/css/widget-posts.min.css（16,950 B，商业授权）。
 * **不是抄它的规则**，是照渲染结果重写：`tools/derive-css.mjs` 量出原件在本站元素上
 * 贡献的全部计算属性，自有实现逐条对齐（判据是那份完整差集相同，不是"看起来一样"）。
 *
 * ⚠️ 原件 104 条规则里只有约 34 条可能命中，其余服务于本站没用到的皮肤
 *（full-content / masonry / 各种缩略图位置与比例、编辑器预览态…）。
 *
 * ⚠️ 「加载更多」那一族的选择器**必须同时列 posts 与 archive-posts 两个前缀**，
 * 且每个前缀又有"有 .elementor-widget-container 包一层"与"没有"两种形状 ——
 * 四种组合缺一，那一种在页面上不报任何错，只是间距与定位悄悄不对。
 * 同一族规则在 loop-grid 那个组件上也有一份（`public/kepha/loop-grid.css`）：
 * **刻意不合并** —— 两个文件各自替换一个商业授权文件，合并会让"删掉哪个原件"
 * 与"哪个自有实现在服务它"不再一一对应，而那正是授权对账要靠的东西。
 */

/* 组件根部的清浮动伪元素在这两个组件上不需要。 */
.elementor-widget-posts:after,
.elementor-widget-archive-posts:after {
  display: none;
}

/*
 * 列表项等高：非砖砌布局下每一项拉伸到行高（卡片底边因此对齐）；
 * 砖砌反过来要顶部对齐、各自保持自然高度。
 * ⚠️ **这一条我连续两个组件都漏了**（loop-grid 一次、这里一次），
 * 而根因是判据的语义写反了：静态筛选器把 `:not(.elementor-posts-masonry)` 里的
 * `.elementor-posts-masonry` 也当成"必须在标记里出现"——
 * 而 `:not(.x)` 匹配的是**没有** `.x` 的元素，`.x` 不存在反而让规则更可能命中。
 * 两次都是逐条对账指出来的（这次 237 条里差 13 条，其中 12 条是祖先高度的连锁后果）。
 */
.elementor-posts-container:not(.elementor-posts-masonry) {
  align-items: stretch;
}
.elementor-posts-container.elementor-posts-masonry {
  align-items: flex-start;
}

/* ── 列表与卡片骨架 ───────────────────────────────────────────────── */
.elementor-posts-container .elementor-post {
  margin: 0;
  padding: 0;
}
.elementor-posts .elementor-post {
  display: flex;
  flex-direction: column;
  transition-duration: 0.25s;
  transition-property: background, border, box-shadow;
}
.elementor-posts .elementor-post__title {
  margin: 0;
  font-size: 18px;
}
/* `--item-display` 由逐页样式提供（列表/网格两种排布切换）。 */
.elementor-posts .elementor-post__text {
  display: var(--item-display, block);
  flex-direction: column;
  flex-grow: 1;
}
.elementor-posts .elementor-post__meta-data {
  margin-bottom: 13px;
  color: #adadad;
  font-size: 12px;
  line-height: 1.3em;
}

/*
 * ── 固定长宽比裁切（`elementor-has-item-ratio`）────────────────────────
 *
 * 🔴 **整族我第一版全漏了**，而它是本站 posts 卡片缩略图的实际排版方式：
 * 容器按比例撑出高度，缩略图**绝对定位铺满并居中**，图片按短边填充、长边溢出裁掉。
 * 漏掉之后缩略图退回文档流，卡片高度与图片尺寸全变（实测一页 211 条计算属性不同）。
 *
 * ⚠️ **它躲过了每一道静态判据，因为这两个类在标记里出现 0 次** ——
 * `elementor-has-item-ratio` 与 `elementor-fit-height` 都是 **JS 在运行时按图片实际
 * 长宽比加上去的**（`fit-height` = 图片比容器更"高"，该按高度填充而不是宽度）。
 * ⇒ 「这个类在标记里有没有」这条判据对整族失明。
 *
 * ⚠️ 那 `+ 1px` 与 `scale(1.01)` **不是脏东西，别"清理"**：
 * 居中用的 translate(-50%,-50%) 会落在半像素上，两者一起盖住裁切边缘的一条亚像素缝。
 *
 * 本站没有 `hover-zoom-in/out`（0 处）与 `elementor-portfolio`（0 处），故不抄那两族。
 */
.elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail {
  inset: 0;
}
.elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail img {
  position: absolute;
  top: calc(50% + 1px);
  left: calc(50% + 1px);
  height: auto;
  transform: scale(1.01) translate(-50%, -50%);
}
/* 图片比容器更高时改按高度填充（宽度自适应），否则短边会留白。 */
.elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail.elementor-fit-height img {
  width: auto;
  height: 100%;
}

/* ── 缩略图 ───────────────────────────────────────────────────────── */
/* 图片按容器宽度铺满并**解除最大尺寸限制** —— 主题的 `img{max-width:100%}`
   在这里会让图片按原始尺寸收缩，缩略图就填不满卡片。 */
.elementor-posts-container .elementor-post__thumbnail {
  overflow: hidden;
}
.elementor-posts .elementor-post__thumbnail {
  position: relative;
}
.elementor-posts-container .elementor-post__thumbnail img {
  display: block;
  width: 100%;
  max-width: none;
  max-height: none;
  transition: filter 0.3s;
}
.elementor-posts-container .elementor-post__thumbnail__link {
  display: block;
  position: relative;
  width: 100%;
}
/* 链接本身不参与过渡 —— 过渡挂在里面的图片上（上面那条）。 */
.elementor-post__thumbnail__link {
  transition: none;
}
.elementor-posts--thumbnail-top .elementor-post__thumbnail__link {
  margin-bottom: 20px;
}
.elementor-posts--thumbnail-top .elementor-post__text {
  width: 100%;
}

/* ── classic 皮肤 ─────────────────────────────────────────────────── */
.elementor-posts--skin-classic .elementor-post {
  overflow: hidden;
}

/* ── card 皮肤 ────────────────────────────────────────────────────── */
/* `min-height:100%` 让同一行的卡片等高；`overflow:hidden` 把圆角切在图片上。 */
.elementor-posts .elementor-post__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  border: 0 solid #69727d;
  border-radius: 3px;
  background-color: #fff;
  overflow: hidden;
  transition: all 0.25s;
}
/* `preserve-3d` 是为了让缩略图在圆角容器里不出现锯齿边（Safari 的老问题）。 */
.elementor-posts .elementor-post__card .elementor-post__thumbnail {
  position: relative;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
/* 多出的 1px 盖住亚像素取整留下的白边。 */
.elementor-posts .elementor-post__card .elementor-post__thumbnail img {
  width: calc(100% + 1px);
}
.elementor-posts .elementor-post__card .elementor-post__text {
  margin-top: 20px;
  margin-bottom: 0;
  padding: 0 30px;
}
.elementor-posts .elementor-post__card .elementor-post__meta-data {
  margin-bottom: 0;
  padding: 15px 30px;
  border-top: 1px solid #eaeaea;
}
.elementor-posts .elementor-post__card .elementor-post__meta-data span + span:before {
  margin: 0 5px;
}
.elementor-posts .elementor-post__card .elementor-post__title {
  font-size: 21px;
}
.elementor-posts .elementor-post__card .elementor-post__title,
.elementor-posts .elementor-post__card .elementor-post__excerpt {
  margin-bottom: 25px;
}

/*
 * 🔴 **卡片元信息被推到卡片底部** —— 这一条我漏了，而它决定同一行卡片的元信息对不对齐。
 * `margin-top:auto` 在纵向 flex 里把它顶到最后：无论标题/摘要多长，日期那一行都贴着卡片底边。
 * 漏掉之后元信息紧跟在摘要后面，同一行的几张卡片元信息各在各的高度上。
 *
 * ⚠️ 它躲过了等价对账，因为**我验的那两页都是 `cards` 皮肤但都不带这个组合**，
 * 而对账的空洞保护只判"整张表什么都没改"，判不了"这一族规则一次都没命中"。
 * 现取：`--skin-cards` 在 4 页、`--thumbnail-top` 在 11 页。
 * ⚠️ `:not(.elementor-posts-masonry)` 是承重的：砖砌布局下卡片高度本来就不齐，顶到底边没有意义。
 */
.elementor-posts .elementor-posts--skin-cards:not(.elementor-posts-masonry) .elementor-post__meta-data,
.elementor-posts--thumbnail-top .elementor-posts--skin-cards:not(.elementor-posts-masonry) .elementor-post__meta-data {
  margin-top: auto;
}

/* 卡片悬停时缩略图上的渐变蒙层变淡。 */
.elementor-posts__hover-gradient .elementor-post__card .elementor-post__thumbnail__link:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent 75%);
  background-repeat: no-repeat;
  transition: all 0.3s;
}
.elementor-posts__hover-gradient .elementor-post__card:hover .elementor-post__thumbnail__link:after {
  opacity: 0.5;
}

/* ── 「加载更多」区（posts 与 archive-posts 两个前缀 × 两种外壳） ──── */
.elementor-widget-posts.load-more-align-center .elementor-button-wrapper,
.elementor-widget-archive-posts.load-more-align-center .elementor-button-wrapper {
  text-align: center;
}
.elementor-widget-posts.load-more-align-start .elementor-button-wrapper,
.elementor-widget-archive-posts.load-more-align-start .elementor-button-wrapper {
  text-align: start;
}
.elementor-widget-posts.load-more-align-end .elementor-button-wrapper,
.elementor-widget-archive-posts.load-more-align-end .elementor-button-wrapper {
  text-align: end;
}
.elementor-widget-posts.load-more-align-justify .elementor-button,
.elementor-widget-archive-posts.load-more-align-justify .elementor-button {
  width: 100%;
}

.elementor-widget-posts:not(:has(> .elementor-widget-container)) .e-load-more-spinner,
.elementor-widget-posts > .elementor-widget-container .e-load-more-spinner,
.elementor-widget-archive-posts:not(:has(> .elementor-widget-container)) .e-load-more-spinner,
.elementor-widget-archive-posts > .elementor-widget-container .e-load-more-spinner {
  display: flex;
}
.elementor-widget-posts:not(:has(> .elementor-widget-container)) .e-load-more-spinner i,
.elementor-widget-posts:not(:has(> .elementor-widget-container)) .e-load-more-spinner svg,
.elementor-widget-posts > .elementor-widget-container .e-load-more-spinner i,
.elementor-widget-posts > .elementor-widget-container .e-load-more-spinner svg,
.elementor-widget-archive-posts:not(:has(> .elementor-widget-container)) .e-load-more-spinner i,
.elementor-widget-archive-posts:not(:has(> .elementor-widget-container)) .e-load-more-spinner svg,
.elementor-widget-archive-posts > .elementor-widget-container .e-load-more-spinner i,
.elementor-widget-archive-posts > .elementor-widget-container .e-load-more-spinner svg {
  display: none;
  margin: 0 auto;
}
.elementor-widget-posts:not(:has(> .elementor-widget-container)) .e-load-more-spinner i,
.elementor-widget-posts > .elementor-widget-container .e-load-more-spinner i,
.elementor-widget-archive-posts:not(:has(> .elementor-widget-container)) .e-load-more-spinner i,
.elementor-widget-archive-posts > .elementor-widget-container .e-load-more-spinner i {
  color: var(--load-more-spinner-color);
}
.elementor-widget-posts:not(:has(> .elementor-widget-container)) .e-load-more-spinner svg,
.elementor-widget-posts > .elementor-widget-container .e-load-more-spinner svg,
.elementor-widget-archive-posts:not(:has(> .elementor-widget-container)) .e-load-more-spinner svg,
.elementor-widget-archive-posts > .elementor-widget-container .e-load-more-spinner svg {
  width: 1em;
  height: 1em;
  fill: var(--load-more-spinner-color);
}
.elementor-widget-posts:not(:has(> .elementor-widget-container)) .e-load-more-message,
.elementor-widget-posts > .elementor-widget-container .e-load-more-message,
.elementor-widget-archive-posts:not(:has(> .elementor-widget-container)) .e-load-more-message,
.elementor-widget-archive-posts > .elementor-widget-container .e-load-more-message {
  display: none;
  margin-top: var(--load-more—spacing, 30px);
  color: var(--load-more-message-color);
  text-align: var(--load-more-message-alignment, center);
}
.elementor-widget-posts:not(:has(> .elementor-widget-container)) > .elementor-button-wrapper,
.elementor-widget-posts > .elementor-widget-container > .elementor-button-wrapper,
.elementor-widget-archive-posts:not(:has(> .elementor-widget-container)) > .elementor-button-wrapper,
.elementor-widget-archive-posts > .elementor-widget-container > .elementor-button-wrapper {
  margin-top: var(--load-more—spacing, 30px);
}
.elementor-widget-posts:not(:has(> .elementor-widget-container)) > .elementor-button-wrapper .e-load-more-spinner,
.elementor-widget-posts > .elementor-widget-container > .elementor-button-wrapper .e-load-more-spinner,
.elementor-widget-archive-posts:not(:has(> .elementor-widget-container)) > .elementor-button-wrapper .e-load-more-spinner,
.elementor-widget-archive-posts > .elementor-widget-container > .elementor-button-wrapper .e-load-more-spinner {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  margin: inherit;
  transform: translate(-50%, -50%);
}
.elementor-widget-posts:not(:has(> .elementor-widget-container)) > .elementor-button-wrapper .elementor-button,
.elementor-widget-posts > .elementor-widget-container > .elementor-button-wrapper .elementor-button,
.elementor-widget-archive-posts:not(:has(> .elementor-widget-container)) > .elementor-button-wrapper .elementor-button,
.elementor-widget-archive-posts > .elementor-widget-container > .elementor-button-wrapper .elementor-button {
  position: relative;
  cursor: pointer;
}

/* 加载中：光标不变手型、指示器显出来、按钮文字隐去（位置留着，不塌陷）。 */
.elementor-widget-posts.e-load-more-pagination-loading > .elementor-widget-container,
.elementor-widget-archive-posts.e-load-more-pagination-loading > .elementor-widget-container {
  cursor: default;
}
.elementor-widget-posts.e-load-more-pagination-loading > .elementor-widget-container .e-load-more-spinner,
.elementor-widget-archive-posts.e-load-more-pagination-loading > .elementor-widget-container .e-load-more-spinner {
  margin-top: var(--load-more—spacing, 30px);
}
.elementor-widget-posts.e-load-more-pagination-loading > .elementor-widget-container .e-load-more-spinner i,
.elementor-widget-posts.e-load-more-pagination-loading > .elementor-widget-container .e-load-more-spinner svg,
.elementor-widget-archive-posts.e-load-more-pagination-loading > .elementor-widget-container .e-load-more-spinner i,
.elementor-widget-archive-posts.e-load-more-pagination-loading > .elementor-widget-container .e-load-more-spinner svg {
  display: flex;
}
/* `visibility` 而不是 `display` —— 按钮要保持原尺寸，否则加载时整块会跳一下。 */
.elementor-widget-posts.e-load-more-pagination-loading > .elementor-widget-container > .elementor-button-wrapper .elementor-button-content-wrapper,
.elementor-widget-archive-posts.e-load-more-pagination-loading > .elementor-widget-container > .elementor-button-wrapper .elementor-button-content-wrapper {
  visibility: hidden;
}
.elementor-widget-posts.e-load-more-no-spinner:not(:has(> .elementor-widget-container)) > .elementor-button-wrapper .elementor-button-content-wrapper,
.elementor-widget-posts.e-load-more-no-spinner > .elementor-widget-container > .elementor-button-wrapper .elementor-button-content-wrapper,
.elementor-widget-archive-posts.e-load-more-no-spinner:not(:has(> .elementor-widget-container)) > .elementor-button-wrapper .elementor-button-content-wrapper,
.elementor-widget-archive-posts.e-load-more-no-spinner > .elementor-widget-container > .elementor-button-wrapper .elementor-button-content-wrapper {
  visibility: visible;
}

/* 到底了：按钮收起、提示显出。 */
.elementor-widget-posts.e-load-more-pagination-end:not(:has(> .elementor-widget-container)) > .elementor-button-wrapper,
.elementor-widget-posts.e-load-more-pagination-end > .elementor-widget-container > .elementor-button-wrapper,
.elementor-widget-archive-posts.e-load-more-pagination-end:not(:has(> .elementor-widget-container)) > .elementor-button-wrapper,
.elementor-widget-archive-posts.e-load-more-pagination-end > .elementor-widget-container > .elementor-button-wrapper {
  display: none;
}
.elementor-widget-posts.e-load-more-pagination-end:not(:has(> .elementor-widget-container)) > .e-load-more-message,
.elementor-widget-posts.e-load-more-pagination-end > .elementor-widget-container > .e-load-more-message,
.elementor-widget-archive-posts.e-load-more-pagination-end:not(:has(> .elementor-widget-container)) > .e-load-more-message,
.elementor-widget-archive-posts.e-load-more-pagination-end > .elementor-widget-container > .e-load-more-message {
  display: block;
}