/*
 * GameRStar News — Homepage Hero Carousel
 * Scoped entirely to .gsn-carousel / .gsn-front-page so no other template is affected.
 */

.site-main.gsn-front-page {
	--gsn-navy-deep: var( --color-bg-primary );
	--gsn-navy: var( --color-bg-elevated );
	--gsn-gold: var( --color-accent );
	--gsn-gold-soft: var( --color-accent-hover );
	--gsn-white: var( --color-text-primary );
	--gsn-muted: var( --color-text-secondary );
	--gsn-panel: var( --color-bg-primary );

	/*
	 * !important needed: the Hello Elementor base stylesheet's
	 * `body:not([class*=elementor-page-]) .site-main` rule has higher
	 * specificity (0,2,1) than this two-class selector (0,2,0), so it wins
	 * the max-width property at every breakpoint without !important here.
	 */
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0;
	overflow-x: hidden;
}

.gsn-carousel {
	position: relative;
	width: 100%;
	/* 650px at a 1920px-wide viewport (the desktop reference), scaling down
	 * proportionally on narrower screens; capped at 650px so it never grows
	 * taller on ultra-wide monitors. Floor raised from 420px to 500px to give
	 * the now 4-line-clamped title (see .gsn-carousel__title a) enough room
	 * at common laptop widths (~1280-1440px) without clipping. */
	height: clamp( 500px, calc( 100vw * 650 / 1920 ), 650px );
	/* Only the active slide should ever be visible: neighbors are full-width
	 * flex items sitting entirely outside this box once translated, and this
	 * clips them so nothing peeks past the left/right edges during the
	 * transform transition. */
	overflow: hidden;
	background-color: var( --gsn-panel );
}

.gsn-carousel__track {
	display: flex;
	height: 100%;
	transition: transform 0.6s ease-in-out;
	will-change: transform;
}

.gsn-carousel__slide {
	position: relative;
	display: flex;
	flex: 0 0 100%;
	max-width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0.4;
	transition: opacity 0.6s ease-in-out;
	/* Lets the browser handle vertical page scroll natively while
	 * gsn-carousel.js owns horizontal drag/swipe via Pointer Events. */
	touch-action: pan-y;
}

.gsn-carousel__slide.is-active {
	opacity: 1;
}

/* Wraps media + content in a single link (see front-page.php) so the whole
 * card opens the article without nesting <a> elements. Mirrors the flex
 * layout that used to live directly on .gsn-carousel__slide. */
.gsn-carousel__slide-link {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.gsn-carousel__slide-link:focus-visible {
	outline: 2px solid var( --gsn-gold );
	outline-offset: -2px;
}

.gsn-carousel__media {
	flex: 0 0 58%;
	max-width: 58%;
	height: 100%;
	position: relative;
	background-color: var( --gsn-navy-deep );
}

.gsn-carousel__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Blends the image's right edge into the page background instead of ending
 * in a hard straight line where it meets the content panel, and does the
 * same on the bottom edge where it meets the "Coming Next" section below. */
.gsn-carousel__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient( to right, transparent 55%, var( --gsn-panel ) 100% ),
		linear-gradient( to bottom, transparent 80%, var( --gsn-panel ) 100% );
	pointer-events: none;
}

.gsn-carousel__social {
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding-block: 24px;
}

.gsn-carousel__social::before {
	content: "";
	position: absolute;
	top: -32px;
	left: 50%;
	transform: translateX( -50% );
	width: 1px;
	height: calc( 100% + 64px );
	background: linear-gradient( to bottom, transparent, rgba( 255, 255, 255, 0.3 ), transparent );
	z-index: -1;
}

.gsn-carousel__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --gsn-white ) !important;
	opacity: 0.7;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.gsn-carousel__social-link:hover,
.gsn-carousel__social-link:focus-visible {
	color: var( --gsn-gold ) !important;
	opacity: 1;
}

.gsn-carousel__social-link svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Manual slide picker. Placed bottom-center (rather than the vertical edges)
 * so it never collides with the .gsn-carousel__social column, which already
 * owns the left-center hotspot. */
.gsn-carousel__dots {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX( -50% );
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
}

.gsn-carousel__dot {
	appearance: none;
	-webkit-appearance: none;
	width: 9px;
	height: 9px;
	padding: 0;
	background-color: rgba( 255, 255, 255, 0.3 );
	border: none;
	outline: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.gsn-carousel__dot:hover,
.gsn-carousel__dot:focus,
.gsn-carousel__dot:active {
	background-color: rgba( 255, 255, 255, 0.6 );
}

.gsn-carousel__dot:focus {
	outline: none;
}

.gsn-carousel__dot:focus-visible {
	outline: 2px solid var( --gsn-gold );
	outline-offset: 2px;
	background-color: rgba( 255, 255, 255, 0.6 );
}

.gsn-carousel__dot.is-active {
	background-color: var( --gsn-gold );
	transform: scale( 1.4 );
}

.gsn-carousel__content {
	flex: 0 0 42%;
	max-width: 42%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.9rem;
	padding: clamp( 24px, 4vw, 56px );
	background: linear-gradient( to right, transparent, var( --gsn-panel ) 40%, var( --gsn-panel ) 100% );
	color: var( --gsn-white );
}

.gsn-carousel__tag {
	display: inline-flex;
	align-self: flex-start;
	/* Overrides a sitewide `a { color: #FBD446 !important; }` rule already
	 * stored in the site's Additional CSS (Customizer), which can't be
	 * edited from here without touching the database. */
	color: #000 !important;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.4em 1em;
	border-radius: 4px;
}

.gsn-carousel__title {
	font-size: clamp( 1.75rem, 3vw, 2.75rem );
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0;
	/* Clamped to 4 lines: the hero has a fixed height (see .gsn-carousel), and
	 * this content block is vertically centered inside it, so an unbounded
	 * title on a long headline would grow past the available space and get
	 * clipped top and bottom by the carousel's `overflow: hidden`, taking the
	 * category tag and "Read More" button with it. 4 lines (up from 3) plus
	 * the wider 42% content column give this site's long, clickbait-style
	 * headlines enough room that only the small minority of extreme
	 * (100+ character) titles still truncate. */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #fff;
}

.gsn-carousel__slide-link:hover .gsn-carousel__title,
.gsn-carousel__slide-link:focus-visible .gsn-carousel__title {
	color: var( --gsn-gold );
}

.gsn-carousel__divider {
	display: block;
	width: 60px;
	height: 3px;
	border-radius: 2px;
}

/* Also clamped (2 lines): same overflow risk as .gsn-carousel__title above
 * if a long excerpt landed alongside a long title. */
.gsn-carousel__desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #c9c9c9;
	margin: 0;
}

.gsn-carousel__button {
	display: inline-flex;
	align-self: flex-start;
	background: var( --gsn-gold );
	color: #000 !important;
	font-weight: 700;
	text-decoration: none;
	padding: 12px 20px;
	border-radius: 4px;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.gsn-carousel__slide-link:hover .gsn-carousel__button,
.gsn-carousel__slide-link:focus-visible .gsn-carousel__button {
	background: var( --gsn-gold-soft );
	transform: translateY( -2px );
}

@media ( max-width: 900px ) {
	.gsn-carousel__social {
		display: none;
	}

	/* Hero presence on mobile (was height:auto driven by a small fixed image
	 * band, which read as a compact card). 56svh lands ~440px on a ~360x800
	 * viewport; `svh` (small viewport height) rather than `vh` so real mobile
	 * browsers with a collapsing address bar don't shift this. */
	.gsn-carousel {
		height: clamp( 420px, 56svh, 480px );
	}

	.gsn-carousel__slide-link {
		flex-direction: column;
	}

	.gsn-carousel__media,
	.gsn-carousel__content {
		flex: 0 0 auto;
		max-width: 100%;
		width: 100%;
	}

	/* Image fills the entire slide height now that .gsn-carousel itself
	 * carries the explicit height above; .gsn-carousel__content is
	 * absolutely positioned over it (see below), so there's no separate
	 * text block competing for space and no empty area under the image. */
	.gsn-carousel__media {
		height: 100%;
	}

	/* Darkens only the lower portion of the image so the overlaid text stays
	 * readable, while the top of the image (no text over it) stays clear.
	 * Replaces the desktop edge-blend gradient, which isn't needed here since
	 * there's no side-by-side content panel to blend into on mobile. */
	.gsn-carousel__media::after {
		background: linear-gradient(
			to bottom,
			rgba( 0, 0, 0, 0 ) 0%,
			rgba( 0, 0, 0, 0.15 ) 45%,
			rgba( 0, 0, 0, 0.88 ) 100%
		);
	}

	/* Overlaid on the image's bottom edge instead of sitting in a separate
	 * block below it. */
	.gsn-carousel__content {
		position: absolute;
		/* Lateral 24-32px, bottom 42-64px: both scale with viewport width so
		 * the content keeps proportional breathing room from the slide's
		 * edges. */
		inset: auto 0 0 0;
		height: auto;
		background: none;
		gap: 0.6rem;
		padding: 20px clamp( 24px, 6vw, 32px ) clamp( 42px, 10vw, 64px );
		z-index: 2;
	}

	.gsn-carousel__tag {
		font-size: clamp( 14px, 3.6vw, 16px );
		padding: 0.4em 0.9em;
	}

	.gsn-carousel__title {
		font-size: clamp( 28px, 7vw, 42px );
		line-height: 1.15;
		-webkit-line-clamp: 2;
	}

	.gsn-carousel__divider {
		display: none;
	}

	.gsn-carousel__desc {
		font-size: clamp( 16px, 4vw, 19px );
		line-height: 1.45;
		-webkit-line-clamp: 2;
	}

	.gsn-carousel__button {
		height: clamp( 52px, 13vw, 60px );
		align-items: center;
		padding: 0 24px;
		font-size: clamp( 15px, 4vw, 16px );
	}

	/* .gsn-carousel__content is absolutely positioned over the bottom of the
	 * slide with 42-64px of bottom padding to make room for the "Read More"
	 * button (see .gsn-carousel__content above), so bottom:16px lands the
	 * dots in that clear strip beneath the button without overlapping it,
	 * the title, or the description. */
	.gsn-carousel__dots {
		bottom: 16px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.gsn-carousel__track,
	.gsn-carousel__slide,
	.gsn-carousel__button {
		transition: none;
	}
}