/* aeo-audit: aeo-contextual-upsell — Round 23 / D-105.
 *
 * Per-module contextual recommendation card. NOT the /analytics upsell hero
 * (D-095) — different shape, different intent:
 *   - /analytics hero: broad cross-sell, two-column comparison, dual app
 *   - This card:       intent-aligned, single app, 1 paragraph + CTA
 *
 * Renders inside page-detail.php's per-module section, after all findings.
 * Mapping (D-105):
 *   structured_data / brand_signals / ai_snippet → JSON Schema App
 *   technical → Website Speedy
 *
 * Tokens: brand purple via existing --bg-primary, neutral grays.
 * NO new color tokens. NO dismiss × (recurring user need; D-105 rationale).
 */

.aeo-contextual-upsell {
    margin-top: 1.25rem;
    padding: 1.125rem 1.25rem;
    background-color: rgb(249 250 251);
    border: 1px solid rgb(229 231 235);
    border-left: 3px solid var(--bg-primary, rgb(124 58 237));
    border-radius: 0.5rem;
}
:is(.dark .aeo-contextual-upsell) {
    background-color: rgb(38 38 38);
    border-color: rgb(64 64 64);
    border-left-color: var(--bg-primary, rgb(124 58 237));
}

.aeo-contextual-upsell__head {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.aeo-contextual-upsell__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    background-color: rgb(var(--bg-primary-rgb, 124 58 237) / 0.12);
    color: var(--bg-primary, rgb(124 58 237));
    font-size: 0.875rem;
}
:is(.dark .aeo-contextual-upsell__icon) {
    background-color: rgb(var(--bg-primary-rgb, 124 58 237) / 0.18);
}

.aeo-contextual-upsell__eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgb(115 115 115);
}
:is(.dark .aeo-contextual-upsell__eyebrow) {
    color: rgb(163 163 163);
}

.aeo-contextual-upsell__title {
    font-size: 1rem;
    font-weight: 700;
    color: rgb(23 23 23);
    margin: 0 0 0.375rem;
}
:is(.dark .aeo-contextual-upsell__title) {
    color: #ffffff;
}

.aeo-contextual-upsell__body {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgb(64 64 64);
    margin: 0 0 0.875rem;
    max-width: 56ch;
}
:is(.dark .aeo-contextual-upsell__body) {
    color: rgb(212 212 212);
}

.aeo-contextual-upsell__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    background-color: var(--bg-primary, rgb(124 58 237));
    color: #ffffff;
    border-radius: 0.375rem;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: filter 0.15s ease, transform 0.05s ease;
}
.aeo-contextual-upsell__cta:hover {
    filter: brightness(0.92);
    color: #ffffff;
}
.aeo-contextual-upsell__cta:active {
    transform: translateY(1px);
}

@media (max-width: 640px) {
    .aeo-contextual-upsell { padding: 1rem; }
    .aeo-contextual-upsell__cta { width: 100%; justify-content: center; }
}