/* ==========================================================================
   首页样式 home.css
   还原 React HomePage.tsx 的视觉效果
   桂面端：左侧 Sidebar 200px + 右侧大图横排（由 page-wrapper/page-body 实现）
   移动端：纵向堆叠（菜单在上，大图在下）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 首页主内容区 - 内容满高，可滚动
   -------------------------------------------------------------------------- */
#main-content.flex-1 {
  background-color: #fff;
}

/* --------------------------------------------------------------------------
   2. 移动端响应式：≤768px 纵向堆叠
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 首页布局：从横排改为纵向堆叠（page-body 已处理） */
  body.is-home .page-body {
    flex-direction: column;
  }

  /* 侧栏容器在移动端不占据空间，sidebar 为 fixed 定位抽屉 */
  body.is-home #sidebar-container {
    width: 0;
    height: 0;
    overflow: visible;
  }

  /* 主内容区铺满 */
  body.is-home #main-content {
    width: 100%;
    margin-left: 0;
  }

  /* KV 图全宽自适应 */
  body.is-home #main-content img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* ========== 品牌介绍区块 ========== */
.brand-intro {
    max-width: 800px;
    margin: 60px auto;
    padding: 40px 24px;
    text-align: center;
}

.brand-intro__title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333;
}

.brand-intro__slogan {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #444;
}

.brand-intro__desc {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 16px;
    color: #666;
}

.brand-intro__products {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
}