/* 只作用于你这个 loop grid：外层需要有 class = reviant-blog-loop */
.reviant-blog-loop .elementor-loop-container{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* ✅ 第一篇：跨满 3 列 */
.reviant-blog-loop .elementor-loop-container > div.e-loop-item:first-of-type{
  grid-column: 1 / -1 !important;
}

/* ✅ 第一篇：左右布局（左图右文）——稳版写在外层容器上 */
.reviant-blog-loop .elementor-loop-container > div.e-loop-item:first-of-type
.elementor-element.elementor-element-00105b5{
  display: grid !important;
  grid-template-columns: 1.35fr 1fr !important;
  align-items: stretch;
	min-height:460px;
}

/* 关键：让 boxed 的 e-con-inner 不再“包一层影响布局”，把里面内容直接参与 grid */
.reviant-blog-loop .elementor-loop-container > div.e-loop-item:first-of-type
.elementor-element.elementor-element-00105b5 > .e-con-inner{
  display: contents !important;
}

/* 两列允许收缩，避免撑爆导致看起来又变成上下 */
.reviant-blog-loop .elementor-loop-container > div.e-loop-item:first-of-type
.elementor-element.elementor-element-68b296e,
.reviant-blog-loop .elementor-loop-container > div.e-loop-item:first-of-type
.elementor-element.elementor-element-8dbbcf1{
  min-width: 0;
}

/* 第一篇：图片列铺满高度 */
.reviant-blog-loop .elementor-loop-container > div.e-loop-item:first-of-type
.elementor-element.elementor-element-68b296e{
  aspect-ratio: auto !important;
  height: 100% !important;
}

.reviant-blog-loop .elementor-loop-container > div.e-loop-item:first-of-type
.elementor-element.elementor-element-68b296e img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* 第一篇：右侧内容区 */
.reviant-blog-loop .elementor-loop-container > div.e-loop-item:first-of-type
.elementor-element.elementor-element-8dbbcf1{
  justify-content: center;
  padding: 44px !important;
  gap: 14px !important;
}

/* 第一篇：标题变大 */
.reviant-blog-loop .elementor-loop-container > div.e-loop-item:first-of-type
.elementor-element.elementor-element-1b61ff0 .elementor-heading-title{
  font-size: 42px !important;
  line-height: 1.15 !important;
}

/* ✅ 只取消第一篇图片的 hover grow */
.reviant-blog-loop .elementor-loop-container > div.e-loop-item:first-of-type
img.elementor-animation-grow{
  transform: none !important;
  transition: none !important;
}
.reviant-blog-loop .elementor-loop-container > div.e-loop-item:first-of-type
.elementor-widget-image:hover img.elementor-animation-grow{
  transform: none !important;
}

/* ✅ 按钮：默认隐藏所有卡片，只在第一篇显示 */
/* 默认隐藏所有卡片里的 “Read Article” 文本（text-editor id=8c2b946） */
.reviant-blog-loop .elementor-loop-container .elementor-element.elementor-element-8c2b946{
  display: none !important;
}

/* 只在第一篇显示 */
.reviant-blog-loop
  .elementor-loop-container
  > div.e-loop-item:first-of-type
  .elementor-element.elementor-element-8c2b946{
  display: block !important;
}

/* 分类容器：变成一颗颗 chip + 去掉逗号(, ) */
.reviant-blog-loop .elementor-post-info__terms-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:0; /* 关键：把 span 之间的 “, ” 文本节点隐藏掉 */
}

.reviant-blog-loop .elementor-post-info__terms-list-item{
  font-size:12px;          /* 把字体恢复回来 */
  line-height:1;
  padding:6px 10px;
  border-radius:5px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
}

/* 默认一个兜底颜色 */
.reviant-blog-loop .elementor-post-info__terms-list-item{
  background:#EEF2FF;
  color:#374151;
}

/* 不同分类不同颜色（类名后面会由 JS 自动加上） */
.reviant-blog-loop .term-science{
  background:#E8EDFF;
  color:#2F5BFF;
}
.reviant-blog-loop .term-nutrition{
  background:#E9FBF1;
  color:#15803D;
}
.reviant-blog-loop .term-news{
  background:#FFF2E5;
  color:#B45309;
}
.reviant-blog-loop .term-lifestyle{
  background:#F1EAFE;
  color:#6D28D9;
}
.reviant-blog-loop .term-studies{
  background:#EAF6FF;
  color:#0369A1;
}
.elementor-post-info__terms-list span{
	margin-right:10px;
}

/* 响应式：平板/手机第一篇改为上下 */
@media (max-width: 1024px){
  .reviant-blog-loop .elementor-loop-container{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reviant-blog-loop .elementor-loop-container > div.e-loop-item:first-of-type
  .elementor-element.elementor-element-00105b5{
    grid-template-columns: 1fr !important;
    min-height: auto;
  }

  .reviant-blog-loop .elementor-loop-container > div.e-loop-item:first-of-type
  .elementor-element.elementor-element-8dbbcf1{
    padding: 22px !important;
  }

  .reviant-blog-loop .elementor-loop-container > div.e-loop-item:first-of-type
  .elementor-element.elementor-element-1b61ff0 .elementor-heading-title{
    font-size: 30px !important;
  }
}

@media (max-width: 640px){
  .reviant-blog-loop .elementor-loop-container{
    grid-template-columns: 1fr;
  }
}