/* Frontend styles for FCA Spaces List block */

.fca-spaces-list-wrapper {
    /* Alignment handled by get_block_wrapper_attributes */
}

/* Grid Layout */
.fca-spaces-list.fca-spaces-list-grid,
.fca-pages-list.fca-spaces-list-grid, 
.fca-courses-list.fca-spaces-list-grid {
    display: grid;
    /* Default: auto-fit columns */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 20px; 
    list-style: none;
    padding: 0;
    margin: 0;
    border: none; 
}

/* Remove rule targeting the CSS variable */
/* 
.fca-spaces-list-grid[style*="--fca-grid-num-cols"],
.fca-pages-list.fca-spaces-list-grid[style*="--fca-grid-num-cols"], 
.fca-courses-list.fca-spaces-list-grid[style*="--fca-grid-num-cols"] {
    grid-template-columns: repeat(var(--fca-grid-num-cols), 1fr);
}
*/

/* Apply specific column counts via classes (Desktop/Tablet) */
/* MOBILE FIRST: All lists start as single column */
.fca-spaces-list-grid.fca-grid-cols-1,
.fca-pages-list.fca-spaces-list-grid.fca-grid-cols-1,
.fca-courses-list.fca-spaces-list-grid.fca-grid-cols-1,
.fca-spaces-list-grid.fca-grid-cols-2,
.fca-pages-list.fca-spaces-list-grid.fca-grid-cols-2,
.fca-courses-list.fca-spaces-list-grid.fca-grid-cols-2,
.fca-spaces-list-grid.fca-grid-cols-3,
.fca-pages-list.fca-spaces-list-grid.fca-grid-cols-3,
.fca-courses-list.fca-spaces-list-grid.fca-grid-cols-3,
.fca-spaces-list-grid.fca-grid-cols-4,
.fca-pages-list.fca-spaces-list-grid.fca-grid-cols-4,
.fca-courses-list.fca-spaces-list-grid.fca-grid-cols-4,
.fca-spaces-list-grid.fca-grid-cols-5,
.fca-pages-list.fca-spaces-list-grid.fca-grid-cols-5,
.fca-courses-list.fca-spaces-list-grid.fca-grid-cols-5,
.fca-spaces-list-grid.fca-grid-cols-6,
.fca-pages-list.fca-spaces-list-grid.fca-grid-cols-6,
.fca-courses-list.fca-spaces-list-grid.fca-grid-cols-6 {
    grid-template-columns: 1fr !important; /* ALWAYS start with 1 column */
    gap: 15px !important; 
}

/* Only apply multi-column layout for larger screens */
@media (min-width: 768px) {
    /* NOW apply column classes for desktop/tablet only */
    .fca-spaces-list-grid.fca-grid-cols-1,
    .fca-pages-list.fca-spaces-list-grid.fca-grid-cols-1,
    .fca-courses-list.fca-spaces-list-grid.fca-grid-cols-1 {
        grid-template-columns: 1fr !important;
    }
    
    .fca-spaces-list-grid.fca-grid-cols-2,
    .fca-pages-list.fca-spaces-list-grid.fca-grid-cols-2,
    .fca-courses-list.fca-spaces-list-grid.fca-grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .fca-spaces-list-grid.fca-grid-cols-3,
    .fca-pages-list.fca-spaces-list-grid.fca-grid-cols-3,
    .fca-courses-list.fca-spaces-list-grid.fca-grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .fca-spaces-list-grid.fca-grid-cols-4,
    .fca-pages-list.fca-spaces-list-grid.fca-grid-cols-4,
    .fca-courses-list.fca-spaces-list-grid.fca-grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .fca-spaces-list-grid.fca-grid-cols-5,
    .fca-pages-list.fca-spaces-list-grid.fca-grid-cols-5,
    .fca-courses-list.fca-spaces-list-grid.fca-grid-cols-5 {
        grid-template-columns: repeat(5, 1fr) !important;
    }
    
    .fca-spaces-list-grid.fca-grid-cols-6,
    .fca-pages-list.fca-spaces-list-grid.fca-grid-cols-6,
    .fca-courses-list.fca-spaces-list-grid.fca-grid-cols-6 {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    
    /* Restore larger gap for desktop */
    .fca-spaces-list.fca-spaces-list-grid,
    .fca-pages-list.fca-spaces-list-grid, 
    .fca-courses-list.fca-spaces-list-grid {
        gap: 20px !important; 
    }
}

/* Individual Card */
.fca-space-card {
    background-color: var(--fcom-primary-bg, #fff);
    /* border: 1px solid transparent; */ /* Removed - Border applied via inline style if color is set */
    border-radius: 8px; 
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease-in-out;
}

.fca-space-card:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Card Avatar/Image */
.fca-space-card-avatar {
    position: relative;
    width: 100%;
    padding-top: 50%; /* Aspect ratio for image area (adjust as needed) */
    background-color: var(--fcom-secondary-bg, #f0f0f0); /* Placeholder background */
}

.fca-space-card-avatar a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.fca-space-card-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, might crop */
}

/* Card Info Section */
.fca-space-card-info {
    padding: 15px; /* Consistent padding */
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

/* Card Name/Title */
.fca-space-card-name {
    margin-bottom: 8px;
}

.fca-space-card-name a {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--fcom-primary-text, #333);
    text-decoration: none;
}

.fca-space-card-name a:hover {
    text-decoration: underline;
}

/* Admin Tag (Example - needs logic in PHP) */
.fca-space-card-name .el-tag {
    margin-left: 8px;
    font-size: 0.8em;
    vertical-align: middle;
}

/* Card Details (Privacy, Members) */
.fca-space-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
    color: var(--fcom-secondary-text, #666);
    font-size: 0.9em;
}

.fca-space-card-detail-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.fca-space-card-detail-item .el-icon {
    display: inline-flex; /* Helps align SVG */
    width: 1em; /* Match font size */
    height: 1em;
    line-height: 1;
}
.fca-space-card-detail-item .el-icon svg {
     width: 100%;
     height: 100%;
}

/* Card Description */
.fca-space-card-description {
    font-size: 0.95em;
    color: var(--fcom-secondary-text, #555);
    /* Remove bottom margin - handled by parent padding */
    margin: 0;
    line-height: 1.5;
    flex-grow: 1; /* Push action button down */
}

/* Card Action Button */
.fca-space-card-action {
    margin-top: auto; /* Push to bottom */
    padding: 15px; /* Match info padding for consistency at bottom */
    padding-top: 10px; /* Slightly less top padding if desired */
}

.fca-space-card-button { 
    /* Updated styles from user */
    display: inline-block; /* Keep display for anchor tag */
    width: 100%;
    padding: 8px;
    font-size: 0.9em;
    font-weight: 500;
    text-align: center;
    border-radius: 8px; /* Updated */
    cursor: pointer;
    text-decoration: none;
    border: none; /* Updated */
    background: var(--fcom-active-bg, #f0f2f5); /* Updated */
    color: var(--fcom-menu-text-active, var(--fcom-menu-text, #545861)); /* Updated */
    transition: filter 0.2s ease; /* Added transition for hover */
}

.fca-space-card-button:hover {
    filter: brightness(95%); 
}

/* --- Old List Styles Removed --- */

/* --- Old List Styles (Remove or Comment Out) ---
.fca-spaces-list {
    list-style: none;
    padding: 0;
    margin: 0; 
}

.fca-space-item {
    padding: 1em 0;
    border-bottom: 1px solid var(--fcom-secondary-border, #eee);
}

.fca-space-item:last-child {
    border-bottom: none;
}

.fca-space-title {
    margin: 0 0 0.25em 0;
    font-size: 1.1em; 
}

.fca-space-title a {
    text-decoration: none;
    color: var(--fcom-text-link, #216FDB);
}

.fca-space-title a:hover {
    text-decoration: underline;
}

.fca-space-description {
    font-size: 0.95em;
    color: var(--fcom-secondary-text, #555);
    margin: 0;
}
--- End Old Styles --- */ 

/* --- Responsive Stacking --- */
@media (max-width: 767px) {
    /* Card-specific mobile styles */
    .fca-space-card .fca-space-card-info,
    .fca-space-card .fca-space-card-action {
        padding: 12px; /* Slightly reduce padding inside cards */
    }
    
    /* Any other mobile-specific styles can go here */
    .fca-space-card-name a {
        font-size: 1em; /* Slightly smaller title on mobile */
    }
}