/* ============================================================
   GRASSHOPPER COURSE components — .gc-* classes for Group blocks
   + core-block treatments. Editors add ONE class in "Additional
   CSS class(es)"; the block inherits the design.
   ============================================================ */

/* ============ HEADER / NAV ============ */
.gc-header {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	margin: 22px var(--gc-gutter) 0;
	padding: 12px 14px 12px 24px;
	background: var(--gc-surface-gloss);
	border: 1px solid var(--gc-hairline);
	border-radius: var(--gc-r-blade);
	box-shadow: 0 18px 40px -30px rgba(23, 24, 18, .5), var(--gc-sheen);
	position: relative;
	z-index: 20;
}
.gc-header .wp-block-site-logo img { width: 30px; height: 30px; border-radius: 0 15px 0 15px; }
.gc-header .wp-block-site-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: var(--gc-track-wordmark);
	text-transform: uppercase;
}
.gc-header .wp-block-site-title a { text-decoration: none; color: var(--gc-ink); }
.gc-header .wp-block-navigation { margin-left: auto; font-size: 14.5px; }
.gc-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 8px 15px;
	border-radius: var(--gc-r-blade);
	color: var(--gc-grey);
	transition: background var(--gc-speed) var(--gc-ease), color var(--gc-speed) var(--gc-ease);
}
.gc-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.gc-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	background: rgba(120, 148, 63, .16);
	color: var(--gc-ink);
	text-decoration: none;
}
.gc-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	background: rgba(23, 24, 18, .07);
}
/* dropdowns as gloss shells */
.gc-header .wp-block-navigation__submenu-container {
	background: var(--gc-gloss) !important;
	border: 1px solid var(--gc-hairline) !important;
	border-radius: 22px 22px 22px 4px !important;
	box-shadow: var(--gc-shadow-hover);
	padding: 8px !important;
	min-width: 240px;
}
.gc-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { border-radius: 14px; }
/* mobile overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--gc-paper);
	font-family: var(--gc-font-sans);
}

/* ============ SHELLS (Group blocks) ============ */
.gc-shell {
	background: var(--gc-surface-shell);
	border-radius: 8px 8px var(--gc-r-shell-size) 8px;
	box-shadow: var(--gc-sheen), 0 30px 60px -50px rgba(23, 24, 18, .5);
	overflow: hidden;
	overflow: clip; /* NOT a scroll container — keeps view() timelines inside working */
}
.gc-shell-leaf {
	background: var(--gc-surface-leaf);
	border-radius: 0 170px 0 0;
	padding: clamp(28px, 4vw, 54px) var(--gc-gutter);
	position: relative;
	overflow: hidden;
	overflow: clip;
	color: #151a0c;
}
.gc-shell-leaf h1, .gc-shell-leaf h2, .gc-shell-leaf h3 { color: #151a0c; }
.gc-shell-leaf p { color: #2c3618; }
.gc-shell-leaf > .wp-block-group:first-child { max-width: 640px; }
.gc-plinth {
	background: #edece6;
	border-radius: var(--gc-r-plinth);
	padding: clamp(28px, 4vw, 48px) var(--gc-gutter);
	text-align: center;
}
.gc-dark {
	background: var(--gc-ink);
	color: #c9c8c1;
	border-radius: 150px 8px 8px 8px;
	position: relative;
	overflow: hidden;
	overflow: clip;
}
.gc-dark::before { /* LED light-line seam */
	content: "";
	display: block;
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: var(--gc-light-line);
	box-shadow: var(--gc-light-glow);
}
.gc-dark h1, .gc-dark h2, .gc-dark h3, .gc-dark .wp-block-site-title a { color: var(--gc-paper); }
.gc-dark a { color: #c9c8c1; }
.gc-dark a:hover { color: #b3cb7d; }

/* ============ CANVAS (Group class gc-canvas: the GH drawing field) ============ */
.gc-canvas {
	background: var(--gc-gloss);
	background-image: var(--gc-dots);
	border: 1px solid var(--gc-hairline);
	border-radius: var(--gc-r-node);
	padding: clamp(24px, 3.4vw, 44px) var(--gc-gutter);
}

/* ============ WIRE (Separator block: gc-wire) ============ */
/* A connector between two node sockets — the Grasshopper canvas gesture.
   Left socket → down-arc → up-arc → right socket. */
hr.gc-wire {
	border: 0;
	background: none;
	height: 54px;
	margin: 34px 0;
	position: relative;
	overflow: visible;
	opacity: 1;
	width: 100%;
	max-width: none !important;
}
hr.gc-wire::before {  /* left socket dot + falling arc */
	content: "";
	position: absolute;
	left: 6%; right: 52%; top: 0; bottom: 0;
	border-bottom: 2.5px solid var(--gc-ink);
	border-bottom-left-radius: 100% 100%;
	background:
		radial-gradient(circle 5px at 5px 6px, var(--gc-ink) 98%, transparent) no-repeat,
		radial-gradient(circle 8px at 5px 6px, transparent 60%, var(--gc-leaf) 62%, transparent 78%) no-repeat;
}
hr.gc-wire::after {  /* rising arc + right socket dot */
	content: "";
	position: absolute;
	left: 48%; right: 6%; top: 0; bottom: 0;
	border-top: 2.5px solid var(--gc-ink);
	border-top-right-radius: 100% 100%;
	background:
		radial-gradient(circle 5px at calc(100% - 5px) calc(100% - 6px), var(--gc-ink) 98%, transparent) no-repeat,
		radial-gradient(circle 8px at calc(100% - 5px) calc(100% - 6px), transparent 60%, var(--gc-leaf) 62%, transparent 78%) no-repeat;
}

/* ============ TYPE ACCESSORIES ============ */
.gc-kicker {
	font-family: var(--gc-font-mono) !important;
	font-size: 11.5px !important;
	letter-spacing: var(--gc-track-label);
	text-transform: uppercase;
	color: var(--gc-leaf-deep);
}
.gc-kicker-grey { color: var(--gc-grey-soft); }
.gc-outline {  /* stroked display text */
	-webkit-text-stroke: 2px var(--gc-ink);
	color: transparent !important;
}
.gc-dark .gc-outline { -webkit-text-stroke: 1.5px rgba(246, 245, 242, .42); }
.gc-indent-1 { margin-left: clamp(20px, 5vw, 70px) !important; }
.gc-indent-2 { margin-left: clamp(48px, 12vw, 170px) !important; }
.gc-year {  /* big outlined year numeral, e.g. a paragraph holding ’22 */
	font-family: var(--gc-font-mono) !important;
	font-size: clamp(44px, 7vw, 88px) !important;
	line-height: 1 !important;
	-webkit-text-stroke: 2px var(--gc-leaf-deep);
	color: transparent !important;
}

/* ============ SPECS (fact block) ============ */
/* Group class gc-specs — each paragraph: <strong>LABEL</strong> value */
.gc-specs { border-top: 1px solid var(--gc-hairline-strong); border-bottom: 1px solid var(--gc-hairline-strong); padding: 6px 0; }
.gc-specs p {
	display: grid;
	grid-template-columns: minmax(110px, 150px) 1fr;
	gap: 12px;
	align-items: baseline;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--gc-hairline);
	font-size: 15px;
}
.gc-specs p:last-child { border-bottom: 0; }
.gc-specs p strong {
	font-family: var(--gc-font-mono);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: var(--gc-track-label);
	text-transform: uppercase;
	color: var(--gc-grey-soft);
}
/* Chip variant — Group class gc-chips (row layout); each paragraph becomes a capsule */
.gc-chips { gap: 14px !important; flex-wrap: wrap; }
.gc-chips p {
	margin: 0;
	background: var(--gc-surface-gloss);
	border: 1px solid var(--gc-hairline);
	border-radius: var(--gc-r-blade);
	box-shadow: var(--gc-sheen);
	padding: 11px 22px;
	font-size: 14px;
}
.gc-chips p strong {
	font-family: var(--gc-font-mono);
	font-weight: 500;
	font-size: 9.5px;
	letter-spacing: var(--gc-track-label);
	text-transform: uppercase;
	color: var(--gc-grey-soft);
	margin-right: 10px;
}

/* ============ NODES (Group class gc-nodes: GH component capsules) ============ */
/* Each paragraph reads as a Grasshopper component: rounded-rect body with an
   input socket on the left. <strong>NN</strong> label. */
.gc-nodes { gap: 14px !important; flex-wrap: wrap; }
.gc-nodes p {
	margin: 0;
	position: relative;
	background: var(--gc-surface-gloss);
	border: 1px solid var(--gc-hairline-strong);
	border-radius: var(--gc-r-node);
	box-shadow: var(--gc-sheen), 0 14px 22px -18px rgba(23, 24, 18, .45);
	padding: 12px 24px 12px 30px;
	font-size: 14.5px;
	font-weight: 500;
	transition: transform var(--gc-speed) var(--gc-ease), box-shadow var(--gc-speed) var(--gc-ease), border-color var(--gc-speed) var(--gc-ease);
}
.gc-nodes p::before {  /* input socket */
	content: "";
	position: absolute;
	left: -5px; top: 50%;
	width: 9px; height: 9px;
	margin-top: -4.5px;
	border-radius: 999px;
	background: var(--gc-leaf);
	border: 1.5px solid var(--gc-gloss);
	box-shadow: 0 0 0 1px var(--gc-hairline-strong);
}
.gc-nodes p:hover {
	transform: translateY(-3px);
	box-shadow: var(--gc-shadow-hover);
	border-color: rgba(76, 97, 31, .55);
}
.gc-nodes p strong {
	font-family: var(--gc-font-mono);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: var(--gc-track-label);
	color: var(--gc-leaf-deep);
	margin-right: 12px;
}

/* ============ BLADES (index rows / pagers) ============ */
/* Group class gc-index: every direct child link-row becomes a strata blade. */
.gc-index { display: flex; flex-direction: column; gap: 12px; }
.gc-blade, .gc-index > * {
	background: var(--gc-surface-gloss);
	border: 1px solid rgba(23, 24, 18, .09);
	border-radius: var(--gc-r-blade);
	box-shadow: var(--gc-sheen);
	padding: 18px 30px;
	transition: transform var(--gc-speed) var(--gc-ease), box-shadow var(--gc-speed) var(--gc-ease), border-color var(--gc-speed) var(--gc-ease);
}
.gc-blade:hover, .gc-index > *:hover {
	transform: translateX(18px);
	box-shadow: var(--gc-shadow-hover);
	border-color: rgba(76, 97, 31, .55);
}
/* staggered shelf lengths */
.gc-index > *:nth-child(4n+2) { margin-right: clamp(12px, 3.5vw, 44px); }
.gc-index > *:nth-child(4n+3) { margin-right: clamp(24px, 7vw, 88px); }
.gc-index > *:nth-child(6n)   { margin-right: clamp(36px, 10vw, 132px); }
.gc-index a { text-decoration: none; }
.gc-index .wp-block-post-title { font-size: 19px; font-weight: 500; margin: 0; }
.gc-index .wp-block-post-date { font-family: var(--gc-font-mono); font-size: 11px; letter-spacing: .14em; color: var(--gc-grey-soft); }
/* hand-authored rows: <p><a><strong>’22</strong>  Title</a></p> + meta paragraph */
.gc-index p { margin: 0; font-size: 19px; font-weight: 500; }
.gc-index p strong { font-family: var(--gc-font-mono); font-weight: 500; font-size: 14px; color: var(--gc-leaf-deep); }
.gc-index p.gc-kicker { font-weight: 400; }

/* ============ CARDS (course posters / featured work) ============ */
/* Group class gc-card around Image + paragraphs (usually inside Columns) */
.gc-card { display: flex; flex-direction: column; gap: 14px; }
.gc-card .wp-block-image { margin: 0; }
.gc-card .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: 0 var(--gc-r-sweep-size) 0 0;
	transition: border-radius .6s var(--gc-ease), box-shadow .6s var(--gc-ease);
}
.gc-card:hover .wp-block-image img {
	border-radius: var(--gc-r-sweep-size) 0 var(--gc-r-sweep-size) 0;
	box-shadow: 0 30px 50px -34px rgba(23, 24, 18, .6);
}
/* poster variant: tall course posters keep their aspect, gentle frame */
.gc-card.gc-poster .wp-block-image img {
	aspect-ratio: auto;
	border: 1px solid var(--gc-hairline);
}
.gc-card h3, .gc-card h2 { font-size: 19px; font-weight: 500; margin: 0; }
.gc-card .gc-kicker, .gc-card .gc-kicker-grey { margin: 0; }

/* ============ GALLERIES ============ */
.wp-block-gallery { --wp--style--unstable-gallery-gap: 26px; gap: 26px; }
.wp-block-gallery .wp-block-image img { transition: border-radius .6s var(--gc-ease); }
.wp-block-gallery .wp-block-image:nth-child(4n+1) img { border-radius: 0 var(--gc-r-sweep-size) 0 0; }
.wp-block-gallery .wp-block-image:nth-child(4n+2) img { border-radius: var(--gc-r-sweep-size) 0 0 0; }
.wp-block-gallery .wp-block-image:nth-child(4n+3) img { border-radius: 0 0 0 var(--gc-r-sweep-size); }
.wp-block-gallery .wp-block-image:nth-child(4n+4) img { border-radius: 0 0 var(--gc-r-sweep-size) 0; }
.wp-block-gallery .wp-block-image:hover img { border-radius: 24px; }
.wp-block-gallery figcaption, .wp-block-image figcaption {
	font-family: var(--gc-font-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gc-grey-soft);
	text-align: left;
	margin-top: 12px;
	position: static;
	background: none;
	padding: 0;
}
/* Archival — add gc-archival to a Gallery, Image or Group: plinth field, never upscaled */
.gc-archival { background: #edece6; border-radius: var(--gc-r-plinth); padding: clamp(28px, 4vw, 48px); justify-content: center; }
.gc-archival .wp-block-image img, .wp-block-image.gc-archival img {
	width: auto;
	max-width: 100%;
	max-height: 70vh;
	border-radius: 0 !important;
	box-shadow: 0 26px 40px -30px rgba(23, 24, 18, .55);
	margin: 0 auto;
}
.gc-archival figcaption { text-align: center; }

/* ============ BUTTONS ============ */
.wp-block-button__link, .wp-element-button {
	font-family: var(--gc-font-sans);
	font-size: 14.5px;
	letter-spacing: .04em;
	background: var(--gc-ink);
	color: var(--gc-paper);
	border-radius: var(--gc-r-blade) var(--gc-r-blade) var(--gc-r-blade) 26px;
	padding: 15px 34px;
	position: relative;
	transition: background var(--gc-speed) var(--gc-ease), transform var(--gc-speed) var(--gc-ease), box-shadow var(--gc-speed) var(--gc-ease);
}
.wp-block-button__link:hover, .wp-element-button:hover {
	background: var(--gc-leaf-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 18px 30px -18px rgba(23, 24, 18, .6);
}
/* wire sockets bloom at the pill's ends on hover — the connector language */
.wp-block-button__link::before, .wp-block-button__link::after,
.wp-element-button::before, .wp-element-button::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 8px; height: 8px;
	margin-top: -4px;
	border-radius: 999px;
	background: var(--gc-leaf);
	opacity: 0;
	transform: scale(.4);
	transition: opacity .3s var(--gc-ease), transform .3s var(--gc-ease);
}
.wp-block-button__link::before, .wp-element-button::before { left: -14px; }
.wp-block-button__link::after,  .wp-element-button::after  { right: -14px; }
.wp-block-button__link:hover::before, .wp-block-button__link:hover::after,
.wp-element-button:hover::before, .wp-element-button:hover::after {
	opacity: 1;
	transform: scale(1);
}
.is-style-outline .wp-block-button__link {
	background: rgba(255, 255, 255, .45);
	border: 2px solid rgba(23, 24, 18, .6);
	color: var(--gc-ink);
	font-weight: 500;
	border-radius: 26px var(--gc-r-blade) var(--gc-r-blade) var(--gc-r-blade);
}
.is-style-outline .wp-block-button__link:hover { border-color: var(--gc-leaf-deep); background: rgba(120, 148, 63, .12); box-shadow: none; }

/* ============ MARQUEE (Group class gc-marquee; put the same paragraph in it TWICE) ============ */
.gc-marquee {
	background: var(--gc-ink);
	overflow: hidden;
	overflow: clip;
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	padding: 16px 0;
}
.gc-marquee::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: var(--gc-light-line);
	box-shadow: var(--gc-light-glow);
}
.gc-marquee p {
	margin: 0;
	font-family: var(--gc-font-mono);
	font-size: 12.5px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #c9c8c1;
	white-space: nowrap;
	padding-right: 60px;
	flex: none;
	animation: gc-marquee 32s linear infinite;
}

/* ============ PULSE DOT (inline span class gc-live) ============ */
.gc-live {
	display: inline-block;
	width: 9px; height: 9px;
	border-radius: 999px;
	background: currentColor;
	margin-right: 10px;
	animation: gc-pulse 1.6s ease-in-out infinite;
}

/* ============ CURSOR (elements created by gc.js) ============ */
.gc-has-cursor body { cursor: none; }
.gc-has-cursor a, .gc-has-cursor button, .gc-has-cursor input, .gc-has-cursor label { cursor: none; }
.gc-cursor-ring {
	position: fixed;
	left: -19px; top: -19px;
	width: 38px; height: 38px;
	border: 1.5px solid var(--gc-ink);
	border-radius: 999px;
	pointer-events: none;
	z-index: 99999;
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 500 9px var(--gc-font-mono);
	letter-spacing: .14em;
	color: var(--gc-leaf-deep);
	transition: width .25s, height .25s, left .25s, top .25s, background .25s, border-color .25s, opacity .2s;
}
.gc-cursor-ring.is-link { width: 52px; height: 52px; left: -26px; top: -26px; border-color: var(--gc-leaf-deep); background: rgba(120, 148, 63, .14); }
.gc-cursor-ring.is-view { width: 64px; height: 64px; left: -32px; top: -32px; border-color: var(--gc-leaf-deep); background: rgba(120, 148, 63, .16); }
.gc-cursor-ring.is-view::after { content: "VIEW"; }
.gc-cursor-dot {
	position: fixed;
	left: -3.5px; top: -3.5px;
	width: 7px; height: 7px;
	background: var(--gc-ink);
	border-radius: 999px;
	pointer-events: none;
	z-index: 99999;
	opacity: 0;
	transition: background .25s, opacity .2s;
}
.gc-cursor-dot.is-accent { background: var(--gc-leaf-deep); }
@media (hover: none), (prefers-reduced-motion: reduce) {
	.gc-cursor-ring, .gc-cursor-dot { display: none; }
	.gc-has-cursor body, .gc-has-cursor a, .gc-has-cursor button { cursor: auto; }
}

/* ============ SCROLL MOTION ============ */
/* Modern engines: pure-CSS scroll-scrubbed reveals. Others: static (or IO fallback via gc.js). */
@supports (animation-timeline: view()) {
	.wp-block-image, .wp-block-gallery figure, .gc-card, .gc-blade, .gc-index > *, .gc-shell-leaf, .gc-plinth, .gc-canvas, .gc-rise {
		animation: gc-rise linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 42%;
	}
	/* shelf cascade */
	.gc-index > *:nth-child(2n) { animation-range: entry 6% entry 48%; }
	.gc-index > *:nth-child(3n) { animation-range: entry 10% entry 52%; }
	.wp-block-gallery figure:nth-child(2n) { animation-range: entry 8% entry 50%; }
	.wp-block-gallery figure:nth-child(3n) { animation-range: entry 16% entry 58%; }
}
/* IO fallback states (html.gc-io added by gc.js when view() unsupported) */
.gc-io .wp-block-image, .gc-io .wp-block-gallery figure, .gc-io .gc-card, .gc-io .gc-blade, .gc-io .gc-shell-leaf, .gc-io .gc-plinth, .gc-io .gc-canvas, .gc-io .gc-rise {
	opacity: 0;
	transform: translateY(46px);
	transition: opacity .8s var(--gc-ease), transform .8s var(--gc-ease);
}
.gc-io .gc-in { opacity: 1; transform: none; }