/**
 * Standalone fallback for deprecated GCC/Golden Purple component markup.
 *
 * This file is enqueued only when Golden Control Center is not active. The
 * active plugin owns these selectors through its compatibility layer.
 */

.gp-card {
    background: color-mix(in srgb, var(--gp-color-surface-base) 84%, transparent);
    border: 1px solid var(--gp-color-border-subtle, var(--gp-color-line));
    border-radius: var(--gp-layout-radius-md);
    box-shadow: var(--gp-layout-shadow-soft);
    padding: var(--gp-space-md);
}

.gp-card__media img {
    border-radius: calc(var(--gp-layout-radius-md) - 4px);
}

.gp-content-width {
    width: min(100%, var(--gp-layout-content-width));
    margin-inline: auto;
}

.gp-wide-width {
    width: min(100%, var(--gp-layout-wide-width));
    margin-inline: auto;
}

.gp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.95rem 1.4rem;
    border-radius: var(--gp-space-half, var(--gp-space-sm));
    font-size: var(--gp-type-small-body, var(--gp-type-font-size-sm));
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}

.gp-button:hover,
.gp-button:focus {
    transform: translateY(-1px);
}

.gp-button--primary,
.gp-button--secondary {
    color: var(--gp-color-neutral-light, var(--gp-color-full-white));
    background: linear-gradient(135deg, var(--gp-color-secondary, var(--gp-color-dark-royal-purple)), var(--gp-color-primary, var(--gp-color-royal-gold)));
    box-shadow: 0 18px 40px color-mix(in srgb, var(--gp-color-secondary) 28%, transparent);
}

.gp-button--primary,
.gp-button--ghost {
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
}

.gp-button--ghost {
    color: var(--gp-color-text-primary, var(--gp-color-attractive-black));
    background: color-mix(in srgb, var(--gp-color-neutral-light) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--gp-color-primary) 26%, transparent);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--gp-color-neutral-dark) 10%, transparent);
}

@media (max-width: 767px) {
    .gp-button {
        width: 100%;
    }
}