/*
 * NSEMM Hero block styles (nsemm/hero).
 *
 * Byte-faithful port of the home-v6 wireframe hero section
 * (/var/www/nsemm-design/home-v6.html ~183-209): the teal full-bleed hero with
 * heading, lead paragraph, the two pill buttons and the perspective hero image.
 *
 * This block is now a STATIC InnerBlocks section: the editable content is real
 * CORE blocks (core/heading, core/paragraph, core/buttons + core/button,
 * core/image) placed inside the .hero grid. This stylesheet styles the wrapper
 * AND those core blocks so they look identical to the wireframe's bespoke
 * markup:
 *   - the text column is a core/group (.hero-text),
 *   - the heading is a core/heading (.wp-block-heading) with the emphasised
 *     word carried by <em> and recoloured to --brown,
 *   - the lead is a core/paragraph (<p>),
 *   - the buttons are core/buttons (.hero-btns) holding two core/button
 *     wrappers (.btn-hl / .btn-hs); the real link (.wp-block-button__link) is
 *     styled to match the wireframe pills exactly,
 *   - the image is a core/image (figure.hero-img).
 *
 * Per-block CSS loads independently, so the shared local-var mapping is
 * redefined here at :root. It must NOT hard-code brand hex, so Brand-Sync keeps
 * recolouring this. gold-dark is a hover shade not present in the locked
 * palette. Shadows use color-mix, never rgba hex.
 *
 * Every wrapper class is namespaced (.nsemm-home) and bare tag selectors are
 * scoped beneath it, so nothing leaks onto WordPress body/template-part
 * elements.
 */
: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;
	--aql-h: 64px;
	--body: var(--wp--preset--font-family--readex-pro);
	--head: var(--wp--preset--font-family--sora);
}

/* ── HERO ── */
.nsemm-home .hero {
	/* Layered branded depth (flagship). Teal stays the base-colour fallback;
	   gold + blue radial light-pools + a midnight diagonal read as depth, not a
	   flat fill. color-mix only, no new hex. */
	background-color: var(--teal);
	background-image:
		radial-gradient(120% 90% at 16% 0%,
			color-mix(in srgb, var(--gold) 20%, transparent) 0%, transparent 55%),
		radial-gradient(100% 80% at 100% 100%,
			color-mix(in srgb, var(--blue) 22%, transparent) 0%, transparent 52%),
		linear-gradient(160deg,
			color-mix(in srgb, var(--midnight) 14%, transparent) 0%, transparent 60%);
	position: relative;
	isolation: isolate;
	padding: 64px 64px 104px;
	display: grid;
	grid-template-columns: 1fr var(--hero-img-col, 50%);
	gap: 56px;
	align-items: center;
}
/* Fine grain overlay (decorative, behind content via z-index:-1). */
.nsemm-home .hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: .05;
	mix-blend-mode: overlay;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The text column (core/group). Reset core group's block-gap so the heading,
   paragraph and buttons keep the wireframe's own margins. */
.nsemm-home .hero .hero-text {
	margin: 0;
}

.nsemm-home .hero .wp-block-heading {
	font-family: var(--head);
	font-size: clamp(2.5rem, 1.6rem + 3.4vw, 3.5rem);
	font-weight: 700;
	color: var(--blue);
	/* 1.18 (was 1.06): the emphasised word now carries an inline blue highlight
	   (below); a touch more line-height keeps the chip clear of adjacent lines
	   when the heading wraps. */
	line-height: 1.18;
	letter-spacing: -.02em;
	text-wrap: balance;
	margin: 0 0 22px;
}
/* Emphasised word ("transforms"): brand gold on a University-Blue highlight.
   Gold can't sit directly on the bright teal hero (1.13:1 — invisible), so the
   blue chip gives it a dark backing (gold-on-blue 7.2:1, the signature pairing).
   box-decoration-break:clone keeps the rounded highlight intact if it ever wraps.
   Dark mode keeps the clean gold-on-dark-teal accent — see dark.css. */
.nsemm-home .hero .wp-block-heading em {
	font-style: normal;
	color: var(--gold);
	background: var(--blue);
	padding: .08em .34em;
	border-radius: 12px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.nsemm-home .hero p {
	font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem);
	opacity: .82;
	max-width: 46ch;
	margin: 0 0 36px;
	line-height: 1.65;
}

/* The buttons row (core/buttons). */
.nsemm-home .hero .hero-btns {
	display: flex;
	gap: 12px;
	margin: 0;
}
.nsemm-home .hero .hero-btns .wp-block-button {
	margin: 0;
}

/* Hero buttons - the real core/button link, styled as the wireframe pills.
   .btn-hl / .btn-hs sit on the .wp-block-button wrapper; target the link. */
.nsemm-home .hero .btn-hl .wp-block-button__link {
	background: var(--blue);
	color: #fff;
	font-family: var(--head);
	font-size: 16px;
	font-weight: 600;
	padding: 14px 30px;
	border-radius: var(--r-pill);
	text-decoration: none;
	transition: background .18s, color .18s, transform .18s, box-shadow .18s;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--blue) 25%, transparent);
}
.nsemm-home .hero .btn-hl .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--blue) 85%, #000);
	color: var(--gold);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--blue) 35%, transparent);
}
.nsemm-home .hero .btn-hs .wp-block-button__link {
	background: var(--gold);
	color: var(--brown);
	font-family: var(--head);
	font-size: 16px;
	font-weight: 600;
	padding: 14px 30px;
	border-radius: var(--r-pill);
	text-decoration: none;
	transition: background .18s, transform .18s, box-shadow .18s;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--gold) 28%, transparent);
}
.nsemm-home .hero .btn-hs .wp-block-button__link:hover {
	background: var(--gold-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--gold) 40%, transparent);
}

/* The generic .btn-hl/.btn-hs anchor-pill styles in theme.css also match the
   core/button WRAPPER here (.wp-block-button.btn-hl / .btn-hs), painting a
   SECOND pill behind the real button - the inner .wp-block-button__link styled
   above - which read as a stray shape + a second hover zone. Neutralise the
   wrapper so only the inner pill shows. */
.nsemm-home .hero .btn-hl,
.nsemm-home .hero .btn-hs {
	background: transparent;
	padding: 0;
	box-shadow: none;
	border-radius: 0;
}
.nsemm-home .hero .btn-hl:hover,
.nsemm-home .hero .btn-hs:hover {
	background: transparent;
	transform: none;
	box-shadow: none;
}

/* Hero image (core/image, figure.hero-img). The figure becomes the perspective
   panel; the inner <img> fills it. When no image is set the panel still holds
   its shape via the aspect-ratio.
   LCP/CLS: aspect-ratio reserves layout space before the image loads so the
   browser can compute dimensions without waiting for the network response.
   The height is kept as a max-height fallback for very wide viewports; the
   aspect-ratio drives the slot on typical desktop (approx. 50% col width at
   ~600-700 px rendered). The inner <img> also carries aspect-ratio so CLS is
   suppressed even if WP does not emit width/height attributes on a given image. */
.nsemm-home .hero .hero-img {
	margin: 0;
	background: color-mix(in srgb, #000 10%, transparent);
	border-radius: 28px;
	aspect-ratio: 16 / 10;
	max-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: color-mix(in srgb, #000 30%, transparent);
	box-shadow: 0 16px 48px color-mix(in srgb, #000 12%, transparent);
	transform: perspective(800px) rotateY(-3deg);
	transition: transform .5s;
	overflow: hidden;
}
.nsemm-home .hero .hero-img:hover {
	transform: perspective(800px) rotateY(0deg);
}
.nsemm-home .hero .hero-img img {
	/* LCP: aspect-ratio on the <img> itself prevents CLS when WP omits
	   explicit width/height attributes. fetchpriority="high" is set via the
	   core/image block attribute (see index.js TEMPLATE); loading="eager" is
	   likewise seeded there. The browser uses these to prioritise the fetch. */
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 28px;
}

/* ── RESPONSIVE - mirrors the wireframe at 900px ── */
@media (max-width: 900px) {
	.nsemm-home .hero {
		grid-template-columns: 1fr;
		padding: 36px 24px 80px;
	}
	.nsemm-home .hero .wp-block-heading {
		/* Keep shrinking with the viewport on phones (was a fixed 36px that stopped
		   scaling below 900px). Fluid down to ~26px on the smallest screens. */
		font-size: clamp(1.6rem, 3vw + 1rem, 2.25rem);
	}
	.nsemm-home .hero .hero-img {
		display: none;
	}
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
	.nsemm-home .hero .hero-img {
		transition: none;
	}
}