/* ============================================================
   MORETECH -- WHY CHOOSE US
   First-party markup + CSS (see partials/why_choose_us.php's own header
   for the full rationale) -- not derived from the shared platform's own
   why-choose-us CSS. Every recurring visual value is a real --mt-* token.

   Design Language v2 (MoreTech craftsmanship pass): a centred kicker
   header, then a FEATURED-vs-SUPPORTING card hierarchy -- the first
   reason is a wide, emphasised panel, the rest a calm 2-up grid of
   accent-edged cards -- so the section has a real focal point instead of
   an even wall of identical boxes. Class hooks (.mt-wcu,
   .mt-wcu__header/__eyebrow/__title/__subtitle/__grid/__card/__icon/
   __body/__card-title/__card-desc/__cta/__cta-btn, and the --checklist
   composition modifier) are UNCHANGED.

   Why Choose Us reconnect round (2026-09-21) -- a recolor + reconnect
   pass, NOT a redesign. Same shape as the Process Flow round:
     1. Every remaining --mt-accent/--mt-accent-soft (generic MoreTech
        orange) replaced with the Ally blue/navy palette. The eyebrow and
        every icon/accent-border node become a FIXED --ally-blue-500/
        --ally-blue-400/--ally-blue-wash accent -- deliberately NOT
        currentColor, matching every other Ally eyebrow/accent-node in
        this system (Hero/About/Services/Process Flow never make their
        eyebrow or accent nodes follow the section's runtime color
        either). The featured card's own accent (top border) becomes
        --mt-brand-primary (navy) instead, matching its own already-navy
        icon+glow identity -- featured = navy accent, supporting = blue
        accent, a real hierarchy distinction reused from the palette
        already in play, not a new one.
     2. currentColor-on-root, composition-specifically: title/subtitle
        are shared header elements (same surface in both compositions)
        and now read .mt-wcu's own color. card-title/card-desc stay
        hardcoded for 'grid' (its cards -- including the featured one --
        have their own white/tinted surface and must not follow a
        recoloured section, same reasoning as Services' Grid/Detailed)
        but become currentColor for 'checklist' (no card surface at all,
        every row -- including the first -- sits directly on the section
        surface, same reasoning as Services' Feature Row / Process
        Flow's 'vertical').
     3. Even-count grid orphan rule reviewed (see its own comment below):
        kept, but the lone spanning card now lays out horizontally
        (icon beside text, reusing the exact technique the featured card
        already uses) instead of stacked, so it reads as a deliberate
        wide row instead of a large, mostly-empty box.
   No composition, markup, class, or interaction changed.
   ============================================================ */

.mt-wcu {
    padding: var(--mt-section-py) 0;
    background: var(--mt-page-bg);
    font-family: var(--mt-font-sans);
    /* Ally identity / Studio fix (2026-09-21): explicit base color so
       .mt-wcu__title (and, composition-specifically below, 'checklist''s
       card-title/card-desc) can read currentColor and a Studio
       self.color edit actually reaches them -- same fix already applied
       to Process Flow's own title. Same literal value as before --
       default rendering is unchanged. */
    color: var(--mt-text-strong);
}

.mt-wcu__header {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto var(--mt-space-12);
}

.mt-wcu__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-3);
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-wider);
    text-transform: uppercase;
    /* Ally identity (2026-09-21): --mt-accent (orange) -> --ally-blue-500,
       a fixed accent -- matching every other Ally eyebrow (Hero/About/
       Services/Process Flow), deliberately not currentColor. */
    color: var(--ally-blue-500);
    margin-bottom: var(--mt-space-4);
}

.mt-wcu__eyebrow::before,
.mt-wcu__eyebrow::after {
    content: "";
    width: var(--mt-kicker-rule);
    height: 2px;
    background: currentColor;
    flex-shrink: 0;
}

.mt-wcu__title {
    font-size: var(--mt-text-3xl);
    font-weight: var(--mt-weight-black);
    /* Ally identity / Studio fix (2026-09-21): was a hardcoded literal --
       now reads .mt-wcu's own color, so a Studio self.color edit
       actually reaches this heading. Same fix already applied to
       Process Flow's own title. */
    color: currentColor;
    line-height: var(--mt-leading-tight);
    letter-spacing: var(--mt-tracking-tight);
    margin: 0 auto var(--mt-space-3);
    max-width: 24ch;
}

.mt-wcu__subtitle {
    font-size: var(--mt-text-md);
    /* Ally identity / Studio fix (2026-09-21): currentColor + opacity,
       the same hierarchy-by-opacity convention Process Flow's own
       subtitle already uses (0.78 -- same value). */
    color: currentColor;
    opacity: 0.78;
    line-height: var(--mt-leading-relaxed);
    margin: 0 auto;
    max-width: var(--mt-measure);
}

/* ── Shared card internals ── */

.mt-wcu__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--mt-radius-md);
    /* Ally identity (2026-09-21): --mt-accent-soft/--mt-accent (orange)
       -> --ally-blue-wash/--ally-blue-500. A fixed brand accent, not
       currentColor -- same reasoning as the eyebrow above. */
    background: var(--ally-blue-wash);
    color: var(--ally-blue-500);
    font-size: var(--mt-text-lg);
}

/* Default (safe for 'grid'): card-title/card-desc sit on the card's own
   surface (white for supporting cards, the featured card's own tinted
   glow) -- both are real "card" surfaces, so this stays a hardcoded
   literal deliberately and must NOT follow a recoloured section.
   'checklist' has no card surface at all -- every row, including the
   first, sits directly on the section surface -- and gets an explicit
   currentColor override further down, the same composition-specific
   split Services' Grid/Detailed vs. Feature Row already established. */
.mt-wcu__card-title {
    font-size: var(--mt-text-lg);
    font-weight: var(--mt-weight-bold);
    color: var(--mt-text-strong);
    line-height: var(--mt-leading-snug);
    margin: 0 0 var(--mt-space-2);
}

.mt-wcu__card-desc {
    font-size: var(--mt-text-sm);
    color: var(--mt-text-body);
    line-height: var(--mt-leading-normal);
    margin: 0;
    max-width: var(--mt-measure-tight);
}

.mt-wcu__cta {
    text-align: center;
    margin-top: var(--mt-space-12);
}

.mt-wcu__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2);
    padding: var(--mt-space-4) var(--mt-space-8);
    border-radius: var(--mt-radius-full);
    background: var(--mt-brand-primary);
    color: var(--mt-text-inverse);
    font-weight: var(--mt-weight-semibold);
    text-decoration: none;
    box-shadow: var(--mt-elevation-raised);
    transition: background-color var(--mt-duration-normal) var(--mt-ease-default),
                transform var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-wcu__cta-btn:hover {
    background: var(--mt-brand-primary-hover);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------
   Composition: grid -- featured-first. The first card spans the full
   row as an emphasised panel (tinted ground, larger icon + title);
   the remaining cards form a quiet 2-up grid with a left accent edge.
   ------------------------------------------------------------ */

.mt-wcu__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mt-space-6);
}

.mt-wcu__card {
    display: flex;
    flex-direction: column;
    gap: var(--mt-space-4);
    padding: var(--mt-space-8);
    border: 1px solid var(--mt-border-light);
    /* Ally identity (2026-09-21): --mt-accent (orange) -> --ally-blue-400
       -- the supporting-card accent. The featured card below gets navy
       instead, matching its own already-navy icon/glow identity. */
    border-left: 3px solid var(--ally-blue-400);
    border-radius: var(--mt-radius-md);
    background: var(--mt-surface-card);
    box-shadow: var(--mt-elevation-card);
    transition: box-shadow var(--mt-duration-normal) var(--mt-ease-default),
                transform var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-wcu__card:hover {
    box-shadow: var(--mt-elevation-card-hover);
    transform: translateY(-3px);
}

/* Featured first reason -- the section's focal point. */
.mt-wcu__card:first-child {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--mt-space-6);
    padding: var(--mt-space-10);
    border-left-width: 1px;
    /* Ally identity (2026-09-21): --mt-accent (orange) -> --mt-brand-
       primary (navy) -- reuses the SAME token its own icon below already
       uses, so the featured card's accent and icon read as one navy
       identity, distinct from the supporting cards' blue accent. */
    border-top: 3px solid var(--mt-brand-primary);
    background:
        var(--mt-section-glow),
        var(--mt-brand-primary-soft);
}

.mt-wcu__card:first-child .mt-wcu__icon {
    width: 60px;
    height: 60px;
    font-size: var(--mt-text-2xl);
    background: var(--mt-brand-primary);
    color: var(--mt-text-inverse);
}

.mt-wcu__card:first-child .mt-wcu__card-title {
    font-size: var(--mt-text-xl);
}

.mt-wcu__card:first-child .mt-wcu__card-desc {
    font-size: var(--mt-text-md);
    max-width: var(--mt-measure);
}

/* An odd number of remaining cards (i.e. an EVEN total reason count --
   n=4, n=6...): let the last one span full width so the grid never
   leaves a lonely half-width card. Reviewed in the reconnect round
   (2026-09-21): spanning it full width alone, still stacked
   (icon-above-text), left a large, mostly-empty box for one short
   reason -- confirmed in a real render at n=4. Fixed with the SMALLEST
   available adjustment: lay it out horizontally instead, reusing the
   EXACT technique the featured card above already uses (flex-direction:
   row + align-items + gap) rather than any new layout mechanism, so the
   spanning row reads as a deliberate wide row instead of empty space.
   Reset back to stacked on mobile below, same as the featured card. */
/* Scoped to :not(.mt-wcu--checklist) -- 'checklist' already lays out
   every row horizontally with its own gap/alignment (see below); without
   this guard, the extra flex-direction/align-items/gap here would win on
   specificity against checklist's own rule for its own last row whenever
   the total reason count happens to be even, quietly overriding values
   checklist already deliberately sets. */
.mt-wcu:not(.mt-wcu--checklist) .mt-wcu__card:last-child:nth-child(even) {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: var(--mt-space-6);
}

/* ------------------------------------------------------------
   Composition: checklist -- a compact vertical list, each reason one
   row. v2: a real connected rail (a hairline down the icon column) and
   a check-style icon chip, so it reads as a deliberate checklist, not
   just stacked cards with borders removed.
   ------------------------------------------------------------ */

.mt-wcu--checklist .mt-wcu__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 760px;
    margin: 0 auto;
}

.mt-wcu--checklist .mt-wcu__card {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--mt-space-5);
    padding: var(--mt-space-6) 0;
    border: none;
    border-bottom: 1px solid var(--mt-border-light);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mt-wcu--checklist .mt-wcu__card:hover {
    transform: none;
    box-shadow: none;
}

.mt-wcu--checklist .mt-wcu__card:first-child {
    grid-column: auto;
    padding: 0 0 var(--mt-space-6);
    border-top: none;
    background: transparent;
}

.mt-wcu--checklist .mt-wcu__card:first-child .mt-wcu__icon,
.mt-wcu--checklist .mt-wcu__icon {
    width: 40px;
    height: 40px;
    font-size: var(--mt-text-md);
    border-radius: var(--mt-radius-full);
    /* Ally identity (2026-09-21): --mt-accent-soft/--mt-accent (orange)
       -> --ally-blue-wash/--ally-blue-500. Fixed accent, not
       currentColor -- same reasoning as the grid icon above. */
    background: var(--ally-blue-wash);
    color: var(--ally-blue-500);
}

.mt-wcu--checklist .mt-wcu__card:last-child {
    border-bottom: none;
}

/* 'checklist' has no card surface at all -- every row (including the
   first) sits directly on the section surface, so it must follow the
   section's own editable color rather than a hardcoded literal. Same
   opacity-hierarchy convention as the subtitle above / Services Feature
   Row (title 100%, body 0.78). Ally identity / Studio fix, 2026-09-21. */
.mt-wcu--checklist .mt-wcu__card:first-child .mt-wcu__card-title,
.mt-wcu--checklist .mt-wcu__card-title {
    font-size: var(--mt-text-md);
    color: currentColor;
}

.mt-wcu--checklist .mt-wcu__card:first-child .mt-wcu__card-desc,
.mt-wcu--checklist .mt-wcu__card-desc {
    font-size: var(--mt-text-sm);
    max-width: none;
    color: currentColor;
    opacity: 0.78;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .mt-wcu__grid {
        gap: var(--mt-space-5);
    }
    .mt-wcu__card:first-child {
        padding: var(--mt-space-8);
    }
}

@media (max-width: 767px) {
    .mt-wcu {
        padding: var(--mt-section-py-sm) 0;
    }
    .mt-wcu__header {
        margin-bottom: var(--mt-space-10);
    }
    .mt-wcu__title {
        font-size: var(--mt-text-2xl);
    }
    /* single column: every card is full width, featured card stacks its
       icon above the text like the rest. */
    .mt-wcu__grid {
        grid-template-columns: 1fr;
    }
    .mt-wcu__card {
        padding: var(--mt-space-6);
    }
    .mt-wcu__card:first-child {
        flex-direction: column;
        gap: var(--mt-space-4);
        padding: var(--mt-space-8);
    }
    .mt-wcu__card:first-child .mt-wcu__icon {
        width: 52px;
        height: 52px;
        font-size: var(--mt-text-xl);
    }
    /* Same reset as the featured card above -- the even-count spanning
       row's horizontal layout (desktop/tablet only) needs to stack at
       this width like every other card. */
    .mt-wcu:not(.mt-wcu--checklist) .mt-wcu__card:last-child:nth-child(even) {
        flex-direction: column;
        gap: var(--mt-space-4);
    }
    .mt-wcu--checklist .mt-wcu__card {
        gap: var(--mt-space-4);
    }
    .mt-wcu__cta {
        margin-top: var(--mt-space-10);
    }
    .mt-wcu__cta-btn {
        width: 100%;
        justify-content: center;
    }
}