/**
 * CardGridView.css - Reusable Card Grid View Component Styles
 *
 * Provides auto-fill CSS Grid layout for card views.
 * Cards automatically fill horizontal space and wrap to new rows.
 *
 * SIZE CLASSES:
 *   .card-grid-small     - 150px minimum width (more cards)
 *   .card-grid-standard  - 180px minimum width (balanced)
 *   .card-grid-recommend - 180px minimum width (recommendations)
 *   .card-grid-large     - 220px minimum width (fewer, larger)
 */

/* ============================================================
   CSS VARIABLES - Grid configuration
   References TitleCard.css variables (the single source of truth).
   ============================================================ */

/* ============================================================
   BASE GRID CONTAINER
   ============================================================ */
.card-grid-view {
    display: grid;
    gap: var(--title-card-gap);
    /* Default to standard size if no modifier class */
    grid-template-columns: repeat(auto-fill, minmax(var(--title-card-width-md), 1fr));
}

/* ============================================================
   SIZE VARIANTS
   ============================================================ */

/* Small - More cards per row (150px min) */
.card-grid-view.card-grid-small {
    grid-template-columns: repeat(auto-fill, minmax(var(--title-card-width-sm), 1fr));
}

/* Standard - Balanced (180px min) - default */
.card-grid-view.card-grid-standard {
    grid-template-columns: repeat(auto-fill, minmax(var(--title-card-width-md), 1fr));
}

/* Large - Fewer, larger cards (220px min) */
.card-grid-view.card-grid-large {
    grid-template-columns: repeat(auto-fill, minmax(var(--title-card-width-lg), 1fr));
}

/* Recommendation - Slightly wider than standard (195px min) */
.card-grid-view.card-grid-recommend {
    grid-template-columns: repeat(auto-fill, minmax(var(--title-card-width-recommend), 1fr));
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   Note: Card width variables are defined in TitleCard.css
   ============================================================ */
@media (max-width: 576px) {
    /* Force 3 columns on mobile for compact poster-only view */
    .card-grid-view {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--title-card-gap);
    }

    /* Override: Force 2 columns if needed (add .mobile-2-col to container) */
    .card-grid-view.mobile-2-col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   LOADING STATE
   ============================================================ */
.card-grid-loading {
    grid-column: 1 / -1; /* Span all columns */
    text-align: center;
    padding: 2rem;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.card-grid-empty {
    grid-column: 1 / -1; /* Span all columns */
    text-align: center;
    padding: 1rem;
}

/* ============================================================
   ANIMATION - Cards fade in
   ============================================================ */
.card-grid-view .title-card-wrapper {
    animation: cardFadeIn 0.2s ease-out;
}

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Disable animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .card-grid-view .title-card-wrapper {
        animation: none;
    }
}