/* ==========================================================================
   MAILOZA — PRICING PAGE STYLES  (page-scoped, W7)
   Loaded ONLY on pricing.php via $page_styles = ['pages/pricing.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. The pricing-card,
   feature-card, faq, alert, section-header, hero and cta-banner styling all live
   in components.css; this file styles ONLY the page-specific blocks (ways strip,
   pricing-factor grid, one-time project cards, managed-vs-one-time compare grid)
   plus a little section rhythm. Mobile-first; reuses .container, .card,
   .card-grid, .badge, .eyebrow, .pricing-grid primitives.

   Premium positioning, not commodity hosting: generous spacing, calm washes,
   the featured tier readable and anchored. Cards collapse 3-up → 1-up cleanly.

   Table of contents
     1. Section rhythm + alternating washes (pricing-only wrappers)
     2. Hero "ways to buy" strip (under the hero CTAs)
     3. Pricing philosophy — factor grid
     4. One-time service project cards
     5. Managed vs one-time compare grid
     6. Section notes / shared helpers
     7. Responsive tuning
   ========================================================================== */


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

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

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

/* The honest-24x7 alert sits below the plan grid with breathing room. */
.pricing-section--plans .alert {
    margin-top: var(--space-8);
}


/* ==========================================================================
   2. HERO "WAYS TO BUY" STRIP  (directly under the hero CTAs)
   ========================================================================== */
.pricing-ways {
    padding-bottom: var(--space-9);
}

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

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

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


/* ==========================================================================
   3. PRICING PHILOSOPHY — FACTOR GRID
   The six factors that shape a quote. Built on the .card surface language but
   composed here (icon · title · desc) — value-framing, never a priced grid.
   ========================================================================== */
.factor-grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
    padding: 0;
    margin: var(--space-8) 0 0;
    list-style: none;
}

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

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

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

.factor-card__desc {
    margin: 0;
    color: var(--text-body);
}


/* ==========================================================================
   4. ONE-TIME SERVICE PROJECT CARDS
   Routing cards with an icon, a value-framed badge + anchor (NO price), a
   description and a self-routing CTA. Extends the .card surface primitive.
   ========================================================================== */
.project-cards {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
    padding: 0;
    margin: var(--space-8) 0 0;
    list-style: none;
}

.project-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.project-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

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

/* The badge ("Free" / "From" / "Quote" / "Custom") reuses the .badge primitive;
   tint it teal so it reads as a value anchor, never a commodity price tag. */
.project-card__badge {
    background-color: var(--teal-100);
    color: var(--teal-700);
}

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

.project-card__anchor {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--teal-700);
}

.project-card__desc {
    margin: 0;
    color: var(--text-body);
}

.project-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
    font-weight: var(--weight-semibold);
    color: var(--text-link);
    text-decoration: none;
}
.project-card__cta:hover {
    color: var(--text-link-hover);
}
.project-card__cta-icon {
    display: inline-flex;
    transition: transform var(--transition-fast, 150ms) ease;
}
.project-card__cta-icon .mailoza-icon { width: var(--icon-md); height: var(--icon-md); }
.project-card__cta:hover .project-card__cta-icon {
    transform: translateX(var(--space-1));
}


/* ==========================================================================
   5. MANAGED vs ONE-TIME COMPARE GRID
   Two decision cards: "choose a project when…" vs "choose a managed plan
   when…". The managed card is the emphasised choice (border accent, not
   colour-only — its eyebrow label carries the meaning too).
   ========================================================================== */
.compare-grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
    margin-top: var(--space-8);
    align-items: start;
}

.compare-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-7);
}

.compare-card__kind {
    margin: 0;
}

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

.compare-card__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-left: var(--space-5);
    margin: 0;
    color: var(--text-body);
}
.compare-card__list li {
    padding-left: var(--space-1);
}

.compare-card__shape {
    margin: auto 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-default);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}

/* Emphasised managed card — accent border + subtle lift. */
.compare-card--featured {
    border-color: var(--teal-600);
    border-width: 2px;
    box-shadow: var(--elevation-2);
}


/* ==========================================================================
   6. SECTION NOTES / SHARED HELPERS
   ========================================================================== */
.pricing-section__note {
    max-width: var(--container-narrow);
    margin: var(--space-7) auto 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-base);
}


/* ==========================================================================
   7. RESPONSIVE TUNING
   ========================================================================== */
@media (min-width: 768px) {
    /* Factor + project cards open to two columns at tablet. */
    .factor-grid,
    .project-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The managed-vs-one-time pair sits side by side. */
    .compare-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    /* Factor + project cards reach the full 3-up at desktop. */
    .factor-grid,
    .project-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ==========================================================================
   HERO TEXTURE BAND  (W16 — faint grid + soft glow depth, no illustration)
   --------------------------------------------------------------------------
   Wraps the hero in a calm depth band so the page does not open on flat white.
   The shared hero-basic component is untouched. Tokens only.
   ========================================================================== */
.pricing-hero-band {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(180deg,
        var(--visual-gradient-from),
        var(--bg-surface) 80%);
}

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

.pricing-hero-band > .hero { position: relative; z-index: 1; }