/* ==========================================================================
   MAILOZA — MONITORING PLATFORM / EMAILOPS STYLES  (page-scoped, W6)

   Loaded ONLY on monitoring-platform.php via $page_styles = ['pages/monitoring.css']
   (see app/includes/head.php). Consumes the design tokens from style.css and the
   shared component layer in components.css — NO raw hex, no magic numbers. The
   EmailOps dashboard preview itself is styled in components.css (§13), so it
   renders here WITHOUT loading home.css; this file only adds the page's own
   bespoke sections.

   Status colours come from the status tokens (green/amber/red), and status is
   never colour-only — every status cue is paired with an icon shape and a text
   label in the markup.

   Table of contents
     1. Section rhythm + shared helpers (relief / note lines)
     2. Hero
     3. Why monitoring matters (failure-mode grid)
     4. Monitoring modules grid
     5. AI Recommendations vision grid
     6. Responsive tuning
   ========================================================================== */


/* ==========================================================================
   1. SECTION RHYTHM + SHARED HELPERS
   ========================================================================== */
.mon-section {
    padding-block: var(--space-9);
}
@media (min-width: 768px) {
    .mon-section { padding-block: var(--space-10); }
}

/* Alternating wash for calm, premium separation between bands. */
.mon-section--modules,
.mon-section--platforms,
.mon-section--benefits {
    background-color: var(--bg-surface-subtle);
}

/* Calm closing "here's the relief" line (mirrors the homepage pattern). */
.mon-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);
}

/* Smaller honesty/clarification note (e.g. what "24×7" really means). */
.mon-section__note {
    max-width: var(--measure);
    margin: var(--space-7) auto 0;
    padding: var(--space-4) var(--space-5);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}


/* ==========================================================================
   2. HERO
   ========================================================================== */
.mon-hero {
    /* Smaller top than bottom so the hero opens close under the header. */
    padding-block: var(--space-8) var(--space-10);
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
}
@media (min-width: 768px) {
    .mon-hero { padding-block: var(--space-9) var(--space-11); }
}

.mon-hero__inner {
    max-width: var(--container-narrow);
    margin-inline: auto;
    text-align: center;
}

/* Inside the 2-column .hero-split (desktop), the copy column left-aligns and
   fills its track — mirroring the other hubs. Below 992px it stays centred as
   a single column. */
@media (min-width: 992px) {
    .mon-hero .hero-split__copy.mon-hero__inner {
        max-width: none;
        margin-inline: 0;
        text-align: left;
    }
    .mon-hero .hero-split__copy .mon-hero__lead,
    .mon-hero .hero-split__copy .mon-hero__honest {
        margin-inline: 0;
    }
    .mon-hero .hero-split__copy .mon-hero__actions {
        justify-content: flex-start;
    }
}

.mon-hero__title {
    margin-top: var(--space-2);
    font-size: var(--fluid-display);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--text-primary);
}

.mon-hero__lead {
    margin: var(--space-5) auto 0;
    max-width: var(--measure);
    font-size: var(--fluid-lead);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
}

/* The honesty line — visible, calm, not buried. */
.mon-hero__honest {
    margin: var(--space-5) auto 0;
    max-width: var(--measure);
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    text-align: left;
}

.mon-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-7);
}


/* ==========================================================================
   3. WHY MONITORING MATTERS  (failure-mode grid)
   ========================================================================== */
.mon-why-grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
    padding: 0;
    margin: 0;
    list-style: none;
}

.mon-why-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mon-why-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    margin-bottom: var(--space-1);
    border-radius: var(--radius-md);
    background-color: var(--blue-50);
    color: var(--blue-700);
}
.mon-why-card__icon .mailoza-icon { width: var(--icon-md); height: var(--icon-md); }

.mon-why-card__title {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.mon-why-card__desc {
    color: var(--text-body);
    font-size: var(--text-base);
}

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


/* ==========================================================================
   4. MONITORING MODULES GRID
   ========================================================================== */
.mon-module {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mon-module__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-9);
    height: var(--space-9);
    margin-bottom: var(--space-2);
    border-radius: var(--radius-md);
    background-color: var(--teal-50);
    color: var(--teal-700);
}
.mon-module__icon .mailoza-icon { width: var(--icon-lg); height: var(--icon-lg); }

.mon-module__title {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.mon-module__desc {
    color: var(--text-body);
    font-size: var(--text-base);
}


/* ==========================================================================
   5. AI RECOMMENDATIONS VISION GRID  (clearly tagged "Roadmap")
   ========================================================================== */
.mon-vision-grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
    padding: 0;
    margin: 0;
    list-style: none;
}

.mon-vision-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.mon-vision-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-50);
    color: var(--teal-700);
}
.mon-vision-card__icon .mailoza-icon { width: var(--icon-md); height: var(--icon-md); }

.mon-vision-card__body {
    min-width: 0;
}

.mon-vision-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

/* "Roadmap" tag — honest, always-visible signal that this is not shipped. */
.mon-vision-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--warning-100);
    color: var(--warning-700);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.mon-vision-card__desc {
    margin-top: var(--space-1);
    color: var(--text-body);
    font-size: var(--text-base);
}


/* ==========================================================================
   6. RESPONSIVE TUNING
   ========================================================================== */
@media (min-width: 768px) {
    .mon-vision-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Centre the honesty hero line's measure within the centred hero. */
    .mon-hero__honest { text-align: center; }
}
@media (min-width: 1024px) {
    .mon-vision-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==========================================================================
   HERO VISUAL COMPOSITION  (W16 — texture + glow + framed illustration)
   --------------------------------------------------------------------------
   Adds faint grid + soft glow depth to the bespoke mon-hero, and a centred,
   framed monitoring illustration under the hero actions. Tokens only; the
   hero's existing centred layout is preserved.
   ========================================================================== */
.mon-hero {
    position: relative;
    overflow: hidden;
}

.mon-hero > .container { position: relative; z-index: 1; }

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

/* The illustration now lives in the .hero-split media column (beside the text),
   so it inherits .hero-split__media sizing/centring from visual.css. Below the
   split breakpoint it sits under the copy with a little breathing room. */
.mon-hero__illus {
    margin-top: var(--space-8);
}

@media (min-width: 992px) {
    .mon-hero__illus { margin-top: 0; }
}

.mon-hero__illus .illus { margin-inline: auto; }