/* ===================================================================
   spoken.html（口语页）—— 只定义中间内容区
   头部 / 底部 / banner 复用 css/common.css + css/tutorinfo.css
   卡片基础样式复用 css/zhongkao.css，这里写差异与新组件
   =================================================================== */

/* ---------- 首屏：PC 纯色底 #E6E1FA（移动端用 spokenbannerm.jpg），文案 #08042C ---------- */
.sphero {
  background-color: #e6e1fa;
}
.sphero .tbhero-title,
.sphero .tbhero-sub {
  color: #08042c;
}
/* 移动端文案区上移量（本页专用，覆盖 tutorinfo.css 的 -120px） */
@media (max-width: 768px) {
  .sphero .tbhero-wrap {
    margin-top: -160px;
  }
}

/* PC 端首屏：内容图绝对定位贴右下，文案块 relative，副标题绝对定位 */
@media (min-width: 769px) {
  .sphero .tbhero-pic {
    width: auto;
    max-width: 850px;
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .sphero .tbhero-inner {
    position: relative;
  }
  .sphero .tbhero-title {
    margin-bottom: 70px;
  }
  .sphero .tbhero-sub {
    position: absolute;
    width: 470px;
  }
}

/* ---------- 一、多种场景随心切换（3 列瀑布流，图上已烤好中英文标题） ---------- */
.sp-scene {
  padding: 52px 30px 48px;
}
.sp-gray {
  color: #1c1c1c; /* 设计稿“随心切换”为中性深灰，实测最深像素 #1c1c1c */
}
.sp-masonry {
  display: flex;
  gap: 20px;
  margin-top: 45px;
}
.sp-masonry-m {
  display: none;
}
.sp-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sp-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.sp-card > img {
  display: block;
  width: 100%;
  height: auto;
}
/* 图上左下角中英文标签：设计稿实测 中文24px / 英文16px、左21px、底24px */
.sp-label {
  position: absolute;
  left: 21px;
  right: 21px;
  bottom: 24px;
  color: #fff;
  text-align: left;
}
.sp-label .sp-cn {
  display: block;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}
.sp-label .sp-en {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

/* ---------- 二、3大核心功能（文字块左侧 70px 为设计稿留白） ---------- */
.sp-fn .tb-fn-row:first-of-type {
  margin-top: 45px;
}
.sp-fn .tb-fn-text {
  width: 390px;
  padding-left: 70px;
  box-sizing: border-box;
}

/* 移动端专用换行（科技展会英文按移动稿断成两行），桌面隐藏 */
@media (min-width: 769px) {
  .sp-br {
    display: none;
  }
}

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
  .sp-scene {
    padding: 24px 0 28px; /* 左右 0：瀑布流占满容器内容宽（设计稿 358） */
  }
  /* 桌面 3 列 → 移动端换 2 列（顺序按移动稿：左 博物馆/城堡/农场，右 动物园/餐厅/科技展会/图书馆） */
  .sp-masonry {
    display: none;
  }
  .sp-masonry-m {
    display: flex;
    box-sizing: border-box;
    padding: 0 15px;
    gap: 10px;
    margin-top: 22px;
  }
  .sp-masonry-m .sp-col {
    gap: 10px;
  }
  /* 移动稿实测：中文 17px / 英文 10px、左 9px、底 14px、间距 9px */
  .sp-label {
    left: 9px;
    right: 9px;
    bottom: 14px;
  }
  .sp-label .sp-cn {
    font-size: 17px;
  }
  .sp-label .sp-en {
    margin-top: 9px;
    font-size: 10px;
  }
  /* 移动稿里农场、图书馆裁到 100px 高 */
  .sp-card--short {
    height: 100px;
  }
  .sp-card--short > img {
    height: 100%;
    object-fit: cover;
  }
  .sp-fn .tb-fn-text {
    width: 100%;
    padding-left: 0;
  }
}