/**
 * .ww-card — base surface for CasinoCard, CasinoMiniCard, BonusCard,
 * GameCard, ProviderCard. Variants compose on top via additional classes
 * rather than separate components, per master spec's restraint on visual
 * clutter.
 */

.ww-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--wp--preset--color--surface);
    border: var(--ww-border-width) solid var(--ww-border-color);
    border-radius: var(--ww-radius-lg);
    padding: 1.25rem;
    box-shadow: var(--ww-shadow-resting);
    transition: box-shadow var(--ww-transition-base), border-color var(--ww-transition-base);
}

a.ww-card {
    color: inherit;
}

a.ww-card:hover,
a.ww-card:focus-visible {
    box-shadow: var(--ww-shadow-raised);
    border-color: var(--wp--preset--color--accent);
}

.ww-card--compact {
    padding: 0.875rem;
    gap: 0.5rem;
}

.ww-card__title {
    font-size: var(--wp--preset--font-size--h4);
    font-weight: 700;
    color: var(--wp--preset--color--ink);
}

.ww-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--wp--preset--color--muted);
    font-size: var(--wp--preset--font-size--small);
}

.ww-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
}

/* --- Loading skeleton state --- */
.ww-card--loading .ww-card__title,
.ww-card--loading .ww-card__meta {
    color: transparent;
    background: linear-gradient(90deg, var(--wp--preset--color--surface-alt) 25%, var(--ww-border-color) 37%, var(--wp--preset--color--surface-alt) 63%);
    background-size: 400% 100%;
    border-radius: var(--ww-radius-sm);
    animation: ww-shimmer 1.4s ease infinite;
}

@keyframes ww-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .ww-card--loading .ww-card__title,
    .ww-card--loading .ww-card__meta {
        animation: none;
        background: var(--wp--preset--color--surface-alt);
    }
}

/* --- Error state (e.g. a card whose data failed to load) --- */
.ww-card--error {
    border-color: var(--wp--preset--color--danger);
}