/* ==========================================================================
   首页 / 分类页组件（技术方案 3.2–3.7）
   结构与 class 名沿用 mockup；视觉数值按 Figma（出入见 PRD-9544-设计出入记录.md）
   ========================================================================== */

/* ---------- 文章网格 + 分页（Figma 2:4070） ---------- */
/* 提高网格所在整行的层级：Divi 每个 column 都是 z-index:2 的独立层级，首页原有的下一行（推广图 et_pb_row_3）
   有 margin-top:-27px，往上伸进网格行，层级相同时后面的会盖住分页按钮的点击区域 */
.et_pb_row:has(.btse-grid-section) {
  z-index: 3;
}

/* 分类导航那一行要比网格行（3）更高，否则吸顶后滚到网格上方时会被文章卡片盖住 */
.et_pb_row:has(.btse-catnav) {
  z-index: 4;
}

.btse-grid-section {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 0;
  font-family: Inter, inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

/* Divi 会给标题设 letter-spacing:-1px、全站 line-height:22.4px，Use Any Font 会单独给 a / p 设字体，这里统一收回 */
.btse-grid-section h2,
.btse-grid-section h3,
.btse-grid-section p,
.btse-grid-section a,
.btse-grid-section span,
.btse-grid-section nav {
  font-family: inherit;
  letter-spacing: 0;
}

/* flex（按 mockup）：块级的话 h2 的 margin-bottom 会和这里的 20px 合并，少 5px */
.btse-grid-section .shead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.btse-grid-section .shead h2 {
  margin: 0 0 5px;
  padding: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #0B0D0E;
}

.btse-grid-section .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  transition: opacity 0.15s ease;
}

.btse-grid-section[aria-busy='true'] .grid {
  opacity: 0.5;
}

.btse-grid-section .card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #E4E7EC;
  border-radius: 10px;
  background: #FFFFFF;
}

.btse-grid-section .th {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #EEF4FF; /* 没有特色图片时的占位底色 */
}

.btse-grid-section .th img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.btse-grid-section .bd {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 15px 16px 17px;
}

/* 分类 pill（H12a）：字距 .07em 保留，Figma 里 pill 的实际宽度要靠它对上 */
.btse-grid-section .b-tag {
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 999px;
  background: #EEF4FF;
  font-size: 10.5px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #0149B8;
}

/* 标题限 3 行（H12）。#main-content 前缀：交付的 btse-blog.css PART 0 有 #main-content h1–h6 { line-height:1.3 }，
   带 ID 优先级更高，不加会把 1.42 压成 1.3 */
.btse-grid-section .card h3,
#main-content .btse-grid-section .card h3 {
  display: -webkit-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.42;
  color: #0B0D0E;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.btse-grid-section .card h3 a {
  color: inherit;
  text-decoration: none;
}

.btse-grid-section .card p {
  display: -webkit-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  color: #5A6472;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.btse-grid-section .cmeta {
  margin-top: auto;
  font-size: 12px;
  font-weight: 400;
  color: #8A94A6;
}

.btse-grid-section .btse-grid-empty {
  grid-column: 1 / -1;
  padding: 40px 0;
  font-size: 14px;
  text-align: center;
  color: #5A6472;
}

/* 数字分页 */
.btse-grid-section .pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 28px;
}

.btse-grid-section .chip {
  padding: 7px 12px;
  border: 1px solid #E4E7EC;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 12.5px;
  font-weight: 400;
  line-height: normal;
  color: #5A6472;
  text-decoration: none;
}

.btse-grid-section a.chip:hover {
  border-color: #015FE5;
  color: #015FE5;
}

.btse-grid-section .chip.on {
  border-color: #015FE5;
  background: #015FE5;
  color: #FFFFFF;
}

.btse-grid-section a.chip:focus-visible {
  outline: 2px solid #015FE5;
  outline-offset: 2px;
}

/* ---------- 分类导航（Figma 2:4057，H7）：Divi Menu 模块 + CSS Class btse-catnav ---------- */
/* 通栏白底 97% + 背景模糊（mockup）；吸顶用 Divi 原生 Scroll Effects（checklist H7），这里不写 sticky
   .et_pb_row 前缀：Divi 给模块生成的 .et_pb_menu_0.et_pb_menu { background-color:#fff } 优先级相同且在后面 */
.et_pb_row .btse-catnav.et_pb_menu {
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: Inter, inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.btse-catnav .et_pb_menu_inner_container {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* min-width:0：不让 10 个分类把外层撑出屏幕，放不下时在 .et_pb_menu__menu 里横向滚动 */
.btse-catnav .et_pb_menu__wrap {
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
}

/* Divi Menu 模块在 ≤980px 会隐藏横向菜单、换成汉堡按钮；这里始终显示横向导航，放不下时横向滚动（mockup） */
.btse-catnav .et_mobile_nav_menu {
  display: none !important;
}

.btse-catnav .et_pb_menu__menu {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.btse-catnav .et_pb_menu__menu::-webkit-scrollbar {
  display: none;
}

/* 不换行：Divi 有 .et_pb_menu .et_pb_menu__menu > nav > ul { flex-wrap:wrap }，选择器要比它重
   项间距 2.5px：链接左右各 14px + 2.5px = 30.5px，按 Figma 首尾两项的总跨度反算（mockup 是 4px，出入记录 #7） */
.btse-catnav .et-menu-nav,
.btse-catnav.et_pb_menu .et_pb_menu__menu > nav > ul.et-menu {
  display: flex;
  flex-wrap: nowrap;
  gap: 2.5px;
  margin: 0;
  padding: 0;
}

.btse-catnav.et_pb_menu .et-menu > li {
  margin: 0;
  padding: 0;
  line-height: normal;
}

/* 链接：700 / 13.5px（Figma），上下 15、左右 14，底部 2px 透明边留给选中态下划线 */
.btse-catnav.et_pb_menu .et-menu > li > a {
  display: block;
  padding: 15px 14px;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
  color: #5A6472;
  white-space: nowrap;
  opacity: 1;
}

.btse-catnav.et_pb_menu .et-menu > li > a:hover {
  color: #015FE5;
  opacity: 1;
}

/* 选中态：蓝字 + 2px 蓝色下划线（checklist H7 要求做 mockup 的这条下划线） */
.btse-catnav.et_pb_menu .et-menu > li.current-menu-item > a {
  border-bottom-color: #015FE5;
  color: #015FE5;
}

.btse-catnav.et_pb_menu .et-menu > li > a:focus-visible {
  outline: 2px solid #015FE5;
  outline-offset: -2px;
}

/* ---------- Hero（Figma 2:3978，H4）：[btse_hero]，B 在 Featured 上方单独一行放 Code 模块 ---------- */
/* 上 35（header 底 → H1）；下 35 由 Featured 那一行的 padding-top 负责 */
.et_pb_row:has(.btse-hero) {
  width: 100%;
  max-width: none;
  padding: 0;
}

.btse-hero {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 35px 24px 0;
  font-family: Inter, inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* #main-content 前缀：交付的 btse-blog.css 有 #main-content h1 { line-height:1.3 }；Divi 标题默认 letter-spacing:-1px */
.btse-hero h1,
#main-content .btse-hero h1 {
  margin: 0 0 12px;
  padding: 0;
  font-family: inherit;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0;
  color: #0B0D0E;
}

.btse-hero p {
  max-width: 70ch; /* mockup；Figma 是单行，未限制 */
  margin: 0;
  padding: 0;
  font-size: 17.5px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0;
  color: #5A6472;
}

/* ---------- Featured + Hot Topics 一整行（Figma 2:3981，H6 + H14 + H15） ----------
   B 只需在同一列里依次放：Post Slider（CSS Class btse-featured）、Code 模块 [btse_hot_topics]（CSS Class btse-hot）
   这里把那一列改成两栏网格：左 = 标题行 + 轮播，右 = Hot Topics（跨两行），两边等高（用 grid stretch，不用 height:100%） */
/* 上下间距按 Figma：hero 底 → 这一行 35px，这一行底 → 分类导航 41px */
.et_pb_row:has(.btse-featured) {
  width: 100%;
  max-width: none;
  padding: 35px 0 41px;
}

.et_pb_column:has(> .btse-featured) {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  grid-template-rows: auto 1fr;
  column-gap: 36px;
  row-gap: 16px;
  align-items: stretch;
  float: none;
  width: 100%;
  max-width: 1200px;
  padding: 0 24px;
  font-family: Inter, inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 居中：Divi 的 .et_pb_row .et_pb_column:last-child { margin-right:0 !important } 会让 margin:0 auto 只剩左边生效，整列被推到右侧 */
.et_pb_section .et_pb_row .et_pb_column:has(> .btse-featured) {
  margin-left: auto !important;
  margin-right: auto !important;
}

.et_pb_column:has(> .btse-featured) > * {
  margin: 0 !important; /* Divi 给模块之间加的 margin-bottom */
}

/* 标题行「Featured」：圆点、箭头由下面的规则移到这一行右侧 */
.btse-featured-head {
  display: flex;
  align-items: center;
  min-height: 34px;
  grid-column: 1;
  grid-row: 1;
}

.btse-featured-head h2,
#main-content .btse-featured-head h2 {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: #0B0D0E;
}

/* 轮播卡片：白底、1px 描边、圆角 10，图左 58% / 文右（H14）
   .et_pb_column 前缀 + !important：Additional CSS 里有旧轮播的 .et_pb_post_slider.et_pb_post_slider_0 { background-color:#0551b6 !important } */
.et_pb_column .btse-featured.et_pb_slider {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  overflow: visible; /* 圆点和箭头要伸到卡片上方的标题行 */
  border: 1px solid #E4E7EC;
  border-radius: 10px;
  background: #FFFFFF !important;
}

.btse-featured .et_pb_slides {
  height: 100%;
  overflow: hidden;
  border-radius: 9px;
}

.et_pb_column .btse-featured .et_pb_slide {
  height: 100%;
  padding: 0;
  background: #FFFFFF !important;
}

.btse-featured .et_pb_slide .et_pb_container {
  width: 100%;
  max-width: none;
  height: 100% !important; /* Divi 的轮播脚本会写内联高度 */
  min-height: 0 !important;
}

.btse-featured .et_pb_slider_container_inner {
  display: grid;
  grid-template-columns: 58% minmax(0, 1fr);
  width: 100%;
  height: 100%;
}

/* 图片绝对定位铺满左栏：不参与高度计算，整行高度由 Hot Topics 决定（Figma 402.4） */
.btse-featured .et_pb_slide .et_pb_slide_image {
  position: relative;
  top: 0 !important; /* Divi 用 top:50% + 内联负 margin-top 做垂直居中，这里不需要 */
  display: block !important;
  width: auto;
  height: 100%;
  margin: 0 !important;
  overflow: hidden;
  transform: none !important;
  background: #EEF4FF;
}

/* 图片框（约 455×350）比特色图片（16:9）方：cover 会裁掉 banner 右侧的字（验收文档主站 #1）
   改为整张显示（contain），上下空出的部分用同一张图放大模糊垫底；底图地址由 home.js 写进 --btse-slide-bg */
.btse-featured .et_pb_slide .et_pb_slide_image::before {
  content: '';
  position: absolute;
  inset: -24px;
  background: var(--btse-slide-bg, none) center / cover no-repeat;
  filter: blur(16px);
}

.btse-featured .et_pb_slide .et_pb_slide_image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none !important;
  object-fit: contain;
}

/* 文字区：pill → 标题 → 摘要，垂直居中，间距 10（Figma）
   Divi 的顺序是「标题 → .et_pb_slide_content（meta + 摘要）」，用 display:contents + order 调换 */
.btse-featured .et_pb_slide .et_pb_slide_description {
  display: flex !important; /* Additional CSS 在 ≤980px 会隐藏这一块 */
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: auto;
  margin: 0;
  padding: 24px 26px !important;
  text-align: left;
  text-shadow: none;
}

.et_pb_column .btse-featured .et_pb_slide .et_pb_slide_content {
  display: contents !important;
}

/* !important：Divi 有 .et_pb_slide_content .post-meta { font-size:13px !important } */
.et_pb_column .btse-featured .et_pb_slide_content .post-meta {
  display: block;
  order: 1;
  align-self: flex-start;
  margin: 0;
  padding: 0;
  font-size: 0 !important; /* 藏掉「by 作者 | 日期 | … | N Comments」里的文字和分隔符 */
  line-height: 0;
}

.btse-featured .post-meta .author,
.btse-featured .post-meta .published,
.btse-featured .post-meta > a:not(:first-of-type) {
  display: none;
}

/* 分类 pill：只留第一个分类链接（Divi 按分类排序输出全部分类）
   字号 !important：Divi 有 .et_pb_slide_content .post-meta a { font-size:13px !important } */
.et_pb_column .btse-featured .et_pb_slide_content .post-meta > a:first-of-type {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  background: #EEF4FF;
  font-family: inherit;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: normal;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #0149B8 !important;
  text-decoration: none;
}

.btse-featured.et_pb_slider .et_pb_slide_description .et_pb_slide_title,
#main-content .btse-featured.et_pb_slider .et_pb_slide_description .et_pb_slide_title {
  display: -webkit-box;
  order: 2;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: inherit;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: #0B0D0E;
  text-shadow: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.btse-featured .et_pb_slide_title a {
  font-family: inherit;
  color: inherit;
  text-decoration: none;
}

.et_pb_column .btse-featured .et_pb_slide_content > div {
  display: -webkit-box;
  order: 3;
  overflow: hidden;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: #5A6472;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.btse-featured .et_pb_slide_content > div p {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

/* 圆点 + 箭头：移到卡片上方标题行的右侧（Figma：圆点在左、‹ › 在右，间距 8） */
.btse-featured .et-pb-slider-arrows {
  position: absolute;
  top: -50px; /* 标题行高 34 + 行间距 16 */
  right: 0;
  display: flex;
  gap: 8px;
}

.btse-featured.et_pb_slider .et-pb-arrow-prev,
.btse-featured.et_pb_slider .et-pb-arrow-next,
.btse-featured.et_pb_slider:hover .et-pb-arrow-prev,
.btse-featured.et_pb_slider:hover .et-pb-arrow-next {
  position: static;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 1px solid #E4E7EC;
  border-radius: 50%;
  background: #FFFFFF;
  font-size: 0;
  color: #5A6472;
  opacity: 1;
  transform: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btse-featured .et-pb-arrow-prev::before,
.btse-featured .et-pb-arrow-next::before {
  font-family: Inter, inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: inherit;
}

.btse-featured .et-pb-arrow-prev::before {
  content: '‹';
}

.btse-featured .et-pb-arrow-next::before {
  content: '›';
}

.btse-featured.et_pb_slider .et-pb-arrow-prev:hover,
.btse-featured.et_pb_slider .et-pb-arrow-next:hover {
  border-color: #015FE5;
  color: #015FE5;
}

.btse-featured .et-pb-controllers {
  position: absolute;
  top: -36.5px; /* 和 34px 高的箭头垂直居中 */
  right: 84px;  /* 两个箭头 34 + 8 + 34，再隔 8 */
  bottom: auto;
  left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  width: auto;
  height: 7px;
  margin: 0;
  text-align: left;
}

.btse-featured .et-pb-controllers a {
  width: 7px;
  height: 7px;
  margin: 0;
  border-radius: 50%;
  background: #D3DAE4;
  opacity: 1;
  text-indent: -9999px;
  transition: width 0.2s ease, background 0.2s ease;
}

.btse-featured .et-pb-controllers a:hover {
  background: #9FB2C8;
}

.btse-featured .et-pb-controllers a.et-pb-active-control {
  width: 20px;
  border-radius: 999px;
  background: #0260E5;
}

.btse-featured .et-pb-arrow-prev:focus-visible,
.btse-featured .et-pb-arrow-next:focus-visible,
.btse-featured .et-pb-controllers a:focus-visible {
  outline: 2px solid #015FE5;
  outline-offset: 2px;
}

/* Hot Topics（H15）：跨两行，和左边标题行 + 轮播一起等高；用 flex 撑满，不用 height:100% */
.et_pb_module.btse-hot {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  grid-row: 1 / span 2;
}

.btse-hot .et_pb_code_inner {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.btse-hot-topics {
  box-sizing: border-box;
  flex: 1;
  padding: 18px 20px 8px;
  border: 1px solid #E4E7EC;
  border-radius: 10px;
  background: #FFFFFF;
  line-height: normal;
}

.btse-hot-topics h2,
.btse-hot-topics ol,
.btse-hot-topics li,
.btse-hot-topics a,
.btse-hot-topics span {
  font-family: inherit;
  letter-spacing: 0;
}

.btse-hot-topics h2,
#main-content .btse-hot-topics h2 {
  margin: 0 0 4px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #0B0D0E;
}

.btse-hot-topics ol.hotlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.btse-hot-topics ol.hotlist li {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid #E4E7EC;
  line-height: normal;
}

.btse-hot-topics ol.hotlist li:last-child {
  border-bottom: 0;
}

.btse-hot-topics ol.hotlist a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #1F2328;
  text-decoration: none;
}

.btse-hot-topics .tth {
  flex: 0 0 auto;
  width: 84px;
  height: 60px;
  overflow: hidden;
  border-radius: 5px;
  background: #EEF4FF;
}

.btse-hot-topics .tth img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.btse-hot-topics .tbody {
  min-width: 0;
}

.btse-hot-topics .ttx {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.42;
  color: #1F2328;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.btse-hot-topics ol.hotlist a:hover .ttx {
  color: #015FE5;
}

.btse-hot-topics .tmeta {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 400;
  color: #8A94A6;
}