.bbk-blog-hero{position:relative;overflow:hidden;padding:74px 0 48px;text-align:center;background:radial-gradient(circle at 12% 18%,rgba(var(--bbk-primary-rgb),.13),transparent 25%),radial-gradient(circle at 88% 78%,rgba(72,170,240,.12),transparent 24%),var(--bbk-surface)}
.bbk-blog-hero::after{position:absolute;top:-90px;left:50%;width:760px;height:340px;border:1px solid rgba(var(--bbk-primary-rgb),.09);border-radius:50%;content:"";transform:translateX(-50%)}
.bbk-blog-hero-inner{position:relative;z-index:1}
.bbk-blog-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;color:var(--bbk-primary);border:1px solid rgba(var(--bbk-primary-rgb),.15);border-radius:999px;background:var(--bbk-soft-purple);font-size:11px;font-weight:850;letter-spacing:.08em}
.bbk-blog-hero h1{margin:18px 0 13px;color:var(--bbk-deep);font-size:clamp(43px,5.2vw,66px);font-weight:930;line-height:1.1;letter-spacing:-.055em}
.bbk-blog-hero h1 span{color:var(--bbk-primary)}
.bbk-blog-hero>div>p{max-width:720px;margin:0 auto;color:var(--bbk-muted);font-size:16px;line-height:1.8}
.bbk-blog-search{display:flex;align-items:center;max-width:700px;height:58px;padding:6px 6px 6px 18px;margin:27px auto 21px;border:1px solid rgba(var(--bbk-primary-rgb),.17);border-radius:17px;background:var(--bbk-surface);box-shadow:0 18px 48px rgba(54,38,107,.12)}
.bbk-blog-search>i{color:var(--bbk-primary)}
.bbk-blog-search input{min-width:0;flex:1;height:44px!important;min-height:44px!important;padding:0 13px;border:0!important;background:transparent!important;box-shadow:none!important;font-size:13px}
.bbk-blog-search button{height:44px;padding:0 22px;color:#fff;border:0;border-radius:12px;background:var(--bbk-primary);font-size:12px;font-weight:850}
.bbk-blog-category-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.bbk-blog-category-nav a{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;color:var(--bbk-muted);border:1px solid var(--bbk-border);border-radius:999px;background:var(--bbk-surface);font-size:11px;font-weight:750}
.bbk-blog-category-nav a:hover,.bbk-blog-category-nav a.active{color:#fff;border-color:var(--bbk-primary);background:var(--bbk-primary);box-shadow:0 8px 20px rgba(var(--bbk-primary-rgb),.22)}
.bbk-blog-featured,.bbk-blog-list-section{padding:58px 0;background:var(--bbk-soft)}
.bbk-blog-featured{border-top:1px solid var(--bbk-border)}
.bbk-blog-list-section{padding-top:10px;padding-bottom:80px}
.bbk-blog-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.bbk-blog-section-head small{display:block;margin-bottom:5px;color:var(--bbk-primary);font-size:10px;font-weight:850;letter-spacing:.08em}
.bbk-blog-section-head h2{margin:0;color:var(--bbk-deep);font-size:30px;font-weight:900;letter-spacing:-.035em}
.bbk-blog-section-head>span{color:var(--bbk-muted);font-size:10px}
.bbk-blog-featured-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr);grid-template-rows:repeat(2,1fr);gap:14px}
.bbk-blog-feature-card{display:grid;grid-template-columns:180px minmax(0,1fr);min-height:190px;overflow:hidden;border:1px solid var(--bbk-border);border-radius:20px;background:var(--bbk-surface);box-shadow:var(--bbk-shadow-sm)}
.bbk-blog-feature-card.is-main{grid-row:1/3;grid-template-columns:1fr;grid-template-rows:280px auto}
.bbk-blog-feature-media,.bbk-blog-card-media{display:block;min-width:0;overflow:hidden;background:var(--bbk-soft-purple)}
.bbk-blog-cover-image{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.bbk-blog-feature-card:hover .bbk-blog-cover-image,.bbk-blog-card:hover .bbk-blog-cover-image{transform:scale(1.035)}
.bbk-blog-cover-fallback{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;width:100%;height:100%;min-height:150px;color:#fff;background:linear-gradient(135deg,#7150e6,#9a7cf4)}
.bbk-blog-cover-fallback.is-blue{background:linear-gradient(135deg,#2776da,#62b5f2)}
.bbk-blog-cover-fallback.is-green{background:linear-gradient(135deg,#16856a,#61c5a7)}
.bbk-blog-cover-fallback.is-orange{background:linear-gradient(135deg,#e58a25,#f3bd5f)}
.bbk-blog-cover-fallback i{font-size:34px}.bbk-blog-cover-fallback small{font-size:11px;font-weight:850;letter-spacing:.08em}
.bbk-blog-feature-copy{padding:22px}.bbk-blog-feature-card.is-main .bbk-blog-feature-copy{padding:28px}
.bbk-blog-card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--bbk-muted);font-size:9px}
.bbk-blog-card-meta span,.bbk-blog-card-meta a{color:var(--bbk-primary);font-weight:850}
.bbk-blog-feature-copy h3{margin:10px 0 8px;color:var(--bbk-deep);font-size:18px;font-weight:870;line-height:1.45}
.bbk-blog-feature-card.is-main h3{font-size:26px}.bbk-blog-feature-copy p{display:-webkit-box;overflow:hidden;margin:0;color:var(--bbk-muted);font-size:11px;line-height:1.75;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.bbk-blog-read{display:inline-flex;align-items:center;gap:7px;margin-top:15px;color:var(--bbk-primary);font-size:10px;font-weight:850}
.bbk-blog-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bbk-blog-card{overflow:hidden;border:1px solid var(--bbk-border);border-radius:20px;background:var(--bbk-surface);box-shadow:var(--bbk-shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.bbk-blog-card:hover{box-shadow:var(--bbk-shadow);transform:translateY(-3px)}
.bbk-blog-card-media{height:auto;aspect-ratio:3/2}.bbk-blog-card-copy{padding:19px}
.bbk-blog-card h3{margin:10px 0 8px;color:var(--bbk-deep);font-size:17px;font-weight:870;line-height:1.5}
.bbk-blog-card-copy>p{display:-webkit-box;overflow:hidden;margin:0;color:var(--bbk-muted);font-size:10px;line-height:1.7;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.bbk-blog-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:13px;margin-top:14px;border-top:1px solid var(--bbk-border);color:var(--bbk-muted);font-size:9px}
.bbk-blog-card-foot a{color:var(--bbk-primary);font-weight:850}
.bbk-blog-pagination{display:flex;justify-content:center;gap:7px;margin-top:30px}
.bbk-blog-pagination .page-numbers{display:grid;place-items:center;min-width:39px;height:39px;padding:0 12px;border:1px solid var(--bbk-border);border-radius:10px;background:var(--bbk-surface);font-size:11px;font-weight:800}
.bbk-blog-pagination .current,.bbk-blog-pagination a:hover{color:#fff;border-color:var(--bbk-primary);background:var(--bbk-primary)}
.bbk-blog-empty{padding:62px 20px;border:1px dashed rgba(var(--bbk-primary-rgb),.25);border-radius:20px;background:var(--bbk-surface);text-align:center}.bbk-blog-empty>i{color:var(--bbk-primary);font-size:34px}.bbk-blog-empty h3{margin:15px 0 7px;color:var(--bbk-deep)}.bbk-blog-empty p{color:var(--bbk-muted);font-size:11px}.bbk-blog-empty a{color:var(--bbk-primary);font-size:11px;font-weight:850}
.bbk-home-blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bbk-home-blog-card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px;border:1px solid var(--bbk-border);border-radius:17px;background:var(--bbk-surface);box-shadow:var(--bbk-shadow-sm)}
.bbk-home-blog-cover{display:block;overflow:hidden;border-radius:12px;background:var(--bbk-soft-purple)}.bbk-home-blog-cover img,.bbk-home-blog-cover .bbk-cover-fallback{width:100%;height:100%;object-fit:cover}
.bbk-home-blog-icon{display:grid;place-items:center;width:54px;height:54px;color:var(--bbk-primary);border-radius:15px;background:var(--bbk-soft-purple);font-size:19px}.bbk-home-blog-icon.is-blue{color:#2776da;background:#eaf5ff}.bbk-home-blog-icon.is-green{color:#16856a;background:#e9f8f3}.bbk-home-blog-icon.is-orange{color:#d97a17;background:#fff3e2}
.bbk-home-blog-card small{display:block;color:var(--bbk-primary);font-size:8px;font-weight:800}.bbk-home-blog-card h3{margin:5px 0;color:var(--bbk-deep);font-size:14px;font-weight:850;line-height:1.45}.bbk-home-blog-card p{display:-webkit-box;overflow:hidden;margin:0;color:var(--bbk-muted);font-size:9px;line-height:1.6;-webkit-box-orient:vertical;-webkit-line-clamp:2}
@media(max-width:991.98px){.bbk-blog-featured-grid{grid-template-columns:1fr;grid-template-rows:auto}.bbk-blog-feature-card.is-main{grid-row:auto}.bbk-blog-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767.98px){.bbk-blog-hero{padding:48px 0 35px}.bbk-blog-hero h1{font-size:38px}.bbk-blog-hero>div>p{font-size:13px}.bbk-blog-search{height:53px;padding:5px 5px 5px 13px}.bbk-blog-search input{font-size:11px}.bbk-blog-search button{height:41px;padding:0 14px;font-size:10px}.bbk-blog-category-nav{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.bbk-blog-category-nav a{flex:0 0 auto}.bbk-blog-featured{padding:42px 0}.bbk-blog-list-section{padding-bottom:58px}.bbk-blog-section-head{align-items:flex-start;flex-direction:column}.bbk-blog-section-head h2{font-size:26px}.bbk-blog-feature-card,.bbk-blog-feature-card.is-main{grid-template-columns:1fr;grid-template-rows:190px auto}.bbk-blog-feature-card.is-main h3{font-size:21px}.bbk-blog-card-grid,.bbk-home-blog-grid{grid-template-columns:1fr}.bbk-blog-card-media{height:auto}.bbk-home-blog-card{grid-template-columns:120px minmax(0,1fr);gap:12px;padding:12px}}

/*
 * 教程库瀑布流：PC 五列、平板三至四列、手机两列。
 * 采用 CSS columns 保留自然高低差，避免脚本重排导致首屏跳动。
 */
.bbk-blog-card-grid,
.bbk-home-blog-grid {
  display: block;
  columns: 5;
  column-gap: 15px;
}
.bbk-blog-card,
.bbk-home-blog-card {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 100%;
  margin: 0 0 15px;
  break-inside: avoid;
  border: 1px solid var(--bbk-border);
  border-radius: 18px;
  background: var(--bbk-surface);
  box-shadow: 0 8px 24px rgba(45, 31, 91, .08);
  vertical-align: top;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.bbk-blog-card::after,
.bbk-home-blog-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34px;
  height: 34px;
  content: "";
  pointer-events: none;
  background: linear-gradient(135deg, transparent 49%, rgba(var(--bbk-primary-rgb), .22) 50%);
}
.bbk-blog-card:hover,
.bbk-home-blog-card:hover {
  border-color: rgba(var(--bbk-primary-rgb), .3);
  box-shadow: 0 16px 38px rgba(45, 31, 91, .14);
  transform: translateY(-3px);
}
.bbk-blog-card-media,
.bbk-home-blog-cover {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  background: var(--bbk-soft-purple);
}
.bbk-blog-card:nth-child(5n + 2) .bbk-blog-card-media,
.bbk-home-blog-card:nth-child(5n + 2) .bbk-home-blog-cover { aspect-ratio: 1 / 1; }
.bbk-blog-card:nth-child(5n + 4) .bbk-blog-card-media,
.bbk-home-blog-card:nth-child(5n + 4) .bbk-home-blog-cover { aspect-ratio: 3 / 2; }
.bbk-blog-card-media img,
.bbk-blog-card-media .bbk-cover-fallback,
.bbk-home-blog-cover img,
.bbk-home-blog-cover .bbk-cover-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bbk-blog-media-label {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  padding: 0 9px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 8px;
  background: rgba(33, 25, 49, .76);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.bbk-blog-card-copy,
.bbk-home-blog-copy { padding: 15px 15px 17px; }
.bbk-blog-card-meta {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 5px 9px;
  font-size: 12px;
  line-height: 1.45;
}
.bbk-blog-card h3,
.bbk-home-blog-card h3 {
  margin: 9px 0 7px;
  color: var(--bbk-deep);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.5;
}
.bbk-blog-card-copy > p,
.bbk-home-blog-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--bbk-muted);
  font-size: 14px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.bbk-blog-card:nth-child(3n + 1) .bbk-blog-card-copy > p,
.bbk-home-blog-card:nth-child(3n + 1) p { -webkit-line-clamp: 2; }
.bbk-blog-card:nth-child(3n + 3) .bbk-blog-card-copy > p,
.bbk-home-blog-card:nth-child(3n + 3) p { -webkit-line-clamp: 4; }
.bbk-blog-card-foot,
.bbk-home-blog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 11px;
  margin-top: 12px;
  color: var(--bbk-muted);
  border-top: 1px solid var(--bbk-border);
  font-size: 12px;
  line-height: 1.4;
}
.bbk-blog-card-foot a,
.bbk-home-blog-foot a { color: var(--bbk-primary); font-weight: 800; }
.bbk-home-blog-copy > small {
  display: block;
  color: var(--bbk-muted);
  font-size: 12px;
  font-weight: 650;
}
.bbk-blog-eyebrow,
.bbk-blog-category-nav a,
.bbk-blog-section-head small,
.bbk-blog-section-head > span,
.bbk-blog-read,
.bbk-blog-pagination .page-numbers,
.bbk-blog-empty p,
.bbk-blog-empty a { font-size: 14px; }
.bbk-blog-search input { font-size: 15px; }
.bbk-blog-search button { font-size: 14px; }
.bbk-home-blog-section { background: var(--bbk-soft); }

@media (max-width: 1279.98px) {
  .bbk-blog-card-grid,
  .bbk-home-blog-grid { columns: 4; }
}

@media (max-width: 991.98px) {
  .bbk-blog-card-grid,
  .bbk-home-blog-grid { columns: 3; }
}

@media (max-width: 767.98px) {
  .bbk-blog-hero > div > p { font-size: 15px; }
  .bbk-blog-search input { font-size: 14px; }
  .bbk-blog-search button { font-size: 14px; }
  .bbk-blog-category-nav a { font-size: 14px; }
  .bbk-blog-card-grid,
  .bbk-home-blog-grid {
    columns: 2;
    column-gap: 11px;
  }
  .bbk-blog-card,
  .bbk-home-blog-card {
    display: inline-block;
    margin-bottom: 11px;
    border-radius: 15px;
  }
  .bbk-blog-card-copy,
  .bbk-home-blog-copy { padding: 12px 12px 14px; }
  .bbk-blog-media-label {
    top: 8px;
    left: 8px;
    min-height: 25px;
    padding: 0 8px;
    font-size: 12px;
  }
  .bbk-blog-card h3,
  .bbk-home-blog-card h3 {
    margin: 8px 0 6px;
    font-size: 15px;
    line-height: 1.48;
  }
  .bbk-blog-card-copy > p,
  .bbk-home-blog-card p {
    font-size: 13px;
    line-height: 1.6;
    -webkit-line-clamp: 3;
  }
  .bbk-blog-card-meta,
  .bbk-home-blog-copy > small,
  .bbk-blog-card-foot,
  .bbk-home-blog-foot { font-size: 12px; }
  .bbk-blog-card-foot,
  .bbk-home-blog-foot {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 374.98px) {
  .bbk-blog-card-grid,
  .bbk-home-blog-grid { column-gap: 8px; }
  .bbk-blog-card,
  .bbk-home-blog-card { margin-bottom: 8px; }
  .bbk-blog-card-copy,
  .bbk-home-blog-copy { padding: 10px; }
}