/*
 * GameRStar News — TikTok Channel section
 * Layout/spacing mirrors gsn-news-grid.css and gsn-trending.css so this
 * section reads as part of the same page rhythm. Video links are edited in
 * gsn_tiktok_video_urls() in functions.php.
 *
 * TikTok's oEmbed `html` field (the official player widget) always ships
 * its own chrome — a light "Watch now / @handle" bar baked into the iframe
 * that can't be themed or stripped via any documented parameter, so it
 * looks like a pasted screenshot on a dark site. Instead, gsn-tiktok.js
 * fetches the same oEmbed response and uses only its `thumbnail_url` as a
 * static cover image inside a card that matches the rest of the site
 * (.gsn-card look: --color-bg-secondary, radius-card, shadow-card), with a
 * play icon overlay. Clicking it opens the real video on TikTok.
 */

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

.gsn-tiktok__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 );
}

/* Columns are sized to the item's own 200px width (not 1fr) and the row is
 * centered as a group: with 1fr columns, each 200px item was centered
 * inside a much wider column, so the *visible* gap between cards was the
 * grid gap plus the leftover column whitespace on both sides — far more
 * than the 18px gap value implied. Fixed-width columns make the gap value
 * the actual visual gap. */
.gsn-tiktok__grid {
	display: grid;
	grid-template-columns: repeat( 4, 200px );
	justify-content: center;
	align-items: start;
	gap: 18px;
}

/* Fixed 9:16 (TikTok's native portrait ratio) at a compact width, so all 4
 * cards render at one consistent, proportional size regardless of the
 * source video's actual thumbnail dimensions. */
.gsn-tiktok__item {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	display: flex;
	align-items: center;
	justify-content: center;
	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-tiktok__item:hover,
.gsn-tiktok__item:focus-within {
	box-shadow: var( --shadow-card-hover );
}

.gsn-tiktok__link {
	position: absolute;
	inset: 0;
	display: block;
}

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

.gsn-tiktok__item:hover .gsn-tiktok__thumb,
.gsn-tiktok__item:focus-within .gsn-tiktok__thumb {
	transform: scale( 1.04 );
}

.gsn-tiktok__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: rgba( var( --color-bg-primary-rgb ), 0.55 );
	border: 1.5px solid rgba( 255, 255, 255, 0.85 );
	border-radius: 50%;
	color: var( --color-text-primary );
	pointer-events: none;
}

.gsn-tiktok__play svg {
	width: 16px;
	height: 16px;
	margin-left: 2px;
	fill: currentColor;
}

.gsn-tiktok__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background-color: rgba( var( --color-bg-primary-rgb ), 0.55 );
	border-radius: 50%;
	color: var( --color-text-primary );
	pointer-events: none;
}

.gsn-tiktok__badge svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Visible link shown until the thumbnail loads, and left in place as a
 * fallback if the oEmbed fetch fails (e.g. offline, TikTok unreachable).
 *
 * `!important` needed: overrides a sitewide `a { color: #FBD446 !important; }`
 * rule stored in the site's Additional CSS (Customizer), same as
 * gsn-card.css and gsn-hero.css already work around. */
.gsn-tiktok__fallback {
	font-size: var( --font-size-caption );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var( --letter-spacing-caps );
	color: var( --color-text-secondary ) !important;
	text-decoration: none;
	transition: color 0.2s ease;
}

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

@media ( max-width: 1200px ) {
	.gsn-tiktok__grid {
		grid-template-columns: repeat( 2, 200px );
	}
}

/* Mobile: horizontal swipeable carousel (scroll-snap) instead of the 4
 * videos stacked vertically, with gold dots matching .gsn-carousel__dot. */
@media ( max-width: 640px ) {
	.gsn-tiktok__grid {
		display: flex;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 16px;
		padding: 4px 20px 8px;
		margin-inline: -20px;
	}

	.gsn-tiktok__grid::-webkit-scrollbar {
		display: none;
	}

	.gsn-tiktok__item {
		flex: 0 0 auto;
		width: 78%;
		max-width: 260px;
		scroll-snap-align: center;
	}

	.gsn-tiktok__dots {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin-top: var( --space-4 );
	}

	.gsn-tiktok__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-tiktok__dot:hover,
	.gsn-tiktok__dot:focus-visible {
		background-color: rgba( 255, 255, 255, 0.6 );
	}

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

@media ( min-width: 641px ) {
	.gsn-tiktok__dots {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.gsn-tiktok__item,
	.gsn-tiktok__thumb {
		transition: none;
	}
}