/* TrustBand — THE site-wide certifications and recognition band.
   2026-08-11 (Sofia): unified on the HOME page's Certifications &
   Recognition section — every value below mirrors x3.css § x3-certs
   verbatim (label · badge-strip marquee as ink line-art on white · the
   one bright Gartner MQ plate). The previous dark band's rules live in
   git. Markup: components/TrustBand.astro. */

.trust-band {
  border-top: 1px solid var(--color-border-light);
  background: var(--color-white);
  color: var(--color-foreground);
}
/* rounded chapter-seam over a dark closing section (the site-wide
   curtain motif); tone-adjacent neighbors stay flush */
.trust-band--seam {
  position: relative;
  margin-top: -20px;
  border-top: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
@media (min-width: 768px) {
  .trust-band--seam {
    margin-top: -32px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
}
/* tone-adjacent neighbors: the hairline keeps the chapters legible */
.trust-band--divider { border-top: 1px solid var(--color-border-light); }
/* when the band is the last content section, the closing CTA slides
   over it on the same rounded seam */
.trust-band + .c-cta {
  margin-top: -20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
@media (min-width: 768px) {
  .trust-band + .c-cta {
    margin-top: -32px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
}
.trust-band__inner {
  margin-inline: auto;
  max-width: var(--container-large);
  padding: var(--space-section-sm) var(--space-inline);
}
@media (min-width: 768px) { .trust-band__inner { padding-block: var(--space-section-md); } }
/* 32px matches the home's expertise inner so the Gartner plate's margins
   line up with card rows above (Sofia, 2026-08-05) */
@media (min-width: 1024px) { .trust-band__inner { padding-inline: 32px; } }

.trust-band__label {
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-wide);
  color: var(--color-kicker-on-white);
}

.trust-band__marquee {
  position: relative;
  margin-top: 32px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
@media (min-width: 640px) { .trust-band__marquee { margin-top: 40px; } }
.trust-band__track {
  display: flex;
  align-items: center;
  /* NO track gap: the strip asset bakes half-gap margins on its edges,
     so the loop seam spaces exactly like the badges inside the strip
     (Sofia, 2026-08-10: "even spacings without big gaps") */
  gap: 0;
  will-change: transform;
}
.trust-band__track img {
  /* stepped up 72/76/80 → 84/90/96 (Sofia 2026-08-18: "a bit larger") */
  height: 84px;
  width: auto;
  max-width: none;
  flex-shrink: 0;
  /* ink line-art on the white ground */
  opacity: 0.55;
  filter: brightness(0);
}
@media (min-width: 640px) { .trust-band__track img { height: 90px; } }
@media (min-width: 768px) { .trust-band__track img { height: 96px; } }

/* the one bright Gartner plate (the home's, Sofia 2026-08-05 ×5): wide
   and slim, figure hard-left on its full-white rounded seat, copy right;
   the whole plate links to the report */
.trust-band__gartner {
  display: grid;
  /* minmax(0,…): the figure must not force the track past the plate on
     mobile */
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-top: 48px;
  padding: 32px 24px;
  border-radius: 20px;
  /* the home card's 2026-08-18 fix, now site-wide (Sofia: "DON'T miss
     any of these cards"): the plate went invisible when
     --color-background turned pure white — the off-white tint is now
     explicit grey-50 and the hairline carries the card edge. The hover
     lift stays retired here (the 2026-08-18 vibration bug); the border
     deepens instead. */
  border: 1px solid var(--color-border-light);
  background: var(--color-grey-50);
  color: var(--color-foreground);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.25s ease;
}
.trust-band__gartner:hover { border-color: var(--color-grey-200); }
@media (min-width: 900px) {
  .trust-band__gartner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 72px;
    margin-top: 64px;
    padding: 20px 56px;
    text-align: left;
  }
  .trust-band__gartner-fig { justify-self: start; }
}
/* no hover lift: translating the hover target moved its edge out from
   under a cursor grazing the plate boundary, re-triggering hover in a
   loop — the card "vibrated" (Sofia, 2026-08-18). The CTA color + arrow
   nudge below carry the affordance. */
.trust-band__gartner-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
@media (min-width: 900px) {
  .trust-band__gartner-copy { align-items: flex-start; }
}
/* solid black on the bright plate (the asset is the mixed navy/white
   dark-ground cut) */
.trust-band__gartner-logo {
  height: 20px;
  width: auto;
  filter: brightness(0);
}
.trust-band__gartner-claim {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: 22px;
  line-height: 1.25;
  color: var(--color-black);
}
@media (min-width: 768px) { .trust-band__gartner-claim { font-size: 28px; } }
/* the figure sits flush on the plate: white on white */
.trust-band__gartner-fig {
  display: block;
  /* definite width: a % can't resolve inside the auto grid column (it
     collapsed the figure to 0); the near-square figure sets the plate's
     (short) height */
  /* a step bigger, matching the home card (Sofia, 2026-08-18) */
  width: 320px;
  max-width: 100%;
  padding: 16px;
  border-radius: 16px;
  background: var(--color-white);
}
.trust-band__gartner-fig img {
  display: block;
  width: 100%;
  height: auto;
}
/* phones (Sofia, 2026-08-07): the quadrant chart centers and takes the
   plate's full width */
@media (max-width: 899px) {
  .trust-band__gartner-fig {
    width: 100%;
    justify-self: center;
  }
}
.trust-band__gartner-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: var(--color-grey-on-white);
  transition: color 0.25s ease;
}
.trust-band__gartner-cta svg { transition: transform 0.25s ease; }
.trust-band__gartner:hover .trust-band__gartner-cta { color: var(--color-blue); }
.trust-band__gartner:hover .trust-band__gartner-cta svg { transform: translate(2px, -2px); }