/* ============================================
   BENTO GRID ENHANCEMENTS
   Additional styles for Bento layout
   ============================================ */

/* Bento Grid Container */
.bento-grid {
    position: relative;
}

/* Grid Background Pattern */
.bento-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100px 100px;
    pointer-events: none;
    z-index: -1;
}

/* Bento Card Variants */
.bento-card--featured .bento-card__title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
}

.bento-card--featured .bento-card__category {
    padding: 8px 16px;
    font-size: 0.75rem;
}

/* Card without image - gradient background */
.bento-card:not(.bento-card--has-image) {
    background: linear-gradient(135deg, 
        rgba(26, 26, 46, 0.8) 0%, 
        rgba(22, 33, 62, 0.6) 100%
    );
    min-height: 280px;
}

.bento-card:not(.bento-card--has-image) .bento-card__content {
    position: relative;
    bottom: auto;
    padding: 24px;
    background: transparent;
}

.bento-card:not(.bento-card--has-image)::before {
    background: linear-gradient(
        135deg, 
        rgba(0, 212, 255, 0.2) 0%, 
        rgba(123, 47, 255, 0.1) 50%,
        rgba(241, 91, 181, 0.1) 100%
    );
}

/* Premium Card Glow Animation */
.bento-card--premium {
    animation: premiumGlow 3s ease-in-out infinite;
}

@keyframes premiumGlow {
    0%, 100% {
        box-shadow: 
            0 10px 40px rgba(0, 0, 0, 0.4),
            0 0 30px rgba(0, 212, 255, 0.1);
    }
    50% {
        box-shadow: 
            0 10px 40px rgba(0, 0, 0, 0.4),
            0 0 50px rgba(123, 47, 255, 0.25);
    }
}

/* Hover gradient border effect */
.bento-card:hover::before {
    background: linear-gradient(
        135deg, 
        rgba(0, 212, 255, 0.4) 0%, 
        rgba(123, 47, 255, 0.3) 50%,
        rgba(241, 91, 181, 0.2) 100%
    );
}

/* Card Content Typography Adjustments */
.bento-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bento-card--featured .bento-card__title {
    -webkit-line-clamp: 4;
}

.bento-card--regular .bento-card__title {
    -webkit-line-clamp: 2;
}

/* Category Badge Variants */
.bento-card__category[data-category="ai"] {
    background: rgba(0, 212, 255, 0.2);
    border-color: rgba(0, 212, 255, 0.4);
}

.bento-card__category[data-category="ml"] {
    background: rgba(123, 47, 255, 0.2);
    border-color: rgba(123, 47, 255, 0.4);
}

.bento-card__category[data-category="robotics"] {
    background: rgba(241, 91, 181, 0.2);
    border-color: rgba(241, 91, 181, 0.4);
}

/* Mouse tracking glow effect for premium cards */
.bento-card--premium {
    --mouse-x: 50%;
    --mouse-y: 50%;
}

.bento-card--premium::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at var(--mouse-x) var(--mouse-y),
        rgba(123, 47, 255, 0.15) 0%,
        transparent 50%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bento-card--premium:hover::after {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .bento-card--featured {
        grid-column: span 2;
        grid-row: span 2;
    }
    
    .bento-card--tall {
        grid-column: span 1;
        grid-row: span 1;
    }
}

@media (max-width: 768px) {
    .bento-card--featured,
    .bento-card--large,
    .bento-card--tall,
    .bento-card--regular {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .bento-card__title {
        font-size: 1.1rem;
    }
    
    .bento-card--featured .bento-card__title {
        font-size: 1.3rem;
    }
}

/* Skeleton Loading State */
.bento-card.is-loading {
    pointer-events: none;
}

.bento-card.is-loading .bento-card__content {
    background: rgba(26, 26, 46, 0.8);
}

.bento-card.is-loading .bento-card__title,
.bento-card.is-loading .bento-card__category,
.bento-card.is-loading .bento-card__meta {
    color: transparent;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.bento-card.is-loading .bento-card__title {
    height: 60px;
    margin-bottom: 12px;
}

.bento-card.is-loading .bento-card__category {
    height: 24px;
    width: 100px;
    margin-bottom: 12px;
}

.bento-card.is-loading .bento-card__meta {
    height: 20px;
    width: 150px;
}

/* Card Link Overlay */
.bento-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.bento-card__content,
.bento-card__image,
.bento-card a,
.bento-card button {
    position: relative;
    z-index: 2;
}

/* Focus state for accessibility */
.bento-card:focus-within {
    outline: 2px solid var(--color-accent-cyan);
    outline-offset: 4px;
}

/* Print styles */
@media print {
    .bento-grid {
        display: block;
    }
    
    .bento-card {
        break-inside: avoid;
        margin-bottom: 20px;
        page-break-inside: avoid;
    }
    
    .bento-card::before,
    .bento-card::after {
        display: none;
    }
    
    .bento-card {
        background: #fff;
        color: #000;
        border: 1px solid #000;
    }
}