/* ============================================================
   DRONES — Inner Pages Override
   ─────────────────────────────────────────────────────────
   Template-local inner-page override for the `drones` template
   (renamed from engineering-pages.css during the drones rebrand
   — content unchanged; rules are --mt-* token-driven so they
   inherit the drone palette automatically). 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 (uses --mt-brand-primary
   / --mt-neutral-0 / --mt-radius-full).
============================================================ */


/* ============================================================
   §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);
}

/* The banner sits on brand primary. The "primary" CTA inside it
   inverts to white-on-brand so the button reads against the
   coloured background. */
.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;
    }
}


/* ==========================================================
   DRONES — PAGE INTRO IDENTITY  (CSS-only skin over the shared
   page_intro renderer; no renderer/schema/editor/DB change)
   ──────────────────────────────────────────────────────────
   Scoped via the platform identity hook `body.tpl-drones` (added in
   web/includes/header.php). The hook's specificity beats the
   universal page-intro.css (which is emitted inline in <body> AFTER
   this head-loaded file) with NO doubled-class trick and NO
   !important. Reuses existing Drones language:
     - top gradient bar      → Drones Forms (.form-module__inner::before)
     - "//" cyan eyebrow      → Drones Services (.drn-services__eyebrow)
     - black-weight tight title + cyan tick → Drones Hero / Mission
   Clean & professional: NO dark console, NO corners, NO glow. The
   band background stays the token-tinted light shell; identity comes
   from the accents only. Tokens only → dark-safe by contract.
   ========================================================== */

/* 1. Top gradient accent bar — Drones Forms language */
body.tpl-drones .page-intro-section {
    position: relative;
    overflow: hidden;
}
body.tpl-drones .page-intro-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--mt-gradient-primary);
}

/* 2. Eyebrow — uppercase · tracking · cyan · "//" prefix */
body.tpl-drones .page-intro-section .pgi-eyebrow {
    color: var(--mt-accent);
    text-transform: uppercase;
    letter-spacing: var(--mt-tracking-widest);
}
body.tpl-drones .page-intro-section .pgi-eyebrow::before {
    content: "// ";
    opacity: 0.6;
}

/* 3. Title — Drones typography + cyan command tick */
body.tpl-drones .page-intro-section .pgi-title {
    font-weight: var(--mt-weight-black);
    letter-spacing: var(--mt-tracking-tight);
    text-wrap: balance;
}
body.tpl-drones .page-intro-section .pgi-title::after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin-top: var(--mt-space-3);
    border-radius: var(--mt-radius-full);
    background: var(--mt-gradient-primary);
}
body.tpl-drones .page-intro-section--center .pgi-title::after {
    margin-left: auto;
    margin-right: auto;
}
body.tpl-drones .page-intro-section--left .pgi-title::after {
    margin-left: 0;
    margin-right: auto;
}

/* 4. Subtitle + lead — Drones text hierarchy */
body.tpl-drones .page-intro-section .pgi-subtitle {
    color: var(--mt-text-body);
    font-weight: var(--mt-weight-medium);
}
body.tpl-drones .page-intro-section .pgi-lead {
    color: var(--mt-text-muted);
}

/* Responsive */
@media (max-width: 640px) {
    body.tpl-drones .page-intro-section .pgi-title::after { width: 40px; }
}