/*
 * GameRStar News — Category archive page
 * Header (icon + title + subtitle), 8-post featured image-overlay grid,
 * and a "Latest News" list + "Trending" sidebar body. Self-contained
 * (depends only on gsn-tokens) except .gsn-trending, whose existing
 * styles (assets/css/gsn-trending.css) are reused as-is for the sidebar.
 */

.gsn-category-page {
	overflow-x: hidden;
}

/* Header ------------------------------------------------------------- */

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

.gsn-cat-header__title {
	display: flex;
	align-items: center;
	gap: var( --space-2 );
	margin: 0;
	font-family: var( --font-display );
	font-size: var( --font-size-h1 );
	font-weight: 800;
	line-height: var( --line-height-heading );
	color: var( --color-text-primary );
}

.gsn-cat-header__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: clamp( 32px, 4vw, 44px );
	height: clamp( 32px, 4vw, 44px );
	color: var( --color-accent );
}

.gsn-cat-header__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gsn-cat-header__subtitle {
	margin: var( --space-2 ) 0 0;
	max-width: 640px;
	font-size: var( --font-size-body );
	line-height: var( --line-height-body );
	color: var( --color-text-secondary );
}

/* Featured grid -------------------------------------------------------- */

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

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

.gsn-cat-featured__item {
	border-radius: var( --radius-card );
	overflow: hidden;
	box-shadow: var( --shadow-card );
	transition: box-shadow 0.2s ease-out;
}

.gsn-cat-featured__item:hover,
.gsn-cat-featured__item:focus-within {
	box-shadow: var( --shadow-card-hover );
}

.gsn-cat-featured__link {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background-color: var( --color-bg-elevated );
}

.gsn-cat-featured__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease-out;
}

.gsn-cat-featured__item:hover .gsn-cat-featured__image,
.gsn-cat-featured__item:focus-within .gsn-cat-featured__image {
	transform: scale( 1.04 );
}

.gsn-cat-featured__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.88 ) 0%, rgba( 0, 0, 0, 0.25 ) 55%, transparent 100% );
	pointer-events: none;
}

.gsn-cat-featured__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: var( --space-2 ) var( --space-2 ) var( --space-3 );
	font-family: var( --font-display );
	font-size: var( --font-size-h3 );
	font-weight: 800;
	line-height: 1.25;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

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

@media ( max-width: 640px ) {
	.gsn-cat-featured__grid {
		grid-template-columns: 1fr;
	}
}

/* Body: Latest News list + Trending sidebar ---------------------------- */

.gsn-cat-body {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp( 20px, 6vw, 80px ) clamp( 40px, 6vw, 88px );
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-items: start;
	gap: var( --grid-gap );
}

.gsn-cat-list__heading {
	margin: 0 0 var( --space-4 );
	font-family: var( --font-display );
	font-size: var( --font-size-h2 );
	font-weight: 800;
	color: var( --color-text-primary );
}

.gsn-cat-list__items {
	display: flex;
	flex-direction: column;
	gap: var( --space-3 );
}

.gsn-cat-list__item {
	display: flex;
	gap: var( --space-3 );
	background-color: var( --color-bg-secondary );
	border: 1px solid var( --color-border );
	border-radius: var( --radius-card );
	overflow: hidden;
	box-shadow: var( --shadow-card );
	transition: box-shadow 0.2s ease-out;
}

.gsn-cat-list__item:hover,
.gsn-cat-list__item:focus-within {
	box-shadow: var( --shadow-card-hover );
}

.gsn-cat-list__media {
	position: relative;
	flex: 0 0 240px;
	max-width: 240px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var( --color-bg-elevated );
}

.gsn-cat-list__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease-out;
}

.gsn-cat-list__item:hover .gsn-cat-list__image,
.gsn-cat-list__item:focus-within .gsn-cat-list__image {
	transform: scale( 1.03 );
}

.gsn-cat-list__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: var( --card-padding );
}

.gsn-cat-list__tag {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var( --letter-spacing-caps );
	color: #000 !important;
	text-decoration: none;
	padding: 0.35em 0.8em;
	border-radius: 4px;
}

.gsn-cat-list__title {
	margin: 0;
	font-family: var( --font-display );
	font-size: var( --font-size-h3 );
	font-weight: 800;
	line-height: 1.3;
}

.gsn-cat-list__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var( --color-text-primary ) !important;
	text-decoration: none;
	transition: color 0.2s ease;
}

.gsn-cat-list__title a:hover,
.gsn-cat-list__title a:focus-visible {
	color: var( --color-accent ) !important;
}

.gsn-cat-list__desc {
	margin: 0;
	font-size: var( --font-size-caption );
	line-height: 1.5;
	color: var( --color-text-secondary );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gsn-cat-list__meta {
	margin-top: auto;
	padding-top: 4px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var( --font-size-caption );
	color: var( --color-text-muted );
}

/* Trending sidebar: reuses .gsn-trending's own styling, just needs the
 * section padding/max-width reset since it's now a nested grid column
 * instead of a full-width sitewide section. */
.gsn-cat-trending.gsn-trending {
	max-width: none;
	margin: 0;
	padding: 0;
}

@media ( min-width: 1025px ) {
	.gsn-cat-trending {
		position: sticky;
		top: 96px;
	}
}

@media ( max-width: 1024px ) {
	.gsn-cat-body {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 640px ) {
	.gsn-cat-list__item {
		flex-direction: column;
	}

	.gsn-cat-list__media {
		flex-basis: auto;
		max-width: none;
		width: 100%;
	}
}

/* Load More -------------------------------------------------------------- */

.gsn-cat-load-more {
	display: flex;
	justify-content: center;
	margin-top: var( --space-4 );
}

.gsn-cat-load-more__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var( --color-accent );
	color: #000 !important;
	font-weight: 700;
	text-decoration: none;
	padding: 12px 32px;
	border: none;
	border-radius: var( --radius-button );
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}

.gsn-cat-load-more__button:hover,
.gsn-cat-load-more__button:focus-visible {
	background: var( --color-accent-hover );
	transform: translateY( -2px );
}

.gsn-cat-load-more__button.is-loading {
	opacity: 0.7;
	pointer-events: none;
	transform: none;
}

/* Infinite-scroll sentinel (JS-enhanced state, see gsn-category.js): the
 * gold call-to-action is replaced by a quiet status line that's empty while
 * idle and only shows text while a batch is actually loading. Kept at a
 * minimum height so the IntersectionObserver has a reliable target even
 * when its text is empty. */
.gsn-cat-load-more__button--auto {
	display: flex;
	width: 100%;
	min-height: 32px;
	justify-content: center;
	background: none;
	border-radius: 0;
	padding: 8px 0;
	color: var( --color-text-muted ) !important;
	font-weight: 600;
	cursor: default;
}

.gsn-cat-load-more__button--auto:hover,
.gsn-cat-load-more__button--auto:focus-visible {
	background: none;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.gsn-cat-featured__item,
	.gsn-cat-featured__image,
	.gsn-cat-list__item,
	.gsn-cat-list__image,
	.gsn-cat-list__title a,
	.gsn-cat-load-more__button {
		transition: none;
	}
}