/*
 * Glassmorphic Card Component
 *
 * BEM naming convention:
 * - Block: .glass-card
 * - Elements: .glass-card__header, .glass-card__title, .glass-card__body, .glass-card__footer
 * - Modifiers: .glass-card--subtle, .glass-card--featured, .glass-card--elevated, .glass-card--interactive
 *
 * Usage: <div class="glass-card glass-card--featured">
 *          <header class="glass-card__header">...</header>
 *        </div>
 *
 * IMPORTANT: Modifiers are additional classes, not replacements.
 * Always include base class with modifier: "glass-card glass-card--featured"
 *
 * Safari requires -webkit-backdrop-filter with LITERAL values (CSS variables don't work).
 */

@layer components {
    /* ===== Block: Base glass card ===== */
    .glass-card {
        /* More transparent for better glass effect */
        background: var(--glass-bg-light, hsl(0 0% 100% / 0.70));

        /* Glassmorphism effect */
        backdrop-filter: var(--glass-blur-medium, blur(12px));
        -webkit-backdrop-filter: blur(12px);  /* Safari: MUST use literal value */

        /* Border and shape */
        border: var(--glass-border, 1px solid hsl(0 0% 100% / 0.5));
        border-radius: var(--glass-radius, 1rem);

        /* Elevation */
        box-shadow: var(--glass-shadow, 0 8px 32px hsl(220 13% 15% / 0.08));

        /* Spacing */
        padding: var(--space-lg, 1.5rem);

        /* Performance-friendly animations */
        transition: transform var(--transition-base, 250ms ease);
        will-change: transform;

        /* Pseudo-element for GPU-accelerated shadow animation */
        position: relative;
    }

    .glass-card::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: 0 12px 48px hsl(220 13% 15% / 0.15);
        opacity: 0;
        transition: opacity var(--transition-base, 250ms ease);
        pointer-events: none;
        z-index: -1;
    }

    /* ===== Elements ===== */
    .glass-card__header {
        margin-bottom: var(--space-md, 1rem);
        padding-bottom: var(--space-md, 1rem);
        border-bottom: 1px solid hsl(220 13% 20% / 0.08);
    }

    .glass-card__title {
        font-size: var(--text-2xl, 1.5rem);
        font-weight: 600;
        margin: 0;
        color: var(--color-text, hsl(0 0% 10%));
        line-height: 1.2;
    }

    .glass-card__body {
        color: var(--color-text, hsl(0 0% 15%));
        line-height: 1.6;
    }

    .glass-card__footer {
        margin-top: var(--space-lg, 1.5rem);
        padding-top: var(--space-md, 1rem);
        border-top: 1px solid hsl(220 13% 20% / 0.08);
    }

    /* ===== Modifiers ===== */

    /* Subtle: Higher opacity (90%), lighter blur for secondary content */
    .glass-card--subtle {
        background: var(--glass-bg-subtle, hsl(0 0% 100% / 0.90));
        backdrop-filter: var(--glass-blur-light, blur(8px));
        -webkit-backdrop-filter: blur(8px);  /* Safari: literal value */
    }

    /* Featured: Medium opacity (80%), stronger shadow, thicker border */
    .glass-card--featured {
        background: var(--glass-bg-medium, hsl(0 0% 100% / 0.80));
        border-width: 2px;
        box-shadow: 0 12px 48px hsl(220 13% 15% / 0.12);
    }

    /* Elevated: Enhanced shadow for prominent cards */
    .glass-card--elevated {
        box-shadow: 0 16px 64px hsl(220 13% 15% / 0.14);
    }

    /* Interactive: Adds hover effects (desktop only via hover media query) */
    /* Note: Hover styles defined in media query below for desktop detection */
}

/* ===== Interactive hover (desktop only - touch-safe) ===== */
@media (hover: hover) and (pointer: fine) {
    .glass-card--interactive:hover {
        transform: translateY(-4px);
        cursor: pointer;
    }

    .glass-card--interactive:hover::after {
        opacity: 1;
    }

    .glass-card--interactive:active {
        transform: translateY(-2px);
    }
}

/* ===== Touch device press feedback ===== */
@media (hover: none) {
    .glass-card--interactive:active {
        transform: scale(0.98);
        opacity: 0.95;
    }
}

/* ===== Accessibility: Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .glass-card {
        transition: none;
    }

    .glass-card::after {
        transition: opacity var(--transition-reduced, 200ms ease);
    }

    .glass-card--interactive:hover,
    .glass-card--interactive:active {
        transform: none;
    }
}

/* ===== Fallback for browsers without backdrop-filter ===== */
@supports not (backdrop-filter: blur(1px)) {
    .glass-card {
        background: hsl(0 0% 100% / 0.95);  /* Solid fallback */
    }

    .glass-card--subtle {
        background: hsl(0 0% 100% / 0.98);
    }

    .glass-card--featured {
        background: hsl(0 0% 100% / 0.97);
    }
}

/* ===== Accessibility: Reduced transparency preference ===== */
@media (prefers-reduced-transparency: reduce) {
    .glass-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: hsl(0 0% 100%);
    }

    .glass-card--subtle,
    .glass-card--featured {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: hsl(0 0% 100%);
    }
}