/* ==========================================================================
 * Bootstrap 栅格兼容层（evolta-compat 提供）
 *
 * ── 为什么需要 ──────────────────────────────────────────────────────────
 * 模板站（Evolta 主题）会加载 bootstrap v5.3.6，组件的部分皮肤直接使用了
 * Bootstrap 的栅格类，例如 Service Block 的 Creative 皮肤：
 *     <div class="image-column col-xl-5 col-md-6 col-sm-12">
 *     <div class="content-colmun col-xl-6 offset-xl-1 col-md-5 offset-md-1 col-sm-12">
 *
 * 本站用的是 Hello 主题，不带 Bootstrap。这些类没有对应规则 →
 * 每一列都是普通块级元素，宽度 100%，两栏直接竖着堆下来。
 * 组件自带的 CSS 里也没有这些栅格定义（它们本来由 Bootstrap 提供），
 * 所以必须在适配层补上。
 *
 * ── 为什么不直接加载完整 bootstrap.min.css ──────────────────────────────
 * 86KB，而且会改掉全站的 * { box-sizing }、body 字体、.container 宽度、
 * .btn 基础样式等，与 Hello + Elementor 的布局打架。
 * 这里只取「栅格」这一小块，并且全部限定在 mascot 组件内部，
 * 站点其它位置（原生 Elementor 组件、文章正文）完全不受影响。
 *
 * ── 数值 ────────────────────────────────────────────────────────────────
 * 断点与列宽均取自 Bootstrap 5.3.6 原值，未做改动：
 *   sm ≥ 576px   md ≥ 768px   lg ≥ 992px   xl ≥ 1200px
 *   5/12 = 41.66666667%   8/12 = 66.66666667%   10/12 = 83.33333333%
 * 只收录组件模板里实际出现过的类，不追求覆盖整张栅格表。
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 行容器与通用列
 *
 * box-sizing 必须显式补：Bootstrap 全局写了 * { box-sizing: border-box }，
 * 我们只搬栅格不带 reset。缺了它，列的 width:41.67% 之外还要再加左右各
 * 12px 内边距，三项相加超过 100%，两栏就被挤成上下两行 —— 这就是补栅格
 * 时最容易踩的坑。
 * -------------------------------------------------------------------------- */
[class*="elementor-widget-tm-ele-"] .row,
[class*="elementor-widget-tm-ele-"] .row > * {
  box-sizing: border-box;
}

[class*="elementor-widget-tm-ele-"] .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

[class*="elementor-widget-tm-ele-"] .row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

/* --------------------------------------------------------------------------
 * sm ≥ 576px
 * -------------------------------------------------------------------------- */
@media (min-width: 576px) {
  [class*="elementor-widget-tm-ele-"] .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
 * md ≥ 768px
 * -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  [class*="elementor-widget-tm-ele-"] .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  [class*="elementor-widget-tm-ele-"] .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  [class*="elementor-widget-tm-ele-"] .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  [class*="elementor-widget-tm-ele-"] .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  [class*="elementor-widget-tm-ele-"] .offset-md-1 {
    margin-left: 8.33333333%;
  }
}

/* --------------------------------------------------------------------------
 * lg ≥ 992px
 * -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  [class*="elementor-widget-tm-ele-"] .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  [class*="elementor-widget-tm-ele-"] .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  [class*="elementor-widget-tm-ele-"] .offset-lg-1 {
    margin-left: 8.33333333%;
  }
}

/* --------------------------------------------------------------------------
 * xl ≥ 1200px
 * -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  [class*="elementor-widget-tm-ele-"] .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  [class*="elementor-widget-tm-ele-"] .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  [class*="elementor-widget-tm-ele-"] .offset-xl-1 {
    margin-left: 8.33333333%;
  }
}