/* --- Phoca Gallery Grid Fix (Aligned & Clean) --- */

/* 1. Grid Layout Container */
.pg-categories-items-box,
.pg-category-items-box {
    display: grid !important;
    /* This creates responsive columns approx 240px wide */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    padding: 20px;
    justify-content: center;
}

/* 2. The Card (Box) Styling */
.pg-item-box,
.pg-category-box {
    width: 100% !important;
    height: 100%; /* Ensures all cards in a row match height */
    display: flex;
    flex-direction: column;
    /* Card Look */
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    padding: 0 !important; /* Remove padding so image touches edges */
    margin: 0 !important;
    overflow: hidden; /* Keeps image inside rounded corners */
}

/* 3. STRICT Image Sizing (The Alignment Fix) */
.pg-category-box-image,
.pg-item-box-image {
    width: 100% !important;
    height: 180px !important; /* SET HEIGHT: Adjust this number if you want taller images */
    margin: 0 !important;
    display: block;
}

.pg-category-box-image img,
.pg-item-box-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* Key magic: Crops image to fit the box perfectly */
    object-position: center top; /* Focuses on the top/center of photo */
    border-radius: 8px 8px 0 0; /* Rounded top corners only */
    box-shadow: none !important; /* Remove old shadows */
}

/* 4. Text Alignment and Styling */
.pg-item-box-title,
.pg-category-box-title {
    margin: 0 !important;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    flex-grow: 1; /* Pushes text to fill space nicely */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 5. REMOVE the Yellow Folder Icons */
.ph-si-category-medium,
.ph-si-folder, 
.pg-category-box-image svg {
    display: none !important;
}

/* --- THE NUCLEAR FOLDER FIX --- */

/* 1. Target by the specific Class Name you found in the original file */
svg.ph-si-category-medium,
svg.ph-si-category {
    display: none !important;
}

/* 2. Target by the internal Link ID (Attribute Selector) */
/* This finds any SVG that is trying to load the "category" icon */
svg:has(use[href*="#ph-si-category"]),
svg:has(use[xlink\:href*="#ph-si-category"]) {
    display: none !important;
}

/* 3. Target by Structure (The "Blind" Shot) */
/* This hides ANY svg immediately inside the image box */
/* Since your photos are <img> tags, this will only kill the icons */
.pg-category-box-image svg,
.pg-item-box-image svg {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 4. Target the specific "Folder" color (The "Color" Shot) */
/* In your original CSS, this icon was yellow (#F9C74F). We hide anything that color. */
.ph-si-category-medium {
    display: none !important;
    opacity: 0 !important;
}

/* --- Fix Number Spacing & Style --- */

/* 1. Target the number count specifically */
.pg-category-box-count,
.pg-item-box-count {
    /* Push the number away from the text */
    margin-left: 10px !important; 
    
    /* Optional: Make it look distinct (lighter/smaller) */
    font-weight: normal;
    color: #666; 
    font-size: 0.9em;
}

/* 2. Ensure the link container handles the spacing correctly */
.pg-category-box-title a,
.pg-item-box-title a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Mobile Layout Fix (2 Columns) --- */
@media only screen and (max-width: 600px) {
    .pg-categories-items-box,
    .pg-category-items-box {
        /* Force exactly 2 columns on mobile */
        grid-template-columns: repeat(2, 1fr) !important;
        
        /* Reduce gap to save space on small screens */
        gap: 10px !important;
        padding: 10px !important;
    }

    /* Make images shorter on mobile so they don't look like tall towers */
    .pg-category-box-image, 
    .pg-item-box-image {
        height: 120px !important; 
    }
    
    /* Make text slightly smaller to fit */
    .pg-category-box-title, 
    .pg-item-box-title {
        font-size: 0.9rem;
        padding: 10px !important;
    }
}