/* Games Page Specific Styling */

.games-title {
    display: block;
    margin: 0 auto;
    max-width: 40%;
    max-height: 500px; /* adjust to taste */
    height: auto;
}

.games-list {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.game {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: 1em;
}

.game-image a {
    display: block; /* ensures clickable area matches image */
}

.game-image img {
    border: 3px solid #FF6600;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.game-description {
    text-align: justify;
}

.game-description p:last-child {
    text-align: right;
    margin-top: 1em;
}

.divider {
    width: 100%;
    height: 15px; /* Adjust height as needed */
    background-image: url('../images/neon-divider2.png');
    background-repeat: repeat-x;
    background-position: center;
    background-size: contain;
    margin: 15px 0;
}

/* ===== Mobile layout: stack image above description ===== */
@media (max-width: 768px) {
    .games-title {
        max-width: 70%;   /* shrink banner a bit on phones */
    }

    .games-list {
        gap: 1.25em;      /* slightly tighter vertical spacing */
    }

    .game {
        grid-template-columns: 1fr;    /* single column */
        grid-template-areas:
          "img"
          "desc";
        gap: 1em;
    }

    .game-image { grid-area: img; }
    .game-description { grid-area: desc; }

    .game-image img {
        max-width: 75%;   /* scale logos nicely on phones */
        margin: 0 auto;
    }

    /* Ratings line left-align on mobile for easier reading */
    .game-description p:last-child {
        text-align: left;
        margin-top: 0.75em;
    }

    /* Optional: tighten list spacing for Fortnite section on mobile */
    .game-description ul {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .divider {
        margin: 10px 0;
    }
}

/* Extra-small phones: a touch more scaling */
@media (max-width: 480px) {
    .game-image img { max-width: 85%; }
    .game { gap: 0.75em; }
}