/*
 * Full-bleed section, same header pattern (heading left, fixed-width intro
 * column right) as linking-cards-section's own "Atom / Section header"
 * layout - reused verbatim here rather than re-derived, since it's the same
 * Figma molecule. Defaults to white; editable via the block's own
 * "Background color" panel (supports.color.background in block.json).
 *
 * Heading color (#002547) and body/tertiary text colors (#3f4a5a, #5d6979)
 * are the design's text-primary/text-secondary/text-tertiary tones - not
 * yet part of theme.json's palette, same one-off-hex situation as every
 * other block in this plugin that uses them (see square-card/style.css).
 */
.wp-block-andrei-saguna-people-section {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--12);
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--base-white);
}

/*
 * This block's editor.js wraps a live wp.serverSideRender preview (there's
 * no InnerBlocks content to hand-build a preview from) inside its own
 * useBlockProps() div, and WordPress auto-derives THAT div's className from
 * the block's own name - the exact same class render.php's own
 * get_block_wrapper_attributes() output already carries. The editor canvas
 * is therefore the only place this class ever renders twice, nested inside
 * itself (outer copy from useBlockProps(), inner copy from the
 * server-rendered HTML dropped inside it) - the front end only ever
 * renders it once. Applying the rule above's "width: 100vw; margin: calc(50%
 * - 50vw)" to BOTH nested copies compounds the offset instead of
 * cancelling out (the inner copy centers itself against the outer copy's
 * already-shifted position, not the real viewport), so the inner copy
 * specifically needs it turned back off.
 *
 * This targets the INNER copy directly (plain descendant selector, not a
 * ":not()" guard on the outer one) so the outer copy keeps matching ONLY
 * the plain single-class rule above - at the exact same specificity every
 * other full-bleed section block in this plugin uses for the identical
 * "width: 100vw" trick. That match matters: the editor caps a dynamic
 * block's own attempt at full width to keep every section's preview a
 * consistent, readable size (visibly evident by comparing this block to
 * cta-section/linking-cards-section's own editor look) - a version of this
 * fix that (accidentally, the first time) made the outer copy's own
 * selector MORE specific than a plain class beat that cap outright,
 * leaving this one section rendering edge-to-edge in the editor while
 * every other section stayed at the normal capped preview width.
 */
.wp-block-andrei-saguna-people-section .wp-block-andrei-saguna-people-section {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.wp-block-andrei-saguna-people-section__header {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: var(--wp--preset--spacing--4);
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

h2.wp-block-andrei-saguna-people-section__heading {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-1);
	line-height: 1.1;
	color: #002547;
}

.wp-block-andrei-saguna-people-section__intro {
	flex: 0 0 424px;
	width: 424px;
}

.wp-block-andrei-saguna-people-section__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-base);
	line-height: 1.5;
	color: #3f4a5a;
}

/*
 * "--people-section-columns" is set inline by render.php from the block's
 * "columns" attribute (2/3/4, an Inspector control - see editor.js) so the
 * desktop column count is author-configurable per instance, exactly as
 * requested: same block, but 4 columns for a big alumni wall and 3 (or 2)
 * for a smaller governing-body list. Below 1024px that choice is
 * deliberately overridden back to a fixed 2, and below 768px to a fixed 1 -
 * a photo grid narrower than that stops being legible regardless of what
 * was picked for desktop.
 */
.wp-block-andrei-saguna-people-section__grid {
	display: grid;
	grid-template-columns: repeat(var(--people-section-columns, 4), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.wp-block-andrei-saguna-people-section__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
}

.wp-block-andrei-saguna-people-section__portrait {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface-subtle);
}

.wp-block-andrei-saguna-people-section__portrait-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Monogram fallback for a person with no photo yet - a blank/broken image
   would read as an error, an empty initial doesn't (see the "Person card"
   component's own docs in Figma). */
.wp-block-andrei-saguna-people-section__portrait-monogram {
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-3);
	color: var(--wp--preset--color--neutral-400);
	text-transform: uppercase;
}

.wp-block-andrei-saguna-people-section__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
	padding: var(--wp--preset--spacing--2);
}

.wp-block-andrei-saguna-people-section__tag {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--label-tag);
	font-weight: 400;
	letter-spacing: 0.96px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-500);
}

.wp-block-andrei-saguna-people-section__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-base);
	line-height: 1.5;
	color: #002547;
}

.wp-block-andrei-saguna-people-section__position {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: 1.4;
	letter-spacing: 0.28px;
	color: #5d6979;
}

/*
 * Same centered "content column" container as __header/__grid above, so the
 * button lines up with them instead of sitting flush against the section's
 * own edge - without this, the outer section's own flex layout placed the
 * button relative to the FULL full-bleed width, not the same inset column
 * everything else in this section sits in.
 *
 * Figma "Text and Action" (node 1268:52454): the optional bottom text is
 * "justify-content: space-between" from the button - by request, only when
 * that text is actually set ("has-text"); with no text the row keeps its
 * original "justify-content: flex-start" (button alone, on the left).
 * "align-items: center" matches this row's own Figma spec - unlike
 * program-filter-section's equivalent row, which uses "items-start".
 */
.wp-block-andrei-saguna-people-section__cta-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--6);
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.wp-block-andrei-saguna-people-section__cta-row.has-text {
	justify-content: space-between;
}

/* Same fixed 424px column the header's own intro text uses (__intro above) - the Figma source reuses that exact width here too. */
.wp-block-andrei-saguna-people-section__bottom-text {
	flex: 0 0 424px;
	width: 424px;
}

/* Bottom text next to the button: Body/Small (14px/1.4/0.28px), smaller than the header intro (__text, Body/Base). */
.wp-block-andrei-saguna-people-section__bottom-text-copy {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: 1.4;
	letter-spacing: 0.28px;
	color: #3f4a5a;
}

/*
 * Plain outline button, hand-styled rather than reusing a core/button style
 * variation - this section's CTA is a fixed text+URL pair (an "attribute",
 * not InnerBlocks), same tradeoff steps-section already made for its own
 * CTA button (see PROJECT-STATUS.md).
 */
.wp-block-andrei-saguna-people-section__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	border: 1.5px solid #002547;
	border-radius: var(--wp--custom--radius--md);
	background-color: transparent;
	color: #002547;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--ui-interactive);
	font-weight: 500;
	letter-spacing: 0.56px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-andrei-saguna-people-section__cta:hover {
	background-color: #002547;
	color: var(--wp--preset--color--base-white);
}

@media (max-width: 1024px) {
	.wp-block-andrei-saguna-people-section__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.wp-block-andrei-saguna-people-section__header {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--4);
	}

	.wp-block-andrei-saguna-people-section__intro {
		flex: 1 1 100%;
		width: 100%;
	}

	.wp-block-andrei-saguna-people-section__grid {
		grid-template-columns: 1fr;
	}

	.wp-block-andrei-saguna-people-section__cta-row.has-text {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--4);
	}

	.wp-block-andrei-saguna-people-section__bottom-text {
		flex: 1 1 100%;
		width: 100%;
	}
}