/* ==========================================================================
   MAILOZA — ABOUT PAGE STYLES  (page-scoped, W13)
   Loaded ONLY on the About page via $page_styles = ['pages/about.css'] (see
   app/includes/head.php). Consumes the design tokens from style.css — NO raw
   hex, no magic numbers, no duplication of base/component CSS. Every colour is
   a var(--…); status colours come from the status tokens so they stay
   accessible and theme-able.

   Reused components (hero, section-header, feature/service cards, platform-grid,
   process-steps, faq-list, alert-banner, cta-banner) carry their own styling in
   components.css. This file styles ONLY the page-specific wrappers/blocks that
   are not components:
     1. Section rhythm helpers (about-only)
     2. Mission-bullets strip (under the hero)
     3. Section relief line
     4. Honest trust grid
     5. Future-vision split block
     6. Responsive tuning
   ========================================================================== */


/* ==========================================================================
   1. SECTION RHYTHM  (about-only wrappers; base sections live in style.css)
   ========================================================================== */
.about-section {
    padding-block: var(--space-9);
}

@media (min-width: 768px) {
    .about-section { padding-block: var(--space-10); }
}

/* Alternating wash to create calm, premium separation between bands. */
.about-section--specialties,
.about-section--different,
.about-section--faq {
    background-color: var(--bg-surface-subtle);
}


/* ==========================================================================
   2. MISSION-BULLETS STRIP  (directly under the hero CTAs)
   ========================================================================== */
.about-mission {
    padding-bottom: var(--space-9);
}

.about-mission__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    padding: var(--space-5) 0 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid var(--border-default);
}

.about-mission__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-body);
}

.about-mission__icon {
    display: inline-flex;
    color: var(--teal-700);
}
.about-mission__icon .mailoza-icon { width: var(--icon-md); height: var(--icon-md); }


/* ==========================================================================
   3. SECTION RELIEF LINE  (the calm "and here's the relief" closer)
   ========================================================================== */
.about-section__relief {
    max-width: var(--measure);
    margin: var(--space-8) auto 0;
    text-align: center;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
}


/* ==========================================================================
   4. HONEST TRUST GRID  (icon-led claims; no fabricated badges/numbers)
   ========================================================================== */
.trust-grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
}

.trust-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.trust-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-md);
    background-color: var(--teal-100);
    color: var(--teal-700);
}
.trust-card__icon .mailoza-icon { width: var(--icon-md); height: var(--icon-md); }

.trust-card__title {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.trust-card__desc {
    margin: var(--space-2) 0 0;
    color: var(--text-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

/* The honesty alert sits below the grid with calm spacing. */
.about-section--trust .alert {
    margin-top: var(--space-8);
}

@media (min-width: 640px) {
    .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==========================================================================
   5. FUTURE-VISION SPLIT BLOCK  (roadmap, honestly labelled)
   ========================================================================== */
.about-vision {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
    align-items: center;
    padding: var(--space-8);
    background-color: var(--bg-inverse);
    border-radius: var(--radius-lg);
    color: var(--text-on-inverse);
}

.about-vision__copy .eyebrow {
    color: var(--teal-400);
}

.about-vision__title {
    color: var(--text-on-inverse);
    font-size: var(--fluid-h2);
}

.about-vision__lead {
    margin-top: var(--space-4);
    max-width: var(--measure);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--neutral-200);
}

.about-vision__copy .btn { margin-top: var(--space-6); }

.about-vision__points {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
    padding: 0;
    margin: 0;
    list-style: none;
}

.about-vision__point {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background-color: var(--blue-800);
    border: 1px solid var(--blue-700);
    border-radius: var(--radius-md);
    font-weight: var(--weight-medium);
    color: var(--text-on-inverse);
}

.about-vision__point-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--teal-400);
}
.about-vision__point-icon .mailoza-icon { width: var(--icon-md); height: var(--icon-md); }


/* ==========================================================================
   6. RESPONSIVE TUNING
   ========================================================================== */
@media (min-width: 768px) {
    .about-vision__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .about-vision {
        grid-template-columns: 1.25fr 1fr;
        gap: var(--space-10);
        padding: var(--space-10);
    }
    .about-vision__points { grid-template-columns: 1fr; }
}


/* ==========================================================================
   HERO VISUAL COMPOSITION  (W16 — texture + glow + framed illustration)
   --------------------------------------------------------------------------
   Wraps the hero in a depth band (faint grid + soft glow) and sets a framed
   illustration beside the hero text on wide viewports. Wrapper owns layout;
   the shared hero-basic component is untouched. Tokens only.
   ========================================================================== */
.about-hero-band {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(180deg,
        var(--visual-gradient-from),
        var(--bg-surface) 78%);
}

.about-hero-band .accent-glow { z-index: 0; }

/* The hero now uses the shared .hero-split 2-column pattern (visual.css):
   hero text in the left column, framed illustration in the right. The band
   above only supplies the gradient + glow depth. */