/* ============================================================
   ENGINEERING-ONE — Inner Pages Override
   ─────────────────────────────────────────────────────────
   Mirrors the role of nursery-one's nursery-pages.css for the
   engineering-one template. Loads AFTER all shared CSS via
   head-css.php so it can override service-page.css defaults
   without using !important.

   Scope: T3 service-block extension (Hero CTA + 3 new types).
   Tokens: GLOBAL --mt-* vocabulary only (engineering doesn't
   define the nursery aliases --mt-primary / --mt-white /
   --mt-radius-pill — uses --mt-brand-primary / --mt-neutral-0
   / --mt-radius-full instead).
============================================================ */


/* ============================================================
   §1  SERVICE — HERO CTA + NEW BLOCK TYPES (T3 extension)
   ─────────────────────────────────────────────────────────
   Renders the optional buttons emitted by web/service.php:
     · service-hero-cta            (hero footer button group)
     · service-cta-banner          (cta_banner block_type)
     · service-features-list       (features_list block_type)
============================================================ */

/* ── Hero CTA buttons ─────────────────────────────────────── */
.service-hero-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mt-space-3);
    margin-top: var(--mt-space-6);
}

.service-hero-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: var(--mt-weight-bold);
    line-height: 1.2;
    border: 2px solid transparent;
    border-radius: var(--mt-radius-full);
    text-decoration: none;
    transition:
        background var(--mt-duration-fast) ease,
        color var(--mt-duration-fast) ease,
        border-color var(--mt-duration-fast) ease,
        transform var(--mt-duration-fast) var(--mt-ease-default),
        box-shadow var(--mt-duration-fast) ease;
}

.service-hero-cta-btn:hover {
    transform: translateY(-2px);
}

/* Specificity bumped via parent class: defeats .section-sm a rule
   in 01-foundation.css that otherwise forces text color to brand
   primary (invisible on primary bg / outline transparent). */
.service-hero-cta .service-hero-cta-btn--primary {
    background: var(--mt-brand-primary);
    color: var(--mt-neutral-0);
    box-shadow: 0 4px 16px rgba(var(--mt-brand-primary-rgb), 0.30);
}

.service-hero-cta .service-hero-cta-btn--primary:hover {
    background: var(--mt-brand-primary-hover);
    color: var(--mt-neutral-0);
    box-shadow: 0 8px 24px rgba(var(--mt-brand-primary-rgb), 0.40);
}

.service-hero-cta .service-hero-cta-btn--outline {
    background: transparent;
    color: var(--mt-neutral-0);
    border-color: var(--mt-neutral-0);
}

.service-hero-cta .service-hero-cta-btn--outline:hover {
    background: var(--mt-neutral-0);
    color: var(--mt-brand-primary);
}


/* ── CTA banner block ─────────────────────────────────────── */
.service-cta-banner {
    background: var(--mt-brand-primary);
    color: var(--mt-neutral-0);
    text-align: center;
    padding: var(--mt-section-py-sm) 0;
}

.service-cta-banner-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--mt-space-6);
}

.service-cta-banner-title {
    color: var(--mt-neutral-0);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: var(--mt-weight-black);
    line-height: var(--mt-leading-tight);
    margin: 0 0 var(--mt-space-3);
}

.service-cta-banner-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: var(--mt-leading-normal);
    max-width: 580px;
    margin: 0 auto var(--mt-space-6);
}

.service-cta-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: var(--mt-weight-bold);
    line-height: 1.2;
    border: 2px solid transparent;
    border-radius: var(--mt-radius-full);
    text-decoration: none;
    transition:
        background var(--mt-duration-fast) ease,
        color var(--mt-duration-fast) ease,
        border-color var(--mt-duration-fast) ease,
        transform var(--mt-duration-fast) var(--mt-ease-default),
        box-shadow var(--mt-duration-fast) ease;
}

.service-cta-banner-btn:hover {
    transform: translateY(-2px);
}

/* Engineering's banner is on orange brand primary. The
   "primary" CTA inside it inverts to white-on-orange so the
   button reads against the orange background. (Nursery uses
   yellow accent — no equivalent token in this template.) */
.service-cta-banner-btn--primary {
    background: var(--mt-neutral-0);
    color: var(--mt-brand-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.service-cta-banner-btn--primary:hover {
    background: var(--mt-neutral-100);
    color: var(--mt-brand-primary-hover);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

.service-cta-banner-btn--outline {
    background: transparent;
    color: var(--mt-neutral-0);
    border-color: var(--mt-neutral-0);
}

.service-cta-banner-btn--outline:hover {
    background: var(--mt-neutral-0);
    color: var(--mt-brand-primary);
}


/* ── Features list block ──────────────────────────────────── */
.service-features-list {
    padding: var(--mt-section-py) 0;
    background: var(--mt-neutral-50);
}

.service-features-list-title {
    text-align: center;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: var(--mt-weight-black);
    color: var(--mt-text-heading);
    line-height: var(--mt-leading-tight);
    max-width: 760px;
    margin: 0 auto var(--mt-space-3);
}

.service-features-list-intro {
    text-align: center;
    color: var(--mt-text-muted);
    font-size: 1rem;
    line-height: var(--mt-leading-normal);
    max-width: 680px;
    margin: 0 auto var(--mt-space-10);
}

.service-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mt-space-6);
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 var(--mt-space-6);
}

.service-features-card {
    background: var(--mt-neutral-0);
    border: 1px solid var(--mt-border-default);
    border-radius: 12px;
    padding: var(--mt-space-6);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    transition:
        transform var(--mt-duration-normal) var(--mt-ease-default),
        box-shadow var(--mt-duration-normal) var(--mt-ease-default);
}

.service-features-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--mt-shadow-card-hover);
}

.service-features-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(var(--mt-brand-primary-rgb), 0.10);
    color: var(--mt-brand-primary);
    font-size: 1.1rem;
    margin-bottom: var(--mt-space-4);
}

.service-features-card-title {
    font-size: 1.05rem;
    font-weight: var(--mt-weight-bold);
    color: var(--mt-text-heading);
    line-height: var(--mt-leading-tight);
    margin: 0 0 var(--mt-space-2);
}

.service-features-card-text {
    color: var(--mt-text-body);
    font-size: var(--mt-text-sm);
    line-height: var(--mt-leading-normal);
    margin: 0;
}


/* ── Responsive (max-width breakpoints) ───────────────────── */
@media (max-width: 768px) {
    .service-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .service-features-grid {
        grid-template-columns: 1fr;
    }
}