/* NOIO 0.6 – desktop reference implementation
   Desktop: approved mockup is used as the visual master.
   Real clickable hotspots are layered above it.
   Mobile: responsive live fallback. */

.noio-reference-wrap {
	margin: 0;
	padding: 0;
	background: #06111a;
}

.noio-reference-stage {
	position: relative;
	width: 100%;
	max-width: 1536px;
	margin: 0 auto;
	aspect-ratio: 1536 / 760;
	overflow: hidden;
	background: #06111a;
}

.noio-reference-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: top center;
	user-select: none;
	-webkit-user-drag: none;
}

.noio-reference-hotspots {
	position: absolute;
	inset: 0;
	z-index: 10;
}

.noio-reference-hotspots .hs {
	position: absolute;
	display: block;
	opacity: 0;
	border-radius: 10px;
	outline: 0;
}

.noio-reference-hotspots .hs:focus-visible {
	opacity: 1;
	box-shadow: inset 0 0 0 2px #24e5ff, 0 0 18px rgba(36,229,255,.55);
	background: rgba(36,229,255,.08);
}

/* Header hotspots */
.hs-home    { left: 2.2%; top: 5.4%; width: 15.2%; height: 11.6%; }
.hs-region  { left: 32.2%; top: 5.4%; width: 6.8%; height: 11.6%; }
.hs-article { left: 39.1%; top: 5.4%; width: 7.4%; height: 11.6%; }
.hs-poll    { left: 46.5%; top: 5.4%; width: 9.0%; height: 11.6%; }
.hs-events  { left: 55.5%; top: 5.4%; width: 7.7%; height: 11.6%; }
.hs-gaming  { left: 63.2%; top: 5.4%; width: 7.9%; height: 11.6%; }
.hs-culture { left: 71.1%; top: 5.4%; width: 10.0%; height: 11.6%; }
.hs-opinion { left: 81.1%; top: 5.4%; width: 9.4%; height: 11.6%; }
.hs-search  { left: 90.6%; top: 5.4%; width: 4.0%; height: 11.6%; }

/* Hero CTA hotspots */
.hs-cta-news   { left: 3.9%; top: 55.1%; width: 16.0%; height: 7.8%; }
.hs-cta-events { left: 20.9%; top: 55.1%; width: 14.5%; height: 7.8%; }

/* Rubric hotspots */
.hs-rubric-region  { left: 2.2%; top: 79.9%; width: 13.1%; height: 18.2%; }
.hs-rubric-article { left: 16.0%; top: 79.9%; width: 13.1%; height: 18.2%; }
.hs-rubric-poll    { left: 29.8%; top: 79.9%; width: 13.1%; height: 18.2%; }
.hs-rubric-events  { left: 43.5%; top: 79.9%; width: 13.1%; height: 18.2%; }
.hs-rubric-gaming  { left: 57.3%; top: 79.9%; width: 13.1%; height: 18.2%; }
.hs-rubric-culture { left: 71.0%; top: 79.9%; width: 13.1%; height: 18.2%; }
.hs-rubric-opinion { left: 84.7%; top: 79.9%; width: 13.1%; height: 18.2%; }

.noio-mobile-home {
	display: none;
}

.noio-live-content {
	padding-top: 4.5rem;
}

/* Make the live content continue the mockup language */
.noio-live-content .noio-section-title {
	font-size: clamp(2.3rem, 4vw, 3.7rem);
	margin-bottom: 1.7rem;
}

.noio-live-content .wp-block-post-template {
	gap: 18px;
}

.noio-live-content .noio-news-card {
	border-radius: 12px;
	background: #0f1b27;
	border: 1px solid #20384a;
}

.noio-live-content .noio-feature,
.noio-live-content .noio-story,
.noio-live-content .noio-empty {
	background: #0f1b27;
	border-color: #20384a;
}

@media (max-width: 900px) {
	.noio-reference-wrap {
		display: none;
	}

	.noio-mobile-home {
		display: block;
		padding: 0 18px 28px;
		background:
			radial-gradient(circle at 85% 25%, rgba(36,229,255,.11), transparent 18rem),
			radial-gradient(circle at 85% 75%, rgba(255,61,170,.08), transparent 20rem),
			linear-gradient(160deg,#08121c 0%,#0c2232 100%);
		border-bottom: 1px solid #20384a;
	}

	.noio-mobile-brandline {
		min-height: 68px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		border-bottom: 1px solid rgba(32,56,74,.7);
	}

	.noio-mobile-brandline strong {
		font-size: 1.9rem;
		letter-spacing: .08em;
		background: linear-gradient(90deg,#24e5ff,#fff 56%,#ff3daa);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.noio-mobile-brandline span {
		color: #dbe5ec;
		font-size: .76rem;
	}

	.noio-mobile-hero {
		padding: 58px 0 38px;
	}

	.noio-mobile-kicker {
		color: #24e5ff;
		font-size: .67rem;
		font-weight: 800;
		letter-spacing: .16em;
	}

	.noio-mobile-hero h1 {
		margin: 16px 0 0;
		font-size: clamp(4.7rem, 23vw, 7rem);
		line-height: .82;
	}

	.noio-mobile-hero h2 {
		margin: 18px 0 0;
		font-size: clamp(2rem, 8vw, 3rem);
		line-height: 1.03;
	}

	.noio-mobile-hero p {
		color: #d8e1e7;
		font-size: 1.05rem;
	}

	.noio-mobile-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: 25px;
	}

	.noio-mobile-actions a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 46px;
		padding: 0 18px;
		border-radius: 999px;
		font-weight: 800;
	}

	.noio-mobile-actions a:first-child {
		background: #24e5ff;
		color: #041018;
	}

	.noio-mobile-actions a:last-child {
		border: 1px solid #d5e1e8;
		color: #f2f7fb;
	}

	.noio-mobile-rubrics {
		display: grid;
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 8px;
	}

	.noio-mobile-rubrics a {
		padding: 12px 10px;
		text-align: center;
		border: 1px solid #20384a;
		background: rgba(15,27,39,.88);
		color: #f2f7fb;
		font-size: .82rem;
		font-weight: 700;
	}

	.noio-live-content {
		padding-top: 3.2rem;
	}
}