/**
 * EventPrime Categories - Unified CSS Grid + Flex System
 * Optimized for compatibility, performance, and responsive design
 */

/* ==========================================================================
   MAIN WRAPPER & COMPATIBILITY
   ========================================================================== */

/* EventPrime compatibility wrapper with high specificity */
.emagic.ep-events-by-category {
    margin: 20px 0;
    position: relative;
}

/* ==========================================================================
   CSS GRID LAYOUT SYSTEM (Container Level)
   ========================================================================== */

/* Grid layout - Unified system with CSS custom properties */
.emagic.ep-events-by-category .ep-events.ep-events-grid {
    display: grid;
    gap: var(--ep-categories-grid-gap, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ep-categories-column-width)), 1fr));
}

/* ==========================================================================
   FLEX SYSTEM (Card Level) - Internal card layout
   ========================================================================== */

/* Reset EventPrime's flex-based grid widths for Grid compatibility */
.emagic.ep-events-by-category .ep-events.ep-events-grid .ep-event-card {
    width: 100%;
    max-width: 100%;
    flex: none;
    flex-basis: auto;
    /* Maintain flex for internal card layout */
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Remove EventPrime's default margins */
    margin: 0;
}

/* Override nested elements with optimal specificity */
.emagic.ep-events-by-category .ep-events.ep-events-grid .ep-event-card .ep-card-wrapper,
.emagic.ep-events-by-category .ep-events.ep-events-grid .ep-event-card .ep-card-container {
    width: 100%;
    max-width: 100%;
    flex: 1;
}

/* ==========================================================================
   CARD INTERNAL LAYOUT (Flex System)
   ========================================================================== */

/* Card content - Flex for optimal content distribution */
.emagic.ep-events-by-category .ep-event-card .ep-card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
}

/* Push footer to bottom - Flex advantage */
.emagic.ep-events-by-category .ep-event-card .ep-card-footer {
    margin-top: auto;
}

/* Card body - Flex grow for content area */
.emagic.ep-events-by-category .ep-event-card .ep-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   PERFORMANCE & TRANSITIONS
   ========================================================================== */

/* EventPrime-compatible transitions - GPU accelerated */
.emagic.ep-events-by-category .ep-event-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

.emagic.ep-events-by-category .ep-event-card:hover {
    transform: translateY(-2px);
}

/* ==========================================================================
   RESPONSIVE DESIGN - Mobile First Approach
   ========================================================================== */

/* Responsive design - Simplified with auto-fit grid */
@media (max-width: 768px) {
    /* Reduce gap for smaller screens */
    .emagic.ep-events-by-category .ep-events.ep-events-grid {
        gap: calc(var(--ep-categories-grid-gap, 20px) * 0.75);
    }
}

@media (max-width: 480px) {
    /* Smaller gap for mobile */
    .emagic.ep-events-by-category .ep-events.ep-events-grid {
        gap: calc(var(--ep-categories-grid-gap, 20px) * 0.5);
    }
    
    /* Optimize card padding for mobile */
    .emagic.ep-events-by-category .ep-event-card {
        border-radius: 8px;
    }
}

/* ==========================================================================
   FALLBACK & COMPATIBILITY
   ========================================================================== */

/* List view compatibility - Override grid when needed */
.emagic.ep-events-by-category.ep-view-list .ep-events.ep-events-grid {
    display: block;
    gap: 0;
}

.emagic.ep-events-by-category.ep-view-list .ep-event-card {
    width: 100%;
    margin-bottom: 20px;
    height: auto;
}

/* Legacy EventPrime compatibility */
.emagic.ep-events-by-category .ep-event-card.ep-card-col-3,
.emagic.ep-events-by-category .ep-event-card.ep-card-col-4,
.emagic.ep-events-by-category .ep-event-card.ep-card-col-6,
.emagic.ep-events-by-category .ep-event-card.ep-card-col-12 {
    width: 100%;
    max-width: 100%;
    flex: none;
}

/* ==========================================================================
   IMAGE HEIGHT CUSTOM PROPERTY FALLBACK
   ========================================================================== */

/* Use our custom image height when EventPrime's is not available */
.emagic.ep-events-by-category .ep-box-card-thumb {
    max-height: var(--ep-imageCardHeight, var(--ep-categories-image-height));
    overflow: hidden;
    position: relative;
}

/* Ensure images respect max-height and maintain proportions */
.emagic.ep-events-by-category .ep-box-card-thumb img.ep-event-cover,
.emagic.ep-events-by-category .ep-box-card-thumb .ep-event-cover {
    width: 100%;
    height: auto;
    max-height: var(--ep-imageCardHeight, var(--ep-categories-image-height));
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .emagic.ep-events-by-category .ep-events.ep-events-grid {
        display: block;
        gap: 0;
    }
    
    .emagic.ep-events-by-category .ep-event-card {
        break-inside: avoid;
        margin-bottom: 20px;
        height: auto;
    }
}