/* ==========================================================================
   MAILOZA — CUSTOMER PORTAL PLACEHOLDER STYLES  (page-scoped, W12)

   Loaded ONLY on portal.php via $page_styles = ['pages/portal.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 portal is a RESERVED future zone: this page is an honest placeholder that
   previews what the portal will offer without pretending it is live. The
   dashboard preview itself is the shared dashboard/emailops-preview component,
   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) via the reused
   component, 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 (note / fineprint / headings)
     2. Hero
     3. Portal feature preview grid (+ "Planned" tags)
     4. Security + managed-support helpers
     5. Responsive tuning
   ========================================================================== */


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

/* Alternating wash for calm, premium separation between bands. */
.portal-section--experience,
.portal-section--faq {
    background-color: var(--bg-surface-subtle);
}

/* Bespoke section heading (used where a section owns its own H2 rather than
   delegating to section-header — e.g. the security note). */
.portal-section__heading {
    margin-bottom: var(--space-5);
    font-size: var(--fluid-h2);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    text-align: center;
}

/* Smaller honesty/clarification note (e.g. "until the portal is live…"). */
.portal-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);
}

/* Fine-print clarification under the security alert. */
.portal-section__fineprint {
    max-width: var(--measure);
    margin: var(--space-5) auto 0;
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}


/* ==========================================================================
   2. HERO  (the only H1)
   ========================================================================== */
.portal-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) {
    .portal-hero { padding-block: var(--space-9) var(--space-11); }
}

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

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

.portal-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, never buried. */
.portal-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;
}

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


/* ==========================================================================
   3. PORTAL FEATURE PREVIEW GRID  (each card a FUTURE capability)
   ========================================================================== */
.portal-feature-grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
    padding: 0;
    margin: 0;
    list-style: none;
}

.portal-feature {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.portal-feature__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(--blue-50);
    color: var(--blue-700);
}
.portal-feature__icon .mailoza-icon { width: var(--icon-lg); height: var(--icon-lg); }

.portal-feature__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);
}

/* "Planned" tag — a neutral, low-key chip that makes the future framing
   unmistakable on every card (not a status colour; it is not an alert). */
.portal-feature__tag {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    line-height: 1.4;
}

.portal-feature__desc {
    color: var(--text-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}


/* ==========================================================================
   4. SECURITY + MANAGED-SUPPORT HELPERS
   ========================================================================== */
/* Centre the single managed-support CTA under its section header. */
.portal-managed__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-7);
}


/* ==========================================================================
   5. RESPONSIVE TUNING
   ========================================================================== */
@media (min-width: 768px) {
    .portal-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .portal-feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}