/* ==========================================================================
   MAILOZA — SOLUTIONS STYLES  (page-scoped, W5)
   ONE shared stylesheet for the Solutions family:
     • the hub (solutions.php)
     • the 6 platform detail pages (solutions/*.php), via the shared template
       app/includes/solution-detail-template.php.
   Loaded via $page_styles = ['pages/solutions.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 shared component primitives (.hero,
   .card-grid, .feature-card, .platform-grid, .faq, .cta-banner, .section-header,
   .breadcrumbs, .eyebrow, .badge, .btn, .alert) are already styled in style.css /
   components.css and are NOT re-declared here. Mobile-first; status colours come
   from the status tokens so they stay accessible and theme-able.

   NOTE on .problem-grid / .problem-card: scoped to the --solution variant the
   template uses, so the base rules below never collide with home.css (which is
   not loaded here) or service-detail.css (different page, never co-loaded).

   Table of contents
     1. Section rhythm + alternating washes (solutions-only wrappers)
     -- HUB --
     2. Hero platform strip (under the hero CTAs)
     3. Platform solution cards (6 routing cards)
     -- DETAIL --
     4. Detail breadcrumbs spacing
     5. Detail hero trust strip
     6. Problem grid (platform-specific)
     7. Services-for-this-platform grid
     8. Migration options grid
     9. Security & deliverability checklist
     10. Related grid (solution variant) + related service links
     11. FAQ wrapper width
     12. Shared helpers (relief / note / cta-row)
     13. Responsive tuning
   ========================================================================== */


/* ==========================================================================
   1. SECTION RHYTHM  (solutions-only wrappers; base sections live in style.css)
   Alternating washes give calm, premium separation between bands.
   ========================================================================== */
.solutions-section,
.solution-section {
    padding-block: var(--space-9);
}

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

/* Hub: wash on the neutral + platforms bands. */
.solutions-section--neutral,
.solutions-section--platforms {
    background-color: var(--bg-surface-subtle);
}

/* Detail: wash on alternate bands so the long page reads as distinct sections. */
.solution-section--helps,
.solution-section--migration,
.solution-section--managed,
.solution-section--faq {
    background-color: var(--bg-surface-subtle);
}


/* ==========================================================================
   2. HUB — HERO PLATFORM STRIP  (directly under the hero CTAs)
   ========================================================================== */
.solutions-platforms-strip {
    padding-bottom: var(--space-9);
}

.solutions-platforms-strip__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);
}

.solutions-platforms-strip__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);
}

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


/* ==========================================================================
   3. HUB — PLATFORM SOLUTION CARDS  (6 routing cards)
   Built on the .card surface language (border + radius); each routes to its
   solutions/*.php detail page.
   ========================================================================== */
.solutions-cards {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
    padding: 0;
    margin: 0;
    list-style: none;
}

.solutions-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-standard);
}

.solutions-card:hover,
.solutions-card:focus-within {
    border-color: var(--teal-500);
    box-shadow: var(--elevation-2);
    transform: translateY(-2px);
}

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

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

/* Badge tint from the teal accent so the card reads premium, not generic. */
.solutions-card__badge {
    background-color: var(--teal-100);
    color: var(--teal-700);
}

.solutions-card__title {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

/* Stretched link: the whole card routes to the detail page; the explicit CTA
   at the foot remains a separate, visible affordance for clarity. */
.solutions-card__link {
    color: inherit;
}
.solutions-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.solutions-card__link:hover { color: var(--blue-700); }

.solutions-card__summary {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-body);
}

.solutions-card__points {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.solutions-card__point {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-body);
}

.solutions-card__point-icon {
    flex: none;
    display: inline-flex;
    margin-top: 2px;
    color: var(--teal-700);
}
.solutions-card__point-icon .mailoza-icon { width: var(--icon-sm); height: var(--icon-sm); }

.solutions-card__cta {
    position: relative;
    z-index: 2; /* sit above the stretched title link so it stays the named target */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--action-secondary);
}
.solutions-card__cta:hover { color: var(--text-link-hover); }
.solutions-card__cta:hover .solutions-card__cta-icon { transform: translateX(3px); }

.solutions-card__cta-icon {
    display: inline-flex;
    transition: transform var(--duration-fast) var(--ease-standard);
}
.solutions-card__cta-icon .mailoza-icon { width: var(--icon-md); height: var(--icon-md); }

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


/* ==========================================================================
   4. DETAIL — BREADCRUMBS  (orientation strip above the hero)
   ========================================================================== */
.solution-detail__crumbs {
    padding-block: var(--space-5) 0;
}


/* ==========================================================================
   5. DETAIL — HERO TRUST STRIP  (directly under the hero CTAs)
   ========================================================================== */
.solution-hero-trust {
    padding-block: var(--space-6) var(--space-2);
}

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

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

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


/* ==========================================================================
   6. DETAIL — PROBLEM GRID  (platform-specific common problems)
   Scoped to the --solution variant so it never collides with home.css.
   ========================================================================== */
.problem-grid--solution {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
    margin-top: var(--space-8);
    padding: 0;
    list-style: none;
}

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

.problem-grid--solution .problem-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-md);
    /* A calm warning tint — named the risk, not alarmist. */
    background-color: var(--warning-50);
    color: var(--warning-700);
}
.problem-grid--solution .problem-card__icon .mailoza-icon { width: var(--icon-lg); height: var(--icon-lg); }

.problem-grid--solution .problem-card__title {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

.problem-grid--solution .problem-card__desc {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
}

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


/* ==========================================================================
   7. DETAIL — SERVICES FOR THIS PLATFORM  (routing cards to services/*)
   ========================================================================== */
.solution-services-grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
    margin-top: var(--space-8);
    padding: 0;
    list-style: none;
}

.solution-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-standard);
}

.solution-service-card:hover,
.solution-service-card:focus-within {
    border-color: var(--teal-500);
    box-shadow: var(--elevation-2);
    transform: translateY(-2px);
}

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

.solution-service-card__title {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

/* Stretched link: the whole card is clickable, the title stays the named target. */
.solution-service-card__link {
    color: inherit;
}
.solution-service-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.solution-service-card__link:hover { color: var(--blue-700); }

.solution-service-card__desc {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-body);
}

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


/* ==========================================================================
   8. DETAIL — MIGRATION OPTIONS GRID
   A clean two-column list of migration paths, icon + body.
   ========================================================================== */
.migration-grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
    margin-top: var(--space-8);
    padding: 0;
    list-style: none;
}

.migration-card {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-6);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}

.migration-card__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-7);
    height: var(--space-7);
    border-radius: var(--radius-pill);
    background-color: var(--teal-100);
    color: var(--teal-700);
}
.migration-card__icon .mailoza-icon { width: var(--icon-md); height: var(--icon-md); }

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

.migration-card__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

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

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


/* ==========================================================================
   9. DETAIL — SECURITY & DELIVERABILITY CHECKLIST
   A clean, checked two-column list — concrete and scannable.
   ========================================================================== */
.solution-checklist {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
    max-width: var(--container-max);
    margin: var(--space-8) auto 0;
    padding: 0;
    list-style: none;
}

.solution-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
}

.solution-checklist__icon {
    flex: none;
    display: inline-flex;
    margin-top: 2px;
    color: var(--success-600);
}
.solution-checklist__icon .mailoza-icon { width: var(--icon-md); height: var(--icon-md); }

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


/* ==========================================================================
   10. DETAIL — RELATED GRID (solution variant) + related service links
   Reuses the shared .related-grid / .related-card pattern but redeclares the
   base here (service-detail.css is not co-loaded on solution pages).
   ========================================================================== */
.related-grid--solution {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: 1fr;
    margin-top: var(--space-8);
    padding: 0;
    list-style: none;
}

.related-grid--solution .related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-standard);
}

.related-grid--solution .related-card:hover,
.related-grid--solution .related-card:focus-within {
    border-color: var(--teal-500);
    box-shadow: var(--elevation-2);
    transform: translateY(-2px);
}

.related-grid--solution .related-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(--blue-50);
    color: var(--blue-700);
}
.related-grid--solution .related-card__icon .mailoza-icon { width: var(--icon-lg); height: var(--icon-lg); }

.related-grid--solution .related-card__title {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

.related-grid--solution .related-card__link {
    color: inherit;
}
.related-grid--solution .related-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.related-grid--solution .related-card__link:hover { color: var(--blue-700); }

.related-grid--solution .related-card__desc {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-body);
}

/* Quick "jump to a service" links under the related-solution grid. */
.solution-related__lead {
    margin: var(--space-8) auto var(--space-4);
    max-width: var(--measure);
    text-align: center;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.solution-related-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.solution-related-links__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--action-secondary);
    transition: border-color var(--duration-base) var(--ease-standard),
                color var(--duration-base) var(--ease-standard);
}
.solution-related-links__link:hover {
    border-color: var(--teal-500);
    color: var(--text-link-hover);
}

.solution-related-links__icon {
    display: inline-flex;
    color: var(--teal-700);
}
.solution-related-links__icon .mailoza-icon { width: var(--icon-sm); height: var(--icon-sm); }

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


/* ==========================================================================
   11. DETAIL — FAQ WRAPPER  (constrain the disclosure list to a comfortable measure)
   ========================================================================== */
.solution-faq {
    max-width: var(--container-narrow);
    margin: var(--space-8) auto 0;
}


/* ==========================================================================
   12. SHARED HELPERS  (relief line / note / migration cta row)
   ========================================================================== */
.solution-section__relief {
    max-width: var(--measure);
    margin: var(--space-7) auto 0;
    text-align: center;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
}

.solution-section__note {
    max-width: var(--measure);
    margin: var(--space-7) auto 0;
    text-align: center;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

.solution-section__cta-row {
    margin: var(--space-7) 0 0;
    text-align: center;
}


/* ==========================================================================
   13. RESPONSIVE TUNING
   ========================================================================== */
/* On very small screens, stack the migration-card icon above its body so the
   text keeps a comfortable measure without crowding against the marker. */
@media (max-width: 479.98px) {
    .migration-card {
        flex-direction: column;
        gap: var(--space-3);
    }
}


/* ==========================================================================
   SOLUTION DETAIL HERO BAND  (2-column split: text + framed illustration)
   The solution detail-page hero now uses the shared .hero-split pattern
   (visual.css): hero text in the left column, the framed illustration in the
   right (or a single column when no illustration is set). This band only
   supplies the gradient + glow depth behind it. Tokens only.
   ========================================================================== */
.solution-hero-band {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(180deg,
        var(--visual-gradient-from),
        var(--bg-surface) 78%);
}

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


/* ==========================================================================
   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.
   ========================================================================== */
.solutions-hero-band {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(180deg,
        var(--visual-gradient-from),
        var(--bg-surface) 78%);
}

.solutions-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. */