/* SDC Showcase hero */

.sdc-showcase {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	aspect-ratio: 688 / 386;
	background-image: var(--sdc-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* ---- center text box (over the neon frame) ---- */
.sdc-showcase__center {
	position: absolute;
	left: 50%;
	top: 41%;
	transform: translate(-50%, -50%);
	width: 30%;
	text-align: center;
	color: #eafcff;
	z-index: 3;
	padding: 0 1%;
}

.sdc-showcase__title {
	font-weight: 800;
	font-size: clamp(13px, 2.4vw, 30px);
	line-height: 1.15;
	text-shadow: 0 0 8px rgba(0, 229, 255, 0.8), 0 0 18px rgba(0, 229, 255, 0.5);
}

.sdc-showcase__subtitle {
	margin-top: 0.4em;
	font-size: clamp(9px, 1.3vw, 16px);
	color: #9fe9ff;
	text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}

/* ---- hexagons ---- */
.sdc-showcase__hex {
	position: absolute;
	display: block;
	width: 18%;
	aspect-ratio: 1 / 1.1;
	z-index: 2;
}

.sdc-showcase__hex-img {
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	box-shadow: 0 0 10px rgba(255, 200, 60, 0.55);
}

/* Desktop overlay positions (best-effort match to the baked hexes).
   Tune these % if a slot drifts off its background hexagon. */
.sdc-showcase__hex--1 { left: 9%;  top: 14%; }   /* top-left */
.sdc-showcase__hex--2 { left: 0%;  top: 30%; }   /* mid-left */
.sdc-showcase__hex--3 { left: 14%; top: 45%; }   /* bottom-left */
.sdc-showcase__hex--4 { left: 73%; top: 13%; }   /* top-right */
.sdc-showcase__hex--5 { left: 82%; top: 30%; }   /* mid-right */
.sdc-showcase__hex--6 { left: 68%; top: 46%; }   /* bottom-right */

/* ---- responsive reflow ---- */
@media ( max-width: 768px ) {
	.sdc-showcase {
		aspect-ratio: auto;
		background-image: none;
		background: radial-gradient( ellipse at top, #0e2f38 0%, #061319 75% );
		padding: 28px 14px 20px;
	}

	.sdc-showcase__center {
		position: static;
		transform: none;
		width: 100%;
		margin-bottom: 22px;
	}

	.sdc-showcase__title {
		font-size: 24px;
	}

	.sdc-showcase__subtitle {
		font-size: 14px;
	}

	.sdc-showcase__hexes {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.sdc-showcase__hex {
		position: static;
		width: 100%;
	}
}