/**
 * Universal Grid CSS
 * Responsive grid system for entity rendering
 *
 * Breakpoints:
 * - Mobile Portrait: 2 columns (< 576px)
 * - Mobile Landscape: 4 columns (576px - 768px)
 * - Tablet: 3 columns (768px - 1024px)
 * - Desktop: 4 columns (> 1024px)
 */

/* ============================================
   UNIVERSAL GRID CONTAINER
   ============================================ */

.universal-grid {
    display: grid;
    /* Desktop: Fixed 4 columns - not auto-fill */
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg, 1.5rem);
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
}

/* Tablet: 3 columns */
@media (max-width: 1024px) {
    .universal-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile Landscape: 4 columns (extended range for all landscape phones) */
@media (max-width: 896px) and (orientation: landscape) {
    .universal-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: var(--spacing-sm, 0.75rem);
        padding: var(--spacing-sm, 0.5rem);
    }

    /* Compact cards in landscape */
    .universal-grid-card {
        padding: var(--spacing-sm, 0.75rem);
    }

    .grid-card-icon {
        font-size: var(--font-size-3xl, 1.75rem);
        margin-bottom: var(--spacing-xs, 0.25rem);
    }

    .grid-card-title {
        font-size: var(--font-size-sm, 0.875rem);
    }

    .grid-card-description {
        -webkit-line-clamp: 2;
        font-size: var(--font-size-xs, 0.75rem);
    }

    .grid-card-meta {
        display: none;
    }

    .grid-card-footer {
        display: none;
    }
}

/* Tablet Portrait: 2 columns */
@media (max-width: 768px) and (orientation: portrait) {
    .universal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md, 1rem);
    }
}

/* Mobile Portrait: 2 columns */
@media (max-width: 576px) {
    .universal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm, 0.5rem);
        padding: var(--spacing-sm, 0.5rem);
    }
}

/* Very small screens: still 2 columns but tighter spacing */
@media (max-width: 400px) {
    .universal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xs, 0.25rem);
        padding: var(--spacing-xs, 0.25rem);
    }

    .universal-grid-card {
        padding: var(--spacing-sm, 0.5rem);
    }

    .grid-card-icon {
        font-size: var(--font-size-2xl, 1.5rem);
    }

    .grid-card-title {
        font-size: var(--font-size-xs, 0.75rem);
    }
}

/* ============================================
   GRID CARD COMPONENT
   ============================================ */

.universal-grid-card {
    background: var(--color-surface, rgba(26, 31, 58, 0.8));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--color-border, rgba(139, 127, 255, 0.3));
    border-radius: var(--radius-xl, 1rem);
    padding: var(--spacing-lg, 1.5rem);
    transition: all var(--transition-base, 0.3s ease);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.universal-grid-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--entity-color, var(--color-primary, #667eea));
    opacity: 0;
    transition: opacity var(--transition-fast, 0.15s ease);
}

.universal-grid-card:hover {
    transform: translateY(-4px);
    border-color: var(--entity-color, var(--color-primary, #667eea));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
                0 0 20px var(--entity-color, var(--color-primary, #667eea));
}

.universal-grid-card:hover::before {
    opacity: 1;
}

/* Card Header */
.grid-card-header {
    text-align: center;
    margin-bottom: var(--spacing-md, 1rem);
}

.grid-card-icon {
    font-size: var(--font-size-5xl, 3rem);
    margin-bottom: var(--spacing-sm, 0.5rem);
    line-height: 1;
}

/* Card Body */
.grid-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
}

.grid-card-title {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-semibold, 600);
    color: var(--color-text-primary, #e5e7eb);
    margin: 0 0 var(--spacing-xs, 0.25rem) 0;
    text-align: center;
}

.grid-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast, 0.15s ease);
}

.grid-card-title a:hover {
    color: var(--entity-color, var(--color-primary, #667eea));
}

/* Card Meta */
.grid-card-meta {
    display: flex;
    gap: var(--spacing-xs, 0.25rem);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm, 0.5rem);
}

.entity-type-badge,
.mythology-badge {
    font-size: var(--font-size-xs, 0.75rem);
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
    border-radius: var(--radius-full, 9999px);
    font-weight: var(--font-medium, 500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.entity-type-badge {
    background: rgba(var(--color-primary-rgb, 102, 126, 234), 0.3);
    color: var(--color-primary, #667eea);
    border: 1px solid var(--color-primary, #667eea);
}

.mythology-badge {
    background: rgba(var(--color-secondary-rgb, 118, 75, 162), 0.3);
    color: var(--color-secondary, #764ba2);
    border: 1px solid var(--color-secondary, #764ba2);
}

/* Card Description */
.grid-card-description {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, #9ca3af);
    line-height: var(--leading-normal, 1.5);
    margin: var(--spacing-sm, 0.5rem) 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card Fields */
.grid-card-fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
    margin-top: var(--spacing-sm, 0.5rem);
}

.field-item {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, #9ca3af);
}

.field-label {
    font-weight: var(--font-medium, 500);
    color: var(--color-text-primary, #e5e7eb);
}

.field-value {
    color: var(--color-text-secondary, #9ca3af);
}

/* Card Footer */
.grid-card-footer {
    margin-top: var(--spacing-md, 1rem);
    padding-top: var(--spacing-md, 1rem);
    border-top: 1px solid var(--color-border, rgba(139, 127, 255, 0.3));
    display: flex;
    justify-content: center;
}

.btn-view-details {
    display: inline-block;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
    background: linear-gradient(135deg, var(--entity-color, var(--color-primary, #667eea)), var(--color-secondary, #764ba2));
    color: white;
    text-decoration: none;
    border-radius: var(--radius-lg, 0.75rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-semibold, 600);
    transition: all var(--transition-fast, 0.15s ease);
}

.btn-view-details:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 102, 126, 234), 0.4);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Reduce padding on mobile */
@media (max-width: 576px) {
    .universal-grid-card {
        padding: var(--spacing-md, 1rem);
    }

    .grid-card-icon {
        font-size: var(--font-size-4xl, 2.25rem);
    }

    .grid-card-title {
        font-size: var(--font-size-base, 1rem);
    }

    .grid-card-description {
        -webkit-line-clamp: 2;
    }
}

/* ============================================
   LOADING STATE
   ============================================ */

.universal-grid.loading .universal-grid-card {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ============================================
   EMPTY STATE
   ============================================ */

.universal-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-4xl, 4rem) var(--spacing-xl, 2rem);
    color: var(--color-text-secondary, #9ca3af);
}

.universal-grid-empty .empty-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-lg, 1.5rem);
}

/* ============================================
   HOVER EFFECTS
   Note: .universal-grid-card position: relative is set in main definition
   ============================================ */

.universal-grid-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-xl, 1rem);
    opacity: 0;
    transition: opacity var(--transition-base, 0.3s ease);
    pointer-events: none;
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(var(--color-primary-rgb, 102, 126, 234), 0.1) 0%,
        transparent 50%
    );
}

.universal-grid-card:hover::after {
    opacity: 1;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.universal-grid-card:focus-within {
    outline: 3px solid var(--color-primary, #667eea);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .universal-grid-card {
        border-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .universal-grid-card,
    .btn-view-details,
    .universal-grid-card::before,
    .universal-grid-card::after {
        transition: none;
    }

    .universal-grid-card:hover {
        transform: none;
    }
}