/* ============================================================
   MORETECH -- ABOUT PREVIEW
   First-party markup + CSS (see partials/about_preview.php's own header
   for the full rationale) -- not derived from the shared platform's own
   03-sections-home.css/03-sections-home-about-v4.css. Every recurring
   visual value is a real --mt-* token. One shared root (.mt-about), one
   shared content/visual/mv/feature/stat convention across both
   compositions.
   ============================================================ */

.mt-about {
    padding: var(--mt-section-py) 0;
    background: var(--mt-page-bg);
    font-family: var(--mt-font-sans);
}

.mt-about__row {
    display: flex;
    align-items: center;
    gap: var(--mt-space-12);
    flex-wrap: wrap;
}

.mt-about__content {
    flex: 1 1 420px;
    min-width: 0;
}

/* Real bug fix (Live UAT): .mt-about__visual (the image column) only
   renders when a real image is set -- a manual-only field the AI can never
   supply. Without it, .mt-about__content is .mt-about__row's ONLY flex
   item, and flex-grow:1 (from the shorthand above) stretches its box to
   fill the entire row width even though the text inside only needs a
   fraction of it -- confirmed via real computed styles (content box
   measured 1296px wide holding text that visually occupies well under
   half that) with both rich and sparse content. Capping width only when
   there is no sibling to share the row with -- :only-child is well
   supported and directly expresses "no image is present" without a new
   class/JS; when a real image IS set, .mt-about__visual is a second flex
   item and this rule correctly does not apply, leaving the original
   two-column behavior untouched. */
.mt-about__content:only-child {
    flex-grow: 0;
    max-width: 640px;
}

.mt-about__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-about__title {
    font-size: var(--mt-text-3xl);
    font-weight: var(--mt-weight-black);
    color: var(--mt-text-strong);
    line-height: var(--mt-leading-tight);
    margin: 0 0 var(--mt-space-4);
}

.mt-about__lead {
    font-size: var(--mt-text-md);
    color: var(--mt-text-body);
    line-height: var(--mt-leading-relaxed);
    margin: 0;
}

.mt-about__actions {
    margin-top: var(--mt-space-6);
}

.mt-about__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2);
    padding: var(--mt-space-3) var(--mt-space-6);
    border-radius: var(--mt-radius-md);
    background: var(--mt-brand-primary);
    color: var(--mt-text-inverse);
    font-weight: var(--mt-weight-semibold);
    text-decoration: none;
    transition: background var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-about__cta-btn:hover {
    background: var(--mt-brand-primary-hover);
}

.mt-about__visual {
    flex: 1 1 420px;
    min-width: 0;
}

.mt-about__visual img {
    width: 100%;
    height: auto;
    border-radius: var(--mt-radius-xl);
    display: block;
}

/* ── Mission/Vision + Features + Stats (shared row below) ── */

.mt-about__secondary {
    display: flex;
    gap: var(--mt-space-10);
    margin-top: var(--mt-space-12);
    flex-wrap: wrap;
}

.mt-about__mv {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    gap: var(--mt-space-5);
}

.mt-about__mv-item {
    display: flex;
    gap: var(--mt-space-4);
    align-items: flex-start;
}

.mt-about__mv-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mt-radius-full);
    background: var(--mt-brand-primary-soft);
    color: var(--mt-brand-primary);
}

.mt-about__mv-label {
    font-size: var(--mt-text-base);
    font-weight: var(--mt-weight-bold);
    color: var(--mt-text-strong);
    margin: 0 0 var(--mt-space-1);
}

.mt-about__mv-text {
    font-size: var(--mt-text-sm);
    color: var(--mt-text-muted);
    margin: 0;
    line-height: var(--mt-leading-normal);
}

.mt-about__features {
    flex: 1 1 300px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mt-space-3);
}

.mt-about__feature {
    display: flex;
    align-items: center;
    gap: var(--mt-space-3);
    font-size: var(--mt-text-sm);
    color: var(--mt-text-body);
}

.mt-about__feature-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mt-radius-full);
    background: var(--mt-accent-soft);
    color: var(--mt-accent);
    font-size: var(--mt-text-xs);
}

.mt-about__stats {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-6) var(--mt-space-10);
    margin-top: var(--mt-space-2);
}

.mt-about__stat {
    display: flex;
    flex-direction: column;
}

.mt-about__stat strong {
    font-size: var(--mt-text-2xl);
    font-weight: var(--mt-weight-black);
    color: var(--mt-brand-primary);
}

.mt-about__stat span {
    font-size: var(--mt-text-sm);
    color: var(--mt-text-muted);
}

@media (max-width: 767px) {
    .mt-about__row {
        gap: var(--mt-space-8);
    }
    .mt-about__title {
        font-size: var(--mt-text-2xl);
    }
}

/* ------------------------------------------------------------
   Composition: stacked -- a single centered narrative column,
   no side-by-side split. The real image (if set) becomes a wide
   banner above the text instead of a side column. An editorial,
   text-forward treatment.
   ------------------------------------------------------------ */

.mt-about--stacked .mt-about__row {
    flex-direction: column;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

/* Real bug fix (Live UAT): .mt-about__content's own flex-basis (420px,
   set above for the default row/split direction) applies to the flex
   MAIN axis -- which this rule just changed to vertical (flex-direction:
   column). Without this override, .content was forced to a 420px MINIMUM
   HEIGHT regardless of how much text it actually held -- confirmed via
   real computed styles: content box measured 420px tall while its own
   heading+lead text only occupied the top ~220px, producing the same
   real empty-space defect with rich AND sparse content alike. flex:0 1
   auto sizes purely from real content height, the correct behavior for
   a centered narrative column. */
.mt-about--stacked .mt-about__content {
    flex: 0 1 auto;
}

.mt-about--stacked .mt-about__visual {
    order: -1;
    width: 100%;
}

.mt-about--stacked .mt-about__visual img {
    max-height: 360px;
    object-fit: cover;
}

.mt-about--stacked .mt-about__actions {
    display: flex;
    justify-content: center;
}

.mt-about--stacked .mt-about__secondary {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    text-align: left;
}

.mt-about--stacked .mt-about__stats {
    justify-content: center;
    text-align: center;
}

/* ------------------------------------------------------------
   media_position (whole-page design review round): which side the
   image column occupies within the 'split' composition -- independent
   of composition itself, same model as Hero's own media_position.
   Default ('end') needs no rule: it IS .mt-about__row's own natural DOM
   order (.mt-about__content first, .mt-about__visual second), already
   content-left/image-right with zero CSS help. This rule only fires for
   the deliberate 'start' choice. Both columns already share the same
   `flex: 1 1 420px` basis (see .mt-about__content/.mt-about__visual
   above), so a plain `order` swap keeps them symmetric with no track-
   width rebalancing needed the way Hero's asymmetric 1.1fr/1fr grid did.
   ------------------------------------------------------------ */
.mt-about--split-media-start .mt-about__visual {
    order: -1;
}