/* ============================================================
   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;
    }
}


/* ============================================================
   PLUSFAB TRUST BAR (2026-10-01) -- presentation layer, appended
   (wins by source order). Same markup, same content contract, same
   three layouts (inline / divided / cards) -- each re-skinned rather
   than removed, so whichever layout the stored row selects renders in
   the PlusFab language:
   industrial light-grey surface, graphite Archivo values, uppercase
   steel labels, square steel-bordered icon tiles with a copper glyph,
   steel hairline dividers, and no rounded/elevated SaaS cards.
============================================================ */
.mt-trust-bar {
    padding: 0;
    background: var(--mt-surface-sunken);   /* #F3F4F5 industrial grey */
    border-top: 0;
    border-bottom: 1px solid var(--mt-border-light);
}

.mt-trust-bar__container {
    padding-top: var(--mt-space-8);
    padding-bottom: var(--mt-space-8);
}

.mt-trust-bar__inner {
    justify-content: flex-start;
}

.mt-trust-bar__item {
    gap: var(--mt-space-4);
    text-align: left;
}

/* Icon: a square steel-bordered tile with a copper glyph (was a round
   tinted badge). */
.mt-trust-bar__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--mt-radius-xs, 4px);
    background: #FFFFFF;
    border: 1px solid #C5CBD0;
    color: var(--mt-accent-hover);          /* dark copper, ~5:1 on white */
    font-size: 1.05rem;
}

.mt-trust-bar__text { gap: 4px; }

.mt-trust-bar__value {
    font-family: var(--mt-font-heading);
    font-size: 1.12rem;
    font-weight: var(--mt-weight-bold);
    letter-spacing: -0.005em;
    line-height: 1.2;
    color: var(--ally-navy-700);             /* graphite */
}

.mt-trust-bar__label {
    font-size: 0.72rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.1em;
    line-height: 1.4;
    color: #6B737A;                          /* steel grey */
}

.mt-trust-bar__desc {
    font-size: 0.82rem;
    color: #555C63;
}

/* -- cards: one flat specification strip -- equal cells separated by
   steel hairlines, left-aligned, no radius, no shadow, no lift. A copper
   top rule appears on hover (the only accent motion). -- */
.mt-trust-bar--cards .mt-trust-bar__inner {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
}

.mt-trust-bar--cards .mt-trust-bar__item {
    position: relative;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--mt-space-4);
    padding: var(--mt-space-2) var(--mt-space-8);
    border: 0;
    border-left: 1px solid #D5DADE;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

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

.mt-trust-bar--cards .mt-trust-bar__item:hover {
    box-shadow: none;
    border-color: #D5DADE;
}

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

/* -- divided: value-led blocks; Archivo values, a short square copper
   rule under each value, steel dividers. -- */
.mt-trust-bar--divided .mt-trust-bar__inner { justify-content: flex-start; }

.mt-trust-bar--divided .mt-trust-bar__item {
    align-items: flex-start;
    text-align: left;
    border-left-color: #D5DADE;
}

.mt-trust-bar--divided .mt-trust-bar__text { align-items: flex-start; }

.mt-trust-bar--divided .mt-trust-bar__value {
    font-size: var(--mt-text-2xl);
    font-weight: var(--mt-weight-bold);
    color: var(--ally-navy-700);
    padding-bottom: 8px;
}

.mt-trust-bar--divided .mt-trust-bar__value::after {
    left: 0;
    transform: none;
    width: 20px;
    border-radius: 0;
    background: var(--mt-accent);
}

/* Tablet and down: cards become a stacked list with hairlines between
   rows (never side-scrolling, never floating cards). */
@media (max-width: 991px) {
    .mt-trust-bar--cards .mt-trust-bar__inner {
        grid-template-columns: 1fr;
    }
    .mt-trust-bar--cards .mt-trust-bar__item,
    .mt-trust-bar--cards .mt-trust-bar__item:first-child {
        padding: var(--mt-space-4) 0;
        border-left: 0;
        border-top: 1px solid #D5DADE;
    }
    .mt-trust-bar--cards .mt-trust-bar__item:first-child {
        border-top: 0;
        padding-top: 0;
    }
    .mt-trust-bar--cards .mt-trust-bar__item:last-child { padding-bottom: 0; }
}

@media (max-width: 575px) {
    .mt-trust-bar__container {
        padding-top: var(--mt-space-6);
        padding-bottom: var(--mt-space-6);
    }
}


/* ============================================================
   PLUSFAB TRUST BAR v2 -- "STAINLESS PLATE" (2026-10-01, client
   revision). Scoped to the `divided` layout (the layout the client
   selected); inline/cards keep the v1 PlusFab layer above.
   - Brushed stainless band: fine vertical grain over a soft metallic
     gradient, a bevel highlight on the top edge, and a thin perforated
     strip along the top that echoes the perforated sheet in the Hero
     photograph.
   - Items become equal full-width "plates" separated by ENGRAVED
     grooves (a dark line + a light highlight, like machined panel
     joints), each with a copper index number (CSS counter -- ornament,
     not content), an Archivo value with a square copper rule, a steel
     label and the description.
   - Hover: a copper line runs across the plate's top edge.
   Same markup and content contract; icons stay hidden in `divided`.
============================================================ */
.mt-trust-bar.mt-trust-bar--divided {
    position: relative;
    background-color: #E6E9EC;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.30) 0 1px,
            rgba(255, 255, 255, 0) 1px 2px,
            rgba(30, 34, 38, 0.025) 2px 3px,
            rgba(255, 255, 255, 0) 3px 5px),
        linear-gradient(180deg, #F2F4F5 0%, #E2E6E9 58%, #ECEFF1 100%);
    border-top: 0;
    border-bottom: 1px solid #C5CBD0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Perforated strip along the top edge (pure CSS dots). */
.mt-trust-bar.mt-trust-bar--divided::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    height: 6px;
    background-image: radial-gradient(circle, rgba(30, 34, 38, 0.22) 1.3px, rgba(30, 34, 38, 0) 1.8px);
    background-size: 12px 6px;
    background-repeat: repeat-x;
    background-position: center;
    opacity: 0.55;
    pointer-events: none;
}

.mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__container {
    padding-top: var(--mt-space-10);
    padding-bottom: var(--mt-space-8);
}

.mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    overflow: visible;
    align-items: stretch;      /* plates share one top line and full-height grooves */
    counter-reset: pf-plate;
}

.mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__item {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0;
    padding: var(--mt-space-6) var(--mt-space-8) var(--mt-space-5);
    /* engraved groove: dark line + light highlight beside it */
    border-left: 1px solid rgba(30, 34, 38, 0.16);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.75);
    counter-increment: pf-plate;
    transition: background-color var(--mt-duration-normal) var(--mt-ease-default);
}
.mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__item:first-child {
    border-left: 0;
    box-shadow: none;
    padding-left: 0;
}

/* Copper index number */
.mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__item::before {
    content: counter(pf-plate, decimal-leading-zero);
    display: block;
    margin-bottom: var(--mt-space-3);
    font-family: var(--mt-font-heading);
    font-size: 0.72rem;
    font-weight: var(--mt-weight-bold);
    letter-spacing: 0.16em;
    line-height: 1;
    color: var(--mt-accent-hover);
}

/* Hover: copper line across the plate's top edge */
.mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__item::after {
    content: "";
    position: absolute;
    top: 0;
    left: var(--mt-space-8);
    right: var(--mt-space-8);
    height: 2px;
    background: var(--mt-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--mt-duration-normal) var(--mt-ease-default);
}
.mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__item:first-child::after { left: 0; }
.mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__item:hover::after { transform: scaleX(1); }

.mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__text { align-items: flex-start; gap: 0; }

.mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__value {
    font-family: var(--mt-font-heading);
    font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem);
    font-weight: var(--mt-weight-bold);
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--ally-navy-900);
    padding-bottom: 12px;
    margin-bottom: 12px;
}
.mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__value::after {
    left: 0;
    transform: none;
    width: 24px;
    height: 2px;
    border-radius: 0;
    background: var(--mt-accent);
}

.mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__label {
    font-size: 0.72rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.14em;
    color: #555C63;
}

.mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__desc {
    margin-top: var(--mt-space-2);
    max-width: 36ch;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #3E444A;
}

/* The editor allows up to 6 badges: 6 -> two rows of three (not 5 + 1);
   every row-start plate drops its groove. */
@media (min-width: 992px) {
    .mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__inner:has(> :nth-child(6)) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: var(--mt-space-6);
    }
    .mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__inner:has(> :nth-child(6)) > .mt-trust-bar__item:nth-child(3n+1) {
        border-left: 0;
        box-shadow: none;
        padding-left: 0;
    }
}
/* Tablet with 4+ badges: two columns. */
@media (min-width: 768px) and (max-width: 991px) {
    .mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__inner:has(> :nth-child(4)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--mt-space-6);
    }
    .mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__inner:has(> :nth-child(4)) > .mt-trust-bar__item:nth-child(2n+1) {
        border-left: 0;
        box-shadow: none;
        padding-left: 0;
    }
}

/* Tablet: three narrower plates. */
@media (max-width: 991px) {
    .mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__item {
        padding: var(--mt-space-5) var(--mt-space-5) var(--mt-space-4);
    }
    .mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__item::after {
        left: var(--mt-space-5);
        right: var(--mt-space-5);
    }
    .mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__desc { font-size: 0.86rem; }
}

/* Phone: plates stack; the grooves turn horizontal. */
@media (max-width: 767px) {
    .mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__inner {
        grid-template-columns: 1fr;
    }
    .mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__item,
    .mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__item:nth-child(2n+1) {
        padding: var(--mt-space-5) 0;
        border-left: 0;
        border-top: 1px solid rgba(30, 34, 38, 0.16);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }
    .mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__item:first-child {
        padding-top: 0;
        border-top: 0;
        box-shadow: none;
    }
    .mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__item::after,
    .mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__item:first-child::after { left: 0; right: 0; }
    .mt-trust-bar.mt-trust-bar--divided .mt-trust-bar__container { padding-top: var(--mt-space-10); padding-bottom: var(--mt-space-6); }
}