/* Hero Header Band — shared token contract only; host supplies token values. */
.hhb,
.hhb * { box-sizing: border-box; }

.hhb {
  --hhb-height-phone: 180px;
  --hhb-height-tablet: 240px;
  --hhb-height-desktop: 320px;
  --hhb-overlay-strength: .55;
  --hhb-overlay-colour: var(--surface);
  --hhb-focal: 50% 50%;
  --hhb-focal-phone: 50% 50%;
  --hhb-parallax-y: 0px;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  overflow: clip;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}

.hhb[data-sticky="true"] { position: sticky; top: 0; z-index: 10; }
.hhb__inner { position: relative; min-height: var(--hhb-height-desktop); display: grid; min-width: 0; }
.hhb__media { min-width: 0; min-height: 0; overflow: hidden; }
.hhb__media picture,
.hhb__media img { display: block; width: 100%; height: 100%; }
.hhb__media img { object-fit: cover; object-position: var(--hhb-focal); transform: translate3d(0, var(--hhb-parallax-y), 0); }
.hhb__content { position: relative; z-index: 2; align-self: end; width: min(100%, 70rem); max-width: 100%; min-width: 0; padding: clamp(1rem, 4vw, 3.5rem); }
.hhb__content > * { max-width: 100%; min-width: 0; }
.hhb__content::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--hhb-overlay-colour) calc(var(--hhb-overlay-strength) * 100%), transparent), transparent); }
.hhb__eyebrow { margin: 0 0 .5rem; color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hhb__title,
.hhb__subtitle { width: 100%; max-width: 100%; overflow-wrap: anywhere; }
.hhb__title { max-width: min(18ch, 100%); margin: 0; color: var(--text); font-size: clamp(2rem, 7vw, 5rem); line-height: .98; }
.hhb__subtitle { max-width: min(62ch, 100%); margin: .8rem 0 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.25rem); }
.hhb__ctas,
.hhb__badges { display: flex; flex-wrap: wrap; gap: .65rem; padding: 0; }
.hhb__ctas { margin-top: 1.25rem; }
.hhb__badges { margin: 0 0 .85rem; list-style: none; }
.hhb__cta { display: inline-flex; max-width: 100%; min-width: 0; min-height: 44px; align-items: center; justify-content: center; padding: .7rem 1rem; border: 2px solid var(--accent); border-radius: var(--radius); color: var(--text); font-weight: 750; overflow-wrap: anywhere; text-decoration: none; }
.hhb__cta--primary { background: var(--accent); color: var(--bg); }
.hhb__cta--secondary { background: var(--surface); }
.hhb__cta--quiet { border-color: transparent; background: transparent; color: var(--accent); }
.hhb__cta:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.hhb__badge { padding: .3rem .65rem; border: 1px solid var(--muted); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .75rem; font-weight: 750; }
.hhb__badge--accent { border-color: var(--accent); color: var(--accent); }
.hhb__badge--ok { border-color: var(--ok); color: var(--ok); }
.hhb__badge--warn { border-color: var(--warn); color: var(--warn); }
.hhb__badge--bad { border-color: var(--bad); color: var(--bad); }
.hhb__metrics { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.4rem 0 0; }
.hhb__metric { min-width: min(9rem, 100%); padding: .75rem 1rem; border: 1px solid var(--muted); border-radius: var(--radius); background: var(--surface); }
.hhb__metric dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hhb__metric dd { display: flex; flex-direction: column; margin: 0; }
.hhb__metric strong { color: var(--accent); font-size: 1.6rem; line-height: 1; }
.hhb__metric span { margin-top: .25rem; color: var(--muted); font-size: .8rem; }

/* Full-bleed and overlay-based bands. */
.hhb--full-bleed .hhb__media,
.hhb--slim-band .hhb__media,
.hhb--dashboard-summary .hhb__media { position: absolute; inset: 0; z-index: -2; }
.hhb--full-bleed .hhb__content,
.hhb--slim-band .hhb__content,
.hhb--dashboard-summary .hhb__content { grid-area: 1 / 1; }
.hhb--slim-band .hhb__inner { min-height: min(var(--hhb-height-desktop), 12rem); }
.hhb--slim-band .hhb__title,
.hhb--app-title-bar .hhb__title { font-size: clamp(1.6rem, 4vw, 2.75rem); }

/* Split image/text. */
.hhb--split .hhb__inner { grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .95fr); }
.hhb--split .hhb__media { min-height: var(--hhb-height-desktop); }
.hhb--split .hhb__content { align-self: stretch; display: flex; flex-direction: column; justify-content: center; background: var(--surface); }
.hhb--split .hhb__content::before,
.hhb--editorial-masthead .hhb__content::before,
.hhb--app-title-bar .hhb__content::before { display: none; }
.hhb--split[data-media-order="last"] .hhb__media { order: 2; }
.hhb--split[data-media-order="last"] .hhb__content { order: 1; }

/* Editorial type-led masthead. */
.hhb--editorial-masthead { border-block: 1px solid var(--muted); border-radius: 0; }
.hhb--editorial-masthead .hhb__inner { min-height: var(--hhb-height-desktop); grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 1fr); }
.hhb--editorial-masthead .hhb__content { align-self: center; }
.hhb--editorial-masthead .hhb__title { font-size: clamp(2rem, 5vw, 3.75rem); }
.hhb--editorial-masthead .hhb__media { margin: clamp(1rem, 3vw, 2rem); border-radius: var(--radius); }
.hhb--editorial-masthead[data-media-order="last"] .hhb__media { order: 2; }

/* Dense dashboard strip and app chrome. */
.hhb--dashboard-summary .hhb__inner { min-height: min(var(--hhb-height-desktop), 15rem); }
.hhb--dashboard-summary .hhb__content { width: 100%; }
.hhb--dashboard-summary .hhb__title { font-size: clamp(1.8rem, 4vw, 3.5rem); }
.hhb--dashboard-summary .hhb__metrics { margin-top: 1rem; }
.hhb--app-title-bar { border-radius: 0; }
.hhb--app-title-bar .hhb__inner { min-height: min(var(--hhb-height-desktop), 7rem); }
.hhb--app-title-bar .hhb__content { align-self: center; width: 100%; padding-block: 1rem; }
.hhb--app-title-bar .hhb__media { display: none; }

/* Content alignment and nine-position placement. */
.hhb[data-align="center"] .hhb__content { text-align: center; justify-self: center; }
.hhb[data-align="center"] .hhb__title,
.hhb[data-align="center"] .hhb__subtitle { margin-inline: auto; }
.hhb[data-align="center"] .hhb__ctas,
.hhb[data-align="center"] .hhb__badges,
.hhb[data-align="center"] .hhb__metrics { justify-content: center; }
.hhb[data-align="end"] .hhb__content { text-align: end; justify-self: end; }
.hhb[data-align="end"] .hhb__title,
.hhb[data-align="end"] .hhb__subtitle { margin-inline-start: auto; }
.hhb[data-align="end"] .hhb__ctas,
.hhb[data-align="end"] .hhb__badges,
.hhb[data-align="end"] .hhb__metrics { justify-content: flex-end; }
.hhb[data-position^="top-"] .hhb__content { align-self: start; }
.hhb[data-position^="center"] .hhb__content { align-self: center; }
.hhb[data-position^="bottom-"] .hhb__content { align-self: end; }
.hhb[data-position$="-left"] .hhb__content { justify-self: start; }
.hhb[data-position$="-right"] .hhb__content { justify-self: end; }
.hhb[data-position$="-center"] .hhb__content,
.hhb[data-position="center"] .hhb__content { justify-self: center; }

@media (max-width: 900px) {
  .hhb__inner { min-height: var(--hhb-height-tablet); }
  .hhb--split .hhb__inner,
  .hhb--editorial-masthead .hhb__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .hhb__inner { min-height: var(--hhb-height-phone); }
  .hhb__media img { object-position: var(--hhb-focal-phone); }
  .hhb--split .hhb__inner,
  .hhb--editorial-masthead .hhb__inner { grid-template-columns: 1fr; }
  .hhb--split .hhb__media,
  .hhb--editorial-masthead .hhb__media { height: max(10rem, calc(var(--hhb-height-phone) * .55)); min-height: 0; margin: 0; border-radius: 0; }
  .hhb--split[data-media-order="last"] .hhb__media,
  .hhb--editorial-masthead[data-media-order="last"] .hhb__media { order: 2; }
  .hhb--split[data-media-order="last"] .hhb__content,
  .hhb--editorial-masthead[data-media-order="last"] .hhb__content { order: 1; }
  .hhb__content { padding: 1.1rem; }
  .hhb__ctas > * { flex: 1 1 10rem; min-width: 0; }
  .hhb__metric { flex: 1 1 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hhb__media img { transform: none !important; }
  .hhb *, .hhb *::before, .hhb *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

@media (forced-colors: active) {
  .hhb, .hhb__cta, .hhb__badge, .hhb__metric { border: 1px solid CanvasText; }
}