/* ==========================================================================
   MAILOZA — HOMEPAGE STYLES  (page-scoped, W2)
   Loaded ONLY on the homepage via $page_styles = ['pages/home.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.

   Table of contents
     1. Section rhythm helpers (home-only)
     2. Trust-bullets strip (under the hero)
     3. Problem grid
     4. Section relief line
     5. Emergency section
     6. Responsive tuning

   NOTE: the EmailOps dashboard preview (.emailops*) is a SHARED component used
   by both the homepage and the Monitoring Platform page, so its styles live in
   components.css (§13), not here. (W6 — moved out of this page-only stylesheet.)
   ========================================================================== */


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

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

/* Alternating wash to create calm, premium separation between bands. */
.home-section--services,
.home-section--why,
.home-section--metrics {
    background-color: var(--bg-surface-subtle);
}


/* ==========================================================================
   2. TRUST-BULLETS STRIP  (inside the hero copy column, under the CTAs)
   ========================================================================== */
.home-trust {
    margin-top: var(--space-7);
}

.home-trust__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);
}

.home-trust__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);
}

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


/* ==========================================================================
   3. PROBLEM GRID
   ========================================================================== */
.problem-grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
    padding: 0;
    margin: 0;
    list-style: none;
}

.problem-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.problem-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);
}
.problem-card__icon .mailoza-icon { width: var(--icon-md); height: var(--icon-md); }

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

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

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


/* ==========================================================================
   4. SECTION RELIEF LINE  (the calm "and here's the relief" closer)
   ========================================================================== */
.home-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);
}


/* ==========================================================================
   5. EMERGENCY SECTION  (calm-but-urgent — restrained critical accent)
   ========================================================================== */
.home-section--emergency {
    background-color: var(--emergency-wash);
}

.home-emergency {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
    align-items: center;
    padding: var(--space-8);
    background-color: var(--bg-surface);
    border: 1.5px solid var(--emergency-border);
    border-radius: var(--radius-lg);
}

.home-emergency__copy .eyebrow { color: var(--emergency-text); }

.home-emergency__title {
    color: var(--emergency-text);
    font-size: var(--fluid-h2);
}

.home-emergency__lead {
    margin-top: var(--space-4);
    max-width: var(--measure);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
}

.home-emergency__copy .btn { margin-top: var(--space-6); }

.home-emergency__honest {
    margin-top: var(--space-4);
    max-width: var(--measure);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

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

.home-emergency__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background-color: var(--emergency-wash);
    border: 1px solid var(--critical-100);
    border-radius: var(--radius-md);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.home-emergency__trigger-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--critical-700);
}
.home-emergency__trigger-icon .mailoza-icon { width: var(--icon-md); height: var(--icon-md); }


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

@media (min-width: 1024px) {
    .home-emergency {
        grid-template-columns: 1.2fr 1fr;
        gap: var(--space-10);
        padding: var(--space-10);
    }
    .home-emergency__triggers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   7. HERO VISUAL COMPOSITION  (W16 — texture + glow + 2-column framed hero)
   --------------------------------------------------------------------------
   Wraps the hero in a depth band (faint grid + soft glow). A single .container
   holds a CSS-grid: LEFT column = the hero text component + trust bullets,
   RIGHT column = the framed illustration, vertically centred beside the text.
   Below the desktop breakpoint it collapses to one column (text first, then
   illustration). The shared hero-basic component is untouched; we neutralise
   its inner .container / .hero__inner widths only within this grid so the text
   fills the left column instead of re-constraining to --container-narrow.
   ========================================================================== */
.home-hero-band {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(180deg,
        var(--visual-gradient-from),
        var(--bg-surface) 78%);
}

/* Soft glows give the band quiet depth (decorative, behind content). */
.home-hero-band .accent-glow { z-index: 0; }

.home-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
    /* Smaller top than bottom so the hero opens close under the header (the
       nested hero-basic padding is neutralised below, so this grid governs). */
    padding-block: var(--space-8) var(--space-9);
}

/* The hero component owns its own .container + .hero__inner; inside the grid
   those wrappers must NOT re-apply page padding or the narrow measure — the
   grid column already governs width. Neutralise them here only. */
.home-hero-copy .hero { padding-block: 0; }
.home-hero-copy .hero > .container {
    max-width: none;
    padding-inline: 0;
}
.home-hero-copy .hero__inner { max-width: none; }

.home-hero-illus {
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;
}

.home-hero-illus .illus { margin-inline: auto; }

/* Desktop: text + illustration side by side, vertically centred. */
@media (min-width: 992px) {
    .home-hero-grid {
        grid-template-columns: 1.1fr 0.9fr;
        gap: var(--space-10);
        /* Comfortable top (~64px); larger bottom for rhythm. Was symmetric
           --space-11 (120px), which floated the eyebrow far below the header. */
        padding-block: var(--space-9) var(--space-11);
    }

    .home-hero-illus {
        max-width: 100%;
        margin-top: 0;
    }
}


/* ==========================================================================
   8. FEATURE SPOTLIGHT ROWS  (W16 — alternating text + illustration band)
   --------------------------------------------------------------------------
   Vertical rhythm between the stacked spotlight rows inside the tint band.
   Spotlight component styling itself lives in visual.css; this only spaces the
   rows on the homepage.
   ========================================================================== */
.home-spotlights {
    display: grid;
    gap: var(--space-10);
}

@media (min-width: 768px) {
    .home-spotlights { gap: var(--space-11, var(--space-10)); }
}


/* ==========================================================================
   9. SYSTEM OVERVIEW  (flagship full-width diagram band, ABOVE the hero)
   --------------------------------------------------------------------------
   Sits at the very top of the page content, below the sticky header. Holds the
   bespoke system-overview SVG full-width inside the container. Eyebrow only —
   the hero keeps the page's single <h1>, so this band carries no heading.
   NOTE (v1): the diagram is dense; on narrow viewports it scales down and the
   smallest labels get tight but stay legible — acceptable for v1.
   ========================================================================== */
.home-overview {
    /* Tight gap under the header; lighter at the bottom so it flows into the
       hero band below. */
    padding-block: var(--space-4) var(--space-6);
}

.home-overview .eyebrow {
    text-align: center;
    margin-bottom: var(--space-5);
}

.home-overview__figure {
    margin: 0;
    width: 100%;
    max-width: 100%;
    /* No frame — the diagram sits directly on the page. */
}

.home-overview__img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .home-overview {
        padding-block: var(--space-5) var(--space-7);
    }
}