/* ============================================================
   GRASSHOPPER COURSE front page — canvas-field hero + sections.
   Loads only on the front page (functions.php).
   ============================================================ */

.gc-front { padding-top: 16px; padding-bottom: 0; }

/* ---- hero: a Grasshopper canvas — pale dot-grid field inside a gloss
   shell, typographic headline, node-graph ornament drawn by home CSS.
   No photography survives from the archive; the canvas IS the image. ---- */
.gc-hero {
	position: relative;
	margin: 18px 12px 0;
	padding: clamp(60px, 9vw, 130px) var(--gc-gutter) clamp(60px, 8vw, 110px);
	background: var(--gc-surface-shell);
	background-image: var(--gc-dots), var(--gc-surface-shell);
	border-radius: 8px 8px var(--gc-r-shell-size) 8px;
	box-shadow: var(--gc-sheen), 0 40px 80px -60px rgba(23, 24, 18, .6);
	overflow: hidden;
	overflow: clip;
}
.gc-hero .gc-kicker { margin: 0; }
.gc-hero h1 {
	font-size: clamp(2.6rem, 6vw, 4.8rem);
	line-height: .98;
	max-width: 16ch;
	margin: 18px 0 0;
}
.gc-hero h1 .gc-accent { color: var(--gc-leaf-deep); }
.gc-hero p.gc-hero-sub { color: var(--gc-grey); max-width: 52ch; font-size: clamp(15px, 1.25vw, 18px); margin-top: 20px; }
.gc-hero .wp-block-buttons { margin-top: 32px; }

/* node-graph ornament — two component capsules wired across the hero's
   right field. Pure CSS, ink hairlines + leaf sockets; sits behind copy. */
.gc-hero::before {  /* upper component + falling wire */
	content: "";
	position: absolute;
	right: 8%; top: 14%;
	width: clamp(160px, 24vw, 320px);
	height: clamp(120px, 18vw, 240px);
	pointer-events: none;
	border-bottom: 2px solid var(--gc-hairline-strong);
	border-right: 2px solid var(--gc-hairline-strong);
	border-bottom-right-radius: 100% 100%;
	background:
		radial-gradient(circle 6px at 2px 4px, var(--gc-leaf) 98%, transparent) no-repeat,
		radial-gradient(circle 10px at 2px 4px, transparent 55%, var(--gc-hairline-strong) 60%, transparent 75%) no-repeat;
	opacity: .8;
}
.gc-hero::after {  /* lower socket the wire lands on */
	content: "";
	position: absolute;
	right: calc(8% - 6px); top: calc(14% + clamp(120px, 18vw, 240px) - 6px);
	width: 12px; height: 12px;
	border-radius: 999px;
	background: var(--gc-leaf-deep);
	box-shadow: 0 0 0 4px rgba(120, 148, 63, .22);
	pointer-events: none;
}

/* stat chips row under the hero copy */
.gc-hero .gc-chips { margin-top: 40px; }
.gc-hero .gc-chips p { background: rgba(255, 255, 255, .72); }

/* ---- section rhythm ---- */
.gc-front > .wp-block-group,
.gc-front > .wp-block-columns,
.gc-front > .wp-block-separator,
.gc-front > .wp-block-heading,
.gc-front > .wp-block-paragraph,
.gc-front > .wp-block-spacer { margin-inline: auto; }

/* big editorial statement */
.gc-statement {
	font-size: clamp(1.8rem, 4.2vw, 3.4rem) !important;
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -.02em;
	max-width: 20ch;
	margin: clamp(60px, 9vw, 120px) auto clamp(28px, 4vw, 44px);
	text-wrap: balance;
}
.gc-statement .gc-accent { color: var(--gc-leaf-deep); }

@media (max-width: 781px) {
	.gc-hero { border-radius: 8px 8px 110px 8px; }
	.gc-hero::before, .gc-hero::after { display: none; }
}