/* All Categories Page - Simplified Styles */

#all-categories .section-header {
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    text-align: center;
    margin-bottom: 40px;
}
#categoriesView {
    visibility: hidden; /* hidden initially to prevent flashes */
}

.categories-grid-wrapper {
    max-width: 1200px; /* Constrain the grid width */
    margin: 0 auto; /* Center the wrapper */
    padding: 0 20px; /* Add some padding */
}

.category-grid-full {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Exactly 4 columns */
    gap: 20px;
}

.category-card-full {
    background-color: var(--new-card-bg);
    border: 1px solid var(--new-border);
    border-radius: 8px;
    padding: 0; /* Remove padding to allow image to fill the top */
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Stretch items to fill width */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    overflow: hidden; /* Hide anything that spills out of the border-radius */
}

.category-image {
    font-family: "lato";
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    background-size: cover;
    background-position: center;
    padding: 0 10px; /* some horizontal padding for long text */
    text-align: center;

    /* Responsive font size */
    font-size: clamp(24px, 10vw, 50px);
    /* Explanation: min 24px, max 48px, scales with viewport */
    line-height: 1.2;
    word-break: break-word; /* break long words if needed */
}

.category-card-full .category-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--new-text-header);
    margin: 15px 10px 5px 10px; /* Add margin for spacing */
}

.category-card-full .api-count {
    font-size: 0.9rem;
    color: var(--new-text-sub);
    margin-bottom: 15px; /* Add margin for spacing */
}





/* Responsive adjustments */
@media (max-width: 992px) {
    .category-grid-full {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 576px) {
    .category-grid-full {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
}