/* PLACEHOLDER: OQ10 pending — interaction logic deferred, static shell only.
   "Meet the health junkies" people filter + person-detail modal.
   Figma: section 3449:57266, modal 3232:33556 (file 56865ZdhldocXtLwtfkUFP).
   All values reference theme.json tokens (--wp--preset--* / --wp--custom--*); no hardcoded design values.
   Loads on both frontend and editor (block.json "style") so the ServerSideRender preview is faithful. */

.bpd-people-filter {
	background-color: var(--wp--preset--color--surface-canvas);
	padding-block: var(--wp--preset--spacing--2500);
	padding-inline: var(--wp--preset--spacing--gutter);
}

.bpd-people-filter__inner {
	max-width: var(--wp--style--global--content-size, 1248px);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--800);
}

.bpd-people-filter__intro {
	text-align: center;
	max-width: 896px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--300);
}

.bpd-people-filter__heading,
.bpd-people-filter__lede,
.bpd-people-filter__name,
.bpd-people-filter__role,
.bpd-people-filter__modal-name,
.bpd-people-filter__modal-role,
.bpd-people-filter__modal-copy p,
.bpd-people-filter__modal-link,
.bpd-people-filter__fun-fact-text {
	margin: 0;
}

/* The preset class carries the size but not the leading, so the name inherited body line-height
   (1.48) instead of the heading-sm 1.32 the design calls for at this size. */
.bpd-people-filter__name {
	line-height: var(--wp--custom--line-height--heading-sm);
}

/* ---- Filter controls (static UI, no filtering wired) ---- */
.bpd-people-filter__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--wp--preset--spacing--800);
}

.bpd-people-filter__az {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    min-width: 0;
    gap: var(--wp--preset--spacing--300);
}

.bpd-people-filter__az-link {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    border-bottom: var(--wp--custom--border--sm) solid transparent;
    padding: 0;
    margin: 0;
    color: var(--wp--preset--color--text-default);
    text-decoration: none;
    font-family: var(--wp--preset--font-family--sans);
    font-size: var(--wp--preset--font-size--body-lg);
    line-height: var(--wp--custom--line-height--body-lg);
    cursor: pointer;
}

.bpd-people-filter__az-link.is-active {
    border-bottom-color: var(--wp--preset--color--text-default);
}

.bpd-people-filter__az-link:focus-visible,
.bpd-people-filter__select:focus-visible {
    outline: var(--wp--custom--border--md) solid var(--wp--preset--color--green-700);
    outline-offset: 2px;
}

.bpd-people-filter__specialty {
    width: 272px;
    max-width: 100%;
}

.bpd-people-filter__select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--wp--preset--color--surface-canvas);
    color: var(--wp--preset--color--text-default);
    border: var(--wp--custom--border--sm) solid var(--wp--preset--color--blue-300);
    border-radius: var(--wp--custom--radius--lg);
    padding: 0 var(--wp--preset--spacing--300);
    padding-inline-end: var(--wp--preset--spacing--1100);
    font-family: var(--wp--preset--font-family--sans);
    font-size: var(--wp--preset--font-size--body-sm);
    line-height: var(--wp--custom--line-height--body-sm);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.19 10.12c-.25-.26-.25-.68 0-.93.24-.24.6-.25.86-.06l.06.06 4.87 4.96 4.91-4.96c.24-.24.6-.25.86-.06l.07.06c.23.24.25.6.06.87l-.06.07-5.37 5.43c-.23.24-.6.25-.85.05l-.07-.06L6.19 10.12z' fill='%2307284c'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--wp--preset--spacing--300) center;
    background-size: 24px 24px;
}

/* ---- Employee grid ---- */
/* grid-auto-rows generates 3 row tracks per visual card row (photo / name / role), cycling for
   every group of 4 items. Each card spans all 3 via subgrid below, so — e.g. — a two-line role on
   one card grows the role track for the whole row instead of leaving the other three cards in that
   row with a ragged gap underneath a shorter one-line role. Row-gap here is the fallback used at
   the boundary BETWEEN card rows (the gap between role-row-N and photo-row-N+1 isn't fully owned by
   either row's subgrid, so it falls back to this outer value); the tighter internal photo/name/role
   spacing is set on the subgrid card below, which does fully own those gutters. */
.bpd-people-filter__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: auto;
	column-gap: var(--wp--preset--spacing--400);
	row-gap: var(--wp--preset--spacing--400);
}

/* Subgrid: the <li> spans the 3 row tracks (photo/name/role) the grid above generates per card row
   and maps its own rows onto them 1:1, so this card's photo/name/role heights are shared with the
   rest of its row instead of being sized independently. */
.bpd-people-filter__card {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	row-gap: var(--wp--preset--spacing--200);
}

/* The card is a bare <button popovertarget> opening that person's own modal, so it needs the UA
   button chrome stripped back to what the <li> used to look like. The layout rules live on the
   trigger rather than the <li> because the <li> now also holds the popover as a second child.
   It re-subgrids a second time (spanning the same 3 tracks .bpd-people-filter__card already
   mapped) rather than going display:contents, because contents would drop the button's own box —
   and with it the :focus-visible outline below and the seamless full-card click target. */
.bpd-people-filter__card-trigger {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	row-gap: var(--wp--preset--spacing--200);
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.bpd-people-filter__card-trigger:focus-visible {
	outline: var(--wp--custom--border--md) solid var(--wp--preset--color--text-active);
	outline-offset: var(--wp--preset--spacing--100);
}

.bpd-people-filter__photo {
	display: block;
	border-radius: var(--wp--custom--radius--xlg);
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.bpd-people-filter__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bpd-people-filter__name,
.bpd-people-filter__role {
	display: block;
}

.bpd-people-filter__role {
	color: var(--wp--preset--color--text-default);
}

.bpd-people-filter__more {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--400);
}

/* ---- Load-more stagger fade-in ---- */
/* Appended "See more" batches fade in with an overlapping stagger: each item fades over 300ms,
   but the next item starts at 150ms in (0s, 150ms, 300ms, …), so fades overlap instead of
   queuing end-to-end — a 12-card batch plays in ~1.95s, not 3.6s. assets/js/load-more.js tags
   every top-level item it appends with the .bpd-load-more-item class and a per-batch
   --bpd-load-more-index custom property (restarted at 0 per click, so later batches don't
   inherit cumulative delays). Generic class name so a second load-more consumer can reuse these
   rules — extract to a shared sheet when that happens. */
.bpd-load-more-item {
	animation: bpd-load-more-fade-in 300ms both;
	animation-delay: calc( var( --bpd-load-more-index ) * 150ms );
}

@keyframes bpd-load-more-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Reduced-motion: skip the animation entirely (cards appear instantly, no fill-mode flash). */
@media ( prefers-reduced-motion: reduce ) {
	.bpd-load-more-item {
		animation: none;
	}
}

/* ---- Empty filter state ---- */
/* Shown when a letter/specialty filter matches nobody: centered, with the spacing-2500 token
   (100px) of vertical room above and below so it reads as a deliberate empty state. Created
   client-side by view.js when an AJAX batch comes back with zero cards. */
.bpd-people-filter__empty {
	margin-block: var(--wp--preset--spacing--2500);
	text-align: center;
}

/* ---- Person-detail modal ---- */
/* One popover="auto" per card (see bpd_render_person_card()). The browser handles show/hide,
   top-layer stacking and the backdrop, so there is no wrapper element and no [hidden] rule here.
   The UA also gives every popover a border, padding and `inset: 0` with `margin: auto` — the
   border/padding are reset below, the centering is kept.

   The :not(:popover-open) rule is load-bearing, not redundant. The UA's own
   `[popover]:not(:popover-open) { display: none }` is a UA-origin rule, so the author `display:
   flex` below outranks it and every closed modal would stay in the layout — invisible behind the
   transition's opacity: 0, but still swallowing clicks meant for the cards underneath. Re-assert
   it at author level. */
.bpd-people-filter__modal {
	position: fixed;
	inset: 0;
	margin: auto;
	border: 0;
	padding: 0;
	background-color: var(--wp--preset--color--surface-canvas);
	border-radius: var(--wp--custom--radius--xlg);
	width: 100%;
	max-width: 760px;
	max-height: calc(100dvh - (2 * var(--wp--preset--spacing--1400)));
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.bpd-people-filter__modal:not(:popover-open) {
	display: none;
}

/* ::backdrop only began inheriting from its originating element in 2024 (Chrome 122 / Safari 17.4 /
   Firefox 125), which is what lets this var() resolve. That is the same browser cohort that shipped
   the popover attribute in the first place, so there is no real gap — and a browser that somehow
   split the two just gets an undimmed backdrop, not a broken modal. */
/* The blur is a token (theme.json custom.blur.backdrop) rather than a literal length, same rule as
   every other design value here. -webkit- prefix included: Safari only dropped it in 18, and the
   popover cohort this modal targets starts at 17.4. A browser with neither still gets the
   surface-overlay scrim, just unblurred. */
.bpd-people-filter__modal::backdrop {
	background-color: var(--wp--preset--color--surface-overlay);
	-webkit-backdrop-filter: blur(var(--wp--custom--blur--backdrop));
	backdrop-filter: blur(var(--wp--custom--blur--backdrop));
}

.bpd-people-filter__modal-close-row {
	display: flex;
	justify-content: flex-end;
	padding: var(--wp--preset--spacing--1000) var(--wp--preset--spacing--1000) 0;
}

.bpd-people-filter__close {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	width: 32px;
	height: 32px;
	color: var(--wp--preset--color--text-default);
}

/* Close icon — geometry from assets/icons/Midnight/SVG/Close.svg, drawn via CSS mask so it inherits
   the button color in every state (same technique as the Right Arrow in buttons.css). */
.bpd-people-filter__close-icon {
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M9.30957 9.31006L22.6096 22.6101M9.30957 22.6101L22.6096 9.31006' stroke='%23000' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M9.30957 9.31006L22.6096 22.6101M9.30957 22.6101L22.6096 9.31006' stroke='%23000' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.bpd-people-filter__modal-body {
	display: flex;
	gap: var(--wp--preset--spacing--1000);
	align-items: flex-start;
	padding: 0 var(--wp--preset--spacing--1000) var(--wp--preset--spacing--1000);
}

.bpd-people-filter__modal-aside {
	flex: 0 0 300px;
	max-width: 300px;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--200);
}

.bpd-people-filter__modal-photo {
	width: 300px;
	max-width: 100%;
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}

.bpd-people-filter__modal-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bpd-people-filter__modal-main {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1000);
}

.bpd-people-filter__modal-bio {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--600);
}

.bpd-people-filter__modal-copy {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--400);
}

.bpd-people-filter__modal-link a {
	color: var(--wp--preset--color--text-default);
}

.bpd-people-filter__modal-link {
	display: inline-block;
	align-self: flex-start;
}

.bpd-people-filter__fun-fact {
	display: flex;
	gap: var(--wp--preset--spacing--400);
	align-items: flex-start;
	padding: var(--wp--preset--spacing--300) var(--wp--preset--spacing--400);
	border-radius: var(--wp--custom--radius--lg);
}

.bpd-people-filter__fun-fact-text {
	flex: 1 1 0;
	min-width: 0;
	line-height: 1.3;
}

.bpd-people-filter__fun-fact-img {
	/* Thumbnail + optional pet-name caption stacked; only rendered when bpd_pet_image_id is set. */
	flex: 0 0 76px;
	width: 76px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--100);
	text-align: center;
}

.bpd-people-filter__fun-fact-img img {
	display: block;
	width: 76px;
	height: 76px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
}

.bpd-people-filter__fun-fact-pet-name {
	margin: 0;
	line-height: 1.3;
}

/* Responsive: modal collapses to the single-column mobile variant (Figma's 375px design);
   the grid is one thumbnail per row across the mobile breakpoint (2026-08-13 — was 2-up
   between 481px and 782px, changed to match the 375px Figma layout site-wide under 782px). */
@media (max-width: 782px) {
    .bpd-people-filter__controls {
        grid-template-columns: 1fr;
        row-gap: var(--wp--preset--spacing--600);
    }

    .bpd-people-filter__specialty {
        width: 100%;
    }
	.bpd-people-filter__grid {
		grid-template-columns: 1fr;
	}

	.bpd-people-filter__modal-body {
		flex-direction: column;
	}

	.bpd-people-filter__modal-aside {
		flex-basis: auto;
		max-width: none;
		align-self: stretch;
	}

	.bpd-people-filter__modal-photo {
		width: 100%;
	}

	/* Figma's 375px modal frame (4788:31777) tightens the shell: space/600 padding instead of
	   space/1000, and a space/500 gap between the portrait block and the bio block. */
	.bpd-people-filter__modal-close-row {
		padding: var(--wp--preset--spacing--600) var(--wp--preset--spacing--600) 0;
	}

	.bpd-people-filter__modal-body {
		gap: var(--wp--preset--spacing--500);
		padding: 0 var(--wp--preset--spacing--600) var(--wp--preset--spacing--600);
	}

	.bpd-people-filter__modal {
		max-height: calc(100dvh - (2 * var(--wp--preset--spacing--600)));
	}
}

/* ---- Modal open transition ---- */
/* CSS-only per CLAUDE.md: a fade + slight rise as the popover enters the top layer. `display` and
   `overlay` need transition-behavior: allow-discrete for the entry half to run at all, and
   @starting-style supplies the "before open" values. The final state is the plain rule, so a
   browser without @starting-style simply shows the modal instantly — never stuck at opacity: 0. */
@media (prefers-reduced-motion: no-preference) {
	.bpd-people-filter__modal {
		opacity: 1;
		translate: 0 0;
		transition:
			opacity var(--wp--custom--motion--duration-sm) var(--wp--custom--motion--ease),
			translate var(--wp--custom--motion--duration-sm) var(--wp--custom--motion--ease),
			display var(--wp--custom--motion--duration-sm) allow-discrete,
			overlay var(--wp--custom--motion--duration-sm) allow-discrete;
	}

	.bpd-people-filter__modal:not(:popover-open) {
		opacity: 0;
		translate: 0 var(--wp--preset--spacing--400);
	}

	@starting-style {
		.bpd-people-filter__modal:popover-open {
			opacity: 0;
			translate: 0 var(--wp--preset--spacing--400);
		}
	}

	.bpd-people-filter__modal::backdrop {
		opacity: 1;
		transition:
			opacity var(--wp--custom--motion--duration-sm) var(--wp--custom--motion--ease),
			display var(--wp--custom--motion--duration-sm) allow-discrete,
			overlay var(--wp--custom--motion--duration-sm) allow-discrete;
	}

	.bpd-people-filter__modal:not(:popover-open)::backdrop {
		opacity: 0;
	}

	@starting-style {
		.bpd-people-filter__modal:popover-open::backdrop {
			opacity: 0;
		}
	}
}