/**
 * Services Overview Page
 *
 * Styles for the /services/ overview page that introduces the five pillars.
 * Visually consistent with the Service Hub pages — same gradient hero, same
 * section rhythm, same typographic scale.
 *
 * @package AbbeySolutions
 * @since   1.0.0
 */

/* ==========================================================================
   Hero
   ========================================================================== */

.services-overview__hero {
    background: var(--gradient-primary);
    color: var(--color-white);
    padding: var(--spacing-20) 0 var(--spacing-16);
    text-align: left;
}

.services-overview__eyebrow {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-sky-blue);
    margin: 0 0 var(--spacing-4);
}

.services-overview__title {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-white);
    margin: 0 0 var(--spacing-8);
    max-width: 900px;
}

.services-overview__lead {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-normal);
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 var(--spacing-5);
    max-width: 760px;
}

.services-overview__lead:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Generic section
   ========================================================================== */

.services-overview__section {
    padding: var(--spacing-20) 0;
}

.services-overview__section-heading {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-dark);
    margin: 0 0 var(--spacing-8);
    line-height: var(--line-height-tight);
    max-width: 800px;
}

.services-overview__body {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-body);
    max-width: 800px;
}

.services-overview__body p {
    margin: 0 0 var(--spacing-4);
}

.services-overview__body p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Section variants — alternating backgrounds for visual rhythm
   ========================================================================== */

.services-overview__section--overview {
    background: var(--color-white);
}

.services-overview__section--together {
    background: var(--color-white);
}

/* The pillar grid section is rendered via the Services Grid template part,
   which has its own .services wrapper with a white background. Override it
   on this page so the alternating rhythm reads as gradient → white → grey
   → white → gradient. */
.services-overview .services {
    background: var(--color-light-gray);
}

/* ==========================================================================
   Closing CTA
   ========================================================================== */

.services-overview__section--cta {
    background: var(--gradient-primary);
    color: var(--color-white);
    text-align: center;
}

.services-overview__cta-heading {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin: 0 0 var(--spacing-4);
}

.services-overview__cta-body {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.95);
    margin: 0 auto var(--spacing-8);
    max-width: 640px;
    line-height: var(--line-height-normal);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .services-overview__hero {
        padding: var(--spacing-16) 0 var(--spacing-12);
    }

    .services-overview__title {
        font-size: var(--font-size-4xl);
    }

    .services-overview__section {
        padding: var(--spacing-16) 0;
    }

    .services-overview__section-heading {
        font-size: var(--font-size-3xl);
    }
}

@media (max-width: 768px) {
    .services-overview__hero {
        padding: var(--spacing-12) 0;
    }

    .services-overview__title {
        font-size: var(--font-size-3xl);
    }

    .services-overview__lead {
        font-size: var(--font-size-lg);
    }

    .services-overview__section {
        padding: var(--spacing-12) 0;
    }

    .services-overview__section-heading {
        font-size: var(--font-size-2xl);
    }

    .services-overview__body {
        font-size: var(--font-size-md);
    }

    .services-overview__cta-heading {
        font-size: var(--font-size-2xl);
    }
}