/**
 * Custom Project Grid Element Styling
 */

/* Grid Layout using CSS Grid */
.custom-project-grid-wrapper {
    display: grid;
    /* Use CSS variable set in PHP for column control */
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: 30px; /* Spacing between projects */
}

/* Individual Card Styling */
.project-card {
    font-family: "Barlow Condensed", sans-serif;
    background-color: var(--card-bg);
    border-radius: 8px;
    overflow: hidden; /* Ensures content stays within rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Card's overall subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Use flexbox for vertical layout */
    flex-direction: column; /* Stack image and title vertically */
}
.project-card:hover {
    transform: translateY(-5px); /* Lift on hover */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.project-media {
    flex-shrink: 0; /* Prevents image from shrinking */
    padding: 10px 10px 0; /* Padding around the image, top/left/right, no bottom */
    position: relative; /* For potential overlay elements later if needed */
    box-sizing: border-box; /* Include padding in element's total width/height */
}

.project-media img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    display: block;
    object-fit: cover;
    border-radius: 4px; /* Slightly rounded image corners */
    /* NEW: Image shadow */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 
}

/* Title Styling */
.project-title-area {
    /* NEW: Padding around the title text area */
    padding: 15px; 
    text-align: center;
    /* NEW: Flex-grow to push title to bottom if cards have different image heights */
    flex-grow: 1; 
    display: flex; /* Use flexbox to easily center content */
    align-items: center; /* Vertically center */
    justify-content: center; /* Horizontally center */
}
.project-title {
    color: var(--title-color);
    font-size: var(--title-size);
    margin: 0;
    line-height: 1.4;
    text-decoration: none;
    display: block; /* Ensure the anchor takes up space if title is linked */
}

/* Fallback/Placeholder for no image */
.no-image-placeholder {
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio placeholder */
    background-color: #eee;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.9em;
    text-align: center;
}
.no-image-placeholder::before {
    content: "No Image Available";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* Responsive Adjustments (Example) */
@media (max-width: 768px) {
    .custom-project-grid-wrapper {
        grid-template-columns: repeat(2, 1fr); 
    }
}
@media (max-width: 480px) {
    .custom-project-grid-wrapper {
        grid-template-columns: 1fr;
    }
}