/**
 * Business Directory Grid Styles
 *
 * @package USCAA
 */

/* Basic container spacing */
.business-directory-grid {
    margin: 2.4rem 0 4.8rem;
    
    /* Grid structure - standard grid layout */
    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2.4rem;
        margin: 4.8rem 0;
    }
    
    /* Grid item structure */
    .grid-item {
        break-inside: avoid;
        box-shadow: var(--card-shadow);
        padding: 2.4rem;
        background-color: #fff;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        
        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        /* Image structure */
        .grid-image {
            aspect-ratio: 4/3;
            padding: 1.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            
            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
                max-width: 250px;
                margin: 0 auto;
            }
        }
        
        /* No logo placeholder */
        .no-logo {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-light-gray);
            color: var(--color-dark-gray);
            font-weight: bold;
            text-align: center;
            padding: 1rem;
        }
        
        /* Business title styling */
        .business-title {
            margin: 1.5rem 0 0.5rem;
            font-size: 1.8rem;
            color: var(--color-black);
            text-align: center;
            font-weight: 600;
            line-height: 1.3;
        }
        
        /* Business categories styling */
        .business-categories {
            font-size: 1.4rem;
            color: var(--color-dark-gray);
            text-align: center;
            margin-bottom: 1rem;
            font-style: italic;
        }
        
        /* Text content container */
        .item-content {
            margin: 1rem 0 0 0;
            text-align: center;
            
            /* Read More link styling */
            .read-more {
                display: inline-block;
                color: var(--color-garnet);
                font-weight: 600;
                text-decoration: none;
                transition: color 0.3s ease;
                
                &:hover {
                    color: var(--color-black);
                }
            }
        }
    }
    
    /* No results message styling */
    .no-results-message {
        width: 100%;
        padding: 2rem;
        text-align: left;
        font-size: 1.2rem;
        font-family: var(--font-primary, sans-serif);
        color: var(--color-black, #333);
        background-color: var(--color-light-gray, #f5f5f5);
        border-left: 4px solid var(--color-garnet, #73000a);
        border-radius: 0 4px 4px 0;
        margin: 2rem 0;
        
        p {
            margin-left: 2rem;
            margin-bottom: 0;
        }
    }
}

/* Category filter styling */
.business-directory-filter {
    margin: 3rem 0 4rem;
    
    .filter-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.5rem;
    }
    
    .filter-label {
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--color-black);
        margin-right: 0.5rem;
    }
    
    .filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .filter-btn {
        font-family: var(--font-primary, sans-serif);
        font-size: 1.4rem;
        padding: 0.8rem 1.6rem;
        background-color: var(--color-light-gray, #f5f5f5);
        border: 1px solid var(--Neutral-300, #dee2e6);
        border-radius: 100px;
        color: var(--color-black);
        cursor: pointer;
        transition: all 0.2s ease;
        
        &:hover {
            background-color: var(--Neutral-300, #dee2e6);
        }
        
        &.active {
            background-color: var(--color-garnet, #73000a);
            color: var(--color-white);
            border-color: var(--color-garnet, #73000a);
        }
    }
}

/* Add a subtle animation for the filtering */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.grid-item-link {
    animation: fadeIn 0.3s ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .business-directory-grid {
        .grid-container {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    .business-directory-filter {
        .filter-container {
            flex-direction: column;
            align-items: flex-start;
        }
    }
}

@media (max-width: 767px) {
    .business-directory-grid {
        .grid-container {
            grid-template-columns: 1fr;
        }
    }
    
    .business-directory-filter {
        .filter-buttons {
            width: 100%;
        }
    }
}