/* ============================================================
   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. Specificity (0,3,0) beats --align-left/--align-right's (0,2,0)
   regardless of source order, so no !important is needed. banner
   composition is untouched (this rule only ever matches .mt-cta--boxed). */
.mt-cta.mt-cta--boxed .mt-cta__container {
    margin-left: var(--mt-space-8);
    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__container {
        margin-left: var(--mt-space-4);
        margin-right: var(--mt-space-4);
    }
}