/* =================================================================
 * baseline.css  — base=ant-tlc  (v1.0.0)
 * 适用：41 站中 base=ant-tlc 的 4 站（FUN88-TLC 风格的 Ant Design 栅格）。
 * 允许用 Ant Design 原生 class；禁止裸元素选择器。
 * 注意：v1.0.8 时把这些规则塞进了全局 sf-fallback.css 导致 2 站副作用，
 * 现在只挂载到 ant-tlc 的 4 站，且不再使用 !important。
 * 加载顺序：base.css → baseline.css → 主题 style → sf-fallback
 * ================================================================= */

/* -------- 1. 顶层容器 -------- */
.tlc-container-wrapper,
.ant-spin-nested-loading,
.ant-spin-container,
.layout-prepare,
.common-distance,
.common-distance-wrap,
.header-warp,
.sf-content,
.sf-home {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* -------- 2. Ant Design Row -------- */
.ant-row {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.ant-row-no-wrap { flex-wrap: nowrap; }

/* -------- 3. Ant Design Col: 24 栅格 -------- */
.ant-col {
  box-sizing: border-box;
  display: block;
  flex: 0 0 auto;
  min-height: 1px;
}
.ant-col-1  { width: 4.16666667%; }
.ant-col-2  { width: 8.33333333%; }
.ant-col-3  { width: 12.5%; }
.ant-col-4  { width: 16.66666667%; }
.ant-col-5  { width: 20.83333333%; }
.ant-col-6  { width: 25%; }
.ant-col-7  { width: 29.16666667%; }
.ant-col-8  { width: 33.33333333%; }
.ant-col-9  { width: 37.5%; }
.ant-col-10 { width: 41.66666667%; }
.ant-col-11 { width: 45.83333333%; }
.ant-col-12 { width: 50%; }
.ant-col-13 { width: 54.16666667%; }
.ant-col-14 { width: 58.33333333%; }
.ant-col-15 { width: 62.5%; }
.ant-col-16 { width: 66.66666667%; }
.ant-col-17 { width: 70.83333333%; }
.ant-col-18 { width: 75%; }
.ant-col-19 { width: 79.16666667%; }
.ant-col-20 { width: 83.33333333%; }
.ant-col-21 { width: 87.5%; }
.ant-col-22 { width: 91.66666667%; }
.ant-col-23 { width: 95.83333333%; }
.ant-col-24 { width: 100%; }

/* -------- 4. Header 高度锁定 -------- */
.header-warp,
.ant-layout-header,
.tlc-header {
  width: 100%;
  min-height: 64px;
}
@media (max-width: 768px) {
  .header-warp,
  .ant-layout-header,
  .tlc-header { min-height: 56px; }
}

/* -------- 5. Logo wrap -------- */
.logo-wrap {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

/* -------- 6. Ant Menu horizontal -------- */
.ant-menu-horizontal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: transparent;
}
.ant-menu-horizontal > .ant-menu-item,
.ant-menu-horizontal > .ant-menu-submenu {
  position: relative;
  padding: 0 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.ant-menu-submenu-popup,
.ant-menu-horizontal .ant-menu-submenu .ant-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  padding: 8px 0;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9000;
}
.ant-menu-horizontal > .ant-menu-submenu:hover > .ant-menu {
  opacity: 1;
  pointer-events: auto;
}

/* -------- 7. Platform Item (厂商 logo 卡) + 图片比例 -------- */
.platform-item,
.ant-col.platform-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 8px;
  box-sizing: border-box;
}
.platform-item__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.platform-item__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* -------- 8. Content-List / article / sf-card 兜底 -------- */
.Content-List {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  margin: 0;
  list-style: none;
}
.Content-List > li,
.Content-List > a {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}
.sf-card,
article.sf-card {
  max-width: 1200px;
  margin: 16px auto;
  padding: 16px;
  border-radius: 6px;
  box-sizing: border-box;
}

/* -------- 9. 图片容器（通用图片 aspect-ratio） -------- */
.tlc-image,
.tlc-card__media,
.sf-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
}
.tlc-image img,
.tlc-card__media img,
.sf-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* -------- 10. 响应式 -------- */
@media (max-width: 768px) {
  .ant-row { flex-direction: column; }
  .ant-col-1,.ant-col-2,.ant-col-3,.ant-col-4,.ant-col-5,.ant-col-6,
  .ant-col-7,.ant-col-8,.ant-col-9,.ant-col-10,.ant-col-11,.ant-col-12,
  .ant-col-13,.ant-col-14,.ant-col-15,.ant-col-16,.ant-col-17,.ant-col-18,
  .ant-col-19,.ant-col-20,.ant-col-21,.ant-col-22,.ant-col-23,.ant-col-24 {
    width: 100%;
  }
  .ant-menu-horizontal { flex-direction: column; width: 100%; }
}

/* -------- 11. 图片失败协同 -------- */
.sf-broken { visibility: hidden; }
.platform-item.sf-img-fail,
.tlc-image.sf-img-fail { display: none !important; }