/* ============================================================
   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;
}