/*
 * Related games box in the right sidebar of a game page (2026-09-13).
 *
 * New path on purpose: LiteSpeed derives a minified sheet's hashed URL from
 * the source *path* and serves it max-age=1yr, so an edit inside frontend.css
 * can take a year to reach a returning visitor. Same reasoning as tokens.css,
 * play-cover.css and embed-fit-20260824.css.
 *
 * The box reuses .rg-game-card from frontend.css; only the grid density
 * changes. The sidebar is 400px wide, so three covers across (~118px each)
 * keep the 3:4 card readable, and the box sits beside the player instead of
 * pushing the controls below the fold. No `+`/`-` inside calc(): the LSCache
 * minifier strips the spaces and voids the declaration.
 */
.ra-related-box .rg-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* frontend.css gives every .rg-header-actions `contain: strict` with no
   width, which collapses an inline element to 0px - the label is in the
   DOM but invisible. Lift that here so the console link actually shows. */
.ra-related-box .ra-related-more {
    color: #ffff00;
    text-decoration: none;
    font-size: 12px !important;
    white-space: nowrap;
    contain: none !important;
    height: auto !important;
    line-height: 1.4 !important;
    overflow: visible !important;
}

.ra-related-box .ra-related-more:hover {
    text-decoration: underline;
}

.ra-single-sidebar-col .ra-related-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* The card ships a 140px-wide cover; at 118px the platform badge and the
   year/console meta line fight for room, so trim them a little. */
.ra-related-grid .rg-card-platform-badge {
    font-size: 9px;
    padding: 1px 4px;
}

.ra-related-grid .rg-card-title {
    font-size: 11px;
}

.ra-related-grid .rg-card-meta-line {
    font-size: 10px;
}

/* Below 1081px the sidebar stacks under the main column at full width; four
   across fits a tablet, three a phone (the grid's own 600px rule would give
   two, which makes each cover a 180px poster). */
@media (max-width: 1080px) {
    .ra-single-sidebar-col .ra-related-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 600px) {
    .ra-single-sidebar-col .ra-related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}