/* Suite Talk — Hero Trust Signals (frontend)
   Scoped to .hero-ts-* only — never touches Kubio/Hero markup except for
   a single conditional `position:relative` applied via JS, only when the
   fragment is actually placed inside the Hero on desktop. */

.hero-ts-root {
    box-sizing: border-box;
    z-index: 5;
    pointer-events: none;
}
.hero-ts-root * {
    box-sizing: border-box;
}
.hero-ts-root[hidden] {
    display: none;
}

.hero-ts-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    pointer-events: auto;
}

.hero-ts-item {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Content NEVER stretches to fill its slot — it renders at its own natural
   size (never upscaled) and only shrinks if it's wider than the available
   footprint. "Content scale" (default, or a per-signal custom override)
   is an additional, optional cap the user controls — it is not a forced
   fill. This is what stops logos/widgets being "crushed" into a box. */
.hero-ts-item--static img {
    display: block;
    width: auto;
    height: auto;
    max-width: calc(100% * var(--hero-ts-item-scale, var(--hero-ts-d-content-scale, 1)));
    margin: 0 auto;
}
.hero-ts-root--mobile .hero-ts-item--static img {
    max-width: calc(100% * var(--hero-ts-item-scale, var(--hero-ts-m-content-scale, 1)));
}

.hero-ts-item--static a {
    display: block;
    max-width: 100%;
    line-height: 0;
}

/* ─── Desktop: overlay stack, positioned relative to .eversure-hero ─── */
.hero-ts-root--desktop {
    position: absolute;
    right: var(--hero-ts-d-right, 24px);
    max-width: var(--hero-ts-d-max, none);
}
.hero-ts-root--desktop.hero-ts-pos-top { top: 0; }
.hero-ts-root--desktop.hero-ts-pos-center { top: 50%; transform: translateY(-50%); }
.hero-ts-root--desktop.hero-ts-pos-bottom { bottom: 0; }
.hero-ts-root--desktop.hero-ts-pos-custom { top: var(--hero-ts-d-top, 0); }

.hero-ts-root--desktop .hero-ts-list {
    flex-direction: column;
    align-items: center;
    gap: var(--hero-ts-d-gap, 12px);
}

/* Consistent signal width ON (default): every item shares one strict
   column — the SLOT is fixed, but content inside it still only renders at
   its natural size (see .hero-ts-item--static img above), never stretched. */
.hero-ts-root--desktop.hero-ts-d-consistent {
    width: var(--hero-ts-d-width, 56px);
}
.hero-ts-root--desktop.hero-ts-d-consistent .hero-ts-item {
    width: 100%;
}

/* Consistent signal width OFF: each signal keeps its own natural footprint
   (shrink-to-fit), all still centred on the same vertical axis by the
   column flex’s align-items:center — Column width becomes a soft ceiling
   so one oversized item can’t blow out the whole stack. */
.hero-ts-root--desktop.hero-ts-d-natural .hero-ts-item {
    width: auto;
    max-width: var(--hero-ts-d-width, 56px);
}

/* ─── Mobile: normal flow, centred row/wrap beneath the Hero CTA ─── */
.hero-ts-root--mobile {
    position: static;
    width: 100%;
    margin-top: var(--hero-ts-m-top, 16px);
}
.hero-ts-root--mobile .hero-ts-list {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--hero-ts-m-gap, 10px);
}
.hero-ts-root--mobile.hero-ts-m-consistent .hero-ts-item {
    flex: 0 0 auto;
    width: var(--hero-ts-m-width, 48px);
}
.hero-ts-root--mobile.hero-ts-m-natural .hero-ts-item {
    flex: 0 0 auto;
    width: auto;
    max-width: var(--hero-ts-m-width, 48px);
}

/* ─── Compact live rating — stacked, not a full-width widget ───
   Sized relative to the column it sits in (em-based) so it reflows with
   whatever Column width is configured, instead of a hard-coded pixel
   layout. Never grows past its column — see .hero-ts-item rules above. */
.hero-ts-live-inner,
.hero-ts-item--live a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2em;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: inherit;
    line-height: 1.2;
}
.hero-ts-root--desktop .hero-ts-live-inner,
.hero-ts-root--desktop .hero-ts-item--live a {
    font-size: clamp(8px, calc(var(--hero-ts-d-width, 56px) * .18 * var(--hero-ts-item-scale, var(--hero-ts-d-content-scale, 1))), 15px);
}
.hero-ts-root--mobile .hero-ts-live-inner,
.hero-ts-root--mobile .hero-ts-item--live a {
    font-size: clamp(8px, calc(var(--hero-ts-m-width, 48px) * .18 * var(--hero-ts-item-scale, var(--hero-ts-m-content-scale, 1))), 15px);
}
.hero-ts-live-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3em;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hero-ts-live-logo {
    height: 1em;
    width: auto;
    display: block;
    flex: 0 0 auto;
}
.hero-ts-live-stars {
    position: relative;
    display: inline-block;
    font-size: 1.15em;
    letter-spacing: 1px;
    color: #d1d5db;
}
.hero-ts-live-stars-base {
    color: #d1d5db;
}
.hero-ts-live-stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #00b67a;
}
.hero-ts-live-meta {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .35em;
    flex-wrap: wrap;
}
.hero-ts-live-rating {
    font-weight: 700;
}
.hero-ts-live-count {
    opacity: .75;
    font-size: .9em;
    white-space: nowrap;
}

.hero-ts-item--widget {
    max-width: calc(100% * var(--hero-ts-item-scale, var(--hero-ts-d-content-scale, 1)));
    font-size: 11px;
}
.hero-ts-root--mobile .hero-ts-item--widget {
    max-width: calc(100% * var(--hero-ts-item-scale, var(--hero-ts-m-content-scale, 1)));
}

/* "Fit widget to signal width" (default ON): the existing Trust Signal
   widget keeps its own intended layout/dimensions completely untouched —
   public.js measures its natural size and scales the WHOLE rendered box
   down (or up to 1:1, never beyond) via a single transform, so nothing
   inside it ever reflows, squeezes or gets clipped. */
.hero-ts-item--widget-fit {
    max-width: none;
    width: 100%;
    overflow: visible;
}
.hero-ts-existing-widget-slot {
    position: relative;
    display: block;
    overflow: visible;
}
.hero-ts-existing-widget-scaler {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
}