/* aeo-audit: blur-tease lock treatment for page-detail tier locks.
 *
 * Shows a locked section's content BLURRED + non-selectable beneath a centered
 * upgrade overlay, so a locked (Lite) user sees the value is there. Reuses the
 * wizard's canonical blur idea (filter:blur + user-select:none +
 * pointer-events:none, cf. .aeo-review__url--locked). The blurred content is the
 * user's own site data or a clearly representative placeholder. Neutral greys +
 * an info-blue CTA. Light + dark mode. */

/* Layered as a CSS grid stack: the blurred body and the overlay share one grid
 * cell, so the cell grows to whichever is taller. This is what stops the overlay
 * from overlapping/clipping when the blurred content is short (e.g. the 80px
 * sparkline or the metric strip) -- the cell expands to fit the overlay instead
 * of the overlay spilling over fixed-height content. */
.aeo-tease {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 0.5rem;
}
.aeo-tease > .aeo-tease__blur,
.aeo-tease > .aeo-tease__overlay {
    grid-area: 1 / 1;
    min-width: 0;
}

/* Blurred content layer: a LIGHT blur so the shape/structure of the locked
 * content stays visible (the user can tell there's real data behind it) while it
 * stays non-selectable and non-interactive (still non-copyable). Semi-readable
 * is acceptable: it's the user's own data or a representative placeholder. */
.aeo-tease__blur {
    filter: blur(2px);
    user-select: none;
    pointer-events: none;
}

/* Preview cap: when the blurred body is tall, cap the BLURRED LAYER's height
 * (not the whole grid row) so the body shows a clean bounded preview while the
 * overlay/panel is free to size itself and is NEVER clipped. Capping the grid
 * row instead would clip the panel + CTA whenever the panel is taller than the
 * cap (e.g. wrapped text on narrow widths). overflow:hidden on .aeo-tease still
 * clips the capped blur to the rounded corners. */
.aeo-tease--preview .aeo-tease__blur {
    max-height: 22rem;
    overflow: hidden;
}

/* Small inline lock beside an inline-blurred value (e.g. the hero delta), where
 * a full overlay would be overkill. */
.aeo-tease__inline-lock {
    font-size: 0.875rem;
    color: rgb(115 115 115);
    margin-right: 0.25rem;
    vertical-align: middle;
}
:is(.dark .aeo-tease__inline-lock) {
    color: rgb(163 163 163);
}

/* Inline numeric blur (CWV values): a LIGHT blur so the user can tell there are
 * real metrics here (shape visible, semi-readable is fine) while the values stay
 * non-selectable and non-interactive. */
.aeo-tease__num {
    filter: blur(2px);
    user-select: none;
    pointer-events: none;
}

/* Centering layer, stacked over the blur in the shared grid cell. It only
 * centers the solid panel; it carries no text styling itself. Ignores pointer
 * events so it never blocks the page; the panel re-enables them. */
.aeo-tease__overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    pointer-events: none;
}
.aeo-tease__overlay > * {
    pointer-events: auto;
}

/* Solid lock panel: the glyph + heading + explainer + CTA sit on an opaque
 * surface so they read crisply over ANY blurred content (busy delta sections
 * included), not just simple cards. This is what makes every tease equally
 * legible. */
.aeo-tease__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    max-width: 26rem;
    padding: 1.25rem 1.5rem;
    background-color: #ffffff;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    /* Stronger lift so the opaque panel stays clearly distinct now that the
     * blur behind it is lighter and the content shows through more. */
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    position: relative;
    z-index: 1;
}
:is(.dark .aeo-tease__panel) {
    background-color: rgb(38 38 38);
    border-color: rgb(64 64 64);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

/* Scrim variant: a light wash behind the panel so the blurred body recedes and
 * the panel stands out. Lighter than before because the panel now carries the
 * contrast. The CWV strip omits the scrim so its 4 labels stay readable. */
.aeo-tease--scrim .aeo-tease__overlay {
    background-color: rgba(249, 250, 251, 0.35);
}
:is(.dark .aeo-tease--scrim) .aeo-tease__overlay {
    background-color: rgba(23, 23, 23, 0.4);
}

.aeo-tease__icon {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(229 231 235);
    color: rgb(55 65 81);
    font-size: 1.125rem;
    flex: 0 0 auto;
}
:is(.dark .aeo-tease__icon) {
    background-color: rgb(64 64 64);
    color: rgb(212 212 212);
}

.aeo-tease__title {
    margin: 0;
    font-weight: 700;
    font-size: 0.9375rem;
    color: rgb(31 41 55);
}
:is(.dark .aeo-tease__title) {
    color: rgb(243 244 246);
}

.aeo-tease__text {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(82 82 82);
    max-width: 32rem;
}
:is(.dark .aeo-tease__text) {
    color: rgb(163 163 163);
}

/* Info-blue CTA (info-600 / info-700), neutral against the grey tease. */
.aeo-tease__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.125rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #ffffff;
    background-color: rgb(37 99 235);
    transition: background-color 0.15s ease;
}
.aeo-tease__cta:hover {
    color: #ffffff;
    background-color: rgb(29 78 216);
}

/* Compact panel (CWV strip): a single-row pill, no big heading/explainer, so it
 * sits over the short metric strip without hiding the labels. */
.aeo-tease__overlay--compact {
    padding: 0.5rem;
}
.aeo-tease__overlay--compact .aeo-tease__panel {
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: 9999px;
}
.aeo-tease__overlay--compact .aeo-tease__icon {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1rem;
}
.aeo-tease__overlay--compact .aeo-tease__cta {
    padding: 0.375rem 0.75rem;
}