/* AI Elevation — Page Extensions
   Paste into Elementor → Site Settings → Custom CSS (once, globally)
   ─────────────────────────────────────────────────────────────────────
   This file adds ONLY the components not in AIElevation.css (the master
   stylesheet). It uses the same CSS variable names as that file so both
   sheets work as one system. Do not duplicate anything from AIElevation.css.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Capabilities card grid ──────────────────────────────────────────── */

.aie-capabilities__grid {
    display:               grid !important;
    grid-template-columns: 1fr !important;
    gap:                   1rem !important;
    margin-bottom:         2.5rem !important;
}

@media (min-width: 600px) {
    .aie-capabilities__grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.25rem !important;
    }
}

.aie-capability-item {
    background:    var(--colour-bg-primary) !important;
    border:        1px solid var(--colour-border-light) !important;
    border-radius: var(--radius-lg) !important;
    padding:       1.5rem !important;
    font-size:     var(--font-size-base) !important;
    color:         var(--colour-text-secondary) !important;
    line-height:   var(--line-height-relaxed) !important;
    display:       block !important;
    transition:    border-color var(--transition-base),
                   box-shadow var(--transition-base),
                   transform var(--transition-base) !important;
    position:      relative !important;
    overflow:      hidden !important;
    box-shadow:    var(--shadow-xs) !important;
}

.aie-capability-item::before {
    content:          "" !important;
    position:         absolute !important;
    top:              0 !important;
    left:             0 !important;
    right:            0 !important;
    height:           3px !important;
    background:       linear-gradient(90deg, var(--colour-secondary) 0%, var(--colour-accent) 100%) !important;
    transform:        scaleX(0) !important;
    transform-origin: left !important;
    transition:       transform var(--transition-base) !important;
    display:          block !important;
}

.aie-capability-item strong {
    display:       block !important;
    color:         var(--colour-primary) !important;
    font-weight:   700 !important;
    font-size:     var(--font-size-md) !important;
    margin-bottom: 0.375rem !important;
}

.aie-capability-item--link {
    text-decoration: none !important;
    cursor:          pointer !important;
}

.aie-capability-item--link:hover {
    border-color: var(--colour-secondary-light) !important;
    box-shadow:   var(--shadow-card-hover) !important;
    transform:    translateY(-3px) !important;
    color:        var(--colour-text-secondary) !important;
}

.aie-capability-item--link:hover::before {
    transform: scaleX(1) !important;
}

.aie-capability-cta {
    display:     block !important;
    margin-top:  1rem !important;
    color:       var(--colour-secondary) !important;
    font-weight: 600 !important;
    font-size:   var(--font-size-sm) !important;
}

/* ── Numbered how-it-works steps (service pages) ─────────────────────── */

.aie-how {
    max-width: 52rem !important;
}

.aie-how__steps {
    display:        flex !important;
    flex-direction: column !important;
    gap:            0 !important;
}

.aie-how__step {
    display:               grid !important;
    grid-template-columns: 3rem 1fr !important;
    gap:                   1.25rem !important;
    align-items:           start !important;
    padding-bottom:        2rem !important;
    position:              relative !important;
}

.aie-how__step:last-child {
    padding-bottom: 0 !important;
}

.aie-how__num {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           3rem !important;
    height:          3rem !important;
    background:      linear-gradient(135deg, var(--colour-primary) 0%, var(--colour-primary-light) 100%) !important;
    color:           var(--colour-white) !important;
    font-size:       var(--font-size-base) !important;
    font-weight:     800 !important;
    border-radius:   var(--radius-full) !important;
    flex-shrink:     0 !important;
    box-shadow:      var(--shadow-sm) !important;
    position:        relative !important;
    z-index:         1 !important;
}

/* Vertical connector line between steps */
.aie-how__step:not(:last-child) .aie-how__num::after {
    content:    "" !important;
    position:   absolute !important;
    top:        3rem !important;
    left:       50% !important;
    transform:  translateX(-50%) !important;
    width:      2px !important;
    height:     calc(100% + 2rem) !important;
    background: var(--colour-border-light) !important;
    display:    block !important;
    z-index:    0 !important;
}

.aie-how__body {
    padding-top: 0.625rem !important;
}

.aie-how__title {
    font-size:     var(--font-size-base) !important;
    font-weight:   700 !important;
    color:         var(--colour-primary) !important;
    margin-bottom: 0.375rem !important;
}

.aie-how__text {
    font-size:   var(--font-size-base) !important;
    color:       var(--colour-text-secondary) !important;
    margin:      0 !important;
    line-height: var(--line-height-relaxed) !important;
}

/* ── Tool / system pill grid ─────────────────────────────────────────── */

.aie-systems__grid {
    display:               grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap:                   0.75rem !important;
    margin-top:            2rem !important;
}

@media (min-width: 600px) {
    .aie-systems__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 900px) {
    .aie-systems__grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

.aie-system-pill {
    display:       block !important;
    padding:       0.625rem 1rem !important;
    background:    var(--colour-bg-primary) !important;
    border:        1px solid var(--colour-border-light) !important;
    border-radius: var(--radius-md) !important;
    font-size:     var(--font-size-sm) !important;
    font-weight:   600 !important;
    color:         var(--colour-text-secondary) !important;
    text-align:    center !important;
    box-shadow:    var(--shadow-xs) !important;
}

/* ── Locations bar ───────────────────────────────────────────────────── */

.aie-locations-bar {
    background:    var(--colour-grey-50) !important;
    border-top:    1px solid var(--colour-border-light) !important;
    border-bottom: 1px solid var(--colour-border-light) !important;
    padding:       1.125rem 0 !important;
    display:       block !important;
    width:         100% !important;
}

.aie-locations-text {
    text-align:  center !important;
    font-size:   var(--font-size-sm) !important;
    color:       var(--colour-text-secondary) !important;
    margin:      0 !important;
    line-height: 1.9 !important;
}

.aie-locations-text a {
    color:       var(--colour-secondary) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.aie-locations-text a:hover {
    color:           var(--colour-primary) !important;
    text-decoration: underline !important;
}