/* ==========================================================================
   Dark sgcUI hero shared by the blog index (community/blog/index.html), the
   pricing page (pricing/index.html) and the applications page
   (applications/index.html), plus their locale copies.
   Reuses the sgcUI home hero from css/home-sgcui.css (.uix-*); this file only
   adds what these pages need on top of it, namespaced .bhx-*. On the blog the
   badge target and the collage are filled server side by blog_render_hero()
   (inc/blog.php). Pricing and applications use the stage-less .bhx-hero--compact.
   ========================================================================== */

/* A shorter hero than the home page, and no bleed past the right edge */
.bhx-hero { padding: 28px 0 56px; }
.bhx-hero .uix-hero-grid { grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); gap: 48px; }
.bhx-hero .uix-h1 { font-size: clamp(2.4rem, 4.2vw, 3.6rem); margin-bottom: 22px; }
.bhx-hero .uix-sub { margin-bottom: 26px; }
.bhx-stage { margin-right: 0; max-width: 620px; justify-self: end; width: 100%; }
.bhx-stage:empty { display: none; }

/* Breadcrumb on the dark ink */
.bhx-crumb { padding: 0 0 18px; color: #8EA3C2; }
.bhx-crumb a { color: #C9D6EA; }
.bhx-crumb a:hover { color: #fff; }

/* Badge: keep a long post title on one line */
.bhx-badge { max-width: 100%; }
.bhx-badge b { flex: none; }
.bhx-badge-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Chips are links here */
.bhx-chips li { padding: 0; background: none; box-shadow: none; }
.bhx-chips a {
  display: inline-block; padding: 6px 12px; border-radius: 8px; color: #C9D6EA; text-decoration: none;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  transition: color .2s, background-color .2s, box-shadow .2s;
}
.bhx-chips a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }

/* Covers are square badges on white: show them whole */
.bhx-win { display: block; text-decoration: none; }
.bhx-media { position: relative; aspect-ratio: 16 / 10; background: #fff; }
.bhx-win .bhx-media img { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); object-fit: contain; }
.bhx-float { display: block; text-decoration: none; }
.bhx-float-media { position: relative; display: block; aspect-ratio: 1 / 1; }
.bhx-float-media img { position: absolute; inset: 8px 8px 34px; width: calc(100% - 16px); height: calc(100% - 42px); object-fit: contain; }
.bhx-float .uix-float-tag { right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bhx-float.uix-float--b { width: 30%; left: -4%; bottom: -14%; }
.bhx-float.uix-float--c { width: 24%; right: -2%; top: -10%; }
.bhx-hero a.uix-win:focus-visible, .bhx-hero a.uix-float:focus-visible, .bhx-hero .bhx-chips a:focus-visible, .bhx-hero .bhx-crumb a:focus-visible, .bhx-hero .uix-badge:focus-visible {
  outline: 3px solid var(--uix-amber); outline-offset: 3px;
}

/* Compact variant: a single column band with no stage (pricing, applications) */
.bhx-hero--compact { padding: 24px 0 40px; }
.bhx-hero--compact .uix-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.bhx-hero--compact .uix-h1 { font-size: clamp(2.1rem, 3.4vw, 2.9rem); margin-bottom: 16px; }
.bhx-hero--compact .uix-sub { max-width: 78ch; margin-bottom: 20px; }
.bhx-hero--compact .uix-cta { margin-bottom: 20px; }
.bhx-hero--compact .uix-btn:focus-visible { outline: 3px solid var(--uix-amber); outline-offset: 3px; }

@media (max-width: 1100px) {
  .bhx-stage { justify-self: start; margin-top: 8px; }
}
@media (max-width: 640px) {
  .bhx-hero { padding: 20px 0 48px; }
  .bhx-float.uix-float--b { width: 40%; left: auto; right: -2%; bottom: -16%; }
  .bhx-hero--compact { padding: 16px 0 32px; }
  .bhx-hero--compact .uix-sub { font-size: 1rem; }
}