/* Widget 16 — the blog index (/blog/), blog design system v2 (v2_browse.index_page).
   Runs the full 1320 shell: staging's 1240 (defect D1) came from Astra's 40px article padding. */
.hc-blog-index .ast-article-single { padding: 0; margin: 0; background: transparent; }
.hc-blog-index #primary { margin: 0; }
.hc-bi { padding: 72px 0 120px; }

/* ---- Hero ---- */
.hc-bi__hero { display: flex; align-items: center; justify-content: space-between; gap: 56px; }
.hc-bi__hero-copy { display: flex; flex-direction: column; gap: 18px; flex: 1 1 auto; min-width: 0; }
.hc-bi__eyebrow { margin-top: 18px; }
.hc-blog-index .hc-bi__title {
  margin: 0;
  font-size: 52px;
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: -1.6px;
  color: var(--hc-text);
  text-wrap: balance;
}
.hc-bi__sub { max-width: 620px; margin: 0; font-size: 20px; line-height: 1.6; color: var(--hc-body); text-wrap: pretty; }
.hc-bi__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 8px; font-size: 15px; color: var(--hc-body); }
.hc-bi__stats strong { font-weight: 600; color: var(--hc-text); }
.hc-bi__dot { width: 4px; height: 4px; border-radius: 999px; background: var(--hc-strong); }
.hc-bi__hero-img {
  flex-shrink: 0;
  width: 520px;
  height: 380px;
  background: var(--hc-card-on-band);
  clip-path: var(--clip-d);
}

/* ---- Latest ---- */
.hc-blog-index a.hc-bi__latest {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 64px;
  padding: 22px 30px;
  border-radius: 24px;
  background: var(--hc-moment);
  text-decoration: none;
}
.hc-blog-index a.hc-bi__latest:hover { opacity: 0.95; }
.hc-bi__latest-pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hc-m-soft);
  color: var(--hc-m-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.hc-bi__latest-title { flex: 1 1 auto; font-size: 21px; line-height: 1.35; font-weight: 500; color: var(--hc-m-text); }
.hc-bi__latest-meta { font-size: 14px; color: var(--hc-m-muted); white-space: nowrap; }
.hc-bi__latest-read { font-size: 15px; font-weight: 600; color: var(--hc-m-soft); white-space: nowrap; }

/* ---- One section per language ---- */
.hc-bi__section-head { display: flex; align-items: baseline; gap: 14px; margin: 80px 0 28px; }
.hc-blog-index .hc-bi__section-head h2 { margin: 0; font-size: 36px; line-height: 1.1; font-weight: 300; letter-spacing: -0.6px; color: var(--hc-text); }
.hc-bi__audience { font-size: 17px; color: var(--hc-muted); }
.hc-bi__rule { flex: 1 1 auto; align-self: center; height: 1px; background: var(--hc-hair); }
.hc-bi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hc-blog-index a.hc-bi__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: var(--hc-card);
  box-shadow: inset 0 0 0 1px var(--hc-hair);
  color: var(--hc-text);
  text-decoration: none;
}
.hc-blog-index a.hc-bi__card:hover { opacity: 1; box-shadow: inset 0 0 0 1px var(--hc-strong); }
.hc-bi__card-banner {
  position: relative;
  display: block;
  height: 150px;
  overflow: hidden;
  background: var(--hc-card-on-band);
  box-shadow: inset 0 -1px 0 var(--hc-hair);
}
.hc-bi__card-count {
  position: absolute;
  right: 18px;
  bottom: -22px;
  font-size: 132px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: -4px;
  color: var(--hc-text);
  opacity: 0.09;
}
.hc-bi__card-body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; padding: 24px 26px 26px; }
.hc-bi__card-title { font-size: 24px; line-height: 1.25; font-weight: 500; color: var(--hc-text); }
.hc-bi__card-desc { flex: 1 1 auto; font-size: 16px; line-height: 1.6; color: var(--hc-body); }
.hc-bi__card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 14px; color: var(--hc-muted); }
.hc-bi__card-go { font-size: 15px; font-weight: 600; color: var(--hc-accent); }
/* A single collection: one wide card, banner on the left. */
.hc-bi__grid--one { grid-template-columns: 1fr; }
.hc-bi__grid--one a.hc-bi__card { flex-direction: row; min-height: 280px; }
.hc-bi__grid--one .hc-bi__card-banner { flex: 0 0 560px; height: auto; box-shadow: inset -1px 0 0 var(--hc-hair); }
.hc-bi__grid--one .hc-bi__card-body { max-width: 640px; padding: 40px 44px; }

@media (max-width: 1100px) {
  .hc-bi__hero-img { width: 420px; height: 307px; }
  .hc-bi__grid--one .hc-bi__card-banner { flex-basis: 380px; }
}
@media (max-width: 900px) {
  .hc-bi { padding: 40px 0 72px; }
  .hc-bi__hero { flex-direction: column; align-items: stretch; gap: 32px; }
  .hc-bi__eyebrow { margin-top: 10px; }
  .hc-bi__hero-copy { gap: 16px; }
  .hc-blog-index .hc-bi__title { font-size: 36px; letter-spacing: -1px; }
  .hc-bi__sub { font-size: 18px; }
  .hc-bi__stats { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hc-bi__dot { display: none; }
  .hc-bi__hero-img { width: 350px; max-width: 100%; height: 240px; clip-path: var(--clip-p); }
  .hc-blog-index a.hc-bi__latest { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 40px; padding: 22px; }
  .hc-bi__latest-title { font-size: 18px; }
  .hc-bi__section-head { margin: 48px 0 20px; }
  .hc-blog-index .hc-bi__section-head h2 { font-size: 28px; }
  .hc-bi__grid { grid-template-columns: 1fr; gap: 16px; }
  .hc-bi__grid--one a.hc-bi__card { flex-direction: column; min-height: 0; }
  .hc-bi__grid--one .hc-bi__card-banner { flex: none; height: 120px; box-shadow: inset 0 -1px 0 var(--hc-hair); }
  .hc-bi__card-banner { height: 120px; }
  .hc-bi__card-count { font-size: 110px; }
  .hc-bi__card-body,
  .hc-bi__grid--one .hc-bi__card-body { padding: 20px 22px 22px; }
  .hc-bi__card-title { font-size: 22px; }
}