/*
 * nsemm/feature-panel frontend + editor styles.
 *
 * The branded, structured section block: an optional eyebrow (small caps), an
 * optional Font Awesome icon, a heading, a body paragraph and a pill CTA button,
 * all real CORE blocks (core/paragraph, core/heading, core/buttons +
 * core/button) inside the locked .fp-panel wrapper. This stylesheet styles the
 * wrapper AND those core blocks so the panel matches the home-v6 brand cards
 * (the white-card-on-sandy .svc / .nsemm-prose-card look) without the editor
 * having to author the chrome.
 *
 * Every selector is namespaced under .nsemm-feature-panel so nothing leaks onto
 * WordPress body or template-part elements. Native WP supports (color, spacing,
 * typography, border) are enabled in block.json; these rules are the brand
 * defaults the editor overrides stay within.
 */
: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);
	--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, gutters). */
.nsemm-feature-panel {
	padding: 0 40px;
	max-width: 1320px;
	margin: 0 auto;
}

/* The panel. Card variant: white card sitting on the sandy ground, 16px radius,
   soft shadow (mirrors .svc / .nsemm-prose-card). */
.nsemm-feature-panel .fp-panel {
	border-radius: var(--r-card);
	padding: 32px 28px;
	display: flex;
	gap: 32px;
	align-items: center;
}
.nsemm-feature-panel .fp-card {
	background: var(--bg);
	border: 1px solid color-mix(in srgb, var(--midnight) 6%, transparent);
	box-shadow: 0 10px 36px color-mix(in srgb, var(--midnight) 8%, transparent);
}

/* Band variant: a full-width sandy band, no card chrome. */
.nsemm-feature-panel .fp-band {
	background: var(--sandy);
	border: 0;
	box-shadow: none;
	padding: 52px 36px;
}

/* The content column (icon + InnerBlocks well). When there is no image it just
   fills the panel. */
.nsemm-feature-panel .fp-main {
	flex: 1 1 auto;
	min-width: 0;
}

/* The InnerBlocks well. Reset core flow margins so the brand spacing below wins. */
.nsemm-feature-panel .fp-content {
	margin: 0;
}

/* Decorative Font Awesome icon chip. Gold glyph on a blue tile, matching the
   .svc-num chip energy but as a square icon badge. */
.nsemm-feature-panel .fp-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: var(--blue);
	color: var(--gold);
	margin: 0 0 20px;
}
.nsemm-feature-panel .fp-icon i {
	font-size: 22px;
	line-height: 1;
}

/* Eyebrow (core/paragraph .fp-eyebrow): Sora, uppercase, tracked small caps. */
.nsemm-feature-panel .fp-eyebrow {
	font-family: var(--head);
	font-size: 12px;
	font-weight: 700;
	color: var(--blue);
	text-transform: uppercase;
	letter-spacing: .14em;
	margin: 0 0 12px;
}

/* Heading (core/heading .fp-title -> h2.wp-block-heading). */
.nsemm-feature-panel .fp-title.wp-block-heading {
	font-family: var(--head);
	font-size: 24px;
	font-weight: 700;
	color: var(--blue);
	line-height: 1.25;
	margin: 0 0 12px;
}

/* Body copy (core/paragraph .fp-body). Kept at >=0.82 opacity so it stays a
   solid, readable midnight (AAA on white / on sandy), never washed out. */
.nsemm-feature-panel .fp-body {
	font-size: 15px;
	color: var(--midnight);
	opacity: .86;
	line-height: 1.6;
	margin: 0 0 20px;
	max-width: 56ch;
}

/* CTA row (core/buttons .fp-cta) + the pill (core/button .fp-btn). The pill is
   the brand default: knowledge-gold bg + university-blue text, hover
   foundational-brown bg + white text. */
.nsemm-feature-panel .fp-cta.wp-block-buttons {
	display: flex;
	gap: 12px;
	margin: 0;
	flex-wrap: wrap;
}
.nsemm-feature-panel .fp-cta .wp-block-button {
	margin: 0;
}
/* A lone CTA fills the card width; a CTA row with two or more buttons keeps them
   as inline auto-width pills side by side, never full-width stacked. */
.nsemm-feature-panel .fp-cta .wp-block-button:only-child,
.nsemm-feature-panel .fp-cta .wp-block-button:only-child .wp-block-button__link {
	width: 100%;
}
.nsemm-feature-panel .fp-btn .wp-block-button__link {
	/* A proper pill: lay the link out as an inline-flex box so the label centres
	   and never collapses to a narrow column that wraps the text into a tall
	   block. white-space:nowrap keeps multi-word labels ("Explore Careers
	   Workshops") on one line; width:100% + box-sizing makes every button in a
	   card row the same width regardless of label length. The border-radius is
	   restated here (not only on a grid-scoped rule) so the pill shape applies to
	   EVERY feature-panel button, sidestepping any grid wrapper class mismatch and
	   any WP-generated .wp-block-button__link default that was flattening it. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	white-space: nowrap;
	text-align: center;
	background: var(--gold);
	color: var(--blue);
	font-family: var(--head);
	font-size: 15px;
	font-weight: 700;
	padding: 12px 26px;
	border: 0;
	border-radius: var(--r-pill);
	text-decoration: none;
	transition: background .18s, color .18s, transform .18s, box-shadow .18s;
	box-shadow: 0 2px 12px color-mix(in srgb, var(--gold) 22%, transparent);
}
.nsemm-feature-panel .fp-btn .wp-block-button__link:hover {
	background: var(--brown);
	color: var(--bg);
	transform: translateY(-2px);
	box-shadow: 0 6px 24px color-mix(in srgb, var(--brown) 30%, transparent);
}

/* Optional image column (figure.fp-img). Holds its shape even with no image. */
.nsemm-feature-panel .fp-img {
	flex: 0 0 42%;
	margin: 0;
	border-radius: var(--r-card);
	overflow: hidden;
	background: color-mix(in srgb, var(--midnight) 6%, transparent);
	min-height: 260px;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nsemm-feature-panel .fp-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Image position: left puts the figure first (DOM already orders it first), so
   the modifier only needs to confirm the row direction stays as authored. */
.nsemm-feature-panel .fp-img-left,
.nsemm-feature-panel .fp-img-right {
	flex-direction: row;
}

/*
 * Multi-card layout (e.g. three donation tiers side by side).
 *
 * Opt-in: wrap two-or-more nsemm/feature-panel blocks in a core/group and add
 * the class `nsemm-fp-grid` (three across) on that group; `nsemm-fp-grid-2` and
 * `nsemm-fp-grid-4` are also provided. The grid owns the page container (~90vw,
 * centred), so each child panel drops its own page padding/max-width and becomes
 * a flush grid cell. Each card keeps its white-on-sandy chrome, so three tiers
 * read as three clean, equally weighted cards with strong contrast.
 */
.nsemm-fp-grid,
.nsemm-fp-grid-2,
.nsemm-fp-grid-3,
.nsemm-fp-grid-4 {
	display: grid;
	gap: 28px;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 40px;
	align-items: stretch;
}

/* Full-bleed breakout, !important because WP core's global-styles inline CSS
   (.has-global-padding :where(...) > .alignfull) zeroes alignfull margins at
   equal specificity and prints after this stylesheet. */
.nsemm-fp-grid.alignfull,
.nsemm-fp-grid-2.alignfull,
.nsemm-fp-grid-3.alignfull,
.nsemm-fp-grid-4.alignfull {
	box-sizing: border-box;
	max-width: none;
	width: min(92vw, 1100px);
	margin-left: 0;
	margin-right: 0;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.nsemm-fp-grid,
.nsemm-fp-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nsemm-fp-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nsemm-fp-grid-4 {
	/* Auto-fit by available width: the viewport media queries below do not see
	   the container, so a fixed repeat(4) overflowed when this grid sits inside
	   the 820px content card. This gives a tidy 2x2 in a narrow card and 4 across
	   when full-width, with no clipped card. */
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* A panel that is a grid cell: drop its own page container and let the cell
   size it; the card stretches to fill the row height so the tiles are even. */
.nsemm-fp-grid .nsemm-feature-panel,
.nsemm-fp-grid-2 .nsemm-feature-panel,
.nsemm-fp-grid-3 .nsemm-feature-panel,
.nsemm-fp-grid-4 .nsemm-feature-panel {
	padding: 0;
	max-width: none;
	margin: 0;
	/* The grid cell is a flex column so it GROWS to contain its .fp-panel.
	   The previous `height: 100%` pinned the cell to the (too-short) auto row
	   track, so a card whose content was taller than the track overflowed
	   downward and overlapped the next section's heading. */
	display: flex;
	flex-direction: column;
	/* A flex/grid item's default min-width is `auto` (its content's min-content
	   size), which wins over the track's own minmax(0, 1fr) minimum. A card
	   with several list items (e.g. the Careers Workshops tile) could still be
	   wider than its column and bleed past the viewport edge on mobile even
	   after the grid track fix below. min-width: 0 lets the cell actually
	   shrink to the track. */
	min-width: 0;
}
.nsemm-fp-grid .nsemm-feature-panel .fp-panel,
.nsemm-fp-grid-2 .nsemm-feature-panel .fp-panel,
.nsemm-fp-grid-3 .nsemm-feature-panel .fp-panel,
.nsemm-fp-grid-4 .nsemm-feature-panel .fp-panel {
	/* Fill the cell (so tiles in a row are equal height) but never force a
	   fixed height that the content can overflow. */
	flex: 1 1 auto;
	min-height: 0;
	/* Stack the content vertically inside each tile (icon, eyebrow, title,
	   body, CTA) rather than the side-by-side row used by a lone panel. */
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}
/* Push a tile's CTA to the bottom so buttons line up across the row. The pill
   shape, full-width sizing and nowrap label are now on the base
   .nsemm-feature-panel .fp-btn .wp-block-button__link rule above (so they apply
   to every feature-panel button regardless of grid wrapper class), so only the
   bottom-alignment is grid-specific here. */
.nsemm-fp-grid .nsemm-feature-panel .fp-cta.wp-block-buttons,
.nsemm-fp-grid-2 .nsemm-feature-panel .fp-cta.wp-block-buttons,
.nsemm-fp-grid-3 .nsemm-feature-panel .fp-cta.wp-block-buttons,
.nsemm-fp-grid-4 .nsemm-feature-panel .fp-cta.wp-block-buttons {
	margin-top: auto;
}
/* Fix (2026-07-29): margin-top:auto above only works if fp-cta's DIRECT
   parent is a flex container. The DOM is .fp-main (flex column) > .fp-content
   (plain block, NOT flex) > heading + body + .fp-cta - so the auto margin had
   no flex context to push against and buttons stayed scattered at whatever
   height the body copy ended, instead of pinned to the card foot. Making
   fp-content itself a flex column that fills the remaining height inside
   fp-main gives fp-cta's margin-top:auto something to act on, so the CTA
   always sits flush with the bottom of the shortest-to-tallest card in the
   row regardless of body-copy length. */
.nsemm-fp-grid .nsemm-feature-panel .fp-content,
.nsemm-fp-grid-2 .nsemm-feature-panel .fp-content,
.nsemm-fp-grid-3 .nsemm-feature-panel .fp-content,
.nsemm-fp-grid-4 .nsemm-feature-panel .fp-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.nsemm-fp-grid .nsemm-feature-panel .fp-main,
.nsemm-fp-grid-2 .nsemm-feature-panel .fp-main,
.nsemm-fp-grid-3 .nsemm-feature-panel .fp-main,
.nsemm-fp-grid-4 .nsemm-feature-panel .fp-main {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Feature panels dropped straight into a core/columns row as equal cards
   (e.g. the "Leadership in Action" 4-up + the trustee bios on /leadership/).
   The column already stretches to the row height; make the panel fill it so
   the white cards line up, tighten the padding for the narrower cell, and -
   crucially - stop the title breaking MID-WORD (a global word-break:break-word
   was snapping "Collabora|tive", "Sustainab|le"). overflow-wrap:normal +
   word-break:normal wrap only at spaces/hyphens; a slightly smaller title
   keeps long words inside the narrow card. */
.wp-block-columns > .wp-block-column > .nsemm-feature-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.wp-block-columns > .wp-block-column > .nsemm-feature-panel > .fp-panel {
	flex: 1 1 auto;
	padding: 30px 22px;
}
.wp-block-columns > .wp-block-column > .nsemm-feature-panel .fp-title.wp-block-heading {
	font-size: 20px;
	line-height: 1.3;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

/* Bug fix 2026-08-02: cards in a plain core/columns row (e.g. "Ways to Get
   Involved" on /get-involved/, the 4-up on /students/) have uneven body-copy
   length, so the CTA button was landing at a different height in each card
   even though the cards themselves were already equal height (above). Mirror
   the .nsemm-fp-grid fix: make .fp-main a flex column filling the card and
   push the CTA row to the bottom with margin-top:auto, so every button in the
   row sits on the same baseline regardless of text length. */
.wp-block-columns > .wp-block-column > .nsemm-feature-panel .fp-main {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.wp-block-columns > .wp-block-column > .nsemm-feature-panel .fp-cta.wp-block-buttons {
	margin-top: auto;
}

/* Tablet: collapse 3/4-up to two columns before stacking. */
@media (max-width: 1100px) {
	.nsemm-fp-grid,
	.nsemm-fp-grid-3,
	.nsemm-fp-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Scroll-reveal initial state (theme global JS adds .visible). Scoped here.
   Starts at a readable 0.35 (not near-invisible) and lifts only 18px, so a
   mid-scroll card never reads as a faint, shadow-bleeding overlap of the row
   below it - it just settles gently into place. */
.nsemm-feature-panel .reveal {
	opacity: 0.35;
	transform: translateY(18px);
	transition: opacity .55s ease, transform .55s ease;
}
.nsemm-feature-panel .reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Mobile: stack the image under the content and tighten padding. */
@media (max-width: 900px) {
	.nsemm-feature-panel {
		padding: 0 20px;
	}
	/* Stack the multi-card grid into a single column on mobile. */
	.nsemm-fp-grid,
	.nsemm-fp-grid-2,
	.nsemm-fp-grid-3,
	.nsemm-fp-grid-4 {
		grid-template-columns: minmax(0, 1fr);
		padding: 0 20px;
	}
	.nsemm-feature-panel .fp-panel,
	.nsemm-feature-panel .fp-img-left,
	.nsemm-feature-panel .fp-img-right {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}
	.nsemm-feature-panel .fp-band {
		padding: 36px 22px;
	}
	.nsemm-feature-panel .fp-title.wp-block-heading {
		font-size: 22px;
	}
	.nsemm-feature-panel .fp-img {
		flex-basis: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nsemm-feature-panel .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.nsemm-feature-panel .fp-btn .wp-block-button__link {
		transition: none;
	}
}

/* Editor-only: force visible, since the reveal animation JS does not run in the block editor canvas. */
.editor-styles-wrapper .reveal { opacity: 1 !important; transform: none !important; }

/* Round 3 (2026-07-29): "Our Skills Workshops" page (post 650) synthesis of
   mockup Option A (real vector icons in the existing chip, no new component)
   and Option B (colour-coded discipline tracks). The five session cards keep
   the site's real .fp-icon chip and Font Awesome glyphs exactly as designed
   (Option A) rather than the bespoke torn-ticket "workshop pass" redesign
   Option B proposed. What carries over from B is the track idea only: a
   4px accent on the left edge of each stacked row plus a small text tag,
   so a school skimming the page can see the shape of the offer at a glance
   -- teal for digital & media craft, gold for data & security -- without
   reshaping the card itself. Scoped to this page only (not a new sitewide
   pattern) since only this page's five sessions group into two disciplines. */
body.page-id-650 .nsemm-feature-panel .fp-panel.track-media {
	border-left: 4px solid var(--teal);
}
body.page-id-650 .nsemm-feature-panel .fp-panel.track-data {
	border-left: 4px solid var(--gold);
}
body.page-id-650 .nsemm-feature-panel .track-tag {
	font-family: var(--head);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--r-pill);
	margin: 0 0 12px;
}
body.page-id-650 .nsemm-feature-panel .track-tag-media {
	color: #00a583;
	background: color-mix(in srgb, var(--teal) 16%, transparent);
}
body.page-id-650 .nsemm-feature-panel .track-tag-data {
	color: #8a6d00;
	background: color-mix(in srgb, var(--gold) 20%, transparent);
}
/* Legend line above the session cards, matching the same two track colours. */
body.page-id-650 .track-legend {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 24px;
	font-size: 13px;
	color: var(--midnight);
	opacity: .75;
	margin: -8px 0 28px;
}
body.page-id-650 .track-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	margin: 0 7px 0 0;
	vertical-align: middle;
}
body.page-id-650 .track-dot-media {
	background: var(--teal);
}
body.page-id-650 .track-dot-data {
	background: var(--gold);
}