/* ==========================================================================
 * Evolta 栅格布局样式（evolta-compat 提供）
 *
 * 来源：主题 style-main.css 中 "Isotop Gallery" 与 "Isotop Item Media Query" 两节，
 *       原样提取，未做任何数值改动，保证与模板站渲染一致。
 *
 * 为什么需要：
 *   mascot 系组件（Service Block / Portfolio / Blog / Team 等）的栅格不靠
 *   Elementor 的 flex，而是输出 <div class="isotope-layout grid-3 gutter-10">
 *   + <div class="isotope-item">，由 CSS 决定 .isotope-item 的宽度和浮动。
 *   这些规则只在主题里，非 Evolta 主题下 .isotope-item 没有宽度，
 *   于是每项占满整行 —— 三栏卡片被拉成一列，图变得又宽又扁。
 *
 * 说明：
 *   下方最后一段为「无 JS 兜底」，把 float 布局换成 flex，
 *   这样即使主题的 isotope 初始化脚本不加载，栅格也能正常换行。
 *   带 :not(.isotope-rendered) 限定，一旦将来启用了 isotope JS
 *   （它会给自己加上 .isotope-rendered），这些兜底规则自动失效，不冲突。
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * box-sizing 兜底
 * 模板站的主题自带 bootstrap，全局 * { box-sizing: border-box }。
 * 本插件不引入 bootstrap，若不补齐，.isotope-item 的 width:33.2% 会再叠加
 * 左右各 10px 内边距，三栏总宽超过 100% 而被挤成两栏甚至一栏。
 * 限定在 .isotope-layout 内部，不影响站点其他部分。
 * -------------------------------------------------------------------------- */
.isotope-layout,
.isotope-layout *,
.isotope-layout *::before,
.isotope-layout *::after {
  box-sizing: border-box;
}

/* -------- Isotop Gallery ---------- */
.isotope-layout {
  /* by default 4 grids */
  /*portfolio 2 grids*/
  /*portfolio 2 grids*/
  /*portfolio 3 grids*/
  /*portfolio 4 grids*/
  /*portfolio 5 grids*/
  /*portfolio 6 grids*/
  /*gutter*/
}
.isotope-layout .isotope-layout-inner {
  position: relative;
}
.isotope-layout .isotope-item {
  padding: 0 15px;
  margin: 0 0 30px;
  float: left;
  width: 24.98%;
  /* item sizer */
}
.isotope-layout .isotope-item .isotope-item-inner {
  position: relative;
  height: 100%;
}
.isotope-layout .isotope-item.tm-masonry-large-wide, .isotope-layout .isotope-item.tm-masonry-large-width-height {
  width: 49.98%;
}
.isotope-layout .isotope-item.isotope-item-sizer {
  padding: 0 !important;
  margin-bottom: 0 !important;
  width: 24.98%;
}
.isotope-layout .isotope-item.isotope-item-sizer.tm-masonry-large-wide, .isotope-layout .isotope-item.isotope-item-sizer.tm-masonry-large-width-height {
  width: 49.98%;
}
.isotope-layout .isotope-item .thumb img {
  width: 100%;
}
.isotope-layout.isotope-layout-single-item:not(.shop-archive):not(.blog-archive) {
  margin-left: 0;
}
.isotope-layout.isotope-layout-single-item:not(.shop-archive):not(.blog-archive) .isotope-layout-inner {
  margin-left: 0;
  margin-right: 0;
}
.isotope-layout.isotope-layout-single-item:not(.shop-archive):not(.blog-archive) .isotope-item {
  padding-right: 0;
  padding-left: 0;
  margin-bottom: 0;
  width: 100% !important;
  position: relative !important;
}
.isotope-layout.isotope-layout-single-item:not(.shop-archive):not(.blog-archive) .isotope-item .hentry {
  margin-bottom: 0;
  padding-bottom: 0;
}
.isotope-layout.grid-1 .isotope-item {
  width: 100% !important;
}
.isotope-layout.grid-1 .isotope-item.tm-masonry-large-wide, .isotope-layout.grid-1 .isotope-item.tm-masonry-large-width-height {
  width: 100% !important;
}
.isotope-layout.grid-2 .isotope-item {
  width: 49.98%;
}
.isotope-layout.grid-2 .isotope-item.tm-masonry-large-wide, .isotope-layout.grid-2 .isotope-item.tm-masonry-large-width-height {
  width: 100%;
}
.isotope-layout.grid-3 .isotope-item {
  width: 33.2%;
}
.isotope-layout.grid-3 .isotope-item.tm-masonry-large-wide, .isotope-layout.grid-3 .isotope-item.tm-masonry-large-width-height {
  width: 66.4%;
}
.isotope-layout.grid-4 {
  width: 100.1%;
  width: calc(100% + 1px);
}
.isotope-layout.grid-4 .isotope-item {
  width: 24.98%;
}
.isotope-layout.grid-4 .isotope-item.tm-masonry-large-wide, .isotope-layout.grid-4 .isotope-item.tm-masonry-large-width-height {
  width: 49.98%;
}
.isotope-layout.grid-5 .isotope-item {
  width: 20%;
}
.isotope-layout.grid-5 .isotope-item.tm-masonry-large-wide, .isotope-layout.grid-5 .isotope-item.tm-masonry-large-width-height {
  width: 40%;
}
.isotope-layout.grid-6 .isotope-item {
  width: 16.5%;
}
.isotope-layout.grid-6 .isotope-item.tm-masonry-large-wide, .isotope-layout.grid-6 .isotope-item.tm-masonry-large-width-height {
  width: 33%;
}
.isotope-layout .isotope-layout-inner {
  margin: 0 -15px;
}
.isotope-layout .isotope-item {
  padding: 0 15px;
  margin: 0 0 30px;
}
.isotope-layout.gutter .isotope-layout-inner {
  margin: 0 -15px;
}
.isotope-layout.gutter .isotope-item {
  padding: 0 15px;
  margin: 0 0 30px;
}
.isotope-layout.gutter-0 .isotope-layout-inner {
  margin: 0;
}
.isotope-layout.gutter-0 .isotope-item {
  padding: 0;
  margin: 0;
}
.isotope-layout.gutter-5 .isotope-layout-inner {
  margin: 0 -5px;
}
.isotope-layout.gutter-5 .isotope-item {
  padding: 0 5px;
  margin: 0 0 10px;
}
.isotope-layout.gutter-10 .isotope-layout-inner {
  margin: 0 -10px;
}
.isotope-layout.gutter-10 .isotope-item {
  padding: 0 10px;
  margin: 0 0 20px;
}
.isotope-layout.gutter-15 .isotope-layout-inner {
  margin: 0 -15px;
}
.isotope-layout.gutter-15 .isotope-item {
  padding: 0 15px;
  margin: 0 0 30px;
}
.isotope-layout.gutter-20 .isotope-layout-inner {
  margin: 0 -20px;
}
.isotope-layout.gutter-20 .isotope-item {
  padding: 0 20px;
  margin: 0 0 40px;
}
.isotope-layout.gutter-30 .isotope-layout-inner {
  margin: 0 -30px;
}
.isotope-layout.gutter-30 .isotope-item {
  padding: 0 30px;
  margin: 0 0 60px;
}
.isotope-layout.gutter-40 .isotope-layout-inner {
  margin: 0 -40px;
}
.isotope-layout.gutter-40 .isotope-item {
  padding: 0 40px;
  margin: 0 0 80px;
}
.isotope-layout.gutter-50 .isotope-layout-inner {
  margin: 0 -50px;
}
.isotope-layout.gutter-50 .isotope-item {
  padding: 0 50px;
  margin: 0 0 100px;
}
.isotope-layout.gutter-60 .isotope-layout-inner {
  margin: 0 -60px;
}
.isotope-layout.gutter-60 .isotope-item {
  padding: 0 60px;
  margin: 0 0 120px;
}

/* -------- Isotop Item Media Query ---------- */
@media (max-width: 767px) {
  .isotope-layout .isotope-item {
    width: 33.2% !important;
  }
  .isotope-layout .isotope-item.tm-masonry-large-wide, .isotope-layout .isotope-item.tm-masonry-large-width-height {
    width: 100% !important;
  }
}
@media (max-width: 1024px) {
  .isotope-layout .isotope-item {
    width: 49.98% !important;
  }
  .isotope-layout .isotope-item.tm-masonry-large-wide, .isotope-layout .isotope-item.tm-masonry-large-width-height {
    width: 100% !important;
  }
}
@media (max-width: 991.98px) {
  .isotope-layout .isotope-item {
    width: 49.98% !important;
  }
  .isotope-layout .isotope-item.tm-masonry-large-wide, .isotope-layout .isotope-item.tm-masonry-large-width-height {
    width: 100% !important;
  }
}
@media (max-width: 767.98px) {
  .isotope-layout .isotope-item {
    width: 100% !important;
  }
  .isotope-layout .isotope-item.tm-masonry-large-wide, .isotope-layout .isotope-item.tm-masonry-large-width-height {
    width: 100% !important;
  }
}
@media (max-width: 575.98px) {
  .isotope-layout .isotope-item {
    width: 100% !important;
  }
  .isotope-layout .isotope-item.tm-masonry-large-wide, .isotope-layout .isotope-item.tm-masonry-large-width-height {
    width: 100% !important;
  }
}

.isotope-layout:not(.isotope-rendered) .isotope-item {
  float: left;
}
.isotope-layout:not(.isotope-rendered).grid-2 > .isotope-item {
  width: 50%;
}
.isotope-layout:not(.isotope-rendered).grid-3 > .isotope-item {
  width: 33%;
}
.isotope-layout:not(.isotope-rendered).grid-4 > .isotope-item {
  width: 25%;
}
.isotope-layout:not(.isotope-rendered).grid-5 > .isotope-item {
  width: 19%;
}
.isotope-layout:not(.isotope-rendered).grid-6 > .isotope-item {
  width: 16%;
}

/* --------------------------------------------------------------------------
 * 无 JS 兜底：不用 isotope 也能正确换行
 * -------------------------------------------------------------------------- */
.isotope-layout::after {
  content: "";
  display: table;
  clear: both;
}
.isotope-layout:not(.isotope-rendered) .isotope-layout-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.isotope-layout:not(.isotope-rendered) .isotope-item {
  float: none;
}