/*
 * GameRStar News — "Upcoming Releases" section
 * Layout/spacing mirrors gsn-tiktok.css and gsn-news-grid.css. Cards reuse
 * the shared .gsn-card look (gsn-card.css); this file only adds the grid
 * wrapper and the gold release-date corner badge on the cover image.
 */

.gsn-upcoming {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp( 40px, 6vw, 88px ) clamp( 20px, 6vw, 80px );
}

.gsn-upcoming__title {
	margin: 0 0 var( --space-4 );
	font-family: var( --font-display );
	font-size: var( --font-size-h2 );
	font-weight: 800;
	color: var( --gsn-white );
}

.gsn-upcoming__grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --grid-gap );
}

.gsn-upcoming__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var( --color-bg-elevated );
}

.gsn-upcoming__media .gsn-card__image {
	width: 100%;
	height: 100%;
}

/* Rectangular badge (rather than a rotated ribbon) so the release date
 * always stays fully legible and never gets clipped by the card's rounded
 * corners / overflow: hidden media wrapper. */
.gsn-upcoming__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background-color: var( --color-accent );
	color: #fff;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.45 );
	font-size: var( --font-size-caption );
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.35em 0.8em;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.35 );
}

@media ( max-width: 1024px ) {
	.gsn-upcoming__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 560px ) {
	.gsn-upcoming__grid {
		grid-template-columns: 1fr;
	}
}