@use '../../styles/skeleton';

// ─── Card base ───────────────────────────────────────────────────────────────
mat-card {
    overflow: hidden;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
    box-shadow: none;
    background: transparent;
}

mat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

// ─── Grid layout ─────────────────────────────────────────────────────────────
.grid-list__grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(var(--cover-grid-min-width, 148px), 1fr)
    );
    gap: var(--cover-gap, 16px);

    mat-card {
        cursor: pointer;
        width: 100%;

        mat-card-content {
            padding: 0;
            margin: 0;
        }

        .card-thumbnail-container {
            position: relative;
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
            aspect-ratio: 2 / 3; // maintain poster ratio
            background: var(--mat-sys-surface-container-high);
        }

        .stream-icon {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
            display: block;
            // No hardcoded light bg — uses parent container bg
            background: transparent;
        }

        .stream-icon-placeholder {
            width: 100%;
            height: 100%;
            min-height: 200px;
            // Use graphite surface token, not hardcoded grey
            background: var(--mat-sys-surface-container-high);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 8px;
            color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
            border-radius: 10px;

            &::after {
                content: 'No cover';
                font-size: 0.75rem;
                font-weight: 500;
                letter-spacing: 0.03em;
            }
        }

        .title {
            margin-top: 8px;
            padding: 0 2px;
            word-break: break-word;
            text-align: center;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 0.8rem;
            line-height: 1.35;
            color: var(--app-body-color, var(--mat-sys-on-surface-variant));
        }
    }
}

// ─── Rating badge ─────────────────────────────────────────────────────────────
.rating {
    position: absolute;
    top: 6px;
    right: 6px;
    // Use a solid or highly opaque dark pill to avoid expensive backdrop-filter
    background: rgba(0, 0, 0, 0.85);
    color: #4ade80; // green-400, readable across themes
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 5px;
    gap: 2px;

    mat-icon {
        font-size: 13px;
        height: 14px;
        width: 14px;
    }
}

.grid-empty-state {
    grid-column: 1 / -1;
    min-height: clamp(320px, 56vh, 620px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2.8vw, 30px);
    box-sizing: border-box;

    app-playlist-error-view {
        --error-empty-illustration-size: clamp(170px, 18vw, 250px);
        --error-empty-max-width: min(480px, 100%);
        --error-empty-title-size: clamp(1.45rem, 2vw, 1.9rem);
        --error-empty-description-size: clamp(0.95rem, 1.15vw, 1.05rem);
        --error-empty-title-weight: 660;
        --error-empty-title-spacing: -0.014em;
        --error-empty-copy-gap: 10px;
        --error-empty-description-line-height: 1.44;
        --error-empty-description-opacity: 0.9;
    }
}


@media (max-width: 768px) {
    .grid-empty-state {
        min-height: clamp(260px, 48vh, 460px);
        padding: 14px;

        app-playlist-error-view {
            --error-empty-illustration-size: 165px;
            --error-empty-max-width: 310px;
            --error-empty-title-size: 1.3rem;
            --error-empty-description-size: 0.9rem;
            --error-empty-title-weight: 640;
            --error-empty-copy-gap: 8px;
        }
    }
}
