/*
 * Layout "hub": a headline strip, then an interactive four-panel puzzle (inline SVG that links to the sibling sites)
 * beside the signup card. Used by predecy.com.
 *
 * Markup: group.bcs-hub-intro (h1 + eyebrow) + group.bcs-hub-layout (core/html figure.bcs-puzzle + card).
 */

.bcs-hub-intro {
	display: grid;
	grid-template-columns: 1fr 384px;
	gap: 48px;
	padding: 40px var(--gutter) 32px;
	align-items: end;
}

.bcs-page .bcs-hub-intro .bcs-cover-line {
	font-size: clamp(3.5rem, 5.8vw, 6.3rem);
	margin: 0;
}

.bcs-hub-intro .bcs-eyebrow {
	color: var(--wp--preset--color--muted);
	line-height: 1.8;
	max-width: 220px;
}

.bcs-hub-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 384px;
	gap: 48px;
	padding: 0 var(--gutter) 40px;
	align-items: start;
}

.bcs-hub-layout .bcs-card .fluentform fieldset {
	display: grid;
	grid-template-columns: 1fr;
}

.bcs-puzzle {
	margin: 0;
	position: relative;
}

.bcs-puzzle svg {
	display: block;
	width: 100%;
	height: auto;
}

.bcs-puzzle a path {
	stroke: var(--wp--preset--color--ground);
	stroke-width: 5;
	transition: filter 0.18s;
}

.bcs-puzzle a:focus-visible path,
.bcs-puzzle a:hover path {
	filter: brightness(1.16);
	stroke: #fff;
	stroke-width: 6;
}

.bcs-puzzle a:focus-visible {
	outline: none;
}

.bcs-puzzle text {
	fill: #fff;
	font-family: var(--display-font);
	font-size: 48px;
	paint-order: stroke;
	stroke: #000b;
	stroke-width: 4;
}

.bcs-puzzle .bcs-arrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 28px;
}

.bcs-puzzle-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 190px;
	padding: 16px;
	background: #0b1016ed;
	border: 1px solid #e3f4ff66;
	pointer-events: none;
}

.bcs-puzzle-center img {
	display: block;
	width: 100%;
	height: auto;
}

.bcs-puzzle figcaption {
	margin: 16px 0;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 1100px) {
	.bcs-hub-intro,
	.bcs-hub-layout {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 24px;
	}

	.bcs-puzzle-center {
		width: 140px;
		padding: 12px;
	}
}

@media (max-width: 700px) {
	.bcs-hub-intro {
		display: block;
		padding: 20px 20px 16px;
	}

	.bcs-page .bcs-hub-intro .bcs-cover-line {
		font-size: 38px;
		line-height: 1;
	}

	.bcs-page .bcs-hub-intro .bcs-cover-line br {
		display: none;
	}

	.bcs-hub-intro .bcs-eyebrow {
		margin-top: 12px;
		font-size: 9px;
		max-width: none;
	}

	.bcs-hub-layout {
		display: block;
		padding: 0 20px 20px;
	}

	.bcs-puzzle-center {
		width: 100px;
		padding: 8px;
	}

	.bcs-puzzle text {
		font-size: 52px;
	}

	.bcs-puzzle figcaption {
		margin: 8px 0 16px;
		font-size: 9px;
	}

	/* Owner request 2026-10-04: first name and email stack on phones (one column, like the other sites) so each field has the full width.
	   The approved mock put them side by side (two 137 px fields at 375 px); the base rule above keeps the form in one column. */
}