/* --- CSS for Improved Permanent Title Category Cards --- */

/* 1. Main Grid Structure (Retained 4-Column Layout) */
.main-category-grid {
    display: flex;
    flex-wrap: wrap; 
    gap: 15px; /* Spacing between cards */
    margin: 30px 0;
}

/* 2. Style each category box and set its width to 4-column */
.category-grid-item {
    /* 4-column layout */
    flex: 0 0 calc(25% - 11.25px); 
    max-width: calc(25% - 11.25px);
    
    /* Clean Card Styling (Subtle shadow and border) */
    border: 1px solid #f5f5f5; /* Very light border */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Initial subtle shadow */
    overflow: hidden; 
    background: #fff;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    height: auto; /* Allow height to be determined by content */
}

.category-grid-item:hover {
    /* Lift and stronger shadow on hover */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
    border-color: #ddd;
}

/* 3. Style the Link and Image Container */
.category-link {
    display: block;
    text-decoration: none;
    color: #333;
    padding-bottom: 5px; /* Spacing below the title */
}

/* 4. Fix Image Scaling and Height */
.card-image {
    width: 100%;
    /* Set a reasonable maximum height for the image area */
    max-height: 180px; 
    object-fit: contain; /* CRITICAL: Ensures the image fits without cropping */
    display: block;
    padding: 15px; /* Spacing around the image */
}

/* 5. Title Positioning (Permanent Display BELOW the Image) */
.card-title-overlay {
    /* REMOVED: position: absolute; and bottom: 0; */
    position: static; 
    width: 100%;
    padding: 10px 15px 15px; /* Padding for bottom spacing */
    background: transparent; /* No background needed */
    text-align: center;
    font-size: 0.95em; /* Slightly smaller for a cleaner look */
    font-weight: 600; /* Semi-bold */
    color: #333; /* Dark text */
    /* Ensure no line break issues */
    line-height: 1.3; 
    min-height: 40px; /* Ensures minimum space for text */
    border-top: 1px solid #f0f0f0; /* Thin line separator */
}