/*
 * loop-grid.css — 循环网格（Loop Grid）的自有实现。
 *
 * 替代 elementor-pro/assets/css/widget-loop-grid.min.css（13,218 B，商业授权）。
 * **不是抄它的规则**，是照渲染结果重写：`tools/derive-css.mjs` 量出原件在本站元素上
 * 贡献的全部计算属性，自有实现逐条对齐（判据是那份完整差集相同，不是"看起来一样"）。
 *
 * ⚠️ 原件 108 条规则里 **72 条在 `@media` 内**、且用的是本站没有的类
 *（响应式列数的几十种组合、编辑器预览态、WooCommerce 版式…），只有 13 条可能命中。
 * 我第一版的静态解析**根本读不进 @media**，把这件事看成了另一个样子 ——
 * 现在 `tools/css-live-rules.mjs` 认识 @media/@supports/@keyframes。
 *
 * ⚠️ `--load-more—spacing` 里那个是**破折号（—）不是连字符**。
 * 那是 Elementor 自己的笔误，但**必须原样沿用**：逐页样式（uploads/elementor/css/*.css）
 * 里写的是同一个名字，改成连字符就再也取不到值，而**默认值 30px 会让它看起来像在工作**。
 */

/* 自动滚动的落点偏移（由逐页样式提供，本文件只消费）。 */
.elementor-widget-loop-grid {
  scroll-margin-top: var(--auto-scroll-offset, initial);
}

/*
 * 网格项等高：非砖砌布局下每一项拉伸到行高（卡片底边因此对齐）；
 * 砖砌（masonry）反过来要顶部对齐、各自保持自然高度。
 * ⚠️ 这一条是**逐条对账指出来的**：我第一版漏了它，而漏掉之后 76 条属性里只差 1 条
 * （`align-items:stretch`）—— 一个"看起来几乎一样"的差异，
 * 表现是卡片不再等高。**这就是为什么判据不能是"看起来一样"。**
 */
.elementor-loop-container:not(.elementor-posts-masonry) {
  align-items: stretch;
}
.elementor-loop-container.elementor-posts-masonry {
  align-items: flex-start;
}

/* 网格间距 —— 两个方向各自可调，默认 30px。 */
.elementor-widget-loop-grid .elementor-grid {
  grid-column-gap: var(--grid-column-gap, 30px);
  grid-row-gap: var(--grid-row-gap, 30px);
}

/* ── 「加载更多」区 ───────────────────────────────────────────────── */
/*
 * 组件的两种外壳形状都要覆盖：有 `.elementor-widget-container` 包一层的，
 * 和没有的（Elementor 在某些版本里不生成那一层）。原件用 `:not(:has(>…))`
 * 表达"没有那一层时直接落在自己身上" —— 沿用，因为**去掉它就会漏掉一种形状**，
 * 而漏掉的那种在页面上不报任何错，只是间距与定位悄悄不对。
 */
.elementor-widget-loop-grid .e-loop__load-more {
  text-align: var(--load-more-button-align);
}
.elementor-widget-loop-grid .e-loop__load-more .elementor-button {
  width: var(--load-more-button-width);
}

/* 加载指示器：容器常驻 flex，里面的图标默认藏起来（加载时由 JS 显出来）。 */
.elementor-widget-loop-grid:not(:has(> .elementor-widget-container)) .e-load-more-spinner,
.elementor-widget-loop-grid > .elementor-widget-container .e-load-more-spinner {
  display: flex;
}
.elementor-widget-loop-grid:not(:has(> .elementor-widget-container)) .e-load-more-spinner i,
.elementor-widget-loop-grid:not(:has(> .elementor-widget-container)) .e-load-more-spinner svg,
.elementor-widget-loop-grid > .elementor-widget-container .e-load-more-spinner i,
.elementor-widget-loop-grid > .elementor-widget-container .e-load-more-spinner svg {
  display: none;
  margin: 0 auto;
}
.elementor-widget-loop-grid:not(:has(> .elementor-widget-container)) .e-load-more-spinner i,
.elementor-widget-loop-grid > .elementor-widget-container .e-load-more-spinner i {
  color: var(--load-more-spinner-color);
}
.elementor-widget-loop-grid:not(:has(> .elementor-widget-container)) .e-load-more-spinner svg,
.elementor-widget-loop-grid > .elementor-widget-container .e-load-more-spinner svg {
  width: 1em;
  height: 1em;
  fill: var(--load-more-spinner-color);
}

/* 「没有更多了」的提示：默认不显示，由 JS 在到底时显出来。 */
.elementor-widget-loop-grid:not(:has(> .elementor-widget-container)) .e-load-more-message,
.elementor-widget-loop-grid > .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-loop-grid:not(:has(> .elementor-widget-container)) > .elementor-button-wrapper,
.elementor-widget-loop-grid > .elementor-widget-container > .elementor-button-wrapper {
  margin-top: var(--load-more—spacing, 30px);
}
/* 加载时指示器**盖在按钮正中**（按钮本身 position:relative 当定位上下文）。 */
.elementor-widget-loop-grid:not(:has(> .elementor-widget-container)) > .elementor-button-wrapper .e-load-more-spinner,
.elementor-widget-loop-grid > .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-loop-grid:not(:has(> .elementor-widget-container)) > .elementor-button-wrapper .elementor-button,
.elementor-widget-loop-grid > .elementor-widget-container > .elementor-button-wrapper .elementor-button {
  position: relative;
  cursor: pointer;
}

/*
 * ── 三个「JS 运行时才加上的状态」──────────────────────────────────
 *
 * 🔴 **这一族我第一版整个漏了，而漏掉之后功能是坏的、页面却什么都不说。**
 * `load-more.*.bundle.js` 的 `handleUiWhenNoPosts()` 只干一件事：
 *     widget.classList.add("e-load-more-pagination-end")
 * **把按钮藏起来、把「没有更多了」显出来，全靠下面这两条 CSS。**
 * 漏掉它 ⇒ 到底了按钮还在 ⇒ 再点一次去要下一页 ⇒ 404 + `TypeError` ⇒ 页面毫无反应。
 *
 * ⚠️ 它躲过了每一道判据：
 *   · 三个类在标记里出现 **0 次**（全由 JS 运行时加）⇒ 静态筛选把整族判死；
 *   · `derive-css` 的等价对账量的是**静止态** ⇒ 「逐条完全相同」对这一族一个字都没说；
 *   · 像素门与排版门也只看静止态。
 * **抓到它的是把功能真的点一遍，并拿原站当 oracle**（原站到底后按钮 display:none、零错误）。
 * ⇒ **带状态的组件，静止态等价不算证明。**
 */
.elementor-widget-loop-grid.e-load-more-pagination-loading > .elementor-widget-container {
  cursor: default;
}
.elementor-widget-loop-grid.e-load-more-pagination-loading > .elementor-widget-container .e-load-more-spinner {
  margin-top: var(--load-more—spacing, 30px);
}
.elementor-widget-loop-grid.e-load-more-pagination-loading > .elementor-widget-container .e-load-more-spinner i,
.elementor-widget-loop-grid.e-load-more-pagination-loading > .elementor-widget-container .e-load-more-spinner svg {
  display: flex;
}
/* 加载中把按钮文字藏起来（位置留着，避免按钮塌掉），转圈盖在原处。 */
.elementor-widget-loop-grid.e-load-more-pagination-loading > .elementor-widget-container > .elementor-button-wrapper .elementor-button-content-wrapper {
  visibility: hidden;
}
/* 🔴 到底了：按钮消失、提示出现。**这两条就是「停下来」这件事本身。** */
.elementor-widget-loop-grid.e-load-more-pagination-end:not(:has(> .elementor-widget-container)) > .elementor-button-wrapper,
.elementor-widget-loop-grid.e-load-more-pagination-end > .elementor-widget-container > .elementor-button-wrapper {
  display: none;
}
.elementor-widget-loop-grid.e-load-more-pagination-end:not(:has(> .elementor-widget-container)) > .e-load-more-message,
.elementor-widget-loop-grid.e-load-more-pagination-end > .elementor-widget-container > .e-load-more-message {
  display: block;
}
/* 关掉转圈时把按钮文字还回来。 */
.elementor-widget-loop-grid.e-load-more-no-spinner:not(:has(> .elementor-widget-container)) > .elementor-button-wrapper .elementor-button-content-wrapper,
.elementor-widget-loop-grid.e-load-more-no-spinner > .elementor-widget-container > .elementor-button-wrapper .elementor-button-content-wrapper {
  visibility: visible;
}

/*
 * 🔴 **「没有更多了」那条提示的排版** —— 这一条我也漏了。
 * 上一轮补了 `e-load-more-pagination-end`（**让它显示出来**），却没补**它显示出来之后长什么样**：
 * 上下各 30px 的留白与居中。现取：`e-loop-nothing-found-message` 在 **10 个分页页**上是个真实存在的
 * 空 div ⇒ 漏掉 padding 之后那 10 页的整页高度与原站差一段。
 * ⚠️ 「让一个东西显示出来」与「它显示出来之后的样子」是两条规则，
 * 补前者不蕴含后者 —— 而只补一半的症状是"功能对了、版面差一截"。
 */
.elementor-widget-loop-grid .e-loop-nothing-found-message {
  color: var(--e-loop-nothing-found-message-color, #1f2124);
  padding-block-start: var(--e-loop-nothing-found-message-space-from-top, 30px);
  padding-block-end: var(--e-loop-nothing-found-message-space-from-bottom, 30px);
  text-align: var(--e-loop-nothing-found-message-align, center);
}

/* 取下一页时整块闪烁 —— `e-loading-overlay` 由 JS 在取数期间挂上。
   ⚠️ 保真度门禁掉了全部 animation（`settle.mjs` 第一行），所以**它对这条规则永久失明**；
   漏了它不会有任何门变红，只有真的点一次"查看更多"才看得见。 */
.elementor-widget-loop-grid.e-loading-overlay {
  animation: loadingOpacityAnimation 1s infinite alternate;
}

/* 加载中的呼吸动画。名字承重：JS 按名字挂到元素上。 */
@keyframes loadingOpacityAnimation {
  0%, to { opacity: 1; }
  50% { opacity: 0.6; }
}