/*
 * 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.
 *
 * Per-block CSS loads independently, so the local-var map that ties our names to
 * the WP presets lives at the top (Brand-Sync recolours everything through the
 * presets). No brand hex is hard-coded; any hover shade derives from color-mix
 * on var(--gold). Shadows and alpha use color-mix, never rgba hex.
 *
 * 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;
}
.nsemm-fp-grid,
.nsemm-fp-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}
.nsemm-fp-grid-2 {
	grid-template-columns: repeat(2, 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;
}
.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;
}
.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;
}

/* 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, 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: 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 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; }