/* ============================================================
   MORETECH -- TRUST BAR
   First-party markup + CSS (see partials/trust_bar.php's own header for
   the full rationale) -- not derived from the shared platform's own
   trust-bar-section.css. One shared root (.mt-trust-bar), one shared
   item/icon/value/label/desc convention across all three compositions --
   see trust_bar.php's own docstring for why that consistency is
   deliberate (a Studio style edit on 'self'/'container'/'icon' stays
   effective no matter which composition is currently selected).

   Ally Trust Bar Frontend Design (2026-09-19): re-skinned onto Ally's
   OWN accepted NAVY + BLUE + WHITE + COOL NEUTRAL identity (zero orange/
   terracotta), the same system already accepted for Header, Footer, and
   Hero -- not the generic --mt-brand-primary/--mt-accent tokens every
   OTHER ally_monday module still legitimately uses. The navy/blue values
   below are `var(--ally-navy-700)` / `var(--ally-blue-400)` / etc. --
   REUSED, never redefined here. Those custom properties are declared
   once, in moretech-header-footer.css §1a, scoped to `body.tpl-AllyTuesday`
   (not `:root`), which is why they inherit correctly into this file's
   selectors without this file redeclaring a single hex value -- exactly
   the "one source of truth, restyle in one place" discipline that file's
   own header documents. Surfaces stay light (this is a homepage proof
   strip, not structural chrome like the Header/Footer -- it does not
   become a dark navy panel); navy/blue appear as the accent language:
   navy for the emphasized value, blue for the icon accent and the small
   active-marker motif that echoes the Header's own "white + blue
   underline" signature.
   ============================================================ */

.mt-trust-bar {
    padding: var(--mt-section-py-sm) 0;
    background: var(--mt-page-bg);
    border-top: 1px solid var(--mt-border-light);
    border-bottom: 1px solid var(--mt-border-light);
    font-family: var(--mt-font-sans);
}

/* Trust Bar Module Implementation (2026-09-18): .mt-trust-bar__inner /
   .mt-trust-bar__item are now a real <ul>/<li> pair (list semantics,
   role="list"/"listitem" as a redundant safety net against Safari
   stripping list semantics once list-style:none is applied) — visual
   layout is unchanged from the prior <div>-based markup. */
.mt-trust-bar__inner,
.mt-trust-bar__item {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mt-trust-bar__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--mt-space-5) var(--mt-space-8);
}

.mt-trust-bar__item {
    display: flex;
    align-items: center;
    gap: var(--mt-space-3);
}

.mt-trust-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--mt-radius-full);
    /* Ally identity: a soft blue tint (not the generic --mt-brand-primary-
       soft, which resolves to the same neutral wash every ally_monday
       module uses) — the icon badge is where "blue is the only accent"
       actually shows up on this light surface. */
    background: rgba(75, 130, 212, 0.10);   /* --ally-blue-500 at 10% */
    color: var(--ally-blue-500);
    font-size: var(--mt-text-base);
    transition: background var(--mt-duration-normal) var(--mt-ease-default),
                color var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-trust-bar__text {
    display: flex;
    flex-direction: column;
    line-height: var(--mt-leading-tight);
}

.mt-trust-bar__value {
    font-weight: var(--mt-weight-black);
    /* Ally identity: navy, not the generic --mt-brand-primary alias --
       matches the Header's own navy-on-white CTA pairing. */
    color: var(--ally-navy-700);
    font-size: var(--mt-text-xl);
}

.mt-trust-bar__label {
    font-size: var(--mt-text-sm);
    color: var(--mt-text-muted);
    letter-spacing: var(--mt-tracking-wide);
    text-transform: uppercase;
}

/* Trust Bar Module Implementation (2026-09-18): optional per-item
   description — one step quieter than .mt-trust-bar__label, most useful
   in the 'cards' composition where there is room for it. Additive; items
   without a description are unaffected. */
.mt-trust-bar__desc {
    font-size: var(--mt-text-xs);
    color: var(--mt-text-muted);
    line-height: var(--mt-leading-normal);
    margin-top: 2px;
}

@media (max-width: 575px) {
    .mt-trust-bar__inner {
        gap: var(--mt-space-4);
    }
}

/* ------------------------------------------------------------
   Composition: cards -- each item its own bordered, elevated
   card in a responsive grid. A modern product/SaaS proof-strip
   treatment -- genuinely different DOM/CSS structure from the
   default strip, not a recolor. Reuses this template's own
   --mt-elevation-card / --mt-elevation-card-hover pair (00-tokens.css
   "Design Language v2" — the single shared elevation decision every
   card-shaped first-party module already rests on) instead of picking
   a one-off shadow value here.
   ------------------------------------------------------------ */

.mt-trust-bar--cards .mt-trust-bar__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--mt-space-4);
}

.mt-trust-bar--cards .mt-trust-bar__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--mt-space-2);
    padding: var(--mt-space-5) var(--mt-space-4);
    border: 1px solid var(--mt-border-light);
    border-radius: var(--mt-radius-lg);
    background: var(--mt-surface-card);
    box-shadow: var(--mt-elevation-card);
    transition: box-shadow var(--mt-duration-normal) var(--mt-ease-default),
                border-color var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-trust-bar--cards .mt-trust-bar__item:hover {
    box-shadow: var(--mt-elevation-card-hover);
    /* A restrained blue lift on hover — the same "blue is the only
       accent" rule the Header/Footer already hold to; no gradient, no
       heavier shadow tier than the template's own card standard. */
    border-color: var(--ally-blue-300);
}

.mt-trust-bar--cards .mt-trust-bar__text {
    align-items: center;
}

.mt-trust-bar--cards .mt-trust-bar__desc {
    max-width: 32ch;
}

/* ------------------------------------------------------------
   Composition: divided -- one row of value-led stat blocks
   separated by vertical divider rules. A formal, enterprise
   stats-bar treatment -- value emphasized large, label small
   beneath, no icon badges (a deliberately quieter, text-led
   reading of the same real items[] data).
   ------------------------------------------------------------ */

.mt-trust-bar--divided .mt-trust-bar__inner {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0;
    overflow-x: auto;
}

.mt-trust-bar--divided .mt-trust-bar__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--mt-space-1);
    padding: 0 var(--mt-space-8);
    border-left: 1px solid var(--mt-border-light);
    flex-shrink: 0;
}

.mt-trust-bar--divided .mt-trust-bar__item:first-child {
    border-left: none;
    padding-left: 0;
}

.mt-trust-bar--divided .mt-trust-bar__icon {
    display: none;
}

.mt-trust-bar--divided .mt-trust-bar__text {
    align-items: center;
    position: relative;
}

.mt-trust-bar--divided .mt-trust-bar__value {
    font-size: var(--mt-text-2xl);
    font-weight: var(--mt-weight-black);
    color: var(--ally-navy-700);
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
}

/* A short blue underline beneath the value — the same "white + blue
   underline when active" motif the Header's own nav already uses, and
   the same "short blue rule" convention the Footer's own column headings
   use. This is what makes 'divided' read as unmistakably Ally rather
   than a generic stats row. */
.mt-trust-bar--divided .mt-trust-bar__value::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 22px;
    height: 2px;
    border-radius: var(--mt-radius-full);
    background: var(--ally-blue-400);
}

.mt-trust-bar--divided .mt-trust-bar__label {
    text-transform: uppercase;
    letter-spacing: var(--mt-tracking-wide);
    font-size: var(--mt-text-xs);
}

/* MDQ-092 (post-Phase-9 remediation): the pre-existing padding-only rule
   above kept `flex-wrap: nowrap` + `flex-shrink: 0` + `overflow-x: auto`
   from the base (desktop) rule active at every width down to 0 — with 4
   real stat items that combination never shrinks or wraps, it scrolls
   horizontally, so a narrow-viewport full-page render only shows however
   many items fit in the first screenful (confirmed: 390px shows ~2 of 4,
   the other 2 sit off-screen, scrollable but never visible in a static
   render or a first glance). Wrapping to a real 2-column grid at this
   same existing breakpoint fixes that without touching desktop (>767px,
   unchanged) or tablet (tested at 820px, already >767px, unchanged) —
   still one value-led stat block per cell, still a vertical divider rule
   between the two items sharing each row (:nth-child(2n+1) drops the
   divider only on the item that starts a new row, exactly mirroring the
   existing :first-child rule's own logic for the single-row case). */
@media (max-width: 767px) {
    .mt-trust-bar--divided .mt-trust-bar__inner {
        flex-wrap: wrap;
        overflow-x: visible;
        row-gap: var(--mt-space-4);
    }

    .mt-trust-bar--divided .mt-trust-bar__item {
        flex: 0 1 50%;
        padding: 0 var(--mt-space-4);
    }

    .mt-trust-bar--divided .mt-trust-bar__item:nth-child(2n+1) {
        border-left: none;
        padding-left: 0;
    }
}

/* No animation exists in this component (by design — a static trust
   signal doesn't need motion). The hover micro-transitions above
   (icon tint, card shadow/border) still respect the platform's standing
   reduced-motion rule — instant state changes, not disabled hover states,
   when the user has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .mt-trust-bar__icon,
    .mt-trust-bar--cards .mt-trust-bar__item {
        transition: none;
    }
}