/*
 * nsemm/services-grid frontend (and shared editor) styles.
 *
 * Byte-faithful to the home-v6 services section. This is now a STATIC
 * InnerBlocks section block: the editable text is real core blocks (paragraph,
 * heading, buttons) inside the locked .section well, so the selectors below
 * target the namespaced .nsemm-services wrapper plus the core block markup
 * (.wp-block-group, .wp-block-button) rather than bespoke tags. No bare tag or
 * WordPress body class leaks. Block CSS loads independently, so the :root map
 * that ties local vars to the WP presets lives at the top (Brand-Sync recolours
 * everything through the presets). Shadows via color-mix, not rgba hex.
 */
:root {
	--blue: var(--wp--preset--color--university-blue);
	--gold: var(--wp--preset--color--knowledge-gold);
	--teal: var(--wp--preset--color--discovery-teal);
	--brown: var(--wp--preset--color--foundational-brown);
	--sandy: var(--wp--preset--color--sandy-brown);
	--midnight: var(--wp--preset--color--midnight);
	--bg: var(--wp--preset--color--white);
	--gold-dark: #D4AC00;
	--r-pill: 9999px;
	--r-card: 16px;
	--body: var(--wp--preset--font-family--readex-pro);
	--head: var(--wp--preset--font-family--sora);
}

/* Page container: ~90vw, mirrors the wireframe .page (max-width 1320px, side gutters). */
.nsemm-services {
	padding: 0 40px;
	max-width: 1320px;
	margin: 0 auto;
}
.nsemm-services .section {
	padding: 56px 0;
}

/* Eyebrow / heading / sub. Core blocks default to flow margins, so reset and
   restate the wireframe spacing on the namespaced classes. */
.nsemm-services .eyebrow {
	font-family: var(--head);
	font-size: 11px;
	font-weight: 700;
	color: var(--blue);
	text-transform: uppercase;
	letter-spacing: .1em;
	opacity: .5;
	margin: 0 0 10px;
}
.nsemm-services .sec-h {
	font-family: var(--head);
	font-size: 34px;
	font-weight: 700;
	color: var(--blue);
	margin: 0 0 10px;
	padding-top: 8px;
	line-height: 1.2;
}
.nsemm-services .sec-s {
	font-size: 17px;
	color: var(--midnight);
	opacity: .6;
	margin: 0 0 44px;
	max-width: 560px;
}

/* Service grid: 2x2 lattice. The grid is a core/group, so neutralise the group
   default block-gap and restate the wireframe gap on the .svc-grid itself. */
.nsemm-services .svc-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 0;
	align-items: stretch;
}

/* The .svc-grid group is a core/group (is-layout-flow), so WordPress applies a
   default vertical block-gap (margin-block-start) to every child except the
   first. On the flow stack that is harmless, but here the children are grid
   cells, so that margin pushes the 2nd/4th cards DOWN inside their row track and
   the tops of side-by-side cards stop lining up. Grid `gap` already owns the
   spacing, so zero the inherited flow margin on the direct children to TOP-ALIGN
   every card in a row. */
.nsemm-services .svc-grid > * {
	margin-top: 0;
	margin-block-start: 0;
}

/* Each card is a core/group (.svc). Was an anchor in the wireframe; here it is a
   div so the chip/title/copy/link inside stay individually editable. */
.nsemm-services .svc {
	background: var(--sandy);
	border-radius: var(--r-card);
	padding: 36px 36px 32px;
	border: 1px solid color-mix(in srgb, var(--midnight) 4%, transparent);
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 0;
	opacity: .9;
	transition: box-shadow .3s ease, transform .3s ease, background .25s ease, opacity .25s ease;
}
.nsemm-services .svc:hover {
	box-shadow: 0 10px 36px color-mix(in srgb, var(--midnight) 9%, transparent);
	transform: translateY(-4px);
	background: #EDE4D8;
	opacity: 1;
}

/* Chip (.svc-num) is a core/paragraph. */
.nsemm-services .svc-num {
	font-family: var(--head);
	font-size: 13px;
	font-weight: 700;
	color: var(--gold);
	background: var(--blue);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 12px;
	border-radius: 6px;
	margin: 0 0 20px;
	letter-spacing: .04em;
	align-self: flex-start;
}
.nsemm-services .svc-num i {
	font-size: 12px;
	line-height: 1;
}

/* Title (h3 from core/heading). */
.nsemm-services .svc h3 {
	font-family: var(--head);
	font-size: 21px;
	font-weight: 700;
	color: var(--blue);
	margin: 0 0 12px;
	line-height: 1.25;
}

/* Copy (.svc-copy core/paragraph). flex:1 pushes the link to the card foot. */
.nsemm-services .svc-copy {
	font-size: 15px;
	opacity: .72;
	line-height: 1.65;
	margin: 0 0 20px;
	flex: 1;
}

/* Link: core/buttons (.svc-link-wrap) + core/button (.svc-link). The real
   anchor is .wp-block-button__link; we strip the core pill chrome and restyle
   it as the flat wireframe arrow link, then append the arrow glyph via ::after
   so the arrow never sits in editable content. */
.nsemm-services .svc-link-wrap {
	margin: auto 0 0;
	gap: 0;
}
.nsemm-services .svc-link .wp-block-button__link {
	font-family: var(--head);
	font-size: 14px;
	font-weight: 600;
	color: var(--blue);
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.nsemm-services .svc-link .wp-block-button__link::after {
	content: '\2192';
	display: inline-block;
	transition: transform .25s;
}
.nsemm-services .svc:hover .svc-link .wp-block-button__link::after {
	transform: translateX(5px);
}

/* Scroll-reveal initial state (theme global JS adds .visible). Scoped to this block. */
.nsemm-services .reveal {
	opacity: 0.08;
	transform: translateY(28px);
	transition: opacity .65s ease, transform .65s ease;
}
.nsemm-services .reveal.visible {
	opacity: 1;
	transform: translateY(0);
}
.nsemm-services .d1 { transition-delay: .1s; }
.nsemm-services .d2 { transition-delay: .2s; }
.nsemm-services .d3 { transition-delay: .3s; }
.nsemm-services .d4 { transition-delay: .4s; }

/* Mobile: single-column grid + tighter section padding, matching the wireframe. */
@media (max-width: 900px) {
	.nsemm-services {
		padding: 0 20px;
	}
	.nsemm-services .svc-grid {
		grid-template-columns: 1fr;
	}
	.nsemm-services .section {
		padding: 28px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nsemm-services .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.nsemm-services .svc,
	.nsemm-services .svc-link .wp-block-button__link::after {
		transition: none;
	}
}

/* Editor carve-out (2026-06-21): the scroll-reveal `.visible` class is added by
   the theme’s FRONTEND JS, which does not run in the block editor — so `.reveal`
   would sit at its hidden initial opacity and the block looks "disappeared"
   while editing (e.g. when adding a button link). Force it fully visible inside
   the editor canvas only; the frontend animation is unchanged. */
.editor-styles-wrapper .reveal { opacity: 1 !important; transform: none !important; }