/**
 * Gamescom 2026 live hub.
 *
 * Event-scoped styling for the Gamescom hub page. Built entirely on the
 * Ralify token set so it inherits the site palette rather than defining a
 * parallel one. Deliberately self-contained: when the hub is archived after
 * the show, this file and its enqueue block are the only things to remove.
 *
 * Shared by the English and Arabic hubs. Logical properties are used
 * throughout so the layout mirrors correctly under RTL without a second
 * ruleset.
 */

.ralify-gamescom__hero {
	position: relative;
	overflow: hidden;
	margin-bottom: var(--ralify-space-6, 32px);
	padding: var(--ralify-space-7, 48px) var(--ralify-space-6, 32px);
	border: 1px solid var(--ralify-color-border, #273142);
	border-radius: var(--ralify-radius-lg, 16px);
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(136, 92, 246, 0.22), transparent 58%),
		radial-gradient(100% 120% at 0% 100%, rgba(0, 229, 255, 0.12), transparent 60%),
		var(--ralify-color-surface, #111827);
}

/* Thin brand rule along the top edge, matching the site gradient. */
.ralify-gamescom__hero::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--ralify-gradient-brand);
}

.ralify-gamescom__hero-inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
}

.ralify-gamescom__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ralify-space-2, 8px);
	margin-bottom: var(--ralify-space-4, 16px);
}

.ralify-gamescom__title {
	margin: 0 0 var(--ralify-space-3, 12px);
	font-family: var(--ralify-font, "Sora", sans-serif);
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--ralify-color-text, #f8fafc);
}

.ralify-gamescom__lede {
	margin: 0;
	max-width: 62ch;
	color: var(--ralify-color-text-muted, #94a3b8);
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* Countdown: JS-driven so LiteSpeed's page cache can't freeze a stale number. */
.ralify-gamescom__countdown {
	display: inline-flex;
	align-items: baseline;
	gap: var(--ralify-space-2, 8px);
	margin-top: var(--ralify-space-5, 24px);
	padding: var(--ralify-space-3, 12px) var(--ralify-space-5, 24px);
	border: 1px solid rgba(0, 229, 255, 0.3);
	border-radius: var(--ralify-radius-pill, 999px);
	background: rgba(0, 229, 255, 0.08);
}

.ralify-gamescom__countdown-value {
	color: var(--ralify-color-cyan, #00e5ff);
	font-size: 1.75rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.ralify-gamescom__countdown-label {
	color: var(--ralify-color-text-muted, #94a3b8);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Facts strip: dates, venue, stream time in Gulf hours. */
.ralify-gamescom__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--ralify-space-3, 12px);
	margin-bottom: var(--ralify-space-7, 48px);
}

.ralify-gamescom__fact {
	padding: var(--ralify-space-4, 16px) var(--ralify-space-5, 24px);
	border: 1px solid var(--ralify-color-border, #273142);
	border-radius: var(--ralify-radius-md, 12px);
	background: var(--ralify-color-surface-raised, #182233);
}

.ralify-gamescom__fact-label {
	display: block;
	margin-bottom: var(--ralify-space-2, 8px);
	color: var(--ralify-color-text-muted, #94a3b8);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ralify-gamescom__fact-value {
	display: block;
	color: var(--ralify-color-text, #f8fafc);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
}

.ralify-gamescom__fact--accent .ralify-gamescom__fact-value {
	color: var(--ralify-color-cyan, #00e5ff);
}

/* Body: the editable page content, styled to match the site article voice. */
.ralify-gamescom__body {
	max-width: 820px;
}

.ralify-gamescom__body h2 {
	margin: var(--ralify-space-7, 48px) 0 var(--ralify-space-4, 16px);
	padding-block-end: var(--ralify-space-3, 12px);
	border-block-end: 1px solid var(--ralify-color-border, #273142);
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--ralify-color-text, #f8fafc);
}

.ralify-gamescom__body h3 {
	margin: var(--ralify-space-6, 32px) 0 var(--ralify-space-3, 12px);
	color: var(--ralify-color-cyan, #00e5ff);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ralify-gamescom__body p {
	margin: 0 0 var(--ralify-space-4, 16px);
	color: #cbd5e1;
	font-size: 1.0625rem;
	line-height: 1.75;
}

.ralify-gamescom__body ul {
	margin: 0 0 var(--ralify-space-5, 24px);
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--ralify-space-2, 8px);
}

.ralify-gamescom__body li {
	position: relative;
	padding: var(--ralify-space-3, 12px) var(--ralify-space-4, 16px);
	padding-inline-start: var(--ralify-space-6, 32px);
	border: 1px solid var(--ralify-color-border, #273142);
	border-radius: var(--ralify-radius-sm, 8px);
	background: rgba(24, 34, 51, 0.5);
	color: #cbd5e1;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Marker sits inline-start so it flips automatically in Arabic. */
.ralify-gamescom__body li::before {
	content: "";
	position: absolute;
	inset-inline-start: var(--ralify-space-4, 16px);
	inset-block-start: 1.25em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ralify-color-purple, #885cf6);
}

.ralify-gamescom__body li strong {
	color: var(--ralify-color-text, #f8fafc);
	font-weight: 700;
}

.ralify-gamescom__body a {
	color: var(--ralify-color-cyan, #00e5ff);
	text-decoration: none;
	border-block-end: 1px solid rgba(0, 229, 255, 0.35);
	transition: border-color var(--ralify-transition, 180ms ease);
}

.ralify-gamescom__body a:hover {
	border-block-end-color: var(--ralify-color-cyan, #00e5ff);
}

/*
 * The affiliate notice. Visually distinct on purpose: disclosure that blends
 * into body copy is disclosure nobody reads.
 */
.ralify-gamescom__body em {
	color: var(--ralify-color-text-muted, #94a3b8);
}

.ralify-gamescom__disclosure {
	margin: 0 0 var(--ralify-space-5, 24px);
	padding: var(--ralify-space-4, 16px) var(--ralify-space-5, 24px);
	border: 1px solid rgba(255, 176, 32, 0.3);
	border-radius: var(--ralify-radius-md, 12px);
	background: rgba(255, 176, 32, 0.07);
	color: var(--ralify-color-text-muted, #94a3b8);
	font-size: 0.875rem;
	line-height: 1.6;
}

.ralify-gamescom__disclosure a {
	color: var(--ralify-color-deal, #ffb020);
	border-block-end-color: rgba(255, 176, 32, 0.4);
}

.ralify-gamescom__disclosure a:hover {
	border-block-end-color: var(--ralify-color-deal, #ffb020);
}

@media (max-width: 640px) {
	.ralify-gamescom__hero {
		padding: var(--ralify-space-6, 32px) var(--ralify-space-4, 16px);
	}

	.ralify-gamescom__facts {
		grid-template-columns: 1fr 1fr;
	}

	.ralify-gamescom__fact {
		padding: var(--ralify-space-3, 12px) var(--ralify-space-4, 16px);
	}
}