/* ========================== */
/* Styles for My Games Page   */
/* ========================== */

/* Styles added here will apply ONLY when myGames.html is loaded */
/* They can override styles from main.css if needed */

.games-list
{
    /* Styles for the container of all game entries */
    margin-top: 2rem;
}

/* Style individual game entries */
.game-entry
{
    /* Basic card styling */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Light border */
    padding: 1.5rem;
    margin-bottom: 2rem;
    background-color: rgba(255, 255, 255, 0.2); /* Slight white background */
    border-radius: 8px; /* Rounded corners */

    /* --- Flexbox Layout --- */
    display: flex;          /* Arrange children (thumbnail, details) horizontally */
    align-items: flex-start; /* Align items to the top vertically */
    gap: 1.5rem;            /* Creates space between thumbnail and details */
}

/* Style the thumbnail container */
.game-thumbnail
{
    /* Removed margin-bottom and text-align from previous version */
    flex-basis: 315px; /* Set the base width to match the image width */
    flex-shrink: 0;    /* Prevent the thumbnail container from shrinking */
}

/* Style the actual image inside the thumbnail container */
.game-thumbnail img
{
    display: block; /* Prevents extra space sometimes added below inline images */
    max-width: 100%; /* Ensure image doesn't overflow its container */
    height: auto;    /* Maintain aspect ratio, overrides height attribute if container is narrower */
    border-radius: 4px; /* Slightly rounded corners for the image */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Optional subtle border for images */
}

/* Style the text content container */
.game-details
{
    flex: 1; /* Allow this container to grow and fill the remaining horizontal space */
}

/* Adjust heading margin within the details section */
.game-details h3
{
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 0.5rem; /* Reduce space below heading */
    color: var(--linkColor); /* Use link color variable from main.css */
}

/* Add more specific styles if needed */


/* --- Responsive Adjustments --- */
/* Styles applied when screen width is 768px or less */
@media (max-width: 768px)
{
    .game-entry
    {
        flex-direction: column; /* Stack image and text vertically */
        align-items: center; /* Center items horizontally when stacked */
    }

    .game-thumbnail
    {
        flex-basis: auto; /* Reset flex-basis for stacked layout */
        width: 80%;       /* Allow thumbnail container to take relative width */
        max-width: 315px; /* But don't let it exceed the original image width */
        margin-bottom: 1rem; /* Add space below image when stacked */
    }

     .game-details
     {
        width: 100%; /* Allow details container to take full width */
        text-align: center; /* Center the heading and link paragraph */
    }

     .game-details p
     {
         text-align: left; /* Keep the description paragraph left-aligned for readability */
     }
}