/* Enquadra as margens transparentes da arte original sem editar seus pixels. */
img[src*="nossa-arena-logo-"] {
    aspect-ratio: 2.5;
    height: auto;
    object-fit: cover;
    object-position: center 45%;
}

.brand:has(img[src*="nossa-arena-logo-"]) {
    width: 114px;
    min-height: 78px;
    transform: none;
}

/* A single active game is 30% larger; multiple-game grids remain untouched. */
.games-grid > .game-card:only-child {
    grid-column: 1 / -1;
    justify-self: start;
    width: calc((100% - var(--shell-card-gap)) * 0.65);
    min-height: calc(clamp(192px, 41vw, 248px) * 1.3);
}

@media (min-width: 992px) {
    .games-grid > .game-card:only-child {
        width: calc((100% - var(--shell-card-gap) * 3) * 0.325);
        min-height: 0;
    }
}

/* Almost edge-to-edge on mobile, with room for the rounded corners. */
@media (max-width: 767px) {
    .content-stack > .hero-card {
        width: calc(100vw - 16px);
        min-width: 0;
        margin-inline: calc(50% - 50vw + 8px);
    }

    .content-stack > .hero-card .hero-banner {
        border: 0;
        border-radius: 18px;
    }

    /* Another 30% over the previously approved 130% mobile size: 169%. */
    .games-grid > .game-card:only-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - var(--shell-card-gap)) * 0.845);
        min-height: calc(clamp(192px, 41vw, 248px) * 1.69);
    }
}

@media (max-width: 380px) {
    .brand:has(img[src*="nossa-arena-logo-"]) {
        width: 100px;
    }
}

/* Bridge the 520px phone shell and the 992px desktop layout. Header,
   banner and sections must use the same available width on tablets and
   resized windows; the mobile 100vw breakout must not override that shell. */
@media (min-width: 521px) and (max-width: 991.98px) {
    :root {
        --shell-content-max: 992px;
        --shell-gutter: clamp(13px, 2vw, 20px);
    }

    .content-stack > .hero-card {
        width: 100%;
        min-width: 0;
        margin-inline: 0;
    }

    /* A single game stays centered and never expands into a giant poster.
       Multi-card grids and the approved phone/desktop sizes are unchanged. */
    .games-grid > .game-card:only-child {
        justify-self: center;
        max-width: 460px;
    }
}