/* ============================================================
   MORETECH -- PROCESS FLOW
   First-party markup + CSS (see partials/process_flow.php's own header
   for the full rationale). Every recurring visual value is a real --mt-*
   token.

   Design Language v2 (MoreTech craftsmanship pass): a LEFT kicker
   header; the numbered step marker becomes a real accent node; 'scroll'
   cards gain elevation + a connector rule between them; 'vertical'
   becomes a proper connected timeline with numbered nodes sitting on the
   rail. Class hooks (.mt-process, .mt-process__header/__eyebrow/__title/
   __subtitle/__wrapper/__scroll/__track/__step/__step--connector/__nav/
   __number/__icon/__step-title/__step-desc/__timeline/__body, the ids
   #mtProcessWrapper/#mtProcessScroll/#mtProcessNavLeft/#mtProcessNavRight,
   and the --vertical modifier) are UNCHANGED. The scroll/drag engine is
   untouched.

   Process Flow reconnect/polish round (2026-09-21) -- a recolor +
   reconnect pass, NOT a redesign. Two fixes, both confined to color:
     1. Every remaining --mt-accent/--mt-accent-soft (the generic
        MoreTech orange, #E85D2F) is replaced with the Ally blue/navy
        palette already established by Header/Hero/Trust Bar/About/
        Services -- eyebrow and the step-number node become a fixed
        --ally-blue-500 accent (matching every other Ally eyebrow, which
        is deliberately NOT currentColor -- see that rule's own comment);
        the icon tile already correctly used Ally navy
        (--mt-brand-primary) and needed no change.
     2. currentColor-on-root, composition-specifically: title/subtitle
        are shared header elements (same surface in both compositions)
        and now read .mt-process's own color. step-title/step-desc stay
        hardcoded for 'scroll' (its cards have their own white surface
        and must not follow a recoloured section -- same reasoning as
        Services' Grid/Detailed) but become currentColor for 'vertical'
        (no card surface of its own, sits directly on the section
        surface -- same reasoning as Services' Feature Row).
   No composition, markup, class, or interaction changed.
   ============================================================ */

.mt-process {
    padding: var(--mt-section-py) 0;
    background: var(--mt-surface-alt);
    border-top: 1px solid var(--mt-border-light);
    border-bottom: 1px solid var(--mt-border-light);
    font-family: var(--mt-font-sans);
    /* Process Flow reconnect/polish round (2026-09-21): explicit base
       color so .mt-process__title (and, composition-specifically below,
       'vertical''s step-title/step-desc) can read `currentColor` and a
       Studio self.color edit actually reaches them -- same fix already
       applied to About's/Services' own title. Same literal value as
       before -- default rendering is unchanged. */
    color: var(--mt-text-strong);
}

.mt-process__header {
    max-width: var(--mt-measure);
    margin: 0 0 var(--mt-space-12);
}

.mt-process__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 (generic MoreTech orange,
       #E85D2F) -> --ally-blue-500, matching the fixed-blue-kicker
       convention Hero/Trust Bar/About/Services all already use for their
       own eyebrow -- deliberately NOT currentColor: every eyebrow across
       this system is the same brand-fixed accent blue, not a shade of
       the section's own runtime text color, and that consistency is the
       whole point of "one shared visual system". */
    color: var(--ally-blue-500);
    margin-bottom: var(--mt-space-4);
}

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

.mt-process__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-process's own color (same value by default,
       unchanged rendering), so a Studio self.color edit actually
       reaches this heading. Same fix already applied to About's/
       Services' own title. */
    color: currentColor;
    line-height: var(--mt-leading-tight);
    letter-spacing: var(--mt-tracking-tight);
    max-width: var(--mt-measure-head);
    margin: 0 0 var(--mt-space-3);
}

.mt-process__subtitle {
    font-size: var(--mt-text-md);
    /* Ally identity / Studio fix (2026-09-21): currentColor + opacity,
       the same hierarchy-by-opacity convention Hero/Services Feature Row
       already use for body copy under a currentColor heading (opacity
       0.78 -- same value Services uses for its own "desc" tier). */
    color: currentColor;
    opacity: 0.78;
    line-height: var(--mt-leading-relaxed);
    margin: 0;
}

/* The numbered step marker -- a real accent node, shared by both
   compositions (each overrides placement below). Ally identity
   (2026-09-21): --mt-accent/--mt-accent-soft (orange) -> --ally-blue-500/
   --ally-blue-wash. A fixed brand accent, not currentColor -- like the
   eyebrow above, this node is a consistent signature color across the
   system, not running text. */
.mt-process__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--mt-radius-full);
    background: var(--ally-blue-wash);
    color: var(--ally-blue-500);
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-black);
    letter-spacing: 0;
    margin-bottom: var(--mt-space-4);
}

.mt-process__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--mt-radius-md);
    background: var(--mt-brand-primary-soft);
    color: var(--mt-brand-primary);
    font-size: var(--mt-text-lg);
    margin-bottom: var(--mt-space-4);
}

/* Default (safe for 'scroll'): step-title/step-desc sit on the track
   card's own white surface (--mt-surface-card, below), so they keep a
   hardcoded literal deliberately -- they must NOT follow a recoloured
   section and go invisible-on-white. 'vertical' has no card surface of
   its own (its steps sit 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-process__step-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-process__step-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);
}

/* ------------------------------------------------------------
   Composition: scroll -- horizontal card track (real drag/arrow
   engine, untouched). v2: elevated cards, a connector rule between
   consecutive cards, a solid accent number node.
   ------------------------------------------------------------ */

.mt-process__wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--mt-space-4);
}

.mt-process__scroll {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    cursor: grab;
}

.mt-process__scroll::-webkit-scrollbar {
    display: none;
}

.mt-process__scroll:active {
    cursor: grabbing;
}

.mt-process__track {
    display: flex;
    gap: var(--mt-space-6);
    list-style: none;
    margin: 0;
    padding: var(--mt-space-3) var(--mt-space-1) var(--mt-space-4);
}

.mt-process__track .mt-process__step {
    position: relative;
    flex: 0 0 300px;
    scroll-snap-align: start;
    padding: var(--mt-space-8);
    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),
                transform var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-process__track .mt-process__step:hover {
    box-shadow: var(--mt-elevation-card-hover);
    transform: translateY(-4px);
}

/* connector rule from one card to the next */
.mt-process__track .mt-process__step--connector::after {
    content: "";
    position: absolute;
    top: calc(var(--mt-space-8) + 17px);
    right: calc(-1 * var(--mt-space-6));
    width: var(--mt-space-6);
    height: 2px;
    background: var(--mt-border-strong);
}

.mt-process__track .mt-process__number {
    /* Ally identity (2026-09-21): --mt-accent (orange) -> --ally-blue-500. */
    background: var(--ally-blue-500);
    color: var(--mt-text-inverse);
}

.mt-process__nav {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--mt-radius-full);
    border: 1px solid var(--mt-border-strong);
    background: var(--mt-surface-card);
    color: var(--mt-text-strong);
    cursor: pointer;
    box-shadow: var(--mt-elevation-card);
    transition: background-color var(--mt-duration-normal) var(--mt-ease-default),
                color var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-process__nav:hover {
    background: var(--mt-brand-primary);
    color: var(--mt-text-inverse);
}

@media (max-width: 767px) {
    .mt-process__nav {
        display: none;
    }
}

/* ------------------------------------------------------------
   Composition: vertical -- a connected timeline. v2: the number node
   sits ON the rail; the rail runs through the node column; step titles
   are display-weight.
   ------------------------------------------------------------ */

.mt-process--vertical .mt-process__timeline {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 680px;
    position: relative;
}

/* Real DOM here: <li.__step> holds <span.__icon> + <div.__body>, and
   <div.__body> holds <span.__number> then title/desc. So the rail runs
   down the icon column and the number is an inline accent chip inside
   the body, before the title. */
.mt-process--vertical .mt-process__step {
    display: flex;
    gap: var(--mt-space-6);
    position: relative;
    padding-bottom: var(--mt-space-10);
}

.mt-process--vertical .mt-process__step:last-child {
    padding-bottom: 0;
}

/* the rail -- runs down the centre of the 48px icon column (left 23px) */
.mt-process--vertical .mt-process__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 52px;
    bottom: 0;
    width: 2px;
    background: var(--mt-border-strong);
}

.mt-process--vertical .mt-process__icon {
    flex-shrink: 0;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    background: var(--mt-brand-primary);
    color: var(--mt-text-inverse);
}

.mt-process--vertical .mt-process__body {
    flex: 1;
    min-width: 0;
    padding-top: var(--mt-space-1);
}

.mt-process--vertical .mt-process__number {
    display: inline-flex;
    width: auto;
    height: auto;
    padding: var(--mt-space-1) var(--mt-space-3);
    border-radius: var(--mt-radius-full);
    /* Ally identity (2026-09-21): --mt-accent/--mt-accent-soft (orange)
       -> --ally-blue-500/--ally-blue-wash. */
    background: var(--ally-blue-wash);
    color: var(--ally-blue-500);
    font-size: var(--mt-text-xs);
    letter-spacing: var(--mt-tracking-wide);
    margin-bottom: var(--mt-space-3);
}

/* 'vertical' has no card surface -- its step text sits directly on the
   section surface, so (unlike 'scroll', kept hardcoded above) it must
   follow the section's own editable color. Same opacity-hierarchy
   convention as the subtitle above / Services Feature Row (title 100%,
   body 0.78). Ally identity / Studio fix, 2026-09-21. */
.mt-process--vertical .mt-process__step-title {
    color: currentColor;
}

.mt-process--vertical .mt-process__step-desc {
    color: currentColor;
    opacity: 0.78;
    max-width: var(--mt-measure);
}

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

@media (max-width: 1024px) {
    .mt-process__header {
        margin-bottom: var(--mt-space-10);
    }
}

@media (max-width: 767px) {
    .mt-process {
        padding: var(--mt-section-py-sm) 0;
    }
    .mt-process__title {
        font-size: var(--mt-text-2xl);
    }
    .mt-process__track .mt-process__step {
        flex-basis: 260px;
        padding: var(--mt-space-6);
    }
    .mt-process__track .mt-process__step--connector::after {
        display: none;
    }
    .mt-process--vertical .mt-process__step {
        gap: var(--mt-space-4);
        padding-bottom: var(--mt-space-8);
    }
    .mt-process--vertical .mt-process__icon {
        width: 40px;
        height: 40px;
        font-size: var(--mt-text-md);
    }
    .mt-process--vertical .mt-process__step:not(:last-child)::before {
        left: 19px;
        top: 44px;
    }
}