/* ==========================================================================
   Learning Hub Hero (neilkelly/learning-hub-hero)
   Figma: Learning Center / Hero (1831:798)
   Token-driven. Wrapper: .wp-block-neilkelly-learning-hub-hero.nk-learning-hub-hero
   Full-bleed scrimmed image · headline · subtext · search field.
   ========================================================================== */
.wp-block-neilkelly-learning-hub-hero.nk-learning-hub-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--components--learning-hub--hero-min-height);
	/* Padding + min-height match nk-faq-hero. The top value clears the absolute
	   hero-overlay site header (announcement bar + nav row + the header's own
	   internal top pad) and then adds the Figma nav→heading gap of 64px, so the
	   heading can never sit under the floating nav. page-resources is in the
	   header's hero list, so the header here is transparent — see $is_hero_page in
	   site-header/render.php. */
	padding: calc(
			var(--wp--custom--components--site-header--announcement-height) +
			var(--wp--custom--layout--header--height) +
			var(--wp--preset--spacing--8) +
			var(--wp--preset--spacing--16)
		) var(--wp--preset--spacing--gutter) var(--wp--preset--spacing--19);
	/* Dark ground, matching nk-faq-hero: the background image sits at 30% opacity
	   (below), so it composites against THIS colour. A light ground here would
	   wash the image out and drop the white heading to ~3:1. */
	background: var(--wp--preset--color--surface-dark);
	font-family: var(--wp--preset--font-family--inter);
	overflow: hidden;
	box-sizing: border-box;
}

/* No block-gap seam between full-bleed sections (mirrors nk-faq-hero). */
.wp-block-neilkelly-learning-hub-hero {
	margin-block: 0;
}

.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__bg-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* Photo is knocked back into the dark ground rather than scrimmed alone —
	   same two-step treatment as nk-faq-hero (0.3 image + 45% black scrim). */
	opacity: 0.3;
}

.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__scrim {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--wp--preset--color--brand-black) 45%, transparent);
}

/* Left-aligned copy on a centred content column — the same change faq-hero's __content
   took, this block being its twin.
   The BOX stays centred: the section's align-items:center does that, so no auto margin is
   needed here (photo-gallery-hub-hero sets no align-items and does need one). Everything
   inside ranges left instead, so the H1, the subtext and the search pill all start on the
   same edge as the sections below.
   THE CAP IS WHAT ALIGNS IT, and here it is NEW rather than a replacement — faq-hero had a
   900px cap to swap out, this block had none, so the copy was previously centred across
   the section's whole content box. Left-aligning without a cap would have pinned it to the
   gutter at 72 while every section below sat at 312 on a 1920 viewport.
   content-width (1296) with the gutter padding on the section outside it resolves to
   exactly the box learning-hub-webinar__inner and its siblings use — that block's own
   comment records 1296 as the Figma content band (1440 frame, 72 gutters). Keep the cap
   here and the padding on the section; both on one box is the double-inset the hub
   sections' comments warn about.
   Heading, subtext and search keep their own narrower measures inside this column, so
   only their alignment changed, not their line length. */
.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--5);
	width: 100%;
	max-width: var(--wp--custom--layout--content-width);
	text-align: left;
}

.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__heading {
	margin: 0;
	max-width: var(--wp--custom--components--learning-hub--hero-heading-max-width);
	color: var(--wp--preset--color--brand-white);
	/* Size + case from the shared .nk-headline--content class (mapped in render.php). */
	font-weight: var(--wp--custom--font-weight--extrabold);
	/* Type set to match nk-faq-hero's H1. */
	line-height: var(--wp--custom--line-height--hero);
	letter-spacing: var(--wp--custom--letter-spacing--snug);
}

.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__subtext {
	margin: 0;
	max-width: var(--wp--custom--components--learning-hub--hero-subtext-max-width);
	color: var(--wp--preset--color--brand-white);
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--base);
}

/* Search field ---------------------------------------------------------- */
.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__search {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	width: 100%;
	max-width: var(--wp--custom--components--learning-hub--hero-search-max-width);
	margin-top: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--2) var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
	background: color-mix(in srgb, var(--wp--preset--color--brand-white) 18%, transparent);
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--full);
	box-sizing: border-box;
}

/* The input's own outline is suppressed (below), so the focus indicator lives on
   the pill. A 2px outline, not just a border-colour change — a 1px colour shift
   on a dark scrim is too weak to read as focus. */
.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__search:focus-within {
	border-color: var(--wp--preset--color--brand-white);
	outline: 2px solid var(--wp--preset--color--brand-white);
	outline-offset: 3px; /* 3px, matching nk-faq-hero's ring. */
}

.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__search-icon {
	display: flex;
	flex: 0 0 auto;
	color: var(--wp--preset--color--brand-white);
}

.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__search-input {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--brand-white);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
}

.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__search-input::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--brand-white) 70%, transparent);
	opacity: 1;
}

/* Clear (×) button — recolour the native icon white to sit on the dark search
   bar; the browser default renders it dark grey and all but disappears. Masked
   SVG so the fill is ours. Same treatment as nk-faq-hero. */
.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: 0.85em;
	height: 0.85em;
	margin-left: var(--wp--preset--spacing--2);
	cursor: pointer;
	background-color: var(--wp--preset--color--brand-white);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4 12 12 M12 4 4 12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4 12 12 M12 4 4 12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__search-input:focus {
	outline: none;
}

.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__search-btn {
	flex: 0 0 auto;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	/* Colors match .nk-faq-hub__woven-btn (black fill, white text), no border. */
	background: var(--wp--preset--color--brand-black);
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	color: var(--wp--preset--color--brand-white);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__search-btn:hover {
	background: var(--wp--preset--color--neutral-800);
}

.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__search-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-white);
	outline-offset: 2px;
}

/* Visually-hidden label */
.wp-block-neilkelly-learning-hub-hero .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Responsive ------------------------------------------------------------ */
/* Tablet inset, matching nk-faq-hero. */
@media (max-width: 1023px) {
	.wp-block-neilkelly-learning-hub-hero.nk-learning-hub-hero {
		padding-inline: var(--wp--preset--spacing--12);
	}
}

@media (max-width: 767px) {
	.wp-block-neilkelly-learning-hub-hero.nk-learning-hub-hero {
		/* faq-hero's mobile values, with ONE correction: the announcement bar is
		   display:none below 767px, so its height must come OUT of the clearance.
		   faq-hero (and events-hero / reviews-hero) still add it here, which strands
		   ~50px of dead space above their headings on mobile. */
		padding: calc(
				var(--wp--custom--layout--header--height) +
				var(--wp--preset--spacing--8)
			) var(--wp--preset--spacing--6) var(--wp--preset--spacing--14);
	}

	.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__heading {
		font-size: var(--wp--preset--font-size--xxl-sm);
	}

	.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__heading,
	.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__subtext {
		/* Long unbroken words (URLs, compounds) would otherwise overflow the
		   scrim at 320px. */
		overflow-wrap: break-word;
	}
}

/* Below 600px the pill can't hold input + button side by side without the
   button squeezing the field to a few characters, so the bar becomes a stacked
   panel: full-width field over a full-width submit. */
@media (max-width: 599px) {
	.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__search {
		flex-wrap: wrap;
		align-items: stretch;
		padding: var(--wp--preset--spacing--3);
		border-radius: var(--wp--custom--radius--lg);
	}

	.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__search-icon {
		align-items: center;
	}

	.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__search-input {
		flex: 1 1 auto;
		min-width: 0;
		padding-block: var(--wp--preset--spacing--2);
	}

	.wp-block-neilkelly-learning-hub-hero .nk-learning-hub-hero__search-btn {
		flex: 1 0 100%;
		margin-top: var(--wp--preset--spacing--2);
	}
}