/* ============================================================
   MORETECH -- CTA
   First-party markup + CSS (see partials/cta_section.php's own header
   for the full rationale) -- not derived from the shared platform's own
   03-sections-home.css/cta-section-upgrade.css.

   MDQ-046 (Maximum Design Quality Program, Phase 4, Wave 4A):
   .mt-cta__title/.mt-cta__subtitle used to hardcode their own literal
   color (deliberately NOT inheriting 'self'), matching the Post-Live-UAT
   Correction round's own CTA contrast advisory. That hardcoding is
   retired -- .mt-cta itself now declares a real default color
   (var(--mt-text-inverse), the same value the old literal resolved to),
   and .mt-cta__title/.mt-cta__subtitle inherit it via currentColor -- the
   same pattern .mt-hero__title/.mt-hero__micro already use on this
   template's own Hero. This makes 'self' color a real, effective Studio
   lever for the first time, and unlocks a genuine light or two-tone CTA
   (a light 'self' background-color now correctly recolors the text too,
   instead of leaving it stranded on its old fixed light literal). See
   app.design.effectiveness.FIXED_TEXT_COLORS's own docstring for the
   backend-side half of this change.
   ============================================================ */

.mt-cta {
    position: relative;
    padding: var(--mt-section-py) 0;
    background: var(--mt-gradient-dark);
    color: var(--mt-text-inverse);
    text-align: center;
    font-family: var(--mt-font-sans);
    overflow: hidden;
}

.mt-cta__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Brand-tint duotone -- whatever bg_image an admin picks (stock photos
   run the gamut of off-brand hues), this keeps the section reading as
   THIS site rather than a generic stock-photo wash. Only fires when
   cta_section.php has actually set an inline background-image (its own
   attribute-substring match), so the no-photo gradient default below is
   completely untouched. multiply neutralises off-palette colour casts;
   the accent glow keeps it from reading as flat black. */
.mt-cta[style*="background-image"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 70% at 15% 20%, rgba(232, 93, 47, 0.16) 0%, rgba(232, 93, 47, 0) 60%),
        linear-gradient(165deg, rgba(20, 33, 61, 0.75) 0%, rgba(11, 18, 32, 0.9) 100%);
    mix-blend-mode: multiply;
}

.mt-cta__container {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

/* Design Quality Correction round: optional visual anchor above the
   eyebrow/title (see partials/cta_section.php's own header) -- reuses the
   same 'icon' capability target convention Trust Bar/About already use
   (background-color/border/radius/color/font-size/opacity/box-shadow all
   real, styleable props there), sized/colored for a strong badge against
   this section's own dark background. display:flex (block-level, unlike
   .mt-cta__eyebrow's own inline-block) so it always takes its own line
   above the eyebrow rather than sitting beside it inline -- text-align
   does not position a block box, so its horizontal position is set with
   margin instead, mirroring the SAME three-state (center/left/right)
   override pattern .mt-cta__container's own boxed-composition rules
   below already use. */
.mt-cta__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--mt-radius-full);
    background: var(--mt-accent);
    color: var(--mt-text-inverse);
    font-size: var(--mt-text-lg);
    margin: 0 auto var(--mt-space-4);
}

.mt-cta--align-left .mt-cta__icon {
    margin-left: 0;
    margin-right: auto;
}

.mt-cta--align-right .mt-cta__icon {
    margin-left: auto;
    margin-right: 0;
}

.mt-cta__eyebrow {
    display: inline-block;
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-wider);
    text-transform: uppercase;
    color: var(--mt-accent);
    margin-bottom: var(--mt-space-3);
}

.mt-cta__title {
    font-size: var(--mt-text-4xl);
    font-weight: var(--mt-weight-black);
    line-height: 1.15;
    /* Inherits .mt-cta's own color -- see this file's own header note (MDQ-046). */
    color: currentColor;
    margin: 0 0 var(--mt-space-4);
}

.mt-cta__subtitle {
    font-size: var(--mt-text-md);
    /* Inherits .mt-cta's own color -- see this file's own header note (MDQ-046). */
    color: currentColor;
    line-height: var(--mt-leading-relaxed);
    margin: 0 0 var(--mt-space-6);
}

.mt-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mt-space-4);
}

.mt-cta__btn {
    display: inline-flex;
    align-items: center;
    padding: var(--mt-space-4) var(--mt-space-8);
    border-radius: var(--mt-radius-full);
    font-weight: var(--mt-weight-semibold);
    text-decoration: none;
    transition: background var(--mt-duration-normal) var(--mt-ease-default),
                color var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-cta__btn--primary {
    background: var(--mt-accent);
    color: var(--mt-text-inverse);
    box-shadow: var(--mt-shadow-accent);
}

.mt-cta__btn--primary:hover {
    background: var(--mt-accent-hover);
}

.mt-cta__btn--secondary {
    background: transparent;
    color: var(--mt-text-inverse);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.mt-cta__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mt-cta__note {
    margin: var(--mt-space-5) 0 0;
    font-size: var(--mt-text-xs);
    color: rgba(203, 213, 245, 0.7);
}

.mt-cta--align-left {
    text-align: left;
}

.mt-cta--align-left .mt-cta__container {
    margin-left: 0;
}

.mt-cta--align-left .mt-cta__actions {
    justify-content: flex-start;
}

.mt-cta--align-right {
    text-align: right;
}

.mt-cta--align-right .mt-cta__container {
    margin-right: 0;
}

.mt-cta--align-right .mt-cta__actions {
    justify-content: flex-end;
}

/* ------------------------------------------------------------
   Composition: boxed -- the same dark treatment, contained in a
   rounded, inset card within the page's normal content flow
   rather than edge-to-edge.
   ------------------------------------------------------------ */

.mt-cta--boxed {
    padding: var(--mt-space-16) 0;
    background: transparent;
}

.mt-cta--boxed::before {
    content: "";
    position: absolute;
    inset: 0 var(--mt-space-8);
    background: var(--mt-gradient-dark);
    border-radius: var(--mt-radius-2xl);
    z-index: 0;
}

.mt-cta--boxed .mt-cta__overlay {
    border-radius: var(--mt-radius-2xl);
    inset: 0 var(--mt-space-8);
}

.mt-cta--boxed .mt-cta__container {
    padding: var(--mt-space-12) var(--mt-space-6);
}

/* Real bug fix (Live UAT): .mt-cta--boxed::before/.mt-cta__overlay above are
   position:absolute background layers with their own `inset` -- they do not
   constrain .mt-cta__container's own box. .mt-cta--align-left/--align-right
   (this file, above) zero out Bootstrap's own auto-centering margin on
   .mt-cta__container, so without a matching inset here the real content box
   starts outside the visible boxed card's own left/right edge whenever an
   alignment class is combined with boxed -- confirmed via real computed
   styles (container box measured with its left edge 8px past the card's own
   edge). Fixed with a margin-only inset matching the two background layers'
   own real inset values above (including the mobile breakpoint) -- margin
   is deliberately used, never max-width: Studio's own 'container' capability
   (app/design/capabilities.py::KNOWN_TARGET_PROPS) only ever writes
   max-width/padding-left/padding-right, never margin, so this fix cannot be
   defeated by a max-width override the same way a max-width-based fix
   could. banner composition is untouched (these rules only ever match
   .mt-cta--boxed).

   Real regression fix (whole-page design review round): the fix above was
   originally written to apply to EVERY boxed CTA unconditionally, not only
   the align-left/align-right cases it was verified against -- confirmed via
   real computed styles on a boxed, default-CENTER-aligned CTA: container
   width 720px, marginLeft/marginRight both a fixed 32px, but the section
   itself was 1382px wide, leaving 630px of unused space stranded on the
   right instead of split evenly. `text-align: center` (the section's own
   base rule) still centers the TEXT inside that 720px box, but a fixed,
   non-auto margin pins the BOX itself flush-left, since the browser has
   nothing telling it to distribute the section's real leftover width
   around the box. Scoping the fixed inset to only the two alignment
   variants that actually need it (their own margin-left:0/margin-right:0
   above removes Bootstrap's auto-centering entirely, which is what
   originally caused THEIR overflow) restores true `margin: auto` centering
   for the default case -- max-width:720px always resolves well inside the
   boxed card's own --mt-space-8/--mt-space-4 inset at any realistic section
   width, so this can never reopen the original overflow bug. Specificity:
   .mt-cta.mt-cta--boxed.mt-cta--align-left/--align-right .mt-cta__container
   is (0,4,0), beating the plain .mt-cta.mt-cta--boxed .mt-cta__container
   base rule's (0,3,0) regardless of source order -- no !important needed,
   same discipline as the original fix.

   Real bug fix (whole-page design review round, completion): align-left
   and align-right were incorrectly given the SAME fixed margin-left AND
   margin-right pair above. When a block box's width is capped by
   max-width and BOTH margins are fixed (non-auto), the browser does not
   redistribute leftover space to either margin -- the box simply sits
   with its left edge at margin-left from the containing block, and
   whatever width+margins don't account for is unclaimed empty space after
   it. That made align-right silently render identically to align-left
   (confirmed via real computed styles: both landed with a 32px left inset
   and ~630px of unclaimed space on the right on a 1382px section) --
   align-right never actually pushed content to the right. The real,
   correct pairing mirrors .mt-cta--align-left/--align-right's own
   non-boxed rules just above (one margin fixed at 0, the other left to
   Bootstrap's own auto): align-left keeps its fixed LEFT inset with
   margin-right:auto; align-right needs the opposite pairing --
   margin-left:auto (so the browser actually pushes the box across the
   leftover space) with a fixed RIGHT inset. margin-right/margin-left:auto
   here is inconsequential for centering math (nothing follows the box in
   flow either way) but is exactly what makes the OTHER, non-auto margin
   the one the browser positions the box against. */
.mt-cta.mt-cta--boxed .mt-cta__container {
    margin-left: auto;
    margin-right: auto;
}

.mt-cta.mt-cta--boxed.mt-cta--align-left .mt-cta__container {
    margin-left: var(--mt-space-8);
    margin-right: auto;
}

.mt-cta.mt-cta--boxed.mt-cta--align-right .mt-cta__container {
    margin-left: auto;
    margin-right: var(--mt-space-8);
}

@media (max-width: 767px) {
    .mt-cta__title { font-size: var(--mt-text-3xl); }
    .mt-cta__actions { flex-direction: column; align-items: stretch; }
    .mt-cta__btn { width: 100%; justify-content: center; }
    .mt-cta--boxed::before,
    .mt-cta--boxed .mt-cta__overlay {
        inset: 0 var(--mt-space-4);
    }
    .mt-cta.mt-cta--boxed.mt-cta--align-left .mt-cta__container {
        margin-left: var(--mt-space-4);
        margin-right: auto;
    }
    .mt-cta.mt-cta--boxed.mt-cta--align-right .mt-cta__container {
        margin-left: auto;
        margin-right: var(--mt-space-4);
    }
}


/* ============================================================
   PLUSFAB CTA (2026-10-01) -- presentation layer, appended (wins by
   source order). Same markup, content fields and compositions (banner /
   boxed / split, text_align, bg_image, overlay_opacity) -- re-skinned.
   An industrial closing band: deep graphite, the content sits inside a
   thin steel frame with copper corner brackets (the About image's
   drawing-mark language), steel label with copper rules, Archivo
   heading, white primary / steel-outline secondary square-ish buttons.
   An admin bg_image still works (the leftover Studio-generated
   `!important` gradient that hid it was removed from studio-generated.css)
   and is rendered in graphite monochrome so any photo stays on-palette.
============================================================ */
.mt-cta {
    padding: var(--mt-space-20) 0;
    background: var(--ally-navy-900);          /* deep graphite, flat */
    border-top: 1px solid rgba(197, 203, 208, 0.14);
    isolation: isolate;
}

/* The partial writes the overlay as rgba(2,6,23,<overlay_opacity>) -- a
   blue-black. Greyscale keeps the admin's opacity value and turns the
   tint neutral graphite. */
.mt-cta__overlay { filter: grayscale(1); }

/* With a bg_image: graphite monochrome. background-blend-mode blends the
   inline photo with this section's own graphite background colour
   (luminosity = the photo's light/dark, the graphite's hue) -- any photo
   stays on-palette. The inherited ::after (navy multiply wash + orange
   glow) is switched off. */
.mt-cta[style*="background-image"] {
    background-color: #2B3035;
    background-blend-mode: luminosity;
}
.mt-cta[style*="background-image"]::after { content: none; }

/* -- Steel frame with copper corner brackets around the content -- */
.mt-cta__container {
    max-width: 860px;
    padding: var(--mt-space-16) var(--mt-space-12);
    border: 1px solid rgba(197, 203, 208, 0.20);
}
.mt-cta__container::before,
.mt-cta__container::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    pointer-events: none;
}
.mt-cta__container::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--mt-accent);
    border-left: 2px solid var(--mt-accent);
}
.mt-cta__container::after {
    right: -1px;
    bottom: -1px;
    border-bottom: 2px solid var(--mt-accent);
    border-right: 2px solid var(--mt-accent);
}

/* Optional icon: a square steel tile with a copper glyph (was a round
   accent-filled badge). */
.mt-cta__icon {
    width: 48px;
    height: 48px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid rgba(197, 203, 208, 0.35);
    color: var(--mt-accent);
    font-size: 1.1rem;
}

/* Label: steel uppercase with copper rules (both sides when centred). */
.mt-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-3);
    font-size: 0.75rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.16em;
    color: var(--ally-grey-400);
    margin-bottom: var(--mt-space-5);
}
.mt-cta__eyebrow::before,
.mt-cta__eyebrow::after {
    content: "";
    width: var(--mt-kicker-rule, 28px);
    height: 2px;
    background: var(--mt-accent);
    flex-shrink: 0;
}
.mt-cta--align-left .mt-cta__eyebrow::after,
.mt-cta--align-right .mt-cta__eyebrow::after,
.mt-cta--split .mt-cta__eyebrow::after { display: none; }

.mt-cta__title {
    font-family: var(--mt-font-heading);
    font-size: clamp(2rem, 1.35rem + 2vw, 3rem);
    font-weight: var(--mt-weight-bold);
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-wrap: balance;
    margin-bottom: var(--mt-space-5);
}

.mt-cta__subtitle {
    font-size: 1.04rem;
    line-height: 1.7;
    opacity: 0.74;
    max-width: 60ch;
    margin: 0 auto var(--mt-space-8);
}
.mt-cta--align-left .mt-cta__subtitle { margin-left: 0; }
.mt-cta--align-right .mt-cta__subtitle { margin-right: 0; }

.mt-cta__actions { gap: var(--mt-space-3); }

.mt-cta__btn {
    padding: 0.95rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--mt-radius-sm, 6px);
    font-family: var(--mt-font-heading);
    font-size: 0.8rem;
    font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mt-cta__btn:focus-visible {
    outline: 2px solid var(--mt-accent);
    outline-offset: 3px;
}
.mt-cta__btn--primary {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--ally-navy-700);
    box-shadow: none;
}
.mt-cta__btn--primary:hover {
    background: #E1E4E7;
    border-color: #E1E4E7;
    color: var(--ally-navy-900);
}
.mt-cta__btn--secondary {
    background: transparent;
    border-color: rgba(197, 203, 208, 0.55);
    color: #FFFFFF;
}
.mt-cta__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: #FFFFFF;
}

.mt-cta__note {
    margin-top: var(--mt-space-8);
    padding-top: var(--mt-space-5);
    border-top: 1px solid rgba(197, 203, 208, 0.14);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8A939B;
}

/* -- boxed: the same band as a flat graphite plate, 2px corners -- */
.mt-cta--boxed { background: transparent; border-top: 0; padding: var(--mt-space-16) 0; }
.mt-cta--boxed::before {
    background: var(--ally-navy-900);
    border-radius: 2px;
}
.mt-cta--boxed .mt-cta__overlay { border-radius: 2px; }
.mt-cta--boxed .mt-cta__container { border-color: transparent; }

@media (max-width: 1024px) {
    .mt-cta { padding: var(--mt-space-16) 0; }
    .mt-cta__container { max-width: calc(100% - var(--mt-space-8)); padding: var(--mt-space-12) var(--mt-space-8); }
}

@media (max-width: 767px) {
    .mt-cta { padding: var(--mt-space-10) 0; }
    .mt-cta__container {
        max-width: calc(100% - var(--mt-space-6));
        padding: var(--mt-space-10) var(--mt-space-5);
    }
    .mt-cta__container::before,
    .mt-cta__container::after { width: 20px; height: 20px; }
    .mt-cta__title { font-size: 1.85rem; }
    .mt-cta__subtitle { font-size: 0.96rem; margin-bottom: var(--mt-space-6); }
    .mt-cta__eyebrow::before,
    .mt-cta__eyebrow::after { width: 16px; }
    .mt-cta__eyebrow { letter-spacing: 0.12em; }
}