/*
 * glass-card.css
 * Opt-in glass surface for approved small public cards.
 */

.glass-card {
    --glass-card-bg:
        linear-gradient(
            135deg,
            rgb(255 255 255 / 60%) 0%,
            rgb(255 255 255 / 38%) 42%,
            rgb(255 255 255 / 26%) 100%
        );
    --glass-card-border: rgb(255 255 255 / 35%);
    --glass-card-border-hover: rgb(255 255 255 / 48%);
    --glass-card-radius: 20px;
    --glass-card-shadow: 0 10px 30px rgb(26 71 104 / 16%);
    --glass-card-shadow-hover: 0 18px 48px rgb(26 71 104 / 24%);

    position: relative;
    overflow: hidden;
    background: var(--glass-card-bg);
    border: 1px solid var(--glass-card-border);
    border-radius: var(--glass-card-radius);
    box-shadow: var(--glass-card-shadow);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-card {
        backdrop-filter: blur(18px) saturate(138%);
        -webkit-backdrop-filter: blur(18px) saturate(138%);
    }
}

.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background:
        linear-gradient(
            145deg,
            rgb(255 255 255 / 42%) 0%,
            rgb(255 255 255 / 13%) 32%,
            transparent 100%
        );
    pointer-events: none;
}

.glass-card > * {
    position: relative;
    z-index: 1;
}

.glass-card:hover {
    transform: translateY(-2px);
    border-color: var(--glass-card-border-hover);
    box-shadow: var(--glass-card-shadow-hover);
}

html.a11y .glass-card {
    background: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.a11y .glass-card::before {
    content: none;
}

@media (prefers-reduced-motion: reduce) {
    .glass-card {
        transition: none;
    }

    .glass-card:hover {
        transform: none;
    }
}