/* =========================================
   Portfolio Cards (Animation & Photos)
========================================= */

#cardList {
    display: grid;
    /* Automatically fits as many columns side-by-side as possible */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px; /* Space between the cards */
    max-width: 1200px; /* Stops the whole grid from getting too wide on large desktop monitors */
    margin: 0 auto; /* Centers the grid on the page */
}

/* Constrain the individual cards */
.cards {
    width: 100%;
    max-width: 450px; /* Prevents an individual card from getting overly massive on desktop */
    justify-self: center; /* Keeps the card centered within its column */
}

/* Make the whole card link act as a block with no underline */
.card-link {
    display: block;
    text-decoration: none;
    color: #333333;
}

/* Force the image wrapper to a perfect 16:9 shape */
.image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* Creates the 16x9 rectangle */
    overflow: hidden; /* Keeps the image inside the rounded corners */
    border-radius: 8px; /* Optional: rounds the corners of the thumbnail */
    background-color: #000000; /* Shows black while image loads */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Adds a subtle drop shadow */
}

/* Make the image completely fill the 16:9 wrapper */
.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image doesn't stretch or distort */
    display: block;
    transition: transform 0.3s ease; /* Prepares a smooth animation */
}

/* Style the title underneath */
.card-title {
    text-align: center;
    font-family: 'Inter var', sans-serif;
    font-size: 1.25rem;
    margin-top: 15px; /* Pushes text down away from the image */
    margin-bottom: 30px; /* Adds space before the next row starts */
    transition: color 0.2s ease;
}

/* Hover Effects! */
/* 1. Slowly zoom the image in when you hover over the card */
.cards:hover .image-wrapper img {
    transform: scale(1.05);
}

/* 2. Change the title text color when you hover over the card */
.cards:hover .card-title {
    color: rgb(62, 56, 45); /* Matches your site's dark accent color */
}