/* ============================================================
   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. Every recurring visual
   value is a real --mt-* token, EXCEPT .mt-cta__title/.mt-cta__subtitle's
   own color, deliberately kept as the exact literal values the Post-
   Live-UAT Correction round's own CTA contrast advisory was verified
   against (see partials/cta_section.php's own header for why).
   ============================================================ */

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

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

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

.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-3xl);
    font-weight: var(--mt-weight-black);
    /* Fixed — see this file's own header note. */
    color: #ffffff;
    margin: 0 0 var(--mt-space-4);
}

.mt-cta__subtitle {
    font-size: var(--mt-text-md);
    /* Fixed — see this file's own header note. */
    color: rgba(203, 213, 245, 0.9);
    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);
}

.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--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);
    }
}